James Ward - RIA Cowboy

Pingback by James Ward - RIA Cowboy » Blog Archive » Screencast: Watch a Flex app built in 11 minutes - March 11, 2008 @ 9:01 am

[...] [Update: This screencast has been updated for Flex 3. Read more about it here.] [...]

Comment by Andriy Drozdenko - March 11, 2008 @ 9:12 am

Thank you my friend!

Comment by John C. Bland II - March 11, 2008 @ 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. :-)

Comment by James Ward - March 11, 2008 @ 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

Comment by John C. Bland II - March 11, 2008 @ 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.

Comment by Andriy Drozdenko - March 12, 2008 @ 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!

Comment by John C. Bland II - March 12, 2008 @ 1:41 am

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

Comment by Andriy Drozdenko - March 12, 2008 @ 1:44 am

and how do i do that?

Comment by John C. Bland II - March 12, 2008 @ 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)

Comment by Andriy Drozdenko - March 12, 2008 @ 2:18 am

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

Comment by John C. Bland II - March 12, 2008 @ 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)

Comment by Andriy Drozdenko - March 12, 2008 @ 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?

Comment by Andriy Drozdenko - March 12, 2008 @ 6:52 am

oh ok thanks im gonna try this one :)

Comment by James Ward - March 12, 2008 @ 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

Comment by Andriy Drozdenko - March 12, 2008 @ 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!

Comment by James Ward - March 12, 2008 @ 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

Comment by Andriy Drozdenko - March 12, 2008 @ 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

Comment by James Ward - March 12, 2008 @ 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

Comment by Andriy Drozdenko - March 12, 2008 @ 8:11 am

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

Comment by James Ward - March 12, 2008 @ 8:16 am

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

-James

Comment by Andriy Drozdenko - March 12, 2008 @ 8:18 am

k tanks a lot! You the best!

Comment by Andriy Drozdenko - March 12, 2008 @ 8:51 am

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

Comment by James Ward - March 12, 2008 @ 8:58 am

Hi Andriy,

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

-James

Comment by Andriy Drozdenko - March 12, 2008 @ 9:01 am

and where is it? im going nuts! Sorry!

Comment by Andriy Drozdenko - March 12, 2008 @ 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!

Comment by Andriy Drozdenko - March 12, 2008 @ 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);
}

Comment by James Ward - March 12, 2008 @ 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

Comment by Andriy Drozdenko - March 12, 2008 @ 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?

Comment by James Ward - March 12, 2008 @ 10:18 am

Try this:

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

Comment by Andriy Drozdenko - March 12, 2008 @ 11:10 am

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

Comment by Tom - March 12, 2008 @ 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

Comment by James Ward - March 12, 2008 @ 1:18 pm

Andriy,

You can increase the horizontalGap property.

-James

Comment by James Ward - March 12, 2008 @ 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

Comment by Tom - March 13, 2008 @ 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

Comment by James Ward - March 13, 2008 @ 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

Comment by Andriy Drozdenko - March 13, 2008 @ 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.

Comment by James Ward - March 13, 2008 @ 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

Comment by Paul G - March 18, 2008 @ 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

Comment by James Ward - March 19, 2008 @ 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

Pingback by Vinny Carpenter’s blog - » Daily del.icio.us for March 16th through March 19th - March 19, 2008 @ 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 . [...]

Comment by Paul G - March 20, 2008 @ 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.

Comment by Paul G - March 20, 2008 @ 2:45 am

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

Comment by Paul G - March 20, 2008 @ 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>

Comment by Tom - March 20, 2008 @ 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…

Pingback by Sönke Rohde » AS3/Flex and the new YouTube API - April 2, 2008 @ 6:02 am

[...] Ward made a very nice example how to use Dough McCune’s cover flow component with videos hosted on [...]

Comment by David P. - April 7, 2008 @ 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.

Comment by James Ward - April 9, 2008 @ 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

Comment by Andrew Price - April 9, 2008 @ 7:50 am

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

Comment by James Ward - April 10, 2008 @ 12:32 pm

Hi Andrew,

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

-James

Comment by Jason - April 14, 2008 @ 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

Comment by Jason - April 15, 2008 @ 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?

Comment by Andrew Price - April 18, 2008 @ 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

Comment by James Ward - April 18, 2008 @ 7:53 am

Hi Andrew,

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

-James

Comment by Jason - April 18, 2008 @ 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

Comment by Stephen Corson - April 19, 2008 @ 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

Comment by David Patrick - April 21, 2008 @ 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

Comment by Bryan - April 28, 2008 @ 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!

Comment by Bryan - April 28, 2008 @ 7:33 pm

Think the proxy is struggling?

Comment by Bryan - April 28, 2008 @ 8:07 pm

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

Comment by James Ward - April 28, 2008 @ 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

Comment by Alec - May 7, 2008 @ 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 :(

Comment by Alec - May 7, 2008 @ 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.

Comment by David P. - May 7, 2008 @ 6:55 pm

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

Comment by David Patrick - May 8, 2008 @ 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.

Comment by David P. - May 8, 2008 @ 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

Comment by Pawel - May 9, 2008 @ 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.

Comment by Pawel - May 9, 2008 @ 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.

Comment by Alec - May 12, 2008 @ 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

Comment by Alec - May 14, 2008 @ 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!

Comment by James Ward - May 14, 2008 @ 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

Comment by James Ward - May 21, 2008 @ 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

Comment by tdurant - May 27, 2008 @ 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.

Comment by James Ward - May 28, 2008 @ 10:15 am

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

-James

Comment by tdurant - May 29, 2008 @ 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.

Comment by James Ward - May 30, 2008 @ 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

Comment by Matt - July 2, 2008 @ 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