Flash Tutorial: Hello World Button pt. 2

Welcome to another installment of this Flash “Hello World” tutorial. In this tutorial I'm going to show you how to change the color of the button when you click on the button. Its really quite easy, and should only take us a minute to do. Let's get right to it.

I'm going to assume that you've kept your fla file from the previous tutorial. If not here is a copy of mine, feel free to start with that. (Or if your just joining us and have no real starting place.)

So with your “Hello World” button in front of you, its time to make it perform an action. Let's right-click on the text and choose “Edit”. At this point you'll notice that the timeline has changed.

In short, you can modify these to make the button look differently depending on the action involved. So, within this new timeline, right-click on the square under “Down”. (And within the menu click “Insert Blank keyframe”. You should be aware of two things: 1) your black “Hello World” is gone. 2) The layout of the timeline has changed. Well, the answer to one is, you want it blank, that is how you get to have multiple images in one button. And I'm not sure why the timeline changed, but when I find out I'll let you all know.

So within the blank page, go and copy this image just like you did in the previous write up. And now if you test with a little Control + Enter (on windows) you'll see your new button in action. See, I told you this was going to be easy.

If you decide to do the same thing with the “Over” section instead of the “Down” used above, you'll get your button to change when your mouse goes over the button, as opposed to clicking on it.

In the next tutorial, which I believe I will have next week, I'm going to go over how to make the button to go to a website when you click on it.

Flash Tutorial: Hello World Button

In a conversation with a good friend of mine regarding his flash site, he said that he would like to see tutorials created to help someone get started in Flash. And seeing as how I'm a novice writer, as well as novice Flash programmer, I thought that I would take this time to come up with a few simple and easy to follow Flash tutorials to help someone get a little exposure to doing some simple Flash stuff.

Since this tutorial is for the absolute beginner, I will start in the usual fashion with the ever popular “Hello World” program. However, I'm going to deviate from the norm at this point. If you search on the interwebs for “Flash Hello World” you can already find some basic write-ups on how to get a Flash program to regurgitate “Hello World”. However, those write-ups show you how to do this in text. And this is where I see a chance to do something a little different. I'm going to show you how to do a “Hello World” but with a graphic instead. Is this more productive? I have no idea... but feel free to tell me if you think it is or isn't.

Ok, first think you need to do is either download this image file, or create your own image file. Now don't forget where you put it, we're going to need it soon.

So let's start up by getting your Adobe Flash going. And of course once its up click on File-> New. At this point a new window should pop up. Go ahead and make sure that “Flash File (Actionscript 3.0)” is highlighted, if not then highlight it, and click “Ok”.

At this point you should be looking at a fresh new Flash file. AAAHHH just get a wiff of that new file smell. So now lets go and bring up the Library (for CS4 you can just hit CTL+L, don't ask me how to do that in CS3, but if I did have to guess I'd try Window->Library). And let's go and add a new symbol. Right click in that empty space, and choose “New Symbol” in the menu.

After selecting “New Symbol” a new window should pop up resembling this one:

so let's give this new symbol a name. How about “hello_btn”? And also make sure to choose “Button” in the type section. And click “Ok”. And now you should see your new symbol in the Library. Now, while your able to edit this button. Go open up that image file we talked about earlier. And just copy and paste it into that button. Alright, click on the icon called “Scene 1”. And all you have to do at this point is take your mouse, click, and drag the “hello_btn” over to the display area. And just put that right in the center like so (yes, I recognize that the photo isn't the best if the mouse was included it would probably look better and make more sense. But that is what you'll be looking at when you move the icon from the library to the main page):

when you release the mouse, you'll notice that your text is right where you left it. At this point we're done with the labor. Save your file, and hit either Shift+F12 or go File->Publish. And after a little bit of compiling (Chug, Chug, Chug) you'll have you first Flash Hello World program. And you should feel proud of your new accomplishment.

I think the next flash tutorial will be about adding mouse interactions to our button, but I'm not sure yet. We'll just have to see what happens.

If you made it this far down into the article, hopefully you liked it enough to share it with your friends. Thanks if you do, I appreciate it.

Bookmark and Share

Syndicate content