Question about buttons: Animation after "Rolloff"?

#1

Hi all!

Back again with another question for you flash experts :slight_smile: I haven’t really seen this sort of situation in many cases but in certain situations it sure improves navigation flow.
Anyway, heres the deal, I have this button whose UP state is a still graphic, the OVER state is an animation, there is no DOWN state and then there is the HIT state.
My question is how to make an animation, say of the button “deactivating” when people roll out of the button’s hit area. Usually the problem is that once you exit this area the button has no longer any effect and jumps back to the up state that can seem pretty sudden in some cases.
Of course, I could just make the “deactivating” animation for the upstate that way it will always play when user’s exit the hit area but when the buttons load up for the first time, they might catch them playing the deactivation animation which is what I’m trying to avoid.

Has anyone ever had to overcome this or any tips? Many Thanx, you’ve all been really helpful so far!

Carl :beer:

#2

Exactly this I did a while ago, but I cannot fully remember how I did it, even after taking a look at the flash file again.
All I remember is, that I created film objects with the three states of the button in one layer. two frames unaffected, after that the animation sequence of “mouse over”, after that the animation sequence of “mouse out”. I also created labels for these animation sequences for the gotoAndPlay command. And on each of the states’ (unaffected, mouse over, mouse out) last frames I put an stop() command (double click these frames).
From the main movie I somehow took the still versions of the buttons, declared them as buttons and wrote some Action Script - but heck, I cannot figure out, where or on what I did apply these scripts - I can view them in the Film-Explorer and these scripts are somehow applied on these buttons :shrug:

Anyway, here is one sample script:

