Flashcomguru.com: Using the Flash FLVPlayback Component in Flex 2.01

Using the Flash FLVPlayback Component in Flex 2.01

Posted At : July 18, 2007 4:05 PM | Posted By : Stefan Richter | Related Categories: FMS , Flex

A while ago I wrote a post about how Flexbuilder (FB) can be used to write AS3 code for Flash apps. It took a little effort to set it all up but once that first hurdle was taken things were running smoothly. And to be honest who'd want to use Flash's code editor after having used FB for a while?

Not long ago Adobe released the Flex Component Kit for Flash CS3 on Labs. The kit allows you to use Flash content as components in Flex. I've seen that the kit is now part of Flex 3 but for this example I was using Flex 2.01 with this patch applied (although I am not sure if the patch is needed).

One thing that is clearly lacking in Flex right now is a good set of video components. There's the VideoDisplay component but to be honest I never use it because it's quite restrictive. However I do like Flash's FLVPlayback component so I wnet ahead and created a Flash file which contains the AS3 based FLVPlayback component. I had a go at this exact same excercise a while ago but had no joy then. I'm glad to say that this time it worked, but I had some funky problems. However I think those problems were self inflicted so I won't detail them here.
Anyway, I created a SWC as detailed in the component kit's docs and added it to my Flash project library. I was then able to access the FLVPlayback component and all its methods, events and properties in Flex. Neat.
Long story short, I am posting all my files here in case someone will find them useful.
There are a few things to note however:
- you need to use the boundingBox MC in Flash (like I did) or the FLVPlayback component will break its boundaries in Flex due to the hidden seekbar being veeeery long (but invisible)
- if I resize the FLVPlayback component in Flex it scales the skin as well as the video. Someone got a workaround for that? - you need to 'dig' one level down to get at the FLVPlayback component itself from Flex. So instead of using player.source for example you need to use player.pb.source (pb being the name I gave the component in Flash, you may call it whatever name you see fit)
- I am not sure if FLVpb.as (the class used with Flash) is needed. I think it's left over from another exercise, you may be able to ignore it (plus the SWC is there for you anyway now)

Hopefully this makes sense. The video player can be seen here and sources are available here or via right click on the Flex app. Hopefully the files are not too jumbled up, it was not a normal Flex project as the Flash files were mixed into it in a FLA folder. Any questions just ask.

Comments ( 80 ) |

Email This |

del.icio.us | 11855 Views

Using Flex Builder 2 to write AS3 code for Flash CS3 Projects (April 17, 2007)

Comments

[Add Comment]

"And to be honest who'd want to use Flash's code editor after having used FB for a while?"

I still use Flash Authoring. Mainly because a) the help system in Flash is far more comprehensive than the help docs in FB and b)FA compiles much much faster

# Posted By Brad | 7/18/07 5:57 PM

I don't agree on the Help docs. And the compile speed alone is not enough reason for me to do away with a good AS editor like FB. Plus have you used FB3 yet? Compiles much faster than FB2 did.

# Posted By Stefan | 7/18/07 7:34 PM

Have you looked into the possibility of including the individual flash video control components in Flex?

The reason I ask is that it would be nice to easily include a seek bar and other video controls that are not directly underneath the video display like the standard skin sets them up.

# Posted By Mark | 7/18/07 7:59 PM

good idea Mark, will have to try that.

# Posted By Stefan | 7/19/07 9:18 AM

Hi I

# Posted By Pablo | 7/25/07 1:18 PM

Hi I'm a newbie within flash...

I have add the three files (flvpb.mxmx, flvpb.swf and flvpb.scw) to my flash project in FLEX3...But when I run run it, it promt a error:

1046: Type was not found or was not a compile-time constant: VideoEvent.

This ref. to the line:
private function readyHandler( e:VideoEvent ):void

I really hope you can help my on this one!

Cheers,
Pablo

# Posted By Pablo | 7/25/07 1:20 PM

Hi again...

I forgot to add the FLVpb.swc file to my pjoject...now i get another error:

1046: Type was not found or was not a compile-time constant: FullScreenEvent.

