Animated rollover

What's the best way to achieve the following:
I'd like the user to move the cursor over part of the screen,
then a
small animation pops up (not the same size as the 'hot'
area). Then when
you move your cursor off the hot area, and the animation
fades out. And
I'd like it to fade out from the point it's at in the
animation.
Hope that makes sense.
Thanks.
And happy new year to all.

Thanks for the reply and samples.
I actually thought of using a film loop and exchanging cast
members like:
http://nonlinear.openspark.com/tips/filmloop/rollover/
What I was thinking (comparing to the above example), is you
move the cursor over
the black, and then the 'wipe right' appears and then starts
animating. I guess the
film loop could be made to include the black (larger
background).
I didn't know you could fade a film loop. I've tried changing
the Blend in the
Property Inspector. It doesn't work can you explain how your
film loop fade works?
I'm not very Lingo savvy. I don't know what 'the actorList'
is that you used.
What's the difference between 'blend' and 'blendLevel'?
On your last example, swapping one sprite when you rollover
another, from what I
understand, you're switching the cast member associated with
the sprite right? The
problems I've seen when trying to switch say an invisible
shape member with a film
loop is
- sometimes you don't get alignment right
- sometimes the film loop stretches so does not maintain its
correct proportions.
Anyway, with your demos, I think I can get the rollover
animation happening. Could
probably make the fade happen on a rollover off, but still
not all the way yet.
What I want to happen is
- you rollover, and the film loop animation starts I can do
this.
- you move off and it starts fading out. Guess I could have a
static version behind
the film loop and make it fade out to that.
- Once it's fully faded out, it switches to the static
version. This is needed so
you don't have a looping faded out animation happening.
Maybe, the best way would be to somehow have the film loop on
screen but paused on
the first frame. First frame would not show animated part.
Then when you rollover
it, it unpauses, animation appears and starts playing. When
you move off, the film
loop fades out. Then I guess I'd need a static version of the
graphic behind so it
fades to the right background. Once it is faded out, pauses.
Once you rollover the
film loop a second time, it jumps to frame 1, resets (not
faded out) and starts
playing again.
Is it possible to pause and play and jump to a frame in a
film loop? If so, how?
Sorry my reply was long. Was thinking and testing your files
while writing. Thanks
again for your help.

