Mouse hover video

[Noiz321]

Hi, I would like to try to select a custom area or shape that will automatically appear and play a video based on that area whenever I mouse hover over it, and disappear and stop the video when I mouse over it.

How do I do this, please?

[kglad]

do you mean the video stops when you mouse out of the area?

[Noiz321]

yes, when I mouse out of the area the video will stop and disappear

[kglad]

ok.

and this is an html5 or as3 project?

with your video playing in a video player component?

[Noiz321]

as3 project

I tried to use FLVPlayback 2.5 to play the video, but it didn't resize perfectly to the size of the area I wanted

[kglad]

ok, so have your embedded your video into a movieclip timeline?

if so, what's the instance name of the movieclip?

[Noiz321]

As I understand it, I first select an area to convert it to a button symbol, create the movieclip symbol inside the button symbol over frame, and then embed the video in the movieclip symbol. (not sure I'm doing this right)

The result is that the video plays when I run the page and the mouse is not hovering over the area. When I hover over the area, the video appears and when I mouse leave the area; the video disappears but still continues to play.

[kglad]

there are different ways to do things in animate.  doing it your way is more likely to fail, but the hard part is getting video to play in a timeline.  it sounds like you've already accomplished that part.

so, remove that video containing movieclip from your buttons symbol's over frame.

add that movieclip to the main timeline and assign an instance name, eg video_mc.

test.  your video_mc should play revealing the video.   does it?

[Noiz321]

Yes, it can be played, but how should I get it to play only when the mouse is hovering?

[kglad]

if you want your area to be visible, put something in your buttons, up frame.  whatever hover area you want, put that in your button's hit frame.  you may or may not want something in the over and down frames.

put your button on the main timeline and assign an instance name, eg btn.

to the actions panel in the frame where both btn and video_mc appear, use:

video_mc.visible= false;

video_mc.stop();

//<edited>

btn.addEventListener(MouseEvent.MOUSEOVER,overF);  

btn.addEventListener(MouseEvent.MOUSEOUT,outF);

btn.addEventListener(MouseEvent.MOUSE_OVER,overF);

btn.addEventListener(MouseEvent.MOUSE_OUT,outF);

//</edited>

function overF(e:MouseEvent):void{

video_mc.visible=true;

video_mc.play()

}

function outF(e:MouseEvent):void{

video_mc.visible=false;

video_mc.gotoAndStop(1);

}

[Noiz321]

I think this way is right! but it shows some error

"Access of possibly undefined property MOUSEOVER through a reference with static type Class."

"Access of possibly undefined property MOUSEOUT through a reference with static type Class."

[kglad]

no, that's my fault.  (it's been a while since i used as3.)  use:

MouseEvent.MOUSE_OVER

MouseEvent.MOUSE_OUT

[Noiz321]

There are still some false. I sent the specifics to your private chat. Thank you very much for your help.

[kglad]

please restrict private messages to private information.  eg, if you want to hire me to fix the problem(s).

otherwise, post in this thread.

[kglad]

from the video, it looks like when you mouseover your button, something is happening (eg, the video appears), that triggers a mouseout.  you'll need to fix that.

[Noiz321]

I apologize for that. Yes, it still plays automatically when the mouse does not hover, and the screen flickers when the mouse hovers

[kglad]

what's the instance name of your video?

are your video and your button in more than one keyframe?

[Noiz321]

video_mc

no, just in one keyframe 

[kglad]

and the code is in the actions panel at that keyframe?

and when you "test" your app the video plays with no mouse over anything in the app?

[Noiz321]

Yes, it's all in the same keyframe just in different layers, video is movie clip object inside only one keyframe is the FLVPlayback 2.5 video.

When I test the app, In that frame I can already hear the sound of the video although the mouse is not hovering over the area, when the mouse hovers over the area the video appears but flickers, when the mouse leaves the area the video disappears but I can still hear the video sound continues.

[kglad]

wait a minute.  you said you weren't using an flvplayback component.  sheesh.

what's the instance name of the component?

[Noiz321]

the component instance name is "video1"

Sorry, I may have misunderstood your meaning, I'm not quite sure what other way there is to play the video... is there a better way?

[kglad · Accepted solution]

just leave it.  change the code to:

video_mc.visible= false;
video_mc.video1.stop();

btn.addEventListener(MouseEvent.MOUSE_OVER,overF);
video_mc.addEventListener(MouseEvent.MOUSE_OUT,outF);

function overF(e:MouseEvent):void{

video_mc.visible=true;

video_mc.video1.play()

}

function outF(e:MouseEvent):void{

video_mc.visible=false;

video_mc.video1.stop();
video_mc.video1.seek(0);

}

[Nicktendo28]

I concur with Kglad. That would be the proper code. 

[Noiz321]

It works! Thank you very much!