swfchan: How to Make Buttons.swf (info)

Text

made for Albinoblacksheep.com

Legal stuff:
All of the characters
in this tutorial
are copyrited to
the author, Thor.

The first step of making a button is to draw out the button.

...something as simple as a circle
(with a funky gradient)

...or a maze for use in a
steady-hand game.
(be sure to use the eraser
for the course)

Now highlight the object and select modify > convert to symbol
(or hit f8)

note: you can also make a button
from scratch just by hitting [ctrl]+[f8]

Double click the newly converted symbol, or right click it
and select "edit"

This is what should be in the timeline. Add 3 keyframes
so that it looks like this down here:

The button has 4 stages:

The mouse pointer is not on top or not
pressing down; the default state

OVER

DOWN

HIT

The mouse pointer is hovering on top of the button

The mouse button is clicked while on top of the
button

The hit area, or the area that the mouse button can
be pressed down upon. Don't worry about the visual
for this too much; you cant' see it anyways.

Keep in mind that you don't have to change the appearance of
the button in each state (espcially for any sort of steady hand
maze), but sometimes it does make the button look better.

Over

Down

Hit

Pat yourself on the back; you just made a button.

Now, let's add some simple coding.

Go to the actions window of the button

Now I know all you people with something other than
Flash 5 will be shouting "OH MAH GAD THE INTARFASE
IZ DIFFURUNT!".

But that's not the point. It's the fundamentals that count.
And those fundamentals that count the most and remain
the same, reguardless of your version of Flash
Now back to the lesson

The coding you see right here is telling the Flash:
"When the mouse button is released over this button,
change the go and play frame 1."

Pretty simple, huh?

However, you can change the coding around to suit your liking:

on ([mouse action])
{ gotoAndPlay ("[Scene]", [frame number]);
}

And there are a boat load of othercommands you can
put inside of it; just look around the sidebar to see what
you can drag in. Here are some examples:

on (release) {
getURL ("[url goes here]");
}

on (release) {
stop ();
}

Bamf. You've just made a button WITH coding on it!

...now, let's get

FANCY

We're going to put an animation on a button now.
Draw something, anything, then convert it to a button.

I invoke the help of my character Ball Man for this part.

Alright, now instead of just changing colors for the instance
for each state, we can place a movie clip within the button.

For this one, the movie clip is inside the "over" state.

Now, you'd think that, if you want an animation played on the
button AFTER the button is pressed, you'd put another movie clip
on the "down" and "hit" state.

The reason why it won't continue playing after you press it
is because Flash doesn't have the right command to do so.

Flash is being told:
"Play this movie clip when the button is in the down or hit state".
Like I said before, you can't see the hit state, and the mouse button
has to be down and kept down
in order for it to continually be in the hit state.

So how can we do it?

Get your button from before that has its
movie clip on the "over" state.

now hit [F8] and convert the button into a movie clip.

Now inside this movie clip, have the button occupy its own
keyframe. Make a new blank layer and add the "stop ()" action
in the layer itself.

Go back over the keyframe with the button and hit [F6].
This should generate another keyframe on the timeline
with the button in it.

Now, go to frame 2 and select the button.

Break it apart by hitting [CTRL]+[B]

Now, for every part you want to animate,
put it on a different layer.

This guy
is from one
of my older,
never completed
games called
"Easter Egg Hunt!"

Messy messy messy....

Go back to frame 1 and highlight the button and go to its actions

Drag the "Go To" action inside and change it around so that
it looks like this:

You'd want the "press" option instead of the
"release" option because you want this
to imitate the "down" state of the button.
Now go to the last frame and add the "stop ()"
command if you don't want the movie clip to
loop back to the beginning.

and Bam. You've got your own fully animated button.

So why can't you do this on the main timeline itself?
Why bother going through the entire process of making
movie clips?

Well, by all means, if you're only going to have
one thing happening, then go ahead and make this whole thing
on the timeline.

