How to add a jpg placeholder to Flash video

there are several approaches on how to do this - from real simple to more complex. here's a few sugestions:

1) since your video player should by default show the first frame of the video, just make sure the first frame is not black. you can either:

remove the fade-in from black and just start the vid at full alpha

place an image in the very first frame, directly before the fade in, then have your fade-in from black start on frame 2

have your image on the first frame, and then fade to black or cross fade to your video starting

2) export 1 frame of the video , or use another image, logo, etc , to use as your 'poster frame'. turn it into a movieclip symbol. then use action script to use that movieclip ( which is layered on top of the video player) to act as the button to begin the video. use a tween to fade out the button, and it will seem like a video cross-fade

3) use javascript and css on the web page ( in conjunction with actionscript) to accomplish your desired effect

there are many other ways too. if i can't use #1, then i prefer #2, as it affords me the most flexibility to acheive whatever effect i want.

with a movieclip symbol named 'poster' placed over a videoplayer named 'flvPlayer', this code would make it work. also shown is using TweenLite for the fade out of 'poster'

poster.addEventListener(MouseEvent.CLICK, startVideo);
function startVideo(e:MouseEvent):void {
TweenLite.to(poster, 4,{alpha:0} );
flvPlayer.play();
} i hope that helps out with some ideas.

great. let me/us know how it goes, and if you have any other questions

first, make sure your video component is not set to autoplay. do that in the component inspector / properties panel( depending on which version of flash you use), or add this line of code:

flvPlayer.autoPlay=false;

also make sure your tween is only called from inside the function.

for your other issue: you can use the VideoEvent.PLAYING_STATE_ENTERED to see when the video has been started, and trigger the poster image fade from that.

you'll need to import the video class. here is some code to get you started
import fl.video.*;
import gs.*; // remember:this is MY path for MY version of TweenLite

flvPlayer.autoPlay=false;

flvPlayer.source="xxxxxx.f4v";

flvPlayer.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, isPlaying);

function isPlaying(e:VideoEvent):void {
TweenLite.to(poster, 4,{alpha:0} );
}
hope that helps

is your FLVPlayback component named 'movie1' ?
if so , it should work

hi robert-

well, something is wrong or differing from the orignial code, otherwise it would be working.

when things don't seem to work, i always pare it down to the bare basics for the function/effect i am conetrating on. once i get clear that it works fine, then it gets built back up to look as desired.

here is an example .fla for you to look at and work with:
4204_poster.fla.zip

here is the complete code in it that makes it work. you will just need to add in the correct name and path to your video. ( un-comment out the line for the version you are using - either a .flv or a .f4v )
import fl.video.*;

flvPlayer.autoPlay=false;

// fill in your movie name/path
// flvPlayer.source="XXXX.f4v";
// flvPlayer.source="XXXX.flv";

flvPlayer.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, isPlaying);

function isPlaying(e:VideoEvent):void {
poster.alpha=0;
}

the file is just a FLVPlayback component with the instance name 'flvPlayer', and a movieclip on top of that, with the instance name 'poster'. rather than use (and therfore have to expor) a skin for this example, there is also a video PlayButton component for use in starting the video. also to simplify, i removed the tweening of the poster and made it disappear by changing the alpha to zero without a tween effect.

i hope that helps make it work for you