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 - IMAGE LOST 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.

IMAGE LOST

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

IMAGE LOST

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):

IMAGE LOST

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.

Comments !

social