New Flex Screencast and VideoCoverFlow Component
Tuesday, 11 March 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.
No. 1 — March 11th, 2008 at 9:01 am
[...] [Update: This screencast has been updated for Flex 3. Read more about it here.] [...]
No. 2 — March 11th, 2008 at 9:12 am
Thank you my friend!
No. 3 — March 11th, 2008 at 12:35 pm
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. :-)
No. 4 — March 11th, 2008 at 12:49 pm
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
No. 5 — March 11th, 2008 at 1:20 pm
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.
No. 6 — March 12th, 2008 at 1:29 am
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!
No. 7 — March 12th, 2008 at 1:41 am
Not to speak for James but yes. You could put whatever graphic there you’d like.
No. 8 — March 12th, 2008 at 1:44 am
and how do i do that?
No. 9 — March 12th, 2008 at 2:10 am
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)
No. 10 — March 12th, 2008 at 2:18 am
i can be a pain :) sorry and the code for embedding?
No. 11 — March 12th, 2008 at 2:24 am
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)
No. 12 — March 12th, 2008 at 6:14 am
i want to insert a play button like triangle and a circle around it how can i do t? can someone help me pls?
No. 13 — March 12th, 2008 at 6:52 am
oh ok thanks im gonna try this one :)
No. 14 — March 12th, 2008 at 6:55 am
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
No. 15 — March 12th, 2008 at 7:19 am
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!
No. 16 — March 12th, 2008 at 7:28 am
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
No. 17 — March 12th, 2008 at 7:42 am
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
No. 18 — March 12th, 2008 at 8:08 am
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
No. 19 — March 12th, 2008 at 8:11 am
I appreciate your help, thank you but could u tell me what file i need to change to make those changes?
No. 20 — March 12th, 2008 at 8:16 am
MyVideo.as should contain most of what you need to change.
-James
No. 21 — March 12th, 2008 at 8:18 am
k tanks a lot! You the best!
No. 22 — March 12th, 2008 at 8:51 am
oh yes one last thing where i can change the code to make thumbnails angle a bit more open?
No. 23 — March 12th, 2008 at 8:58 am
Hi Andriy,
You will need to set the rotationAngle property in VideoCoverFlow.as file.
-James
No. 24 — March 12th, 2008 at 9:01 am
and where is it? im going nuts! Sorry!
No. 25 — March 12th, 2008 at 9:05 am
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!
No. 26 — March 12th, 2008 at 9:54 am
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);
}
No. 27 — March 12th, 2008 at 10:05 am
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
No. 28 — March 12th, 2008 at 10:09 am
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?
No. 29 — March 12th, 2008 at 10:18 am
Try this:
public function VideoCoverFlow()
{
this.setStyle(”horizontalGap”, 40);
this.reflectionEnabled = true;
this.rotationAngle = 45;
}
No. 30 — March 12th, 2008 at 11:10 am
I figured everything out but i still have one question… how to increase space between them?
No. 31 — March 12th, 2008 at 12:33 pm
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
No. 32 — March 12th, 2008 at 1:18 pm
Andriy,
You can increase the horizontalGap property.
-James
No. 33 — March 12th, 2008 at 1:37 pm
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
No. 34 — March 13th, 2008 at 4:41 am
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
No. 35 — March 13th, 2008 at 10:14 am
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
No. 36 — March 13th, 2008 at 10:14 am
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.
No. 37 — March 13th, 2008 at 10:20 am
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
No. 38 — March 18th, 2008 at 7:52 am
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
No. 39 — March 19th, 2008 at 11:00 am
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
No. 40 — March 19th, 2008 at 11:00 pm
[...] James Ward – RIA Cowboy » Blog Archive » New Flex Screencast and VideoCoverFlow Componen… – 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 . [...]
No. 41 — March 20th, 2008 at 1:43 am
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.
No. 42 — March 20th, 2008 at 2:45 am
.. oops – this is the script i’m using …
PaulG
No. 43 — March 20th, 2008 at 2:46 am
<?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>
No. 44 — March 20th, 2008 at 1:10 pm
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…
No. 45 — April 2nd, 2008 at 6:02 am
[...] Ward made a very nice example how to use Dough McCune’s cover flow component with videos hosted on [...]
No. 46 — April 7th, 2008 at 10:30 pm
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.
No. 47 — April 9th, 2008 at 4:42 am
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
No. 48 — April 9th, 2008 at 7:50 am
Can the Coverflow be used when creating a windows app as i am get errors
No. 49 — April 10th, 2008 at 12:32 pm
Hi Andrew,
I’m not sure what you mean. Can you provide more details?
-James
No. 50 — April 14th, 2008 at 10:57 pm
@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
No. 51 — April 15th, 2008 at 8:22 pm
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?
No. 52 — April 18th, 2008 at 3:43 am
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
No. 53 — April 18th, 2008 at 7:53 am
Hi Andrew,
Check out my VideoCoverFlow component to see how I add the dataProvider property.
-James
No. 54 — April 18th, 2008 at 1:47 pm
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
No. 55 — April 19th, 2008 at 2:48 am
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
No. 56 — April 21st, 2008 at 10:40 am
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
No. 57 — April 28th, 2008 at 7:30 pm
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!
No. 58 — April 28th, 2008 at 7:33 pm
Think the proxy is struggling?
No. 59 — April 28th, 2008 at 8:07 pm
FWIW, when I hit the proxied urls I get a forbidden 403 error code. http://ws.jamesward.org/youtube.xml
No. 60 — April 28th, 2008 at 8:33 pm
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
No. 61 — May 7th, 2008 at 5:19 am
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 :(
No. 62 — May 7th, 2008 at 5:41 am
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.
No. 63 — May 7th, 2008 at 6:55 pm
Thx, it works! I have it working on my web site James your the Best! http://www.davidpatrickdesign.com
No. 64 — May 8th, 2008 at 9:44 am
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.
No. 65 — May 8th, 2008 at 9:45 pm
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
No. 66 — May 9th, 2008 at 7:15 am
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.
No. 67 — May 9th, 2008 at 7:28 am
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.
No. 68 — May 12th, 2008 at 2:38 am
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
No. 69 — May 14th, 2008 at 9:25 am
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!
No. 70 — May 14th, 2008 at 1:53 pm
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
No. 71 — May 21st, 2008 at 5:46 pm
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
No. 72 — May 27th, 2008 at 10:20 am
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.
No. 73 — May 28th, 2008 at 10:15 am
Maybe that method doesn’t need the override keyword. Or it doesn’t match the method being overridden.
-James
No. 74 — May 29th, 2008 at 1:19 pm
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.
No. 75 — May 30th, 2008 at 10:15 am
Maybe you could download the CoverFlow swc instead of the source code and use the library directly instead of compiling it.
-James
No. 76 — July 2nd, 2008 at 7:49 am
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
No. 77 — October 21st, 2008 at 8:49 am
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.
No. 78 — October 21st, 2008 at 9:33 pm
Hi Nico,
The ViewStack has a change event that should do what you need.
-James
No. 79 — November 7th, 2008 at 10:09 am
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()
No. 80 — November 7th, 2008 at 10:22 am
Er, sorry, I guess I meant looking at the new demo myTube.html. That’s where the Flash error occurs.
No. 81 — November 7th, 2008 at 3:01 pm
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
No. 82 — December 4th, 2008 at 1:31 am
[...] New Flex Screencast and VideoCoverFlow Component | James Ward – RIA Cowboy Skinnet YouTube player (tags: flex) [...]
No. 83 — May 10th, 2009 at 1:35 am
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,
No. 84 — May 10th, 2009 at 2:56 pm
Hi aurelio,
Unfortunately it’s broken because Google changed their FLV URLs.
-James
No. 85 — June 20th, 2009 at 10:48 pm
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.
No. 86 — June 22nd, 2009 at 7:30 am
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