New Flex Screencast and VideoCoverFlow Component

For the Flex 2 product pages on adobe.com I recorded a screencast of a Flex app being built in 11 minutes. For Flex 3 I recorded a new version of that screencast. In the new version I used Doug McCune’s CoverFlow component but extended it to easily support playing videos. Check out a demo of the VideoCoverFlow component and right-click to download the source code. For those trying to use the VideoCoverFlow component – the implementation has changed slightly since I recorded the screencast so check out the myTube application for an example of how to use it.

Thanks Doug for the CoverFlow component.

This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • Jason

    James. if i added a description in the xml for each video, how would i get a text area to read that from the xml for each video as i scrolled through?

  • Andrew Price

    Hi Just watch your video it great but i think i am missing some thing down load upto date version on doug coverflow and it as changed i think video the component is now call VcoverFlowContainer but this as not got dataprovider part so how do you add data ??

    Any help would be great

  • http://www.jamesward.org James Ward

    Hi Andrew,

    Check out my VideoCoverFlow component to see how I add the dataProvider property.

    -James

  • Jason

    James. Im trying to get a description of the video that i placed in the XML file under to display on the screen. would a normal TextArea do this? do i need a new function in the actionscript file? any help is greatly appreciated, im new to action scripting and a somewhat knowledgeable at javascript.

    Thanks so much, jason

  • Stephen Corson

    James. Great component. I have at last managed to put in an event listener ‘this.video.addEventListener(“complete”, endVideo);’ to throw the video back to the thumb and start state after many false starts but that works now. However I would like to be able to control the sound of the MyVideo objects that are not in focus i.e. at the front as many videos may be playing (but not in focus). I suspect that the control would have to operate in two ways 1. video takes focus and 2. video in focus is started, but I cant see how.

    I would be greatful for any suggestions.

    Many thanks Steve

  • http://www.davidpatrickdesign.com David Patrick

    Hi Everyone,

    I got the Video Flow Component working, however when I click on a video the video doesn’t play. The video screen becomes black, like it can’t register the videos or something.Also I’ve managed to download the flv videos and put them in my Flex project for now, but later I hope to embed. But as far as getting them to play is beyond me. In the xml file I use the following

    Putting up an Adobe Flex Project from Google Code
    ../assets/videos/video1.jpg
    /assets/videos/video1.flv/
    84124
    Fun

    but still no video. If I’m loading it wrong please let me know. Thx

  • Bryan

    Hey David (and everyone else),

    I am having the same problem as you. In fact James’ example at the top of the page isn’t working for me. I can page through the videos, but when I click on one to play it just goes black and sits there. Any ideas?

    Thanks!

  • Bryan

    Think the proxy is struggling?

  • Bryan

    FWIW, when I hit the proxied urls I get a forbidden 403 error code. http://ws.jamesward.org/youtube.xml

  • http://www.jamesward.org James Ward

    The problem is that YouTube changed their FLV URLs. I need to rework how I’m getting those URLs. Sorry guys. Should have it working again soon.

    -James

  • Alec

    I have the same problem. mx:VideoDisplay does not display any videos, cause now url node is missing, id is presented. It is possible to construct URL like http://youtube.com/v/{myGrid.selectedItem.id} but video is not playing, anyway :(

  • Alec

    Also it could be great to download web service code to install it locally, in this case, any of modifications in youtube.xml with local FLV files could work, independently of YouTube FLV links.

  • http://www.davidpatrickdesign.com David P.

    Thx, it works! I have it working on my web site James your the Best! http://www.davidpatrickdesign.com

  • http://www.davidpatrickdesign.com David Patrick

    Hey Bryan,

    What I did to fix the problem was under the in the xml document was to assign it to a URL where the movies are contained. What I did was download the FLV movies (Google is your friend!) and add them to my hosting server. Also don’t forget that their might be sand box problems so you might have to also add a cross domain policy to your server. Hope this helps.

  • http://www.davidpatrickdesign.com David P.

    Here’s some of my code (you can sub the module for canvas or whatever):

    Here is the (sample) XML file:

    Putting up an Adobe Flex Project from Google Code
    ../assets/videos/video1.jpg
    http://www.davidpatrickdesign.com/flash/videos/video1.flv

  • Pawel

    James this code is lovely!!

    I’ve tweak it a bit to work with images insted of videos but now I’ve a problem with manipulating (unscaledWidth, unscaledHeight) is there any way I can control those arguments ?

    Pawel.
    Thanks.

  • Pawel

    I would like to layuotChilds like this:
    http://www.oreillynet.com/mac/blog/images/iTunes71_FullScreenCoverFlow.png

    what do i need do. I was trying zPostion i’m almoust there but my imgs on sides have much too big perspecive.

    var zPosition:Number = camera.z*1.1 + selectedChild.width/2 + abs* verticalGap;
    thanks again.

  • Alec

    Thanks, David! I’ve checked out your site, and it helped me : now I have it running on my local Jetty webserver, with custom FLV placed on the same web server, but the problem with YouTube links is still presented

  • Alec

    I have finally fixed this stuff with direct YouTube links!!! Yeah!!! I’ve introduced one extra .as script and in MyVideo.as instead of

    video.source = flv;

    i have added my component initializating, like

    m = new MyScript(flv, video);

    and inside MyScript class after calculating real FLV link, there is a setup of video.source=http://.flv! All works pretty good!

  • http://www.jamesward.org James Ward

    Cool Alec. I have a new version working as well but I’m now trying to figure out how to proxy the flv requests so that I can use CNAME’s in order to play more than 2 video’s at a time.

    Which method did you use to get the flv urls?

    -James

  • http://www.jamesward.org James Ward

    So this is finally fixed. With the web version I had to cheat and put the flv’s on my server since it would be pretty difficult to figure out how to proxy them. There is also a new AIR version which doesn’t cheat – doesn’t need to since there isn’t the same security restriction as with Flash Player. The AIR file is here:
    http://www.jamesward.org/myTube/myTubeAIR.air

    Let me know what you all think.

    -James

  • tdurant

    I have not been able to get the coverFlow component to work at all I get this error “method marked override must override another method” referring to this line: override public function drawBitmap():void {

    I unsure what to do I redownloaded the source from Doug’s site but I still get the same error. I’ll take help from any one thanks in advance.

  • http://www.jamesward.org James Ward

    Maybe that method doesn’t need the override keyword. Or it doesn’t match the method being overridden.

    -James

  • tdurant

    I still can’t get the CoverFlow component to work. The ReflectiveFlexMaterial.as keeps generating and error, that override drawBitmap function I can find anywhere. What I am I doing wrong.

  • http://www.jamesward.org James Ward

    Maybe you could download the CoverFlow swc instead of the source code and use the library directly instead of compiling it.

    -James

  • Matt

    Thanks for this James, it’s awesome.

    I’ve used Doug’s code before.

    I cant view anything when running the application. It reads in my xml file (on my server) but nothing shows. I’ve copied over the com directory containing Dougs’ component. Do I need to add that into the mxml file somehow? Any ideas why it’s not working?

    Please help.

    Many thanks

  • nico

    Thank you James.

    I’m a flex newbie.
    I got to run your compound with my own videos! What I’m trying to do know, is to stop video playing when the object is not selected!
    I’ve read above something with childchange in viewstack – but I have no idea how to implement this.
    Can someone help me.

    many thanks.

  • http://www.jamesward.org James Ward

    Hi Nico,

    The ViewStack has a change event that should do what you need.

    -James

  • Gabe

    Ack! Flash error when I try to view the screencast:

    [RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]
    at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()
    at mx.rpc::Responder/fault()
    at mx.rpc::AsyncRequest/fault()
    at DirectHTTPMessageResponder/securityErrorHandler()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/redirectEvent()

  • Gabe

    Er, sorry, I guess I meant looking at the new demo myTube.html. That’s where the Flash error occurs.

  • http://www.jamesward.org James Ward

    Yeah. Unfortunately it’s broken because Google changed their FLV URLs. I need to get this fixed I just haven’t had the time.

    -James

  • Pingback: leg med nye medier. Eller noget.()

  • aurelio pascual

    I downloaded the source code, import it in my Flex Builder 3, then right-click on myTube.mxml and then “Run Application”. The cover flow is displaying but the video is not showing. If I click the “Play” button, it will just display a black screen,

  • http://www.jamesward.com James Ward

    Hi aurelio,

    Unfortunately it’s broken because Google changed their FLV URLs.

    -James

  • Hernan Baioni

    Hey James!
    Could you please post a quick fix for the problem we’re having? Just let us know what to change in the xml file (or wherever) to make it work again. It was great, and i was thinking about using it in my website.
    Thanks in advance.

  • http://www.jamesward.com James Ward

    Hi Hernan,

    Unfortunately there isn’t an easy fix to this. If you host your own videos then you can take a similar approach and render then in a CoverFlow component.

    Sorry.

    -James



  • View James Ward's profile on LinkedIn