Flowing rollOver/ rollOut animations.

How can I keep the rollover animation from stopping when the
cursor pulls out before it is complete? There is a rollover anime
and a rollout anime,but I dont want the rollover anime to be
interupted. Basically it would be like a whole movie clip activated
by the cursor but if the cursor stays on it, it pauses in the
middle. How would I code this?
I hope i explained it well enough.

I would use a variable to signal that the rollover anime is
playing. Set this to true onRollOver, and to false in the last
frame of the anime. Then you can check this var onRollOut, and
decide what to do: if it's false, just play the rollout part. If
it's true, that means the rollover isn't finished yet, so you could
set another var, indicating that it shouldn't stop but play the
rollout part right after finishing the rollover part. Therefore you
have to check this 2nd var in the last frame of the rollover anime,
to decide if the movie shall stop or continue playing, and reset it
in the last frame or in the rollover event.
hth,
blemmo

Similar Messages

Can't figure what's wrong in my menu rollover/rollout project

What I was trying to do is make menu similar to one from http://www.jeremylevine.com/
I was seeking around and couldn't find a clue how was it done, so I tried my way.
Here's what I did - http://atlasinvest.me/menu/
You'll notice that, when crossing from middle button to one of the other two, it falls down smoothly, but when crossing from side buttons to the middle, it fails to play the frame that should do the smooth part of animation.
Here's the source http://atlasinvest.me/menu/menu.fla
I was trying to figure why it doesn't play, since code is the same for both buttons, but I'm obviously missing something.
Maybe the second pair of eyes would spot something and I'd be thankful
And the other question.. is there any less complicated way from what I'm heading to.. in order to make menu like in the first link above ?