However, let's say you're making a shooting game. Putting
this in an MC is much easier, as you can drag it out from the
library into the main work area without having to worry
about messing with the sequence of another one.

And it's a heckuva lot neater.

So there you go. That's the lesson.

Made by Thor, Clod of Blunders
(a.k.a. Jerry Chan)

Thanks to
third-core.org
and
Albinoblacksheep.com

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();
Frame 11
	stop();
Frame 12
	stop();
Frame 13
	stop();
Frame 14
	stop();
Frame 15
	stop();
Frame 16
	stop();
Frame 17
	stop();
Frame 18
	stop();
Frame 19
	stop();
Frame 20
	stop();
Frame 21
	stop();
Frame 22
	stop();
Frame 23
	stop();
Frame 24
	stop();
Frame 25
	stop();
Frame 26
	stop();
Frame 27
	gotoAndPlay (27);
Frame 107
	gotoAndPlay (27);
Symbol 6 Button
on (release) {
	gotoAndStop (2);
}
Symbol 14 Button
on (release) {
	gotoAndStop (3);
}
Symbol 19 Button
on (release) {
	gotoAndStop (1);
}
Symbol 30 Button
on (release) {
	gotoAndStop (4);
}
Symbol 31 Button
on (release) {
	gotoAndStop (2);
}
Symbol 38 Button
on (release) {
	gotoAndStop (5);
}
Symbol 39 Button
on (release) {
	gotoAndStop (3);
}
Symbol 49 Button
on (release) {
	gotoAndStop (6);
}
Symbol 50 Button
on (release) {
	gotoAndStop (4);
}
Symbol 58 Button
on (release) {
	gotoAndStop (7);
}
Symbol 59 Button
on (release) {
	gotoAndStop (5);
}
Symbol 62 Button
on (release) {
	gotoAndStop (8);
}
Symbol 63 Button
on (release) {
	gotoAndStop (6);
}
Symbol 67 Button
on (release) {
	gotoAndStop (7);
}
Symbol 68 Button
on (release) {
	gotoAndStop (9);
}
Symbol 69 Button
on (release) {
	gotoAndPlay (9);
}
Symbol 72 Button
on (release) {
	gotoAndStop (8);
}
Symbol 73 Button
on (release) {
	gotoAndStop (10);
}
Symbol 75 Button
on (release) {
	gotoAndStop (11);
}
Symbol 76 Button
on (release) {
	gotoAndStop (9);
}
Symbol 77 Button
on (release) {
	gotoAndStop (12);
}
Symbol 78 Button
on (release) {
	gotoAndStop (10);
}
Symbol 83 Button
on (release) {
	gotoAndStop (13);
}
Symbol 84 Button
on (release) {
	gotoAndStop (11);
}
Symbol 87 Button
on (release) {
	gotoAndStop (14);
}
Symbol 88 Button
on (release) {
	gotoAndStop (12);
}
Symbol 93 Button
on (release) {
	gotoAndStop (15);
}
Symbol 94 Button
on (release) {
	gotoAndStop (13);
}
Symbol 99 Button
on (release) {
	gotoAndStop (16);
}
Symbol 100 Button
on (release) {
	gotoAndStop (14);
}
Symbol 103 Button
on (release) {
	gotoAndStop (17);
}
Symbol 111 Button
on (release) {
	gotoAndStop (15);
}
Symbol 121 Button
on (release) {
	gotoAndStop (18);
}
Symbol 122 Button
on (release) {
	gotoAndStop (16);
}
Symbol 126 Button
on (release) {
	gotoAndStop (19);
}
Symbol 127 Button
on (release) {
	gotoAndStop (17);
}
Symbol 139 Button
on (release) {
	gotoAndStop (20);
}
Symbol 140 Button
on (release) {
	gotoAndStop (18);
}
Symbol 145 Button
on (release) {
	gotoAndStop (21);
}
Symbol 146 Button
on (release) {
	gotoAndStop (19);
}
Symbol 152 Button
on (release) {
	gotoAndStop (22);
}
Symbol 153 Button
on (release) {
	gotoAndStop (20);
}
Symbol 154 Button
on (release) {
	gotoAndStop (23);
}
Symbol 159 Button
on (release) {
	gotoAndStop (21);
}
Symbol 170 Button
on (press) {
	gotoAndPlay (2);
}
Symbol 179 MovieClip Frame 1
	stop();