# Posted By Pablo | 7/25/07 1:51 PM

Pablo, did you apply the Flexbuilder patch?

# Posted By Stefan | 7/25/07 4:26 PM

Nope...I use FLEX 3...I will try with Flex2 and the patch then...

# Posted By Pablo | 7/25/07 5:00 PM

hmm I guess Flex3 should work...

# Posted By Stefan | 7/25/07 5:05 PM

Hi again...I'm now using FLEX2 and the patch...and it is working! BUT - always a but uh'? :)

IF I set the 'player.pb.source =' to some value in FLEX in the flvpb.mxml file it popsup with this error:

VideoError: 1000: Unable to make connection to server or to find FLV on server
   at fl.video::VideoPlayer/play()
   at fl.video::FLVPlayback/play()
   at flvpb/___Button1_click()
   at [mouseEvent]

If I instead edit the FLA file in CS3 and change the Source to the EXACT same path it is working properly?!

That is a problem due to the fact that have to set the Source url at runtime.

Do you have any suggestions?

Pablo

# Posted By Pablo | 7/25/07 6:23 PM

hmm to be honest I'm not sure what to suggest...

# Posted By Stefan | 7/25/07 7:12 PM

I changes the back-slashes to slashes in the url...and that made the diffence ;)

Btw, is there a certian way to integrate the Flash code from the HTML file (which is placed in the bin folder)into my own HTML page...I mean...i have tried but it is quite easy to breake the code...

Do you have an example of an HTML file where you eg. have placed the FLVplayback component from FLEX into by your self?

# Posted By Pablo | 7/25/07 7:39 PM

ah no I haven;t but if it's an issue I'll look into it when I get a chance. good point that actually.

# Posted By Stefan | 7/25/07 7:45 PM

Please do :) and let me know if you find a proper solution...
If I in the meanwhile should solve the problem you would be the first to know...

# Posted By Pablo | 7/25/07 7:54 PM

I recently needed more functionality than the videoDisplay component gave me in Flex so I ended up rewriting my AS2 based custom video controller in AS3 and used the FlexComponent kit to bring it into Flex where it indeed acts as a "first class citizen". You can see it here:

http://www.nait.ca/d3/video/StreamingVideos.html

These videos are served using FMS2. The one problem I have is that the scrub (which calls netStream.seek()) does not work great on a mac. On a PC it's fine. I don't think this is related to Flex.

Anyway, now I have a lighter player with the source. Worth the iinvestment in time.

- Randy

# Posted By Randy Troppmann | 8/3/07 9:03 PM

Hey,
I cant open ur fla. I want to have a look at ur code. I am working in Flex2. But I am stuck with the rewind and forward functionality. I want to have a look what are the things i need to take care while doing that functionality. Please help me out.
You can send at rbhadra@gmail.com
Thank you

# Posted By Rajesh Bhadra | 8/27/07 5:08 PM

Rajesh, you need Flash CS3

# Posted By Stefan | 8/27/07 6:21 PM

Hey i have it but its expired. I was using Trial version. Can you help me out in helping in the functionality of rewinding and forwarding of flv using VideoDisplay component..Thank You

# Posted By Rajesh Bhadra | 8/27/07 6:23 PM

Rajesh, with help from Adobe and others I discovered a way to "hack" the VideoDisplay component to squeeze out more functionality. See this blog entry:

http://www.spintechnologies.ca/flashblog/archives/...

# Posted By Randy Troppmann | 8/27/07 7:08 PM

Hey I didnt understand by the link and I
have not used NetStream and NetConnection classes. Can you help me out.
And can i write this way
vidPlayer.mx_internal::videoPlayer.playheadTime = vidPlayer.mx_internal::videoPlayer.playheadTime - 5;

# Posted By Rajesh Bhadra | 8/27/07 7:39 PM

or even vidPlayer.mx_internal::videoPlayer.playheadTime -= 5;

give it a try :)

# Posted By Randy Troppmann | 8/27/07 7:58 PM

Hey this one is not working.What else i can try. have you made anything like that.Can you give me the source code for it.Thanks.

