YouTube JavaScript Coverflow in Adobe Edge Animate and Greensock

YouTube Coverflow

Update 18-08-2016 – the YouTube API that this demo was using has been deprecated and is no longer active. If you feel like downloading the source and fixing it up to use the new API then I’d be happy to link to your blog/site.

****************************************

After a LOT of requests for the source files for this Vine/blog post I have finally got around to creating a nicely commented Coverflow tutorial/demo in Adobe Edge Animate.

As always the functionality’s foundation is the ever rock solid Greensock GSAP (where Jack kindly features some of my work) and without which none of this would work very well at all.

YouTube Coverflow works like this:

  1. It loads a YouTube user’s feed (this can be edited either inside EA (Edge Animate) or as part of the query string like this http://gannon.tv/edge_demos/youtubecoverflow/?techcrunch or http://gannon.tv/edge_demos/youtubecoverflow/?topgear )
  2. If you put in a user that doesn’t exist (or has been suspended etc) it will alert you and direct you to the default user (declared inside EA).
  3. It then creates the ‘covers’ from symbol instances (and reflections if you want them) from EA’s library and populates them with the returned JSON data.
  4. The app responds to swipe gestures (although in the Vine I posted it was also responding to Leap Motion gestures but I haven’t included that functionality).
  5. You click/tap a cover and it launches the video in a new window.

There is so much more functionality I could have included but in the interests of simplicity I’ve kept the functionality down to a minimum – I think it’s pretty cool as it is 🙂

Ooh, whilst you’re here, if you like this then please do check out my templates on CodeCanyon. I’ve created three (so far) so if you or your boss or company want some exclusive templates at amazing prices then check them out.

1. 3D Video Cube – (this one is particularly awesome!)

3D Edge Animate Video Cube

2. Swiss Clock

HTML5 iOS Swiss Clock

3. Editable 3D Flip Business Card

Ediatble 3D Flip Business Card

</endSalesPitch> 😉

So please feel warmly invited to view the Coverflow demo and download the source files – don’t forget you can change the user content by adding the user on the end as a query string. And don’t forget to leave a message in the comments if you like it/use it/are friendly/like options separated by slashes.

View JavaScript Coverflow Demo

Download the JavaScript Coverflow Edge Animate source files

13 thoughts on “YouTube JavaScript Coverflow in Adobe Edge Animate and Greensock

    1. Hi EMG,

      Yes I don’t see why not – it would require a new parser to support Vimeo’s API and a spot of tinkering I’d imagine – but it’s a good idea 🙂

      Out of interest did you just buy it?

      1. I did. Just Curious Chris. Why would supporting Vimeo be a good idea? Is it not recognised as a major streaming services provider?

      2. My 3D Video Cube is designed to be a cool, aesthetically pleasing, smooth and, most importantly, functional way of displaying videos on a desktop or tablet.

        Support for Vimeo would be a good idea simply because it would allow you to display your Vimeo channel or user content along with YouTube videos and your own XML driven video content (which is what it currently does).

        Would you find it useful to be able to display Vimeo content?

  1. hey chris 🙂

    i like your coverflow a lot but if i download the source files the animate project is empty even when i open the index.html… can you help me please ?

    greets
    bernard

    1. Hi Bernard,

      I just downloaded the demo files myself and they opened fine for me, even in the file system (they should really be on an web server).

      I’m not sure what your issue might be – are you using an old version of EA? Or maybe it’s a Mac issue? (I use a PC although this shouldn’t make any difference). Maybe the ZIP got corrupt?

      I’ve had lots of emails about this demo and none have mentioned empty files. Not sure what else to suggest.

  2. Great effect using GreenSock and Adobe Edge Chris …

    Just an observation.. in Firefox the border edges are jaggy.. you can get rid of the jaggy border edge when the element is transformed by adding:

    .coverflowItem {
    /* makes jaggy border edges in Firefox smooth */
    outline: 1px solid transparent;
    }

    Really cool tutorial .. thanks for sharing 🙂

  3. very nice Chris, Greatful
    if you never mind, i need to learn, i am creating medical presentations with Adobe Edge Animate and i very tired with a lot of issues and problems, if you never mind.. i need learn against cost we can discuss about cost with together, i send to you the issue you send me the solve.. and we can agree on the payment method.. i am mohamed gomaa from Egypt… +20 111 802 10 60
    thank you so much..
    Best Regards.

  4. ok, i am using Edge to create html.. then create apps (target iOS or Android).
    i am creating the presentations (medical presentation) on Edge Animate… create per slide as Symbol.. okay… for instance: i have 10 slides.. i go to create 10 Symbols start: Slide_00, Slide_01, Slide_02…. elc. and put All these Slides(Symbols) on the (Stage) and create transitions between them every 500ms… Slides movement from left to right in the (play) and return right to left in the (playReverse).. okay… i am putting triggers every 500ms, these triggers execute the following:
    sym.stop();
    sym.getSymbol(“Slide_00”).play(0);
    sym.getSymbol(“Slide_01”).stop(0);
    sym.getSymbol(“Slide_01”).stop(0);
    …. elc… to Slide_10
    every trigger do stop timeline and play the specific symbol…
    …………..
    but this way take a lot of time and some times go to crush on the iPad or tablets…
    i try to brief the issue, my question how i can use array to execute these symbols without put them on the stage, during the (composition ready) example:

    var slides = [Slide_00, Slide_01, …..]
    for (i=0; i<=slides; i++) {
    sym.getSymbol("slides[i]").play(0);
    sym.$("slides[i]").css({"left":"0px"});

    some thing like that… i need to attach for you example from me (3 mega, nearly) you can see my sequences work…

    mohamedg@cat.com.eg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s