on(rollOver){
tellTarget(“name_of_the_animated_button_film_object”){
gotoAndPlay(“mouse over”);
}
}
on(rollOut){
tellTarget(“name_of_the_animated_button_film_object”){
gotoAndPlay(“mouse out”);
}
}
on(release){
the desired event after button is clicked
(for example: getURL(“URL”, “target --> _blank or _self”);
}

Hum… I hope this helps :shrug:
Maybe someone can fill the gaps in my explanation, since I don’t fully figure this out…

#3

Hmm, by labels do you mean the name that you gave the Symbol when you made it either a Button or MovieClip? See what I really don’t understand is the whole hierarchy of the animation… I wish Flash would have some sort of window that shows a tree of all the elements of the comp… :shrug:
I’ll try to have a look around some more regarding this, and anymore help is very appreciated, thanks!

Carl :beer:

#4

The film explorer is the thing you’re looking for. It is hidden in the same window like the Action Script stuff, just another tab of it. Labels… heck… I believe are created by giving sequences a name. I’m sorry, haven’t done that for at least over a year…

#5

Ah, yes, of course! The movie explorer. Had totally forgotten about it, I actually stubled across it yesterday briefly and just thought it was like the library, listing all the components and things like that. I had no idea it did so in a hierarchal manner. Thats great, thanks a lot!

Carl :beer:

#6

Hum… you know what?
It’s hard to explain something even though we’re using the same application - mine is in German, the menus hav different names, so the functions… :annoyed: There should be something like a sticky thread which visually explains the original English version with all its functions to get an idea of the original names.

Worst thing to me is After Effects. I have some troubles doing tutorials on that, because I installed the German version. Next time better in English… :hmm:

#7

this has to be quick because i’m almost out the door, i can give you a brief overview of the code but no actual code at the moment.

basically what you can do is create an animation that is say 15 frames long, where the “in” animated state of the button is from 1-7 and the “out” state is from 9-15, with frame 8 being your static in-between frame. check the current frame when the user rolls off, then subtract that from the total frames (or something to that effect).

for example, if you’re on frame 5 and roll out, totalFrames (15) - currentFrame (5) = 10 so the movie jumps to frame 10, which is the exact same image as frame 5 but its animating out instead of animating in. make sense? you’ll have to do some checking to figure out the syntax but it does work. hope that helps.

chris

#8

sorry off topic here, but fig were you the guy who used to roam the were-here.com boards ??? If so what happened to the site ???

#9

Sorry fig, I don’t mean to be rude or something like that, but I think your approach is a little bit less flexible and also more complicated. Labeling the frames which have to be played, would be way easier.
Anyway, Carl, I could send you the flash file I’ve done. It’s the menu of my company’s former web site and the buttons are in German, but I don’t think that this could distract you from the used technique… :slight_smile:

#10

Ok, you can either send it by email "carl@kaischaller.com" or send it to me through an IM at "dj_uvedoble@hotmail.com".
Thanks a lot!

Carl :beer:

#11

Okay! I sent it to your email address :beer:

#12

samartin, yup, that would be me, i was a mod at WH. to be honest i don’t know what happened, they’d been down for a bit and they were back up and then poof no more WH. sorry i can’t be more help.

tommi, no offense taken but i’m not quite follow why its complicated, its just a single mc and a line or two of code instead of having several layered things to mess with. can you elaborate? i’ll throw together an FLA and let you guys check it out to see what i mean.

chris

#13

and here’s that quick example if you want to download and check it out.

chris

#14

That sure looks interesting also. Thanks fig! I guess theres no difference between the two methods you and Tommi proposed as the results seem to be the same. I will however study them both carefully as I’m sure that I’ll find something useful or learn something form both cases :thumbsup:

Anyhoo, Fig, if you don’t mind I’d like to say what I think the actions are doing just so you can possibly correct me if I’m wrong about whats going on in the scene…
After creating the movieclip with all its stop frames and actions, etc… you tell it to play when mouse rolls over it, and it basically stops at the frame containing the stop action, which is where the animated OVER state finishes. Then, for RollOver action you’re telling the clip to coninue on playing the rest of the clip, although as theres a Stop(); action on the current frame, you tell it to play all frames except the one you’re on: this.gotoAndPlay(_totalframes-_currentframe);

Thats what I’ve understood anyway… Thanks for the help and I hope it hasn’t been too much trouble!

Carl :beer:

#15

Originally posted by fig
[B]samartin, yup, that would be me, i was a mod at WH. to be honest i don’t know what happened, they’d been down for a bit and they were back up and then poof no more WH. sorry i can’t be more help.

tommi, no offense taken but i’m not quite follow why its complicated, its just a single mc and a line or two of code instead of having several layered things to mess with. can you elaborate? i’ll throw together an FLA and let you guys check it out to see what i mean.

chris [/B]

:slight_smile: Well, that was the programmer in me who wants everything to be dynamic and changeable and stuff… As far as I understood you, you’re addressing the frames directly. So after changing the animation in length you also would have to change the frame references in the script. I hope I didn’t get that wrong… the only thing I’d make different is labeling the sequences I want to address…

#16

Well, I’d like to share with you all the result of what I’ve learned from thi thread :slight_smile: In the end, I used a mix of both Fig and Tommi’s code to make a new way of handling this situation.
The scene is 100k and its 4 buttons each representing the elements of HipHop culture, take a look here. Its for a website thats in the works right now

Again thanks to everyone for sharing their knowledge!

Carl :beer:

EDIT/PS: you might notice the 4th logo sends the white ring off frame, I’m gonna fix that, don’t worry :wink: Btw, I’m deciding on the button styles now, in the long run, they’ll all have the same text style.

#17

ah, gotcha tommi, and actually that’s not the case (i may have misstated what i meant). the actual code is something to the effect of (on the button/mc):

on(rollOver) {
	this.play();
}
on(rollOut, dragOut) {
	this.gotoAndPlay(_totalframes-_currentframe);
}

so it actually is totally portable, the only thing you’re required to do is keep a central frame around which your animation is mirrored (for animating the clip in and out at the same points). whatever the case, glad to help carl and glad you got it figured out :thumbsup:

chris

#18

Aaah I see… :smiley:

#19

To change topic now, does anyone here know the code to opening up Outlook from flash with the appropriate window displaying a certain email address? I know this possible as I’ve seen pages that use this function but what about the code?

Carl :beer:

#20

if you mean just popping a new e-mail window that’ll mail to a certain address try

on (release) {
    getURL("mailto:me@here.com");
    }

should work, tho outlook won’t pop a new window if you’re testing it in flash, you’ll need to test it in a browser window to see that.

chris