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.
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
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.
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
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.
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
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?
If I in the meanwhile should solve the problem you would be the first to know...
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
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
http://www.spintechnologies.ca/flashblog/archives/...
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;
give it a try :)
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
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!
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?
Im SOOOO close to finishing this piece. Please help :D
What am I doing wrong?
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
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?
Thanks so much.
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.
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
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.
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."
(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?
And is is there in my bin.
Thanx a lot
any idea?
There add the supplied swc I created.
1017: The definition of base class UIMovieClip was not found.
That is the error I get? Any ideas?
<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...
Thanx! Already bookmarked this page :)
cheers
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.
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.
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
player.pb.addEventListener...?
Regards,
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
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
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.
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
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
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
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
sorry for the typo
I've already tried setting the bufferTime to 0.
Right now I'm listening to the complete event and to the stoppedStateEntered event but there's still the gap.
Does anybody know how I can seemlesly(audio and video) play two flv's right after each other?
Thanks!
I was curious if it is possible to do the same thing with the SeekBar in Flash. I cannot find a suitable replacement in Flex and I wanted to create a custom player in Flex with individual controls.
I have tried exporting the SWC of the the SeekBar component, but even when that SWC is added to my Flex build path, I am given this error:
1046: Type was not found or was not a compile-time constant: FLVsb
(The name of the SeekBar SWC is FLVsb).
I would greatly appreciate any help on this!
You get the "skin error" in flash v10 if you do not have a cross domain p;oicy in-place Such as the very insecure (let- everything-in including the 'skin') ploicy such as:
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
This eliminated the flash v10 (debugger) thrown exception (but for some reason skin still not working yet, for me) I think I need to move it somewhere other than 'src'
Cheers //GH
Has anyone figured out a workaround for setting the size of the skin?
If you resize the FLVPlayback component it resized the skin.
It should be as easy as saying:
FLVPlayback.skinAutoSize = true/false
or
FLVPlayback.with = 300;
but it's not.
After that we will probably see Strobe take over from the FLVPlayback component.
private function addFLVPlayback(xpos:Number,ypos:Number):void
{...}
but i'd like to know how to put this componet inside a Panel or another container.
is that possible?