Button tutorial

TUTORIAL #1: Make a triangle button that will change shape on mouse hover-over and mouse click.

Step 1: I will be using Action script 2.0 for all of my tutorials, unless otherwise indicated. Please select Action Script 2.0 now to create a new Flash file.

Step 2: For this step, any shape will suffice, but I’ve decided to make a triangle.

Creating a triangle sounds simple…right? Well, in Flash, “triangle” is not something you’ll find located on the toolbar. I’ve learned one trick that makes it pretty easy to create though.

First, select the polystar tool on the toolbar...

Step 3: Now select “Options” in the Properties panel.

(The Properties panel allows you to change the fill and stroke color of your object, along with some other controls you won’t find on the toolbar)

Step 4: The “Number of Sides” category is set to “5” by default. Since we want a triangle, change this number to “3” and then select “OK.”

Now, I changed my stroke color to black and my fill color to white. You can follow along or just leave your stroke and fill color alone (once again, the stroke and fill colors can be changed on the Properties panel or the toolbar).

Step 5: Draw a triangle…woohoo!

FYI: If you want to make the triangle point to the right (as shown above) hold the left mouse button and the shift key simultaneously, and drag the mouse to the Right. Alternatively, this works for Up, Down and Left also.

Step 6: Now it’s time to make the triangle more dynamic. Right now it’s just a shape on the screen. We’re going to make it a button.

Go ahead and with the Select tool, double-click the center of the triangle.

Step 7: Click on the Convert to Symbol option on the menu bar under Modify to change the shape into a symbol.

Step 8: If you want, you can name your Symbol. Also, select Button and then hit OK.

FYI: For more on the different types of buttons, check out this link SmartWebby.com.

Step 9: You should now notice a blue box around the image. Double-click on the image again. This time a new window appears. You are now in “symbol-editing mode.”

The first frame (Up) shows the button in an unaltered state.

Step 10: Add a Key Frame (F6) to the frame labeled “Over”.

Step 11: Select the triangle again, this time only clicking once—you should notice the border is not selected.

Step 12: Change the color of the object while the “Over” frame is still selected .

(this frame represents your mouse hover-over effect)

Step 13: Hit the F6 key on you keyboard one more time to create another keyframe for the frame labeled “Down.”

Step 14: Now repeat the process in Step 12, by selecting the object with the Select tool and using the paint bucket or color controls to change the color of the object for this frame.

(this frame represents your mouse click effect)

I will use the color tool to change the variation of my color. If you wish to do the same, open the Color panel by going to the Window tab on the Menu Bar. The Color panel simply gives you more control over colors.

Step 15: Your done! Hit CTRL + ENTER to test your movie!

You should see the triangle change when your mouse hovers over it, and also when you click on the object

Visualize it...you control the way your text moves

How to make text move the way you want it to move:

Lately, I've been giving Flash alot of thought. For example, it is now 2:30 am, I can't sleep, and I'm writing about Flash. I'm consumed with everything Flash. While I've been working on creating tutorials in Flash, I have also been helping to create a game in Flash as part of a class project. Perhaps you think I should be an expert by now but you see...Flash is a complicated program!

Flash is complicated simply because you can do so much with Flash. I think, however, looking at the whole potential of Flash can be a bit self defeating though. Consider the ways in which you will use Flash...what techniques are you most interested in developing? Exploit your interests and don't worry about mastering Flash. And now, to my point...when you can't find help in a manual sometimes it pays to consult yourself (unless actionscript is involved).

In the instance of animating text, I think this technique works well.

Every time I want to do something new, the first thing I try to do is look for a tutorial online or ask someone if they can help. Of course, that's not a bad thing, but there's also another dimension to Flash that doesn't always require a textbook or a tutorial. When I can't find an instruction booklet, sometimes I have to get creative. If you look around on some of these tutorials on the Web, you'll see examples of remarkable creativity. Now, granted, you have to start somewhere. But here's an example of a situation when directions are not always necessary:
I want to make my text simulate a "bounce effect" and I can't find a tutorial on how to do this. I begin thinking, "Well, shifting text on a timeline causes it to move...but, how can I make it bounce?" I visualize the act of bouncing. By mimiking the act of bouncing in my head, I am able to understand the act of a bouncing object.

1) I want the text to have an initial contact with another steady object.
2) I want the text to simulate caving in and then retracting outwards like so:
] bou n c e
]bou n c e
]bounce
]b o u nce
] b o unce
3) this would be followed by a series of smaller chain reactions, simulating a resting of the bounce.

Making animated text have a desired effect is all about timing mechanizms (use of timeline), and the shifting and spacing of words and letters.

Finally, if you can visualize the process, the effect or the emotion you want to convey, many times you can use creative skills to acheive your goal.

What am I working on?

My tutorials will become more involved as my knowledge of developing them evolves. For now I am working on a tutorial that teaches how to "Make a button that will change shape on mouse hover-over and mouse click." I'll update this post shortly. I am still learning the ins-and-outs of Blogger.com, a prerequisite for providing Flash tutorials...please...be patient! Thanks

Welcome to my Flash Blog!

This is my first true blog page, so I may be a bit behind the curve when it comes to blogging. But, I intend to learn...as well as teach. The purpose of my blog page is to provide a dialogue for prospective Flash-ologists, or those attempting to learn Flash. My name is Matt Crist. Welcome to my humble blog!