New Flex Screencast and VideoCoverFlow Component

By James Ward | Published: March 11, 2008

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.

Pingback: 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

There are numerous ways. You should look at Flex 3′s LiveDocs: http://livedocs.adobe.com/flex/3/html/help.html?content=Part6_ProgAS_1.html. (specifically: http://livedocs.adobe.com/flex/3/html/embed_2.html#183173)
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

New Flex Screencast and VideoCoverFlow Component

Search

Categories

RSS Links