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.

James Ward - RIA Cowboy » Blog Archive » Screencast: Watch a Flex app built in 11 minutes

  • Andriy Drozdenko

    Thank you my friend!

  • http://www.johncblandii.com John C. Bland II

    James, I’m assuming, not having a chance to peak at source, you could stop a video when it was not “selected” and it could autoplay when “selected”. In that same vein you could have them all playing with the main one playing the sound or have them do a quick preview on hover (if not selected). :-)

    Also, how long did this one take? 11 minutes too? (nixing time to extend CoverFlow)

    Flex Challenge:
    How many videos do you think Flex could play simultaneously (in CoverFlow or just square boxes) without becoming a memory hog? I know video bitrates, motion levels, etc come into play but just curious here. :-)

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

    Hi John,

    I could have built the VideoCoverFlow to work as you say – but for my purposes I wanted the play/stop to be user initiated.

    The new screencast is about 9 minutes.

    The main challenge is actually the 3D calculation performance. Flash Player 10 will have more native 2.5D support which should improve this aspect. Then we can worry about memory usage. :)

    -James

  • http://www.johncblandii.com John C. Bland II

    Hahaha…2.5. :-D I like that wording of it…it fits too (based on what I’ve seen). :-)

    Coolio. I was sure you could do it but I haven’t look at his component before. Seems cool though.

  • Andriy Drozdenko

    And if i want to change the play button and put some kind of play triangle in the circle button and make thumbnails a bit more distant one from another? Im new to flex maybe my questions are a bit silly but hey… Thanks in advance!

  • http://www.johncblandii.com John C. Bland II

    Not to speak for James but yes. You could put whatever graphic there you’d like.

  • Andriy Drozdenko

    and how do i do that?

  • http://www.johncblandii.com John C. Bland II

    Look at the MyVideo class in the “createChildren()” method. You’ll see the button being created. You can just nix the “new Button()” stuff and throw in a custom drawn triangle, embedded play icon, or whatever you want.

    The source is here: http://www.jamesward.org/myTube/srcview/index.html. (in case you hadn’t seen it)

  • Andriy Drozdenko

    i can be a pain :) sorry and the code for embedding?

  • http://www.johncblandii.com John C. Bland II
  • Andriy Drozdenko

    i want to insert a play button like triangle and a circle around it how can i do t? can someone help me pls?

  • Andriy Drozdenko

    oh ok thanks im gonna try this one :)

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

    An Andriy,

    You will need to download Flex Builder if you don’t already have it. Then download the source code for the application as well as the libraries for the CoverFlow component. Then modify MyVideo.as and change the Button to an Image. The thumbnails are just static images which are referenced in the xml data file:
    http://ws.jamesward.org/mytube.xml

    I hope that helps. If you are new to Flex you might also want to check out:
    http://learn.adobe.com

    -James

  • Andriy Drozdenko

    know the thing is that i want to have this button only on first thumbnail when it’s loading… and please can anyone tell me how to transform this button in to image im going nuts!

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

    Hi Andriy,

    I’m not really sure what you are trying to do. Do you want a loading indicator? If so you might want to check out Ely Greenfield’s SuperImage component. If you just want a different look for the play button then you can either change the Button to an Image or you can use skins to skin the button.

    -James

  • Andriy Drozdenko

    Ill explain what i want to do: I want to change the button to an image (play sign like a triangle), but i want this image button to be displayed only when the thumbnail is in the focus. Then i want that thumbnails in the flow could be displayed larger and the last thing i want videos to be wider like here: http://www.brownbarn.com/vv/browse.php

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

    You certainly could tweek the code to make it work like that. But unfortunately I don’t have time right now to make those changes. Check out the documentation on skinning Buttons to replace the standard Button look with a custom image. Also I hard coded the width and height, but you should be able to easily change that.

    -James

  • Andriy Drozdenko

    I appreciate your help, thank you but could u tell me what file i need to change to make those changes?

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

    MyVideo.as should contain most of what you need to change.

    -James

  • Andriy Drozdenko

    k tanks a lot! You the best!

  • Andriy Drozdenko

    oh yes one last thing where i can change the code to make thumbnails angle a bit more open?

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

    Hi Andriy,

    You will need to set the rotationAngle property in VideoCoverFlow.as file.

    -James

  • Andriy Drozdenko

    and where is it? im going nuts! Sorry!

  • Andriy Drozdenko

    well ill tell you what’s up. Im a graphic designer this company brought me in and told learn Flex! So im going crazy already 3 days coz their requests are kinda tuff, so what they want is this button changed in to a custom image button and thumbnails wider! Heeelp!! Pls!

  • Andriy Drozdenko

    well i dunno nothing about skinning but i thought that i could load image as a button from a server using xml file as u used thumbnail im gonna create button tag in the xml file and load it in to the VideoCoverFlow override protected function createChildren():void
    {
    thumb = new Image();
    thumb.width = 200;
    thumb.height = 150;
    thumb.x = 1;
    thumb.y = 1;
    thumb.source = thumbnail;
    this.addChild(thumb);

    btn = new Image();
    btn.width = 20;
    btn.height = 20;
    btn.x = 100;
    btn.y = 75;
    btn.source = btn;
    this.addChild(btn);
    }

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

    Andriy,

    You need to grab the MyVideo.as and VideoCoverFlow.as files from the source code I published.

    The code you pasted should work except that you need to set the btn.source property to the url for your image.

    -James

  • Andriy Drozdenko

    yes i already did that, now only the rotation property, I have no idea how to do that one. Could you give me a hand?

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

    Try this:

    public function VideoCoverFlow()
    {
    this.setStyle(“horizontalGap”, 40);
    this.reflectionEnabled = true;
    this.rotationAngle = 45;
    }

  • Andriy Drozdenko

    I figured everything out but i still have one question… how to increase space between them?

  • http://tom.kulturlounge.de Tom

    Hi James,
    tried to modify your code for fullscreen, but when I hover over the video, it crashes the app in fullscreen mode.
    Source at http://tom.kulturlounge.de/mylabs/srcview/.
    What’s up with that?

    Regards,
    Tom

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

    Andriy,

    You can increase the horizontalGap property.

    -James

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

    Hi Tom,

    It’s possible that this is failing because you are trying to pull videos and read their bitmap data from my server which only allows http://www.jamesward.org to do that (via the crossdomain.xml file). It shouldn’t be crashing – that is a bug somewhere. So you might want to try and use some of your own videos hosted on your site to get around the security I’ve placed on my server.

    -James

  • http://tom.kulturlounge.de Tom

    Hi James. I already modified your example with my own videos and the same thing happens.
    I think there is a bug somewhere…
    Could you also tell me, how I can stop the videos which are not selected right now or give me just a slight hint if you are too busy.

    Thanks,
    Tom

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

    Hi Tom,

    Hmmm… That is not good. You might want to try and simplify the example down and see if it still crashes. Start by replacing the VideoCoverFlow with a List and a VideoDisplay.

    To stop the video’s what are not selected, you will need to catch an event when the selection changes in VideoCoverFlow.as and then loop through the children and tell them to stop. You might have to look at the CoverFlowContainer.as to see how to do catch the selection change event. Make sense?

    -James

  • Andriy Drozdenko

    Hi James guess who’s back LOL. I made a an swf file in flash that loads CoverFlow created in Flex. Then in swf file i created two listeners for rollover and out effect, when person rolls over the main thumb play button appears when person goes and scrolls thumbs button goes away. My problem is that i have an object overlapping the main thumb and i cant play the movie. What command i should give to my button so it could play it. I think they have to communicate between them.

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

    Hi Andriy,

    Interesting. To be honest… I’m not sure how to make that work. I never use Flash Authoring. Have you looked into the Flex Component Kit for Flash CS3?

    -James

  • Paul G

    Hi James,

    Saw the coverFlow script you did and it is really cool!!!

    As a complete newbie to Flex however, I’m having a problem.

    When I try to run it, I get an error that says it cannot find the file coverFlow\bin\coverFlow.swc and when I checked, it isn’t there. Have I got a corrupt version of the source?

    PLEASE Help – I’m probably dong something basic and stupid.

    Many Thanks,

    PaulG

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

    You will need to download the Cover Flow component from Doug McCune’s site:
    http://dougmccune.com/blog/2007/11/03/coverflow-flex-component/

    -James

  • Pingback: Vinny Carpenter’s blog - » Daily del.icio.us for March 16th through March 19th

  • Paul G

    Hi James,

    I already got the coverFlow component, loaded it as a Flex Library Project and then re-created your project and this is what I get:-

    nothing was specified to be included in the library coverFlow Unknown 1206001830828 15

    unable to open ‘C:\Documents and Settings\paul\My Documents\Flex Builder 3\coverFlow\bin\coverFlow.swc’ myTube Unknown 1206002110593 21

    This is the script I’m using for your myTube project:-

    … and the xml file and the ‘.movies.movie’ tags works well with the other display scripts you showed in your video. It’s just this one that won’t work.

    I have noticed that the bin folder contains a file called coverFlow_Lib.swc instead of coverFlow.swc ??? Tried renaming it but still no joy!

    Please help me here.

    Thanks,
    PaulG.

  • Paul G

    .. oops – this is the script i’m using …
    PaulG

  • Paul G

    <?xml version=”1.0″ encoding=”utf-8″?>
    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”srv.send()” xmlns:local=”*”>

    <mx:HTTPService id=”srv” url=”http://localhost/mytube_videos.xml”/>

    <mx:DataGrid id=”dg” dataProvider=”{srv.lastResult.movies.movie}”/>

    <mx:VideoDisplay source=”{dg.selectedItem.url}” width=”400″ height=”300″/>

    </x:Application>

  • http://tom.kulturlounge.de Tom

    Paul, just copy the sources to com.dougmccune …
    You don’t need the swc if you are having problems using it.
    It is pretty easy.

    @James: Managed to stop all videos on childchange. Because the coverflow is based on viewstack it also has the change event which you can use.
    There still seems to be an issue with fullscreen and the coverflow component…

  • Pingback: Sönke Rohde » AS3/Flex and the new YouTube API

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

    Some help please,

    I don’t understand what the actual url is for the video. Furthermore how can you generate it, because I’ve tried just using the url from the embed command to link to movies but I guess thats including the player as well. I not sure about the whole google/ utube API request stuff (A.K.A. I’m a Newbie), but I would just like to change the videos in the xml file, but I understand whats the correct url to add. Furthermore, please explain how you got “http://youtube.proxy.jamesward.org/sjl-v76.sjl/Rd8AJdcnw4A” to work, is it a video on your own server or what???? Also Paul G I think you can download the src from James stellar VideoCoverFlow Component and under lib there’s a .swf file that you need to also add to your lib folder within your project to get it to work.

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

    Hi David,

    Getting the URL to the video FLV is somewhat challenging since YouTube doesn’t directly expose these via an API. There are a few websites out there that help you find the FLV URL. The YouTube proxy URL I use just proxies the real video. I do this because of Flash Player’s security restrictions and because the YouTube server that the video is actually on doesn’t have a crossdomain.xml policy file. You need the crossdomain.xml policy file in order to access the bitmap data for the video (which is needed for 3D and reflections stuff). The proxy server I have has a crossdomain.xml file. In case you want to setup your own YouTube proxy, there is my Apache mod_rewrite rule:
    RewriteRule ^/(.*)/(.*)? http://$1.youtube.com/get_video?video_id=$2 [P]

    I hope that helps.

    -James

  • Andrew Price

    Can the Coverflow be used when creating a windows app as i am get errors

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

    Hi Andrew,

    I’m not sure what you mean. Can you provide more details?

    -James

  • Jason

    @Tom

    i was wondering what code you came up with to stop videos when they arent selected. im interested in what you did.

    thanks. jason



    • View James Ward's profile on LinkedIn