# Posted By Rajesh Bhadra | 8/28/07 7:11 AM

Can anyone help me out over here ?? How to rewind flv playing from a network on rewind and forward button

# Posted By Rajesh Bhadra | 8/29/07 6:59 AM

How I can use a .fla file in flex?

# Posted By K.M.SAzzad | 9/13/07 1:03 PM

you can't use the fla in Flex, you use the swc

# Posted By Stefan | 9/13/07 1:19 PM

I built my own component as outlined above, and I even downloaded your project to check it out. Unfortunately, when I give the flvplayback component an instance name it throws me an error "1120: Access of undefined property pb." - which is the same error your imported example gives. I have been creating components for some time now, so I know everything is installed OK, but this is my first flvplayback component for use in flex, and I'm stumped why this would be happening. Any ideas?

# Posted By Cheezedaze | 10/2/07 10:52 PM

hmm to be honest no, I have no idea... Maybe someone else knows? Are you using FB 2.01 or FB3?

# Posted By Stefan | 10/2/07 10:55 PM

I'm using FB 2.01 with the patch. I'm not sure what I'm doing wrong. Do I need to import or extend the UI component? Like I said, I can accomplish the same thing with any other component I make, but it may have something to do with the flvplayback being a flash component within a flex component? I'm stumpped.

# Posted By Cheezedaze | 10/3/07 1:19 AM

Hi Guys,

I have only just started using Flex, but I'm a Flash Developer.

How exactly do I use your source in Flex 2.01? With Patch installed.

Do I create a Flex Project? I have tried that, it lists your swc and swf files there, should they be in the components panel? I don't know, please can someone explain how to set up the source files so that I can try them.

Thanks

# Posted By Neil | 10/16/07 12:41 PM

I was SO HAPPY to have found this blog. We have been looking for some time now on how to get the FLVPlayback control to work in Flex. I do have a question though, I copied the .as file into the Flex, and published the swf/swc to Flex, but Flex is throwing a compile error stating that

Definition fl.video:FLVPlayback could not be found.

When I type import fl.video.FLVPlayback the auto-complete works so I would assume that Flex is aware of the class. Any thoughts on this?

Thanks again!

# Posted By Shawn | 10/16/07 3:03 PM

Neil,
yes create a project and then go into properties > Flex build path > library path > add swc and browse to the flvpb.swc

Shawn, did you link the swc also?

# Posted By Stefan | 10/16/07 3:12 PM

Thanks for your quick reply. I added the FLVpb.swc to the library path and now Im getting an error 1172: definition fl.video.FLVPlayback not found from the FLVpb.as file. I found the FLVPlayback swc in the flashCS3 program files dir under en/configuration/Components/Video/FLVPlaybackAS3.swc and added that to my library path as well but still getting the same result.

Im SOOOO close to finishing this piece. Please help :D

# Posted By Shawn | 10/16/07 3:55 PM

Also another quick question, I thought all the .as files created in Flash CS3 were supposed to be compiled into the .swc file so that there would only be two files needed in the Flex (eg the .swf and the .swc)? When I dont have the actual FLVpb.as file in my Flex project, I get all kinds of errors. When I copy the .as into my Flex dir, I only get the Definition fl.video.FLVPlayback not found error.

What am I doing wrong?

# Posted By Shawn | 10/16/07 3:58 PM

ok it's NOT the FLVPlaybackAS3.swc that you need to add but the FLVpb.swc component that we created from the FLA. I wish you were here at MAX tomorrow as I'll be covering this in my session :-)

If you have problems after FLVpb.swc has been added then I'm not sure. But do make sure that you import

import fl.video.*;

in your mxml.
Stefan

# Posted By Stefan | 10/16/07 4:02 PM

Thanks Stefan,

Ya, I added the FLVpb.swc, but had to also put the FLVpb.as file into the Flex and inside that .as file there is a import fl.video.FLVPlayback statement and that is where Im getting the error. I read another blog that said I needed to add that FLVPlaybackAS3.swc also, but that didnt work. Am I supposed to need the .as file in the Flex project or just the .swc and .swf?

