swfchan: Smooth Button Tutorial.swf (info)

Text

by technophobe

smooth button tutorial

in this tutorial you shall learn to create buttons like these:

text

First, check the .swf
Notice that when you hover over the button, the animation starts,
when you take the mouse away from the button it reverses, even
when you take the mouse away half way through the animation!
In trying to get this effect you may have tried to put the movieclip
with the reversed animation in the UP frame of the button and the
movieclip with the forward animation in the OVER frame. But this
will not be smooth. It looks like this:
Notice how the animation works if you hover over it all the way and
then let go. However it looks terrible if you hover over it and then
quickly take the mouse away. it also reverses when you open the file.

So this may seem like an impossible effect to achieve, but it really
isn’t that hard. Here’s how:
1.Create a symbol (F8) and call it button. Set the behaviour to
movieclip.

2.Put your animation in the movieclip (the actual animation, not a
movieclip with the animation. The frames of the animation need to
be seen in the clip you created in step1).

3.(Still in the movieclip) draw a shape (on a new layer) that you
want to be the area that users will hover over (the hit area). Hit F8
and turn it into a button, and make the object in it invisible, because
we don't want users to see it, its only a hit area.

4.Go back to the movieclip and insert a new symbol on a new layer. <sbr />Make it a movieclip and give it the instance name ‘controller’ without <sbr />the ‘’s. make it invisible.5.In the new movieclip called controller make three Keyframes. In <sbr />the first Keyframe open the actions bar and enter this: stop();in the second frame enter this: _parent.prevFrame();and in the third frame enter this: gotoAndPlay(2);

6.Then open the actions panel for the button that you created in <sbr />step3 and type this:on (rollOver, dragOver) {play();controller.gotoAndStop(1);}on (rollOut, dragOut) {controller.gotoAndPlay(2);}

7. in the first and last frame of the movieclip you created in step1 put <sbr />the stop();action.

you are done!!!
explanation:
what you have done is created the animation, made it play when you
roll over the clip, and made a controller clip that makes the playhead
effectively reverse when you roll off the movieclip.
thanks for watching! now use your imagination to think up new
things you could do with this!
thanks again,
Techno
This Tutorial was made exlusively for www.albinoblacksheep.com and it is illegal to
use it anywhere else.

ActionScript [AS1/AS2]

Frame 1
	stop();
Frame 2
	stop();
Frame 3
	stop();
Frame 4
	stop();
Frame 5
	stop();
Frame 6
	stop();
Frame 7
	stop();
Frame 8
	stop();
Frame 9
	stop();
Frame 10
	stop();
Instance of Symbol 22 MovieClip in Symbol 23 MovieClip Frame 1
onClipEvent (enterFrame) {
	point = new Object();
	point.x = _xmouse;
	point.y = _ymouse;
	updateAfterEvent();
	var diffX = (point.x - this._x);
	var diffY = (point.y - this._y);
	var r = Math.sqrt((diffX * diffX) + (diffY * diffY));
	if (r > 15) {
		r = 15;
	}
	this.black._x = r * Math.cos(Math.atan2(diffY, diffX));
	this.black._y = r * Math.sin(Math.atan2(diffY, diffX));
}
Symbol 31 Button
on (rollOver, dragOver) {
	play();
	controller.gotoAndStop(1);
}
on (rollOut, dragOut) {
	controller.gotoAndPlay(2);
}
on (release) {
	_root.nextFrame();
}
Symbol 32 MovieClip Frame 1
	stop();
Symbol 32 MovieClip Frame 2
	_parent.prevFrame();
Symbol 32 MovieClip Frame 3
	gotoAndPlay (2);
Symbol 36 MovieClip Frame 1
	stop();
Symbol 36 MovieClip Frame 26
	stop();
Symbol 42 MovieClip Frame 1
	stop();
Symbol 42 MovieClip Frame 26
	stop();
Symbol 44 Button
on (rollOver, dragOver) {
	play();
	controller.gotoAndStop(1);
}
on (rollOut, dragOut) {
	controller.gotoAndPlay(2);
}
on (release) {
	_root.prevFrame();
}
Symbol 47 MovieClip Frame 1
	stop();
Symbol 47 MovieClip Frame 26
	stop();
