Help creating preview image for flv player

[muskin00]

Hello

I have created an application which includes a menu system for selecting videos and a video player.  Currently when the application opens the flv player video starts on load.  I would like to change this to show a preview image which would not disappear until my users click on a button to view a video.

I have tried to use the preview image function in the flv player and received this error:

"The preview image is displayed at authoring time only. To generate a runtime preview image, use the export button and load the image back by writing your own ActionScript.”

Can someone please help me with the actionscript i need to create to load my image into the player?

Thanks

[kglad]

google:  flash as3 poster frame tutorial

you should be able find step-by-step instructions to walk you through this.

[muskin00]

I tried to use the code found on monkeyflash (where goodle directs you to) and the option doesnt work for my situation.

My application has a launch video which is played in front of every selected video.  So when a user clicks on a button choice, the launch video is played followed by the selected video.

I need to have an image as a preview to the launch video and after the selected video.

Do you have any suggestions on modifying monkeyflash for my situation?

[kglad]

create your poster frame movieclip for each video.   assign each a class and use the "new" constructor to create an instance when needed, add it to the display list over the video player when you want it do display.  when it's no longer needed remove it from the display list and null it.

[muskin00]

Ok I am a bit confused as to what you what me to do.

Can I send you my code as I may not be explaining my code properly?

[kglad]

i don't download and correct files unless i'm hired to do so.

you can post just the relevant part of your code and, as long as it's not too lengthy, i'll correct it in this forum.  but, you need to clarify what you want.  "I need to have an image as a preview to the launch video and after the selected video", doesn't make sense.  does the poster image appear before the launch video, after the launch video and before the selected video or, some other time?

[muskin00]

Thanks for the help.

Here is my code:

import fl.video.*;
import fl.video.VideoEvent;

function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}

function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}

function playMovie(event:MouseEvent):void {
    display.play();
}

myPoster.addEventListener(MouseEvent.CLICK, playMovie);
display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
display.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

// Create variables
var safeVideo:String="videos/Fotolia_12024529_V_M (safe video).flv";
var safeVideoPlaying:Boolean=false;
var videoChoice1:String="videos/video1.flv";
var videoChoice2:String="videos/video2.flv";
var videoChoice3:String="videos/video3.flv";
var videoChoice4:String="videos/video4.flv";
var videoChoice5:String="videos/video5.flv";
var videoChoice6:String="videos/video6.flv";
var videoChoice7:String="videos/video7.flv";
var videoChoice8:String="videos/video8.flv";
var videoChoice9:String="videos/video9.flv";
var videoChoice10:String="videos/video10.flv";
var videoChoice11:String="videos/video11.flv";
var videoChoice12:String="videos/video12.flv";
var videoToPlay:String;
var videoToPlayPlaying:Boolean=false;

// Handle video complete events
function videoCompletedHandler(event:VideoEvent):void {
// If the safe video just finished, then play the selected video
if (safeVideoPlaying==true) {
  safeVideoPlaying==false;
  display.source=videoToPlay;
}
}
display.addEventListener(VideoEvent.COMPLETE, videoCompletedHandler);

// Respond to a button click
function buttonClickedHandler(event:MouseEvent):void {
var targetname:String=event.currentTarget.name;
if (targetname=="Button1") {
  videoToPlay=videoChoice1;
} else if (targetname=="Button2") {
  videoToPlay=videoChoice2;
} else if (targetname=="Button3") {
  videoToPlay=videoChoice3;
} else if (targetname=="Button4") {
  videoToPlay=videoChoice4;
} else if (targetname=="Button5") {
  videoToPlay=videoChoice5;
} else if (targetname=="Button6") {
  videoToPlay=videoChoice6;
} else if (targetname=="Button7") {
  videoToPlay=videoChoice7;
} else if (targetname=="Button8") {
  videoToPlay=videoChoice8;
} else if (targetname=="Button9") {
  videoToPlay=videoChoice9;
} else if (targetname=="Button10") {
  videoToPlay=videoChoice10;
} else if (targetname=="Button11") {
  videoToPlay=videoChoice11;
} else if (targetname=="Button12") {
  videoToPlay=videoChoice12;
}
// Play safe video
safeVideoPlaying=true;
display.source=safeVideo;
}
Button1.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button2.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button3.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button4.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button5.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button6.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button7.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button8.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button9.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button10.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button11.addEventListener(MouseEvent.CLICK,buttonClickedHandler);
Button12.addEventListener(MouseEvent.CLICK,buttonClickedHandler);

The issue I am having is that the video doesnt play unless the frame is clicked on.

I am looking for the following sequence to occur -

- On launch of application the preview image (posterframe) is visible

- When user clicks on a button the preview image disappears and the safe video plays

- After the safe video plays the selcted video plays

- After selected video plays I want the preview image to reappear

This sequence repeats for any button which is clicked.

The playing of the multiple videos upon clicking (choosing) a button works fine without the preview image.  Once the preview image and script is applied is where I have issues.

Any suggestions would be greatly appreciated

Thanks!

[kglad]

try:

import fl.video.*;
import fl.video.VideoEvent;

showPosterFrame(null);

function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}
function playMovie(event:MouseEvent):void {
    hidePosterFrame(event);
    display.play();
}

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

// Create variables
var safeVideo:String="videos/Fotolia_12024529_V_M (safe video).flv";
var safeVideoPlaying:Boolean=false;

var videoToPlay:String;