# Posted By Shawn | 10/16/07 4:10 PM

Sorry, Im a REALLY new Flash/Flex developer and just am not sure what Im doing wrong.

# Posted By Shawn | 10/16/07 4:12 PM

BTW I also have the import fl.video.*; in my mxml but without the actual .as file, its also saying definition fl.video.* not found.

# Posted By Shawn | 10/16/07 4:45 PM

you dont need the .as file. The FLVpb.swc contains all the FLVPlayback related classes your Flex project needs. If the import is throwing an error then I have a feeling that the swc is not linked correctly to your project. Sorry but tricky to say any more from here. Make sure you use the correct Flexbuilder 2 version with the mentione dpatch or Flexbuilder3

# Posted By Stefan | 10/16/07 5:15 PM

Thanks again for looking at this Stefan. Like I said, when I dont copy the .as into Flex it throw the error that fl.video.* not found. I dont even see that directory under my flash cs3 dir. I read a post that said that all classes are either flash.whatever or mx.whatever. I know Ive got all the patches and component kit etc because Ive been using this for awhile now and even reinstalled them. I dont think we can use Flex 3 cause its still beta. When I test the movie in Flash CS3, the video player works beautifully, but when I publish it into my root dir of my Flex project, I get that definition not found and Severity 1046: Type was not found or was not a compile-time constant: FLVpb. errors for the actual component. Ive added the .swc to the library. Does it matter where I publish the swf and swc? Oh and I dont know if it matters, but we are using Cairngorm.

Thanks so much.

# Posted By Shawn | 10/16/07 5:59 PM

Hey Stefan,

Thanks, I did a few flex tutorials to get up to speed. I have everything working now, looks great in FULL_SCREEN mode. I tested with a few online videos, I noticed that you have to rename the extentions to get mp4 and mov files to work.

Do you know much about the fullscreen mode. It always seems to default to the size of the pb and does not show any other elements outside of this, regardless of the size of the rectangle.

Thanks again.

# Posted By Neil | 10/17/07 4:16 PM

Hi,

I have a flex application, and I need to compile it to run with Flash Player 7.

Someone can tell me if it's posible to do, if it's possible, how can I do that.

Regards

# Posted By Marcelo Tonelli | 10/18/07 8:29 PM

not possible i'm afraid

# Posted By Stefan | 10/18/07 8:38 PM

So I'm experiencing an extremely odd effect.

The video player itself isn't rendering on the screen but if I add other movieclips to the stage and re-export, they *do* render, but the FLVPlayback still does not.

Both Flash CS3 and Flex 2.01 are patched.

Anyone else have this or know why I'm being stupid. I'm incredibly desperate - any help will be enormously appreciated, thanks.

# Posted By InvokingCurses | 11/8/07 10:07 PM

Neil,
For the FLVPlayback Flash component this is the default. If you want to see the other elements then set it to false.

fullScreenTakeOver : Boolean
"When the stage enters full-screen mode, the FLVPlayback component is on top of all content and takes over the entire screen."

# Posted By Alain | 11/21/07 3:56 PM

Hi all, I tried to implement this in myown code with folowing errors:
(Video does play but without controls)