Similar Messages

  • Animated Rollover for Muse

    Hi, I'm trying to create an animated rollover for use in Muse (not a button, JUST a rollover) using Edge Animate, like the example on this page (scroll or click Features): PozitivA - Multipurpose One Page Muse Template
    It doesn't seem like I am able to insert the animation as a state or within a state button. How can I go about accomplishing this?
    Thank you.

    Thank you! I figured it out via this tutorial after reading your answer: Adobe Edge Animate Interactive Rollover Web Buttons Tutorial - YouTube
    I'm completely new to Edge Animate

  • Make animated rollover in Flash for Muse buttons

    Hello.
    I am new to Adobe Muse, but more familliar with Flash. I am also new to HTML.
    I am wondering if it is possible to make a rollover animation in Flash to play as a rollover animation for buttons in Muse. I would like it so that when the mouse curser hovers over the button, it plays a simple animation of appering and dissapering stars over the text. I have heard of Adobe Edge, but I am not really familiar with it, so if there is any specific setup for a Flash rollover animation e.g. HTML5 Canvas or whatever, please let me know. Also, I am wondering if a HTML5 canvas Flash animation will play on phones and tablets, or if anything made with Flash using whatever setup, will even work on phones and tablets.
    Thank you for your suggestions and assistance.

    You may need to create the fully function button with all states and mouse interactivity in Flash itself and then place it in Muse and apply a link to it.
    Since buttons with states in Muse use background fills which can only be certain image types like PNG, JPG, etc. Since you can't apply a SWF as a CSS background fill, it won't be possible to use it for one of the states of the button.
    Hope this helps.
    Cheers,
    Vikas

  • Complex animated rollover using AS3

    Flash newbie here. I've been able to create a button symbol
    with an embedded movie clip that animates in the rollover state.
    The problem is that the animation is slightly complex - it runs for
    20 frames - and when the user rolls out of the button, it quickly
    reverts to it's normal state which makes the animation effect seem
    jerky (i.e. unprofessional).
    I know it's possible to create a movie clip with AS3 that
    acts like a button but I haven't been able to find any sample AS3
    code that will tell the movie clip to let the animation finish even
    if the user moves the cursor off the button.
    Anyone have any ideas how this could be done?

    Use a movieclip instead of a button. There is no way of
    taming a button to remain in a state when the mouse events
    change.

  • Captivate 8 won't allow you to add text animation

    I'm using Captivate 8 and when I try to add a text animation the option in the toolbar under Text > Text Animation is subdued and impossible to select.  How do I animate text with Captivate 8??

    Hi Lily,
    Thanks for highlighting other items which are not supported in Responsive projects. For now we can consider that the features which are disabled(grayed out/Inactive) in UI for Responsive Project, are not available for Responsive Project.
    A quick list of features that are not supported:
    1) Features which are not supported for HTML5 output (Such as Text animation, Rollover Caption, Rollover Image, Rollover Slidelet).
    2) Line shape and free polygon.
    3) Drag and Drop Interaction.
    Thanks and Regards
    Shriyansh

  • Help with buttons within buttons

    I am trying to get stop and play buttons for the background
    music of my site to work within an animated rollover state of a
    separate button. When I put the stop and play buttons into the
    rollover animation they effect the hit state of the button they are
    inside, how do I get around this? If you look at
    www.thepixelplaypen.com/site you will see the menu bar at the
    bottom. If you click on the references button (the 3d thought
    bubble) i have directed it to how I want the page to look and work
    when the music bar is 'rolled over'.

    I've look at the site but am not sure what you mean. 1st I
    don't know what the music bar is. Are you talking about the menu
    bar when it's blank and minimized? Because when I go over that it
    jumps from expanding to its full form to back to its minimized
    state over and over.
    I think what you need is something a little more involved
    than the over/out states buttons give you.
    I would say a two state movie clip with a variable that flags
    on and off for the menu. Have the "toggle" turn off when moved out
    from the menu, but not when over the music switch. For example, a 2
    second delay that tests for the toggle being off, and the music
    button turns it on on over...
    Hope that helps...

  • Movie Clip Button - Action Script issues

    This is a two part question:
    1. I have my movie clip button, "mcAboutus" then inside my
    movie clip I have 5 layers: actions, labels, text, animated
    rollover("mcAboutusover"), animated rolloff("mcAboutusoff"). On the
    labels layer I have _up, _over, _off. On the _up is the text layer,
    on the _over is a movie clip of the animated
    rollover("mcAboutusover") which is 90 frames, and I want to loop as
    long as the mouse is over the text. And the _off has the
    "mcAboutusoff" movie clip.
    So I was able to have the rollover work, but when I roll off
    the rollover animation continues on until the end of the animation.
    I understand it has to do with the fact that it's a movie clip, but
    how do I point it to go into the movie clip and read the animation
    and that on the last frame of the animation I have a
    "gotoAndPlay(1);" to have the animation continue looping as long as
    it's in a rollover state?
    here is the code I have for the _root:
    this.mcAboutus.onRollOver = function() {
    mcAboutus.gotoAndPlay(_over);
    this.mcAboutus.onRollOut = function() {
    mcAboutus.gotoAndPlay(_off);
    The other problem I am having is that once the I have rolled
    over the animation once, the button dies and won't let me rollover
    it again?
    Aside from the "stop();" action in the mcAboutus movie clip
    symbol, I don't have any other actions, should I put items in the
    different movie clips I have set up?
    ALSO.... The reason that I have the main movie clip button,
    and two movie clips residing in the mcBtn is I wanted light rays to
    be glowing from the text, and I was having a hard time getting what
    I wanted from Flash, so I created in After Effects and exported two
    .SWF files. So those .SWF files are the _over and _off states in
    the mcBtn. I am having a very hard time controlling those Movie
    Clips within the main MC Button. Please, any help would be greatly
    appreciated.

    quote:
    Originally posted by:
    kglad
    mcAboutusover should be a movieclip that has your over
    animation and it should have a stop() on its last frame. it should
    be placed on your _over frame in mcAbousus' timeline. you should
    then use:
    Ok, so I have my main timeline, in it has my
    mcAboutus>> then inside that I have three labels. _up which
    has the static text then on frame 5 I have the _over which has the
    keyframe for the mcAboutusover, this animation is 90 frames, then I
    have on frame 10, the _off for the RollOut state, and I have a 10
    frame animation on that one. I still can't get it to continue on
    after the initial rollover, the button still dies down.
    I am going to redo everything in a presentation timeline,
    based on Total Training and see if that helps my problem out any,
    and will get back to you tomorrow with more info. Thanks

  • How to create framesets?

    Not animation/rollover frames, but actual frame sets...
    As per my previous topic in this forum, I made a graphic to
    show my situation:
    http://img270.imageshack.us/img270/8130/samplesite46732248at.jpg
    The canvas is 800x600. Everything GREEN cannot be moved
    (meaning I do not want to change the layout). I would like a
    frameset (might be another way to do it, but it must function like
    a frameset) within this area with a scroll bar in it (BLUE)
    I tryed adding a "layer" on top of it in dreamweaver, but the
    layer did not allow me to keep the size a certain amount. I pasted
    some sample text and the result was something like this:
    http://img270.imageshack.us/img270/7898/samplesite445787547pn.jpg
    Any possible solutions (keeping in mind I am a total newbie
    at web design)?
    Thanks again

    Perhaps I am understanding something wrong, or perhaps I am
    explaining my situation wrong.
    Everything you have said so far works the way you explained
    it, but here is why it does not work in my situation:
    If I set the right value to 20% (for example), than the layer
    will be 20% from the right side - which is fine in theory, but as
    soon as I grab the right edge of my browser window and resize it
    (to simulate different viewing conditions/screen res's) the layer
    moves as well (because it is remaining 20% away from the edge). The
    result is that the layer moves "on top" of other elements of my
    page. The same for the top value - if I set it a certain %, and
    move window size smaller/bigger vertically, that layer moves into
    my header and even off my canvas if the window is resized enough.
    The same thing happens when I set it to use px instead of %.
    The pixel value (from the left edge for example) will be 300 px
    (example). If I resize my window by dragging the left side into the
    center, than the layer still stays the standard 300 px from the
    left side - which means my layer starts to move off of the right
    side of my canvas.
    I hope that gives a clearer image of my situation.
    Oh, and thanks again for all the help
    EDIT Here is a little animation I made that shows the
    problem by simulating different browsing sizes. Color Red is my
    menus/headers etc. Blue Gradient is my background (behind my
    canvas). The little text block in center is my Layer. Black is
    outside of the window area.
    http://img270.imageshack.us/img270/3725/sampleanimation5781ei.gif
    This is with my right value set to an X number of pixels. But
    the situation would be similar if I set it to have a left px value,
    or a left/right % value (only it would move the other way).

  • A bit more help with conditions

    I am working on some animated rollover buttons (movieclips) that require two conditions:
    1. Once the button is rolled over, clicking will switch between a word symbol and it's definition
    2. Due to the above, I also need two rollOut  states as well.
    I made a run at both, with the results posted here: www.midnyc.com
    There are definitely some bugs, I am just not sure where to go from here. I see that if you mouse over and interact, then get off, when you go back onto the button, it is still in the same pattern (has not reset) and that needs to happen.
    Also, on the first click, nothing happens... a second click is required to get the switch to happen. Below is my code thus far:
    btn_disHit.buttonMode = true
    btn_disCase.buttonMode = true
    btn_disCase.buttonState = "on";
    btn_disHit.addEventListener (MouseEvent.CLICK, disToggleClick);
    btn_disHit.addEventListener (MouseEvent.MOUSE_OUT, disToggleOut);
    btn_disHit.addEventListener (MouseEvent.MOUSE_OVER, disOver);
    function disOver (e:MouseEvent):void{
        btn_disCase.gotoAndPlay ("disOver");
    function disToggleClick (e:MouseEvent){
        if (!e.currentTarget.toggle){
            btn_disCase.gotoAndPlay ("disClick")
        else {
            btn_disCase.gotoAndPlay ("disClickB")
    e.currentTarget.toggle = !e.currentTarget.toggle;
    function disToggleOut (e:MouseEvent){
        if (!e.currentTarget.toggle){
            btn_disCase.gotoAndPlay ("disOutB")
        else {
            btn_disCase.gotoAndPlay ("disOut")
    e.currentTarget.toggle = !e.currentTarget.toggle;

    I do see that I need to set an if (on this frame, go to this frame) type of condition, rather than the current target, I guess I am just not sure how to code a conditional to recognize which frame it is in to go to the other, rather than using current target?

  • Animated GIF as a rollover?

    I need to have an animated GIF be the rollover image for a button. However, when I insert the 'up' image for the button, and naming the aminated GIF as the "over" part, it doesn't play it as an animation since an animated GIF must be added as an animation, not as an image. Is there a way to do this?

    Yes, Captivate 7. I'm re-working an old Dreamweaver HTML CBT program to bring it up to today's standards using Captivate. I previously had small cartoon hands pointing to the right or left to click to go to the next or previous slide.The pointing hands are static, but on rollover I had an animated gif of the pointing hand moving in the direction it pointed. I'm certain I can figure out a workaround, just wanted to see if there was a built-in way to have an animation be the 'over' state.

  • Animated gif rollover

    i've created an animated gif in fireworks i want to create a
    rollover button within fireworks then export the animated gif with
    rollover into fireworks. i seem to be doing something wrong, i've
    created the rollover button but it isn't showing up in preview in
    fireworks or showing when exported dreamweaver. any idea how to fix
    it? many thanks

    If you're using Dreamweaver, the easiest thing is to do your
    rollovers there. Export your two images from Fireworks, then use
    Dreamweaver's menu:
    Insert > Image Objects > Rollover Image
    It's a snap.
    Fireworks is a graphics program that can export HTML for
    mockups and prototypes. It is not a visual Web development tool.
    When you switch from making graphics to making pages, switch from
    FW to DW.

  • Animated gif on multiple rollover buttons ?

    I want to use animated gifs as MouseOver in rollover buttons.
    Somehow when I put this together the animation only works for the
    first time I do the MouseOver. - the anim gifs are not looping I
    want them to restart every time I have a MouseOut and MouseOver.
    I get this to work if i dont put in preload images as default
    but then I will have problems with delays instead. Do anyone know
    how to solwe this problem in an easy simple to explane kind of way
    Greetings from Sweden !

    I want to use animated gifs as MouseOver in rollover buttons.
    Somehow when I put this together the animation only works for the
    first time I do the MouseOver. - the anim gifs are not looping I
    want them to restart every time I have a MouseOut and MouseOver.
    I get this to work if i dont put in preload images as default
    but then I will have problems with delays instead. Do anyone know
    how to solwe this problem in an easy simple to explane kind of way
    Greetings from Sweden !

  • Loss of rollover behavior with animated GIF

    I am currently working on a webpage design that has lost the ability of the rollover behavior on a page when animated gifs are optimized.  The gif images are on seperate states that cycle forever, but the rollover slices at the top of page will flash slightly when moused over but go back to original state.  The other pages that don't have the animated gif will work properly and hold the image when highlighted.  I have changed the rollover behavior on the master page from simple to swap image and that does not help.  I have also tried to insert the animated gif images as slices and only animate that portion on the page, but I can't get that to work either.   Any tips?
    Thanks

    I found out that it works better to import the animated GIF's through dreamweaver.
    It is now working.

  • Rollover Animation Problem

    So im creating a flash website and for some reason my
    rollover on some of my buttons is acting up.
    If you try the first blue one, it works fine but by the end,
    the purple and yellow, only one star appears! I have no clue whats
    going on! :(
    http://www.tubesjujubes.com/home.html

    You probably need to clean up your star animations. You
    probably notice all of the Tween #'s that are in the library. Those
    are usually generated when something isn't being done right in
    timeline tweens... they get automatically created to fill in
    undefined spaces--though I don't know the true cause of it. Chances
    are you tried using the png version of it without creating it as a
    graphic symbol, which led to all kinds of others of it being
    generated as symbols.
    You should be able to create all of your star animations
    using just one star graphic. Take the png and put it on the stage.
    Right click it and select Convert to Symbol... then select Graphic
    as the symbol type.
    Then take that symbol and replace each instance of what you
    use in the smallStarRollover mc with that symbol, at both ends of
    the tween, sizing and rotating it as needed. Then see if it works
    any better.
    You should probably do the same for the StarRollover mc.
    Once you have those changes, delete all of the Tween #
    graphics that involve the star and run the file. You'll know you
    did it correctly if no new Tweens show up.

  • 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.

Maybe you are looking for