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
-
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 againPerhaps 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.
-
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 thanksIf 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?
ThanksI found out that it works better to import the animated GIF's through dreamweaver.
It is now working. -
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.htmlYou 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
-
I recently upgraded to a G5 and Logic Pro 8. My previous system was a Power Mac 7200 with Logic Platinum 3.5.3. I can not open the old song files unless they are first saved in Logic 6 or 7. Where do I get a dongle for Logic 7?
-
Reverse Engineering Legacy ETL processes
How easy is it to use ODI to reverse engineer legacy DW processes (Tables and PL/SQL). We're looking to carry out all new DW development into a standardised ODI configuration, and wondered if it would also be easy enough to add in legacy processes us
-
+ sign before column name - what does it mean?
Hi all, I found a query in the software package I work on today that I don't quite understand. Below is that basic form of the query: SELECT * FROM table1 t1, table2 t2 WHERE + t1.id = t2.id; I expected this query to fail, but it did not. What does t
-
I made a Java program I can compile and run. the questions and outputs are displayed with JOptionPane.showInput/showMessageDialog, so I'm not using System.out.prinln. How can I put this in a website. Is it possible to do something like : <java src="t
-
Why am I getting Warning: 5004?
Why am I getting "Warning: 5004: The file 'C:\Program Files\Adobe\Adobe Flash CC 2014\Common\Configuration\ActionScript 3.0\FP9\playerglobal.swc', which is required for typechecking ActionScript 3.0, could not be found. You may need to reinstall Flas