// Handle video complete events
function videoCompletedHandler(event:VideoEvent):void {
    // If the safe video just finished, then play the selected video
    if (safeVideoPlaying) {
        safeVideoPlaying=false;
        display.source=videoToPlay;
    } else {
        showPosterFrame(null);
    }
}
display.addEventListener(VideoEvent.COMPLETE, videoCompletedHandler);
display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);

// Respond to a button click
function buttonClickedHandler(event:MouseEvent):void {
    var videoNum:String=event.currentTarget.name.substr(6);
    videoToPlay = "videos/video"+videoNum;
    // Play safe video
    safeVideoPlaying=true;
    display.source=safeVideo;
}
for(var i:uint=1;i<=12;i++){
    this["Button"+i.toString()].addEventListener(MouseEvent.CLICK,buttonClickedHandler);
}

[muskin00]

Thank You for your help

I used your new code but the app still doesnt function.  The preview image doesnt go away until i click on the frame, and now none of the buttons work.

[kglad]

what's the following show:

import fl.video.*;
import fl.video.VideoEvent;

showPosterFrame(null);

function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}
function playMovie(event:MouseEvent):void {
    hidePosterFrame(event);
    display.play();
}

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

// Create variables
var safeVideo:String="videos/Fotolia_12024529_V_M (safe video).flv";
var safeVideoPlaying:Boolean=false;

var videoToPlay:String;

// Handle video complete events
function videoCompletedHandler(event:VideoEvent):void {
    // If the safe video just finished, then play the selected video
    if (safeVideoPlaying) {
        safeVideoPlaying=false;
        display.source=videoToPlay;
    } else {
        showPosterFrame(null);
    }
}
display.addEventListener(VideoEvent.COMPLETE, videoCompletedHandler);
display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);

// Respond to a button click
function buttonClickedHandler(event:MouseEvent):void {
    var videoNum:String=event.currentTarget.name.substr(6);
    videoToPlay = "videos/video"+videoNum;
    // Play safe video
    safeVideoPlaying=true;
    display.source=safeVideo;
}
for(var i:uint=1;i<=12;i++){
    this["Button"+i.toString()].addEventListener(MouseEvent.CLICK,buttonClickedHandler);

trace(this["Button"+i.toString()])
}

p.s.  make sure there are no forum artifacts like spaces in object/variable names.

[muskin00]

shows nothing when i play movie

[muskin00]

[

[muskin00]

I reloaded your code exactly with the following output:

[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]
[object SimpleButton]

[kglad]

do you see any error messages?

[muskin00]

No error messages only the output i posted.

The preview image only disappears when i click on the palyer frame, and non of the buttons function anymore.

Thanks for helping me troubleshoot this, I really appreciate it.

[kglad]

zip your fla and attach it to this thread.

[muskin00]

here it is

[kglad]

your buttons work.  the problem's the name of your videos:

    videoToPlay = "videos/video"+videoNum;

should be:

    videoToPlay = "videos/video"+videoNum+".flv";

[muskin00]

Yes, they work now .. but they do not start the videos as they did before ... a user still must know to click on the video frame which is not what i wanted a its not intuitive.

I do not want the user to have to click on the frame to get the video to play.  A user should simply click on a button and the preview image shoudl disaapear, the video plays, and then the preview image should reappear.

Also, the user should be able to choose a button, then another and so on ... the way it works now, I can not choose more than one button.

[kglad]

it works for me.

[muskin00]

This is strange.  My video doesnt play on any buttons being selected.  Only if the video frame is selected.

Could something be blocking the action from working on my side?  Maybe a program setting?

Thanks for your guidance.

[kglad]

use the trace function to verify that your video names (and the code) are correct:

import fl.video.*;
import fl.video.VideoEvent;

showPosterFrame(null);

function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}
function playMovie(event:MouseEvent):void {
    hidePosterFrame(event);
    display.play();
}

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

// Create variables
var safeVideo:String="videos/Fotolia_12024529_V_M (safe video).flv";
var safeVideoPlaying:Boolean=false;

var videoToPlay:String;

// Handle video complete events
function videoCompletedHandler(event:VideoEvent):void {
    // If the safe video just finished, then play the selected video
    if (safeVideoPlaying) {
        safeVideoPlaying=false;
        display.source=videoToPlay;
    } else {
        showPosterFrame(null);
    }
}
display.addEventListener(VideoEvent.COMPLETE, videoCompletedHandler);
display.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);

// Respond to a button click
function buttonClickedHandler(event:MouseEvent):void {
    var videoNum:String=event.currentTarget.name.substr(6);
    videoToPlay = "videos/video"+videoNum+".flv";

trace(videoToPlay);

    // Play safe video
    safeVideoPlaying=true;
    display.source=safeVideo;
}
for(var i:uint=1;i<=12;i++){
    this["Button"+i.toString()].addEventListener(MouseEvent.CLICK,buttonClickedHandler);

}

p.s.  make sure there are no forum artifacts like spaces in object/variable names.

[muskin00]

The output is correct specifying the correct video source (folder & name) when i press the button.  However in order to get the video to actually play i have to click on the video player frame.

In my original code the video played when i clciked on a butoon and without clicking on the video player frame.

Sorry for the continued questions, but I am a bit in the dark on the new code and what is different which has caused the videos to not play when the button is clicked (without clicking on the video player frame).

You menioned the video plays for you ok ... do you have to click on the player or just click on a button?

[kglad]

make sure the autoPlay property of your player is enabled.

[muskin00]

Ok so this is weird ... the autoplay fixes the button issue, but only after the frame is clicked one time.  After that first click the buttons all work to launch the video. 

One final thing ... with the autoplay enabled the video starts up when the html is opened or launched.  What do I need to add to my script to have the intial play wait for a click and not autoplay?