Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
ADOBE FLASH:HomeFlash ForumFlash TutorialsFlash Video TutorialsWeb Streaming ForumAdobe FlashPodcast

How to add a jpg placeholder to Flash video

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Share on Facebook
Robert O'MalleyHow to add a jpg placeholder to Flash video
by on May 21, 2012 at 3:02:29 pm

I'm trying to add a jpg placeholder to a Flash movie (Action Script 3.0, player 10.2) so that the screen isn't black before the user clicks the video start button. Is there code for this that can be inserted when making the movie or on the web page? Thanks.



Return to posts index
Reply   Like  

demetri tashieRe: How to add a jpg placeholder to Flash video
by on May 22, 2012 at 6:22:41 pm

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.


    Return to posts index
    Reply   Like  

    Robert O'MalleyRe: How to add a jpg placeholder to Flash video
    by on May 22, 2012 at 7:19:14 pm

    Thanks Demetri. I'm going to try #2.



    Return to posts index
    Reply   Like  


    demetri tashieRe: How to add a jpg placeholder to Flash video
    by on May 22, 2012 at 7:30:59 pm

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


    Return to posts index
    Reply   Like  

    Robert O'MalleyRe: How to add a jpg placeholder to Flash video
    by on May 23, 2012 at 3:46:52 pm

    Demitri,

    The movie loads with the placeholder only covering the flv section of the Flash movie(so the controls are still showing). The movie starts to play and the placeholder image (jpg) starts to fade (using Flash Lite). (I'm testing it in Flash and assume it will do the same thing on a web page). This all happens before I hit the movie's start button. I'm trying to get it so that the placeholder doesn't fade and the movie doesn't play until the user clicks the start button of the Flash controls. Is there a way to tweak the code to do this. Thanks.



    Return to posts index
    Reply   Like  

    demetri tashieRe: How to add a jpg placeholder to Flash video
    by on May 23, 2012 at 4:37:13 pm

    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


    Return to posts index
    Reply   Like  


    Robert O'MalleyRe: How to add a jpg placeholder to Flash video
    by on May 23, 2012 at 8:39:08 pm

    import fl.video.*;
    import com.greensock.*;
    import com.greensock.easing.*;

    Demitri,

    Here's the code I'm using. It's not loading the flv video and controls. I'm getting an error message:Access of possibly undefined property PLAYING_STATE_ENTERED through a reference with static type class.



    import fl.video.*;
    import com.greensock.*;
    import com.greensock.easing.*;

    movie1.autoPlay=false;

    movie1.source="sandywoods_resident_export.flv";


    movie1.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, isPlaying);



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



    Return to posts index
    Reply   Like  

    demetri tashieRe: How to add a jpg placeholder to Flash video
    by on May 23, 2012 at 8:54:02 pm

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


    Return to posts index
    Reply   Like  

    Robert O'MalleyRe: How to add a jpg placeholder to Flash video
    by on May 24, 2012 at 1:47:19 pm

    I did name it "movie1"



    Return to posts index
    Reply   Like  


    demetri tashieRe: How to add a jpg placeholder to Flash video
    by on May 25, 2012 at 3:55:10 pm

    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


    Return to posts index
    Reply   Like  

    << PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
    Share on Facebook


    FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

    Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
    © 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

    [Top]