skinError:. text=[IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2035: URL Not Found. URL: SkinUnderPlaySeekMute.swf"]

Any id?

# Posted By steven | 12/5/07 4:30 PM

Looks like the swf file for the skin is missing, make sure it's in the bin directory..

# Posted By Alain | 12/5/07 4:59 PM

Indeed looks like the skin is missing but the skin is inside the flvPb.swf no?
And is is there in my bin.

# Posted By steven | 12/6/07 9:34 AM

Ok, got it working. I needed to put the skin.swf file in my directory is well.
Thanx a lot

# Posted By steven | 12/6/07 11:36 AM

Another error when trying to fullscreen.: Security error.
any idea?

# Posted By steven | 12/6/07 1:11 PM

yes steven, your html wrapper page may be missing the allowfullscreen option.

# Posted By Stefan | 12/6/07 4:16 PM

I'm new to Flex but not flash. I recently started a training video app in Flex 2.01 and would like the custom FLV Playback component I made in Flash CS3 to work in Flex 2.01. I've installed the component kit and made a component of my movie clip but I cannot get Flex 2.01 or Flex 3 to work with it at all. Is there something I'm doing wrong? I followed the directions to the t and it hasn't made a difference. How do I implement the swc file into my Flex project?

# Posted By Rudy | 12/11/07 6:49 PM

did you link the swc to your project (in flex project properties, library path)?

# Posted By Stefan | 12/11/07 7:05 PM

I'm not sure how to do that? How should I set up my app then, because maybe I've been doing all wrong? I'm sorry I am so confused I've been researching this everyday for the last week and I have so many things in my head. Any help is appreciated.

# Posted By Rudy | 12/11/07 7:12 PM

right click your Flex project in Flexbuilder > Properties > Flex Build Path > Library Path > Add SWC
There add the supplied swc I created.

# Posted By Stefan | 12/11/07 7:21 PM

It works! Now all I have to do is implement this into my project. Thank you sooooo very much! I've emailed and posted countless number of messages and then today I stumbled on this site and you answered me within 20 minutes. Thank you again! :)

# Posted By Rudy | 12/11/07 7:57 PM

Ok 1 more questions, Lol! (sorry)

1017: The definition of base class UIMovieClip was not found.

That is the error I get? Any ideas?

# Posted By Rudy | 12/11/07 8:36 PM

rings a bell somehow... it's been a while since I worked on this... maybe someone else knows?

# Posted By Stefan | 12/11/07 8:49 PM

Thanks again for all your help, I will research some more on this. Thank you again.

# Posted By Rudy | 12/11/07 8:52 PM

did you declare your custom namespace or pointing to the correct one?

<local:FLVpb id="player"/>

It seems like the mxml code is pointing to the wrong place, not sure, but that is what it looks like...

# Posted By Al | 12/11/07 8:55 PM

Have you found a solution to the stretching of the controls when you change the size in flex builder ?

# Posted By Joseph Abenhaim | 12/21/07 12:50 AM

no, but I haven't investigated it any further either

# Posted By Stefan | 12/21/07 10:37 AM

Is this also working if you are using pure AS3 files compiling with mxml? I tried all the day and still don't get any videodisplay ... I added your SWC to the library-path using -library-path+=/pathtoyourswc ... everything compiles fine. But still no success. Do I have to embed it in a special way using MetaTag or something?

# Posted By CK | 1/12/08 11:06 PM

I've got the exact same thing as CK above me. I use the command line mxmlc (linux), everything compiles fine, but no display. Could be a matter of flash player versions ? my current player is 9.0 r48, and I'm using Flex 3.
Thanx! Already bookmarked this page :)
cheers

# Posted By AH | 1/15/08 11:17 PM