Probably it's something most won't bother, but I thought it may be more convinient because code itself may be a little hard to figure through, without following content.
Ok, I'll try to explain as much as I can
Every button has it's rollover, rollout action depending on current possition of other movieclip (button). By that I tried to tell the clip, if the cursor is coming from the next button, or blank scene.
There are 3 button sizes : Normal, Large1, and Large 2. As you probably figured, selected button has size Large2, and neighbour buttons follow with size Large1, rest of them are normal.
So, by default, every rollover goes from frame "Normal to Large2" and rollout goes from frame "Large2 to Normal". After reaching "Normal" it goes and stops to frame 1.
Before doing default action, it checks if one of the neighbour buttons is Not on frame 1 (which means it's travels from frame Large2 to Normal, and that neighbour button was previously active), and then if that's the case, it redirects neighbour button to play "Large2 to Large1" and current button to go from "Large1 to Large2".
And here's how code looks like:
( I named the button clips c0 - left one; c1 - middle one, and c2 - right one)
Problem is, only middle one does the correct "l2-l1" tween, other two just return with trace message, but don't play suggested frame
// C1
c1.onRollOver = function(){
                    if(c2._currentframe != 1){
      c2.gotoAndPlay("l2-l1");
            trace("this should play c2.l2-l1 but doesnt !!!");
            c1.gotoAndPlay("l1-l2");
            c0.gotoAndPlay("n-l1");
          else if(c0._currentframe != 1){
          c0.gotoAndPlay("l2-l1");
          trace("this should play c0.l2-l1 but doesnt !!!");
          c1.gotoAndPlay("l1-l2");
          c2.gotoAndPlay("n-l1");
          else
          c1.gotoAndPlay("n-l2");
          c0.gotoAndPlay("n-l1");
          c2.gotoAndPlay("n-l1");
c1.onRollOut = function(){
          c1.gotoAndPlay("l2-n");
          c0.gotoAndPlay("l1-n");
          c2.gotoAndPlay("l1-n");
// C2
c2.onRollOver = function(){
          if(c1._currentframe != 1){
      c1.gotoAndPlay("l2-l1");
            trace("this plays OK !");
            c2.gotoAndPlay("l1-l2");
          else
          c1.gotoAndPlay("n-l1");
          c2.gotoAndPlay("n-l2");
c2.onRollOut = function(){
          c1.gotoAndPlay("l1-n");
          c2.gotoAndPlay("l2-n");
// C0
c0.onRollOver = function(){
                    if(c1._currentframe != 1){
      c1.gotoAndPlay("l2-l1");
            c0.gotoAndPlay("l1-l2");
          else
          c1.gotoAndPlay("n-l1");
          c0.gotoAndPlay("n-l2");
c0.onRollOut = function(){
          c1.gotoAndPlay("l1-n");
          c0.gotoAndPlay("l2-n");

EventDispatching Continously on Rollover RollOut Events

I have a simple mxml component tht extends Canvas. When I try and show the border / focus skin on a rollover / rollout event for my backgroung image
the rollover and rollout event get fired continously. What is triggering the roll out event ?. I have attached the src example (flex prj archive).
Thank You
Firdosh.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="124" height="148">
    <mx:Script>
        <![CDATA[
            private function onRollOver():void
                trace("rollover");
                focus.visible = true;
            private function onRollOut():void
                trace("rollout");
                focus.visible = false;
        ]]>
    </mx:Script>
    <mx:Image x="0" y="0" width="124" height="148"
source="@Embed('background.png')" rollOver="onRollOver();"
rollOut="onRollOut();"/>
    <mx:Image x="10" y="10" width="104" height="79" source="@Embed('img.jpg')"/>
    <mx:TextInput x="10" y="97" width="104"/>
    <mx:Label x="10" y="127" text="Test" color="#FFFFFF"/>
    <mx:Label x="85" y="127" text="Test" color="#FFFFFF"/>
    <mx:Image x="0" y="0" width="124" height="148" source="@Embed('selected.png')" id="focus" visible="false"/>
</mx:Canvas>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
     <local:Tile />
</mx:Application>

If the image appears under the mouse, then you've rolled out of the canvas onto the image
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Double Rollover/Rollout Conundrum

Hi Everybody,
I have an issue where I have a layer with a movieclip in it that globally covers the whole stage. Everytime the user rolls over it, it triggers a MC reveal. Everytime the user rolls out, it goes back into hiding. It is meant to only rollover/rollout when the user's mouse comes onto or leaves the stage area.
The problem I have is I have other movieclips on layers above it that have rollover/release functions as well. So everytime I rollover one of them it accidentally trigers the global stage rollover/out beneath it.
Is there a way I can have a rollover for a hit area covering the complete stage underneath other functinoing MC buttons without it triggering an early rollout?
Does that makee sense? Is there a solution?
Thanks for any feedback.

I haven't even assigned them depths as children. They're merely on the stage.
No two objects inhahbit the same displayindex in a flash file, so the index of a child (where it sits on the disply list) is unique.
If you don`t assign a depth/index to your object flash will do it for you.
Beware: The Layers you use in the timeline are not identical with the index flash uses to soret them on the displaylist.
So while you may have hundreds oof movieclips placed on one and the same layer in the timeline, internally they will all have their own index on the displaylist.
when you use addChild(mc) flash will add the object always on the highest index
yu can specify the index which your object gets assigned with
addChildAt(mc,0) will always place the object benaeth all objects on the stage
addChildAt(mc, stage.numChildren-1) will always place the object above all objects on the stage

Rollover and rollout animation

I am using the rollover and rollout features to get a slide up and down kind of button panel. However when I rollover each of the three section (it's divided into three panes) it gets really twitchy and won't do the roll up and down smoothly are do it at all. Any suggestions, link attached
http://mmtestanimation.businesscatalyst.com/index.html
thanks

Hi, wolfaw-
Looks like you're hitting upon the fact that mouseover fires whenever the mouse moves over the object. Instead of using mouseover and mouseout, try using mouseenter and mouseleave. I think those will do what you want it to do.
Cheers,
-Elaine

Movieclip Button RollOver/RollOut

I have a movieclip button name "about". In the about movieclip button when you rollover it will play a looping movieclip. When you rollout it will play another animation or movieclip.
The problem I am trying to solve is how do I code it so that when you rollout, the movieclip of rollover stops playing and will not finish the full movieclip. As of right now the way it is when you rollout, movieclip of rollover will play to full length before it stops.
The effect i'm trying to achieve can be seen in this template.
h**p://www.templatemonster.com/flash-templates/7981.html
If someone can point me to a tutorial or sample code of the effect please. Thanks

Well, I am not a professional but like I said I posted a question similar to this and I was told to add and remove listeners like such:
about_mc.buttonMode = true;
about_mc.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
about_mc.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
function buttonOver(e:MouseEvent):void
    about_mc.removeEventListener(MouseEvent.ROLL_OVER, buttonOver);
    e.currentTarget.gotoAndPlay("over");
    about_mc.addEventListener(MouseEvent.ROLL_OUT , buttonOut);
function buttonOut(e:MouseEvent):void
    about_mc.removeEventListener(MouseEvent.ROLL_OUT, buttonOut);
    e.currentTarget.gotoAndPlay("out");
    about_mc.addEventListener(MouseEvent.ROLL_OVER , buttonOver);

Spark Dropdownlist rollover rollout best practice?

I am seem to be having an issue here. I am trying to get a Spark DropDownList to open on mouseover or rollover and close on mouseout or rollout, but not if the mouse is on popup. But if the mouse rolls out or mouses out of the popup it should also close. The issue is when you use rollover on dropdownlist, plus rollout, when you try to move your mouse down to the popup it closes as it hears the rollout.
Does this code go in the skin? Do I need to extend the DropDownList? Not sure what is the best practice with addition of Spark and Skins?
Thx, J

Probably not best practice but put a rect in the skin and pushed it (top = -20) so my rollout handler sees it.

Add rollover to animation

how do you add a rollover to an animation?
i mean i have an animation and i want to have a rollover so
that when you scroll over it it will bring up a menu. how do i do
it?

Jullie_0916 wrote:
> how do you add a rollover to an animation? i mean i have
an animation
> and i want to have a rollover so that when you scroll
over it it will
> bring up a menu. how do i do it?
You can add an animation to a rollover, but you cannot add a
rollover to
an animation.
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Rollover/Rollout Issue

I have 3 graphic components that are horizontal bars about 100px long and 20px high. They're stacked over each other vertically on the left edge of the page, with about 10px space between them.
Each component has an UP and an OVER state.
When I rollover each graphic they slide to the left and fade to to 50% transparency. Rollout restores them to the original UP state.
If I move my cursor somewhere in the middle of the graphic, the state changes work well, but if I'm less than 20 or 30px from the end of the graphic the rollover and rollout states occur in rapid succession. Imagine a horizontal piston at 3K rpm.
Any thoughts?
-jh

Does your button change sizes in its Up and Over states? If it does, it will flicker wildly. Here's why...
Suppose your graphic is 100px wide in the Up state and 50px in the Over state. You put your mouse over pixel #60. The button goes "yay, I got moused over, better go into my over state!". It goes into the over state and resizes to be 50px. Now it thinks "the mouse is no longer over me. Better go back to my Up state!". It goes into the up state and resizes to be 100px. Now it thinks "yay, I got moused over..."...ad infinitum.
If this is the problem, you can work around it by creating a "hit rectangle" in both states and setting it's opacity to 0.
-Adam

Rollover/rollout of multi-button menus

I keep running into a situation where I want to rollover on
one object, then rollout on two overlapping objects. So, say I have
button A, with a rollover event that makes button B appear. B
partially overlaps A. Now I want both buttons to stay visible (and
clickable) until I roll away from both of them, then B should
dissappear again.
Seems like a common problem, but for the life of me I can't
figure out a clean, reliable way to implement the rollout when you
move between A and B. My current solutions involve either a
"border" around both objects that hides B when you roll over it, or
a delay on the close function and an interval timer stack. Both
seem like messy hacks to me; there must be a better way.
How is this usually accomplished? Can you point me to any
examples? Thank you! :)

see hitTest test in the manual

Panning/scrolling movieclip, needs to stop and start on rollover/rollout

Hello, I just started a new flash developer job, but I am relatively new to Actionscript itself (seems dumb, I know).
The deal is that we have a movieclip with a jpg in it that we need to scroll left to right based on the mouse's position. This seems fairly straightforward, but there will also be FLV's (flvPlayback) and other various buttons to click on during the panning.
What I need is a way for the MC to stop panning upon rolling over one of the pre-determined buttons.
I inherited the code below and get what it is doing, but I have no idea how to make it stop panning when I need it to, and then "onRollOut" make it start panning again.
bg_mc.onEnterFrame = function() {
   if (hitTest(_root._xmouse, _root._ymouse, true)) {
       mover();
   } else {
       delete panoramic_mc.onEnterFrame;
function mover() {
   panoramic_mc.onEnterFrame = function() {
       if (_xmouse<movieMiddle) {
           if (panoramic_mc._x > movieWidth) {
               //trace("Move panoramic 1 back");
               panoramic_mc._x = (panoramic2_mc._x - panoramicWidth);
           if (panoramic2_mc._x > movieWidth) {
               //trace("Move panoramic 2 back");
               panoramic2_mc._x = (panoramic_mc._x -panoramicWidth);
           inc = Math.abs(_xmouse - movieMiddle)*speed;
           panoramic_mc._x += inc;
           if(panoramic_mc._x > panoramic2_mc._x){
               panoramic2_mc._x = panoramic_mc._x - panoramicWidth;
           }else{
               panoramic2_mc._x = panoramic_mc._x + panoramicWidth;
       } else {
           if (panoramic_mc._x < (0 - panoramicWidth)) {
               //trace("Move panoramic 1 ahead");
               panoramic_mc._x = (panoramic2_mc._x + panoramicWidth);
           if (panoramic2_mc._x<(0 - panoramicWidth)) {
               //trace("Move panoramic 1 ahead");
               panoramic2_mc._x = (panoramic_mc._x + panoramicWidth);
           inc = Math.abs(_xmouse - movieMiddle)*speed;
           panoramic_mc._x -= inc;
           if(panoramic_mc._x > panoramic2_mc._x){
               panoramic2_mc._x = panoramic_mc._x - panoramicWidth;
           }else{
               panoramic2_mc._x = panoramic_mc._x + panoramicWidth;

when you want the panning to be active call activate():
function activate(){
bg_mc.onEnterFrame = function() {
   if (hitTest(_root._xmouse, _root._ymouse, true)) {
       panoramicF()
//when you want it to be inactive call deactivate():
function deactivate(){
delete bg_mc.onEnterFrame;
function panoramicF() {
       if (_xmouse<movieMiddle) {
           if (panoramic_mc._x > movieWidth) {
               //trace("Move panoramic 1 back");
               panoramic_mc._x = (panoramic2_mc._x - panoramicWidth);
           if (panoramic2_mc._x > movieWidth) {
               //trace("Move panoramic 2 back");
               panoramic2_mc._x = (panoramic_mc._x -panoramicWidth);
           inc = Math.abs(_xmouse - movieMiddle)*speed;
           panoramic_mc._x += inc;
           if(panoramic_mc._x > panoramic2_mc._x){
               panoramic2_mc._x = panoramic_mc._x - panoramicWidth;
           }else{
               panoramic2_mc._x = panoramic_mc._x + panoramicWidth;
       } else {
           if (panoramic_mc._x < (0 - panoramicWidth)) {
               //trace("Move panoramic 1 ahead");
               panoramic_mc._x = (panoramic2_mc._x + panoramicWidth);
           if (panoramic2_mc._x<(0 - panoramicWidth)) {
               //trace("Move panoramic 1 ahead");
               panoramic2_mc._x = (panoramic_mc._x + panoramicWidth);
           inc = Math.abs(_xmouse - movieMiddle)*speed;
           panoramic_mc._x -= inc;
           if(panoramic_mc._x > panoramic2_mc._x){
               panoramic2_mc._x = panoramic_mc._x - panoramicWidth;
           }else{
               panoramic2_mc._x = panoramic_mc._x + panoramicWidth;

Flickering rollover/rollouts

When the mouse hovers over the image the cursor flickers
between hand and standard mouse pointer. One work around I've tried
is to place an object under the main button that is bigger than the
main button. That seems to work but only for that button. If I try
it for others...well the image because cluttered with useless
boxes. This problem reeks of a cheaply designed package. Anyone
know of a way to correct this?

Okay. Sounds like you are using actual buttons. I'm still not
quite sure if they are invisible buttons laid over the top of your
map or if they are chopped up bits of the map that are then put
back together.
It still seems like the artwork in the over frame is just the
glow and not the actual artwork that is in that frame. To use the
glow filter you must have a movieclip instance in that frame. You
don't happen to have the knockout box checked for the glow filter
do you?
I'm not sure why you would want to use a rectangle for the
hit area. Those shapes while some of them are rectanglish they
aren't quite rectangles. You need to make hit areas that are the
shape of your lots.
I think you need to back up a few steps and remake the
buttons without any filters, or fancy stuff. Trace the shape of
each lot and make it out of a color like 50% blue or something. On
the over change to 50% green and 50% red for the down.
After you get that working. Still leave the partial
transparent colors on and then add your filters. And finally when
that is working you can go in and change the alpha to 0%.

Rollover animation and click combination problem

Hey everyone....thanks in advance for the help
I'm trying to edit an old Flash 8 in CS4, so I'm using AS2.0
My problem is I have a menu bar that animates on screen from left to right on load
and then it animates and plays a sound on rollover. I can't for the life of me get it to be able to hyperlink properly. I've gotten it to hyperlink on click, but then the rollover effect stops working. I've gotten it to hyperlink and rollover, but then the background covers up the graphics....it's frustrating the heck out of me!
Any ideas would be greatly appreciated.

change its timeline rollover/rollout animation to use actionscript only to animate it.

How to make flash play movieclip for rollout effect on button

I am using AS2 and I'm trying to figure out how to do a RollOut effect using buttons and getting nowhere. You'd think it would be easy!
I have a movieclip within the "over" section of my button, which contains both an roll over and a roll out animation. My problem is that I cant seem to get flash to play the rollOut animation.
I placed the following code in the button itself
on (rollOut) {
this.start_mc.gotoAndPlay("mouseOut");
Does anyone have any suggestions? I tried setting up a function to find when the user rolls off the button but it didn't work either. Any help would be very much appreciated.
Thanks!
Eileen

Code inside a button will not work. The code you show would have to be attached to the button, but a button only has the properties that Flash defines for it (unlike movieclips where you can assign all the properties you like). So you wouldn't be able to target a movieclip inside a button symbol because the button does not have such a property.
Buttons are self animating objects. You do not need to code to make them perform rollover/rollout animations. But a button does not have a rollout frame, just the Up frame. So you would need to have your rollout animation be in the up frame, where it settles to be the button as you see it without interacting with it.
What you might try instead of using a button is to use a movieclip as a button, Then you can control which frame it is in as you wisdh as well as command things within it to function.

Actionscript 3 rookie

Hi,
i´m totally new to actionscript 3 and definitely
confused by all the new terms and the whole OOP itself. As for
myself, i´m more into design and was quite happy with some of
my rudimentary as1-skills. But now I really feel the need to
enhance my knowledge and i´m ready to take some deeper steps
into flash-programming. Normally i used movieclips for buttons. For
example, I defined some rollOver/rollOut-animation for them and
wrote some code like:
example_btn.onRollOver = function(){
this.gotoAndPlay(rollOverEvent);
The rollOverEvent plays till it reaches the "stop"-call on
its timeline.
example_btn.onRollOut = function(){
this.gotoAndPlay(rollOutEvent);
My AS3-approach was:
example_btn.addEventListener(MouseEvent.MOUSE_OVER,
playRollOver);
function playRollOver():void{
example_btn.gotoAndPlay("in");
So my questions are:
1st. Is it okay to put "stop"-calls on different frames in
different timelines (or how can I bypass that and write everything
in the main code?)
2nd. I encountered, that if I publish my as3-file it works
fine for the first time but then begins to strike.
and 3rd.
What is the best solution to put this into clear AS3-code.
thanks
Stefan

Hi,
i´m totally new to actionscript 3 and definitely
confused by all the new terms and the whole OOP itself. As for
myself, i´m more into design and was quite happy with some of
my rudimentary as1-skills. But now I really feel the need to
enhance my knowledge and i´m ready to take some deeper steps
into flash-programming. Normally i used movieclips for buttons. For
example, I defined some rollOver/rollOut-animation for them and
wrote some code like:
example_btn.onRollOver = function(){
this.gotoAndPlay(rollOverEvent);
The rollOverEvent plays till it reaches the "stop"-call on
its timeline.
example_btn.onRollOut = function(){
this.gotoAndPlay(rollOutEvent);
My AS3-approach was:
example_btn.addEventListener(MouseEvent.MOUSE_OVER,
playRollOver);
function playRollOver():void{
example_btn.gotoAndPlay("in");
So my questions are:
1st. Is it okay to put "stop"-calls on different frames in
different timelines (or how can I bypass that and write everything
in the main code?)
2nd. I encountered, that if I publish my as3-file it works
fine for the first time but then begins to strike.
and 3rd.
What is the best solution to put this into clear AS3-code.
thanks
Stefan

Flowing rollOver/ rollOut animations.

Similar Messages

Maybe you are looking for