Symbol 53 Button
on (rollOver, dragOver) {
	play();
	controller.gotoAndStop(1);
}
on (rollOut, dragOut) {
	controller.gotoAndPlay(2);
}
Symbol 57 MovieClip Frame 1
	stop();
Symbol 57 MovieClip Frame 26
	stop();
Symbol 61 Button
on (rollOver, dragOver) {
	play();
	controller.gotoAndStop(1);
}
on (rollOut, dragOut) {
	controller.gotoAndPlay(2);
}
Symbol 63 MovieClip Frame 1
	stop();
Symbol 63 MovieClip Frame 26
	stop();
Symbol 69 MovieClip Frame 1
	stop();
Symbol 69 MovieClip Frame 26
	stop();
Symbol 75 MovieClip Frame 1
	stop();
Symbol 75 MovieClip Frame 26
	stop();
Symbol 81 MovieClip Frame 26
	stop();
Symbol 85 MovieClip Frame 26
	stop();

Library Items

Symbol 1 Bitmap	Used by:2 37 70 95
Symbol 2 Graphic	Uses:1	Used by:Timeline
Symbol 3 Font	Used by:4 5 6 7 8 9 10 11 12 13 14 15 16 17 48
Symbol 4 Text	Uses:3	Used by:Timeline
Symbol 5 Text	Uses:3	Used by:Timeline
Symbol 6 Text	Uses:3	Used by:Timeline
Symbol 7 Text	Uses:3	Used by:Timeline
Symbol 8 Text	Uses:3	Used by:Timeline
Symbol 9 Text	Uses:3	Used by:Timeline
Symbol 10 Text	Uses:3	Used by:Timeline
Symbol 11 Text	Uses:3	Used by:Timeline
Symbol 12 Text	Uses:3	Used by:Timeline
Symbol 13 Text	Uses:3	Used by:Timeline
Symbol 14 Text	Uses:3	Used by:Timeline
Symbol 15 Text	Uses:3	Used by:Timeline
Symbol 16 Text	Uses:3	Used by:Timeline
Symbol 17 Text	Uses:3	Used by:Timeline
Symbol 18 Graphic	Used by:23
Symbol 19 Graphic	Used by:23
Symbol 20 Graphic	Used by:21
Symbol 21 MovieClip	Uses:20	Used by:22
Symbol 22 MovieClip	Uses:21	Used by:23
Symbol 23 MovieClip	Uses:18 19 22	Used by:24
Symbol 24 MovieClip	Uses:23	Used by:Timeline
Symbol 25 Graphic	Used by:36 42 47 75 105
Symbol 26 ShapeTweening	Used by:36
Symbol 27 Graphic	Used by:28
Symbol 28 MovieClip	Uses:27	Used by:36 42 47 105
Symbol 29 Graphic	Used by:36 47
Symbol 30 Graphic	Used by:31 32 44 53 61 85 86
Symbol 31 Button	Uses:30	Used by:36 42 75
Symbol 32 MovieClip	Uses:30	Used by:36 42 47 57 63 69 75
Symbol 33 ShapeTweening	Used by:36
Symbol 34 ShapeTweening	Used by:36
Symbol 35 Graphic	Used by:36 42 47 75 85
Symbol 36 MovieClip	Uses:25 26 28 29 31 32 33 34 35	Used by:Timeline
Symbol 37 Graphic	Uses:1	Used by:Timeline
Symbol 38 ShapeTweening	Used by:42
Symbol 39 Graphic	Used by:42 63 69 75 86
Symbol 40 ShapeTweening	Used by:42
Symbol 41 ShapeTweening	Used by:42
Symbol 42 MovieClip	Uses:25 38 28 39 31 32 40 41 35	Used by:Timeline
Symbol 43 ShapeTweening	Used by:47
Symbol 44 Button	Uses:30	Used by:47
Symbol 45 ShapeTweening	Used by:47
Symbol 46 ShapeTweening	Used by:47
Symbol 47 MovieClip	Uses:25 43 28 29 44 32 45 46 35	Used by:Timeline
Symbol 48 Text	Uses:3	Used by:Timeline
Symbol 49 Font	Used by:50 71 87 90 96 100 101 102 106
Symbol 50 Text	Uses:49	Used by:Timeline
Symbol 51 ShapeTweening	Used by:57
Symbol 52 ShapeTweening	Used by:57
Symbol 53 Button	Uses:30	Used by:57
Symbol 54 Font	Used by:55 67
Symbol 55 Text	Uses:54	Used by:57 63
Symbol 56 Graphic	Used by:57
Symbol 57 MovieClip	Uses:51 52 53 32 55 56	Used by:Timeline
Symbol 58 ShapeTweening	Used by:63
Symbol 59 ShapeTweening	Used by:63
Symbol 60 ShapeTweening	Used by:63
Symbol 61 Button	Uses:30	Used by:63 69
Symbol 62 Graphic	Used by:63
Symbol 63 MovieClip	Uses:58 59 60 39 61 32 55 62	Used by:Timeline
Symbol 64 ShapeTweening	Used by:69
Symbol 65 ShapeTweening	Used by:69
Symbol 66 ShapeTweening	Used by:69
Symbol 67 Text	Uses:54	Used by:69
Symbol 68 Graphic	Used by:69
Symbol 69 MovieClip	Uses:64 65 66 39 61 32 67 68	Used by:Timeline
Symbol 70 Graphic	Uses:1	Used by:Timeline
Symbol 71 Text	Uses:49	Used by:Timeline
Symbol 72 ShapeTweening	Used by:75
Symbol 73 ShapeTweening	Used by:75
Symbol 74 ShapeTweening	Used by:75
Symbol 75 MovieClip	Uses:25 72 39 31 32 73 74 35	Used by:Timeline
Symbol 76 Graphic	Used by:81
Symbol 77 ShapeTweening	Used by:81
Symbol 78 ShapeTweening	Used by:81
Symbol 79 ShapeTweening	Used by:81
Symbol 80 Graphic	Used by:81
Symbol 81 MovieClip	Uses:76 77 78 79 80	Used by:86
Symbol 82 ShapeTweening	Used by:85 86
Symbol 83 ShapeTweening	Used by:85
Symbol 84 ShapeTweening	Used by:85
Symbol 85 MovieClip	Uses:30 82 83 84 35	Used by:86
Symbol 86 Button	Uses:39 81 85 30 82	Used by:Timeline
Symbol 87 Text	Uses:49	Used by:Timeline
Symbol 88 Bitmap	Used by:89
Symbol 89 Graphic	Uses:88	Used by:Timeline
Symbol 90 Text	Uses:49	Used by:Timeline
Symbol 91 Bitmap	Used by:92
Symbol 92 Graphic	Uses:91	Used by:Timeline
Symbol 93 Bitmap	Used by:94
Symbol 94 Graphic	Uses:93	Used by:Timeline
Symbol 95 Graphic	Uses:1	Used by:Timeline
Symbol 96 Text	Uses:49	Used by:Timeline
Symbol 97 Bitmap	Used by:99
Symbol 98 Bitmap	Used by:99
Symbol 99 Graphic	Uses:97 98	Used by:Timeline
Symbol 100 EditableText	Uses:49	Used by:Timeline
Symbol 101 EditableText	Uses:49	Used by:Timeline
Symbol 102 EditableText	Uses:49	Used by:Timeline
Symbol 103 Graphic	Used by:105
Symbol 104 Graphic	Used by:105
Symbol 105 MovieClip	Uses:25 103 28 104	Used by:Timeline
Symbol 106 Text	Uses:49	Used by:Timeline
Symbol 107 Bitmap	Used by:108
Symbol 108 Graphic	Uses:107	Used by:Timeline

Instance Names

"black"	Symbol 22 MovieClip Frame 1	Symbol 21 MovieClip
"controller"	Symbol 36 MovieClip Frame 1	Symbol 32 MovieClip
"controller"	Symbol 42 MovieClip Frame 1	Symbol 32 MovieClip
"controller"	Symbol 47 MovieClip Frame 1	Symbol 32 MovieClip
"controller"	Symbol 57 MovieClip Frame 1	Symbol 32 MovieClip
"controller"	Symbol 63 MovieClip Frame 1	Symbol 32 MovieClip
"controller"	Symbol 69 MovieClip Frame 1	Symbol 32 MovieClip
"controller"	Symbol 75 MovieClip Frame 1	Symbol 32 MovieClip

Special Tags

Protect (24)

Timeline Frame 1

0 bytes ""