Symbol 181 Button
on (release) {
	gotoAndStop (24);
}
Symbol 183 Button
on (release) {
	gotoAndStop (22);
}
Symbol 186 Button
on (release) {
	gotoAndStop (25);
}
Symbol 190 Button
on (release) {
	gotoAndStop (23);
}
Symbol 191 Button
on (release) {
	gotoAndStop (26);
}
Symbol 194 Button
on (release) {
	gotoAndStop (24);
}
Symbol 195 Button
on (release) {
	gotoAndStop (27);
}
Symbol 199 Button
on (release) {
	gotoAndStop (25);
}
Symbol 202 Button
on (release) {
	gotoAndStop (26);
}

Library Items

Symbol 1 Graphic	Used by:Timeline
Symbol 2 Graphic	Used by:6 14 30 38 49 58 62 68 73 75 77 83 87 93 99 103 121 126 139 145 152 154 181 186 191 195
Symbol 3 Graphic	Used by:6 14 30 38 49 58 62 68 73 75 77 83 87 93 99 103 121 126 139 145 152 154 181 186 191 195
Symbol 4 Graphic	Used by:6 14 30 38 49 58 62 68 73 75 77 83 87 93 99 103 121 126 139 145 152 154 181 186 191 195
Symbol 5 Graphic	Used by:6 14 30 38 49 58 62 68 73 75 77 83 87 93 99 103 121 126 139 145 152 154 181 186 191 195
Symbol 6 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 7 Font	Used by:8 9 11 12 13 22 23 36 37 40 41 42 43 44 45 46 47 48 52 54 55 56 57 60 61 66 74 79 81 82 85 86 90 91 92 95 96 101 102 120 125 130 142 144 148 149 151 157 158 163 164 165 180 182 187 188 189 192 193 196 197 198 200 201 203
Symbol 8 Text	Uses:7	Used by:Timeline
Symbol 9 Text	Uses:7	Used by:Timeline
Symbol 10 Graphic	Used by:Timeline
Symbol 11 Text	Uses:7	Used by:Timeline
Symbol 12 Text	Uses:7	Used by:Timeline
Symbol 13 Text	Uses:7	Used by:Timeline
Symbol 14 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 15 Graphic	Used by:19 31 39 50 59 63 67 72 76 78 84 88 94 100 111 122 127 140 146 153 159 183 190 194 199 202
Symbol 16 Graphic	Used by:19 31 39 50 59 63 67 72 76 78 84 88 94 100 111 122 127 140 146 153 159 183 190 194 199 202
Symbol 17 Graphic	Used by:19 31 39 50 59 63 67 72 76 78 84 88 94 100 111 122 127 140 146 153 159 183 190 194 199 202
Symbol 18 Graphic	Used by:19 31 39 50 59 63 67 72 76 78 84 88 94 100 111 122 127 140 146 153 159 183 190 194 199 202
Symbol 19 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 20 Bitmap	Used by:21
Symbol 21 Graphic	Uses:20	Used by:Timeline
Symbol 22 Text	Uses:7	Used by:Timeline
Symbol 23 Text	Uses:7	Used by:Timeline
Symbol 24 Graphic	Used by:Timeline
Symbol 25 Graphic	Used by:29 69
Symbol 26 Graphic	Used by:29 69
Symbol 27 Graphic	Used by:29 69
Symbol 28 Graphic	Used by:29 69
Symbol 29 Button	Uses:25 26 27 28	Used by:Timeline
Symbol 30 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 31 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 32 Graphic	Used by:Timeline
Symbol 33 Bitmap	Used by:35
Symbol 34 Bitmap	Used by:35
Symbol 35 Graphic	Uses:33 34	Used by:Timeline
Symbol 36 Text	Uses:7	Used by:Timeline
Symbol 37 Text	Uses:7	Used by:Timeline
Symbol 38 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 39 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 40 Text	Uses:7	Used by:Timeline
Symbol 41 Text	Uses:7	Used by:Timeline
Symbol 42 Text	Uses:7	Used by:Timeline
Symbol 43 Text	Uses:7	Used by:Timeline
Symbol 44 Text	Uses:7	Used by:Timeline
Symbol 45 Text	Uses:7	Used by:Timeline
Symbol 46 Text	Uses:7	Used by:Timeline
Symbol 47 Text	Uses:7	Used by:Timeline
Symbol 48 Text	Uses:7	Used by:Timeline
Symbol 49 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 50 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 51 Graphic	Used by:Timeline
Symbol 52 Text	Uses:7	Used by:Timeline
Symbol 53 Graphic	Used by:Timeline
Symbol 54 Text	Uses:7	Used by:Timeline
Symbol 55 Text	Uses:7	Used by:Timeline
Symbol 56 Text	Uses:7	Used by:Timeline
Symbol 57 Text	Uses:7	Used by:Timeline
Symbol 58 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 59 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 60 Text	Uses:7	Used by:Timeline
Symbol 61 Text	Uses:7	Used by:Timeline
Symbol 62 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 63 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 64 Bitmap	Used by:65
Symbol 65 Graphic	Uses:64	Used by:Timeline
Symbol 66 Text	Uses:7	Used by:Timeline
Symbol 67 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 68 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 69 Button	Uses:25 26 27 28	Used by:Timeline
Symbol 70 Bitmap	Used by:71
Symbol 71 Graphic	Uses:70	Used by:Timeline
Symbol 72 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 73 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 74 Text	Uses:7	Used by:Timeline
Symbol 75 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 76 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 77 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 78 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 79 Text	Uses:7	Used by:Timeline
Symbol 80 Font	Used by:81
Symbol 81 Text	Uses:7 80	Used by:Timeline
Symbol 82 Text	Uses:7	Used by:Timeline
Symbol 83 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 84 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 85 Text	Uses:7	Used by:Timeline
Symbol 86 Text	Uses:7	Used by:Timeline
Symbol 87 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 88 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 89 Graphic	Used by:Timeline
Symbol 90 Text	Uses:7	Used by:Timeline
Symbol 91 Text	Uses:7	Used by:Timeline
Symbol 92 Text	Uses:7	Used by:Timeline
Symbol 93 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 94 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 95 Text	Uses:7	Used by:Timeline
Symbol 96 Text	Uses:7	Used by:Timeline
Symbol 97 Font	Used by:98
Symbol 98 Text	Uses:97	Used by:Timeline
Symbol 99 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 100 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 101 Text	Uses:7	Used by:Timeline
Symbol 102 Text	Uses:7	Used by:Timeline
Symbol 103 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 104 Graphic	Used by:110
Symbol 105 Graphic	Used by:110
Symbol 106 Graphic	Used by:110 116
Symbol 107 Graphic	Used by:110 116
Symbol 108 Graphic	Used by:110
Symbol 109 Graphic	Used by:110
Symbol 110 Button	Uses:104 105 106 107 108 109	Used by:Timeline
Symbol 111 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 112 Graphic	Used by:Timeline
Symbol 113 Graphic	Used by:119
Symbol 114 Graphic	Used by:119 135
Symbol 115 Graphic	Used by:116
Symbol 116 MovieClip	Uses:115 106 107	Used by:119 135 Timeline
Symbol 117 Graphic	Used by:119
Symbol 118 Graphic	Used by:119
Symbol 119 Button	Uses:113 114 116 117 118	Used by:Timeline
Symbol 120 Text	Uses:7	Used by:Timeline
Symbol 121 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 122 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 123 Bitmap	Used by:124 150
Symbol 124 Graphic	Uses:123	Used by:Timeline
Symbol 125 Text	Uses:7	Used by:Timeline
Symbol 126 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 127 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 128 Graphic	Used by:Timeline
Symbol 129 Graphic	Used by:Timeline
Symbol 130 Text	Uses:7	Used by:Timeline
Symbol 131 Graphic	Used by:135
Symbol 132 Graphic	Used by:133 135
Symbol 133 MovieClip	Uses:132	Used by:135 Timeline
Symbol 134 Graphic	Used by:135
Symbol 135 Button	Uses:131 114 116 133 134 132	Used by:Timeline
Symbol 136 Bitmap	Used by:137 141
Symbol 137 Graphic	Uses:136	Used by:Timeline
Symbol 138 Graphic	Used by:Timeline
Symbol 139 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 140 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 141 Graphic	Uses:136	Used by:Timeline
Symbol 142 Text	Uses:7	Used by:Timeline
Symbol 143 Font	Used by:144
Symbol 144 Text	Uses:7 143	Used by:Timeline
Symbol 145 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 146 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 147 Graphic	Used by:Timeline
Symbol 148 Text	Uses:7	Used by:Timeline
Symbol 149 Text	Uses:7	Used by:Timeline
Symbol 150 Graphic	Uses:123	Used by:Timeline
Symbol 151 Text	Uses:7	Used by:Timeline
Symbol 152 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 153 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 154 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 155 Bitmap	Used by:156
Symbol 156 Graphic	Uses:155	Used by:Timeline
Symbol 157 Text	Uses:7	Used by:Timeline
Symbol 158 Text	Uses:7	Used by:Timeline
Symbol 159 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 160 Graphic	Used by:Timeline
Symbol 161 Bitmap	Used by:162
Symbol 162 Graphic	Uses:161	Used by:Timeline
Symbol 163 Text	Uses:7	Used by:Timeline
Symbol 164 Text	Uses:7	Used by:Timeline
Symbol 165 Text	Uses:7	Used by:Timeline
Symbol 166 Graphic	Used by:170
Symbol 167 Graphic	Used by:169
Symbol 168 Graphic	Used by:169
Symbol 169 MovieClip	Uses:167 168	Used by:170
Symbol 170 Button	Uses:166 169	Used by:179
Symbol 171 Graphic	Used by:179
Symbol 172 Graphic	Used by:179
Symbol 173 Graphic	Used by:179
Symbol 174 Graphic	Used by:179
Symbol 175 Graphic	Used by:179
Symbol 176 Graphic	Used by:179
Symbol 177 Graphic	Used by:179
Symbol 178 Graphic	Used by:179
Symbol 179 MovieClip	Uses:170 171 172 173 174 175 176 177 178	Used by:Timeline
Symbol 180 Text	Uses:7	Used by:Timeline
Symbol 181 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 182 Text	Uses:7	Used by:Timeline
Symbol 183 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 184 Bitmap	Used by:185
Symbol 185 Graphic	Uses:184	Used by:Timeline
Symbol 186 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 187 Text	Uses:7	Used by:Timeline
Symbol 188 Text	Uses:7	Used by:Timeline
Symbol 189 Text	Uses:7	Used by:Timeline
Symbol 190 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 191 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 192 Text	Uses:7	Used by:Timeline
Symbol 193 Text	Uses:7	Used by:Timeline
Symbol 194 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 195 Button	Uses:2 3 4 5	Used by:Timeline
Symbol 196 Text	Uses:7	Used by:Timeline
Symbol 197 Text	Uses:7	Used by:Timeline
Symbol 198 Text	Uses:7	Used by:Timeline
Symbol 199 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 200 Text	Uses:7	Used by:Timeline
Symbol 201 Text	Uses:7	Used by:Timeline
Symbol 202 Button	Uses:15 16 17 18	Used by:Timeline
Symbol 203 Text	Uses:7	Used by:Timeline
Symbol 204 Graphic	Used by:Timeline