I too am seeing:
skinError:. text=[IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2035: URL Not Found. URL: SkinUnderPlaySeekMute.swf"]

but I have no idea what skin.swf is missing that was mentioned earlier.

# Posted By Tom | 1/29/08 10:09 PM

the flvpb component requires a skin. I don't recall where it's looking to find it but you should be able to figure it out by looking at my sample files. This error is not related to the Flex component kit specifically but it can happen anytime the component can't load its skin (the controls basically).

# Posted By Stefan | 1/29/08 10:16 PM

I guess that's where I'm confused. I don't know what is looking for the skin specifically. I don't see one defined anywhere in the Flex code nor anywhere in the source for the demo, yet it works fine.

# Posted By Tom | 1/29/08 10:21 PM

I got it now... I had to publish the FLA myself to have the skin generated. Works great... thanks for the tip.

# Posted By Tom | 1/29/08 10:27 PM

I got the full screen mode working, i created a component and posted it on my blog here:
http://www.uimind.com/blog/2008/02/fsdisplay-full-...

It's basically a canvas with a fullscreen feature that enables you to go fullscreen for anything in it.

Hopefuly that works out for you, leave me feedback if anything not working the way it should.

# Posted By Joseph Abenhaim | 2/18/08 6:38 AM

Thanks for the code. I was able to make it work.

However, I have a question: before using the VideoDisplay in Flex I was able to add an event listener to check when the video reached the end, like:

vid.addEventListener(VideoEvent.COMPLETE, onVideoComplete);

Now with the FLVPlayback component I don't know how to listen to the event.
Any suggestions?

Gilbert

# Posted By Gilbert | 2/27/08 12:22 AM

do you maybe need to add something like
player.pb.addEventListener...?

Regards,

Stefan

# Posted By Stefan Richter | 2/27/08 8:47 AM

Stefan,

player.pb.addEventListener(VideoEvent.COMPLETE, onVideoComplete);

works fine. The problem was that I was using a VideoDisplay object before using the FLVPlayback and thus I was importing:

import mx.events.VideoEvent; and
import fl.video.*;

So, the application did not know which VideoEvent class to use.

Thanks again for the code.

Gilbert

# Posted By Gilbert | 2/27/08 8:33 PM

Another question,

I have a divider dividing a video (the one using the FLVPlayback) and a panel. When moving the divider (and changing the sizes of the video, it does not maintain the aspect ratio, even though the scaleMode (for the FLVPlayback component) has a value of maintainAspectRatio.

Any suggestions on how to fix that.
the player.percentWidth is 100;

Gilbert

# Posted By Gilbert | 2/27/08 9:05 PM

Wo,,,,, let me see. about 700 Comments and what? one maybe two successes? Oh, no thats right they immediately retracted and added another error.
How can you possibly think it s okay to post examples of this confusin useless nature?

Im just wondering, oh you arent alone. The Flex workld is full of same.

# Posted By rxeno | 4/2/08 9:04 AM

Hey Stefan,

Yeah its been awhile and I've had my FLVpb working great since you helped, now I have another question about it. Is it possible to control the autoplay feature that VideoDisplay has? I was just curious for now I have to have it, haha. Any help is greatly appreciated.

- Rudy

# Posted By Rudy | 4/23/08 9:17 PM

Rudy,

Once you have the FLVpb swc added to your library, you can dynamically change all the parameters.

For instance, to control the autoplay you need to do:

var vid:FLVpb = new FLVpb;
vid.pb.autoPlay = false; (or true)

Other things you can change:
vid.pb.scaleMode = "maintainAspectRatio";
vid.pb.skin = "whatever other skin youwant.swf";
vid.pb.source = "video1.flv";
vid.pb.width = 480;

etc...

Gilbert

# Posted By Gilbert | 4/23/08 9:35 PM

Hey Gilbert! Thanks. That helped alot. But my project is now more complicated. See I have a video source being sent in via httpservice from an XML list. So my FLVpb(player) gets its source from my XML List:

movie = "assets/" selectedNode.@link;
player.pb.source = movie;

so now I need it to autoplay from a tree list, which gets its data from an xml list.

Sheesh, Sounds so complicated.

In a nutshell I need it to autoplay from video 1 to video 3, load my form and then after form is submitted play video 4 to 8 load form again and after form is submitted play the last view videos. So...Any ideas?

- Rudy

# Posted By Rudy | 4/23/08 9:55 PM

Rudy,

I do the same all the time.

I have in one project something like this:

whichVideo = somethingHere;
                  switch(whichVideo){
               case 1:
vid.pb.source = contentList.Question[i].object.@url1;
                  break;
               case 2:
vid.pb.source = contentList.Question[i].object.@url2;
                  break;
               case 3:
vid.pb.source = contentList.Question[i].object.@url3;
}

vid.pb.autoPlay = true;

Does this help?

Gilbert

# Posted By Gilbert | 4/23/08 10:11 PM

I'm not to familiar with actionscript or any programming language other than mxml, and html. And I am new to Flex so I'm really understanding the syntax. However, I get that you are giving case statements, I'm just not sure how to implement them into my code. Any suggestions? Thanks again for all your help! :D

# Posted By Rudy | 4/23/08 10:20 PM

I mean to say "i'm not really understanding the syntax" haha

sorry for the typo

# Posted By Rudy | 4/23/08 10:21 PM

[Add Comment]