I'm trying to do a bottom menu like in www.zara.com.
My code have a transparent movieclip that shows the menu when mouse rolls over it, and hide when mouse rolls out.
The menu appears over that transparent movieclip, so I can use the roll over and out actions to maipulate the menu with the transparent MC.
The problem here is when mouse Roll Over my menu MC and it behaves as rolling out the transparent movieclip.
How can I make mouse rolls over a movieclip over another movieclip without roll out the first one?
Is it to confuse?
Thanx!
When a MovieClip B appears on top of another MovieClip A, MovieClip A will fire the MouseEvent.ROLL_OUT event. This is because MovieClip B is preventing MovieClip A from receiving any MouseEvents (since it is on top).
If you do not need to receive any MouseEvents from MovieClip B, you can set its mouseEnabled property to false, then MovieClip A underneath it will receive MouseEvents.
Also, depending on whether it makes sense in your particular case or not, you can make MovieClip B a child of MovieClip A, so that when MovieClip B obscures MovieClip A, the ROLL_OUT event will not be fired.
I hope this helps answer your question.
Here is a quick and dirty trick originaly from javascript technique
1.) build extra logic into the clipA rollout which waits a small period of time and then checks if the mouse is on the menu or not before closing it.
// define a boolean value for the moust beeing on the menu
public var menuOver:Boolean = false;
public function onMenuOver( event:MouseEvent ):void
{
menuOver = true;
// other menu code here
}
public function onMenuOut( event:MouseEvent ):void
{
menuOver = false;
// other menu code here
}
public function onMainClipOver( event:MouseEvent ):void
{
// show menu code here
}
public function onMainClipOut( event:MouseEvent ):void
{
setTimeout(execMainClipOut,100);
}
/**
* close the menu only if the mouse is not over the menu
*/
public function execMainClipOut()
{
if(!menuOver){
// close the menu
}
}
Ooh! I just remembered something interesting that might solve your problem.
When a MouseEvent.ROLL_OUT event is fired, the listener function is called with a MouseEvent object that has the relatedObject property. This is a reference to the object that is gaining mouse focus (getting rolled over) -- in your case, you could ignore the event if this property is set to your other MovieClip object, then fire the event manually when your other MovieClip object rolls out (so that it rolls out both of them).
as mentioned above, relatedObject works PERFECTLY
so for example if you have MovieClip A and then have Movieclip B on top.
You want Movieclip B to show on rolling over MovieClip A and hiding when rolling out of Movieclip A,
what generally happens is that Movieclip B will show but then when you hover over B, Moveclip B will dissappear, as B lies on top of A, rollout event takes place
so on Movieclip A rollout even just use
if((event.relatedObject == MoveClipB)
{
//if its rolling over B, which is a related object, dont do anything
}
else
{
//Hide B
}
Events for B still work when this is used
Related
I'm building a rich media Flash banner ad. I have 3 to 4 round MovieClip buttons that move around with an AS3 parallax effect. It looks like an EnterFrame loop creates the effect in AS3. But the individual Movieclip buttons won't function when I assign MouseEvent Click events. I want the parallax movement to stop and playhead advance to a specific label on main timeline when the MC's are clicked.
I'm sure this can be done but I lack the expertise. Here is the code:
//add an event listener to trigger every frame
addEventListener(Event.ENTER_FRAME, onFrame);
//set a constant that marks the centre of the stage
//the stage is 600 x 400, so we halve that
const stageCentre:Point=new Point(180,300);
//set an easing constant
const ease:Number=0.2;
function onFrame(e:Event) {
//create a point to store the distances the mouse is from the centre
var mouseOffset:Vector3D=new Vector3D(stageCentre.x-mouseX,stageCentre.y-mouse Y, 0);
//move each background layer by a different percentage of offset
//the easing constant is used here to create smoother results
//foreground moves the most; 75% of the mouse offset
clip1_mc.x+=(stageCentre.x+mouseOffset.x*0.70 - clip1_mc.x)*ease;
clip1_mc.y+=(stageCentre.y+mouseOffset.y*0.50 - clip1_mc.y)*ease;
//mid-ground moves a medium amount; 50% of the mouse offset
clip2_mc.x+=(stageCentre.x+mouseOffset.x*1.00 - clip2_mc.x)*ease;
clip2_mc.y+=(stageCentre.y+mouseOffset.y*1.00 - clip2_mc.y)*ease;
//background moves the least; 25% of mouse offset
clip3_mc.x+=(stageCentre.x+mouseOffset.x*1.75 - clip3_mc.x)*ease;
clip3_mc.y+=(stageCentre.y+mouseOffset.y*1.00 - clip3_mc.y)*ease;
}
//Click on button to go to and Play "kelsey" label (this does NOT work)
clip1_mc.kelsey_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
MovieClip(root).gotoAndStop("kelsey");
}
Make sure the clip1_mc is on the top most layer, it is probably overlapped by other clips that are catching up the mouse click events.
If you have buttons in all layers you will need to disable mouse events for everything except the buttons. For example, if you have a "button" and a "background" in each movieclip and you want to only keep the buttons clickable, do something like this inside of that movieclip:
background.mouseEnabled = false;
background.mouseChildren = false;
This way the background will not listen for any mouse interactions
add removeEventlistener when the mouse clicks the movieclip
clip1_mc.kelsey_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
this.removeEventListener(Event.ENTER_FRAME, onFrame);
MovieClip(root).gotoAndStop("kelsey");
}
I know this must be easy but somehow I have not been able to figure it out after spending more than hours. I have two movie clips in a class that extends Sprite. When I add event listener to the stage every thing works fine. But when I try to add event listener to one of the movie clips, the event never dispatches it seems. Here is how it looks like -
public class MyClass extends Sprite
{
private var movieclip1:MovieClip, movieclip2:MovieClip;
private function init(e:Event == null):void
{
movieclip1 = new MovieClip();
movieclip2 = new MovieClip();
//works fine, dispatches event
stage.addEventListener(MouseEvent.MOUSE_DOWN. mousedown);
//not working
movieclip1.addEventListener(MouseEvent.MOUSE_DOWN, mousedown);
addChild(movieclip1);
addChild(movieclip2);
}
}
Actually I want both the movie clips to work mutually exclusively, i.e., a mouse event on one movie clip should not interfere with that of the other. Any pointers?
Empty MovieClips and Sprites CANNOT be sized, they will be 0,0 and then they will not be able to dispatch MouseEvents.
You can resize a MovieClip when it has some content.
The Sprite will be of the size of the rectangle that encloses the 2 MovieClip.
If the MovieClips are empty = 0,0 the Sprite will be 0,0
About the events between the 2 MovieClips:
They are not going to interfere because the events when are bubbling goes upwards.
So the listeners put on MC1 will listen ONLY onClick on MC1 and the same does MC2
You can trace the width and height of the movieclip1 or movieclip2, you will get 0 both.
So, you can't click them.
You can use graphcis to draw a shape in these two mcs, and try again.
I've got a screen which involves a movie-clip where the object has a outline to symbolize that it can be clicked. Upon clicking the object, I'm requesting it to do numerous functions, disable itself and then go to another frame which removes the outline symbolizing it cannot be clicked anymore. But once you disable an object it goes to the original frame.
The object itself consists of these 3 frames.
Frame 1: Original State (Glow)
Frame 2: Hover over giving stats
Frame 3: No glow
To summerise i'd like to click the object and for it to go to the no glow frame and disable the movieclip.
The movieclip enabled = 1 is for when the user returns to the this frame, so the scene is aware of the button press.
Movieclip.addEventListener(MouseEvent.CLICK, Fun_Movieclip);
Movieclip.addEventListener(MouseEvent.MOUSE_OVER, Fun_MovieclipMouseOver);
Movieclip.addEventListener(MouseEvent.MOUSE_OUT, Fun_MovieclipMouseOut);
function Movieclip(event:MouseEvent):void
{
MovieclipEnabled = 1;
Movieclip.gotoAndStop(1);
Movieclip.mouseEnabled = false;
}
function Fun_MovieclipMouseOver(event:MouseEvent):void
{
Movieclip.gotoAndStop(2);
}
function Fun_MovieclipMouseOut(event:MouseEvent):void
{
Movieclip.gotoAndStop(3);
}
For some reason when ever the movieclip is disabled, it always reverts back to the glow state. Does anyone have a solution for this? Cheers
Edit: Inside the movieclip, the first frame has Stop();. Don't know if this would interfere with it.
mc.addEventListener(MouseEvent.CLICK, clickHandler);
mc.addEventListener(MouseEvent.MOUSE_OVER, mouseoverHandler);
mc.addEventListener(MouseEvent.MOUSE_OUT, mouseoutHandler);
function clickHandler(event:MouseEvent):void
{
mc.gotoAndStop(3);
mc.removeEventListener(MouseEvent.CLICK, clickHandler);
mc.removeEventListener(MouseEvent.MOUSE_OVER, mouseoverHandler);
mc.removeEventListener(MouseEvent.MOUSE_OUT, mouseoutHandler);
}
function mouseoverHandler(event:MouseEvent):void
{
mc.gotoAndStop(2);
}
function mouseoutHandler(event:MouseEvent):void
{
mc.gotoAndStop(1);
}
Not entirely sure what you meant by:
The movieclip enabled = 1 is for when the user returns to the this frame, so the scene is aware of the button press.
My suggestion for getting the scene to recognize the button click is to have the scene also listen to the mouse click handler
I have a MovieClip instance (movie) brought by code to the stage. I want to add some effects when mouse over or mouse down for this movie. So, first i added event listeners to this MovieClip:
movie.addEventListener(MouseEvent.MOUSE_DOWN, movieDownHandler);
movie.addEventListener(MouseEvent.MOUSE_UP, movieUpHandler);
movie.addEventListener(MouseEvent.MOUSE_OVER, movieOverHandler);
movie.addEventListener(MouseEvent.MOUSE_OUT, movieOutHandler);
Then i added event handlers:
private function movieDownHandler(e:MouseEvent):void {
trace("down");
}
private function movieUpHandler(e:MouseEvent):void {
trace("up");
}
private function movieOverHandler(e:MouseEvent):void {
trace("over");
}
private function movieOutHandler(e:MouseEvent):void {
trace("out");
}
And when i test it, everything goes ok: mouse over this movie, traces over, mouse down traces down, mouse up traces up and so on... But, when i add size change to the movie, for example, to mouse down handler like this:
private function movieDownHandler(e:MouseEvent):void {
trace("down");
movie.scaleX = 0.9;
movie.scaleY = 0.9;
}
and some filter effect to over handler, for example blurFilter:
private function movieOverHandler(e:MouseEvent):void {
trace("over");
e.currentTarget.filters = [new BlurFilter(1,1,1)];
}
then i receive unexpected behavior for event handlers: mouse over traces over (it is ok) and then i press (mouse down without releasing mouse button) at movie, then three events happen one after one: 'down', 'out', 'over' (mouse cursor don't leave MovieClip shape). What is the problem? Furthermore, setting scaleX and scaleY to 1.1 doesn't break handlers behavior
When you click a button,it go through three stage,first 'over',then 'down',then 'up',so it trace like that.
scareX has a range:0~1,the sacre is 0% ~ 100%
I've got a movieclip that is composed of 3 separate symbols. 2 of the symbols have their alpha tweened over 60 frames. 1 of the symbols is not tweened at all. All symbols are in separate layers, and there is a 4th, empty layer with a keyframe on frame 60 for actionscript.
The actionscript on frame 60 is simply "stop();" .
I am adding an instance of the movieclip to the stage dynamically from the document class. When I have "stop();" in there, the movieclip appears on the stage and skips straight to frame 60, where it succesfully stops.
Without "stop();" in there, the movieclip plays the alpha tweens perfectly, but obviously continuously loops.
Manually dispatching an Event.COMPLETE and listening for it does not work either and I would prefer not doing it that way anyway.
Here is the code that adds the movieclip to the stage:
//initialize the gameplay, remove title screen.
private function initialize_gameplay():void
{
//remove the title screen
initialize_title_screen(true);
this.screen_transition_obj = new tide_out_video();
this.addChild(this.screen_transition_obj);
this.game_board = new tidepool_gameboard();
this.screen_transition_obj.addEventListener(Event.COMPLETE,swap_transition_video_for_screen);
}
//replace the current transition video with the screen it was transitioning to
private function swap_transition_video_for_screen(e:Event){
this.addChild(this.game_board);
if(this.screen_transition_obj != null){
if(this.getChildByName(this.screen_transition_obj.name)){
this.removeChild(this.screen_transition_obj);
}
this.screen_transition_obj.removeEventListener(Event.COMPLETE, swap_transition_video_for_screen);
this.screen_transition_obj = null;
}
}
The movieclip's class is tidepool_gameboard and the property of the document class that stores the reference to it is game_board.
Any idea why putting stop(); on frame 60 of the movie clip is causing it to skip to the end without tweening?
UPDATE:
Adding the movieclip to the stage instantly instead of as the result of an event listener works properly, the problem only occurs when the movieclip is added in the event listner.
I can't believe I overlooked this, as it appears to be fairly obvious to me now.
In the code posted in the question, I've initialized a new instance of this.game_board, then added it to the stage after a delay based on an event listener for a video clip. The animation is playing, but it's playing before the clip ever is added to the stage.
Thanks go to alecmce who answered this question.
I did his Event.ADDED_TO_STAGE event listener, and it worked, which led me to realize that the MovieClip does not wait until it is added to the stage to start playing its own timeline, it simply starts the second you instantiate the object.
This is the new, fully functional code:
//initialize the gameplay, remove title screen.
private function initialize_gameplay():void
{
//remove the title screen
initialize_title_screen(true);
this.screen_transition_obj = new tide_out_video();
this.addChild(this.screen_transition_obj);
this.screen_transition_obj.addEventListener(Event.COMPLETE,swap_transition_video_for_screen);
}
//replace the current transition video with the screen it was transitioning to
private function swap_transition_video_for_screen(e:Event)
{
this.game_board = new tidepool_gameboard();
this.addChild(this.game_board);
if (this.screen_transition_obj != null)
{
if (this.getChildByName(this.screen_transition_obj.name))
{
this.removeChild(this.screen_transition_obj);
}
this.screen_transition_obj.removeEventListener(Event.COMPLETE, swap_transition_video_for_screen);
this.screen_transition_obj = null;
}
}