Button Tutorial B
Well, here's the second Flash CS3 tutorial for those of you interested (probably Lenny more than anyone else
). It's posted early because I realised that people only have a thirty-day trial of Flash, so I should get these lessons out of the way every Tuesday and Friday. After you've gone through my tutorials, you'll have time to try some others out online, if you want.Today you will create this (or thereabouts): Flash Button
When you see the opening screen of Flash, click Create New: Flash file (Actionscript 2.0). You'll see a white starting page. For every one of my tutorials, use this method.
1) On the left in Flash you'll see a selection toolbar that's called Tools. These tools are used for creating 2D shapes and freehand lines and such. Press the one near the middle called Rectangle Tool (R), since you want to make a button shape. You'll see the bottom panel in your screen, called "Properties", change and give you options.
2) You need to make a medium-sized box on the page. This will be your button. The "stroke color" in the Properties panel determines the colour of the border around your 2D shape; the "fill color" determines the colour of the shape. The other boxes change the width and style of your border, and the options under these are not needed (they add rounded corners to your shape). Pick a combination of colours, any you like. I've chosen a black border and a dark red fill, with a border of 4.
3) Now select the "Selection Tool" at the very top of your toolbar panel. This stops you accidentally creating more 2D shapes if you press the mouse down on the page.
4) We want to turn this shape into a button now, and in Flash there's a simple way to do this. Right-click on the shape you've drawn, then select Convert to Symbol.... This then pops up a dialogue box that gives you three options and a place to write the soon-to-be Symbol's name. Select Button and call it mybutton, since all Symbols must[/b] have a name. Press OK.
5) Now, that previous name was just a name so Flash knows what objects you've got in your movie. We still need to give the button an instance name, which is the name actionscript will recognise when you point it to an object. In the properties panel you should see a place to type in an instance name (if you don't see the place, select the button, then you'll see it). Call it but1
6) Okay, now we've got a named button, but it doesn't do much. We need to customise it and add in its various states. A state is the name for a button's look at various points. For example, when you hover over a button, it will change to the "Over" state. When you press a button, it will change to its "Down" state. And when you click a button, it will change into its "Hit" state. Each of these states can be customised, with the button looking darker as you hover over it, or sunk-in as you press it, or black as you let go after hitting it.
To customise your button, double-click it. You'll see the Symbol Editor window appear. You're now "inside" the button and can change each of its four states.
7) In the Timeline panel at the top you should see four names: Up, Over, Down, Hit. The Up state is how the button looks when you first open a web page. We want to copy the page with the 2D shape on it, because we need the button in the same place in every "state", or else the button will look like its jumping around when you go near it or press it, if you don't have each 2D shape in exactly the same place.
So, you see the black dot under the word "Up" in our Timeline? That black dot means there's something set for the button's "Up" state -- it's the 2D shape you drew. Notice, however, that the three columns beside this black dot are empty. This is because your button doesn't yet have an image for those states.
Right-click on where the black dot for the "Over" state should be, then select Convert to Keyframe. This will copy your first keyframe -- that of the 2D shape you drew -- into the "Over state for the button. Repeat this for the last two states, Down and Hit. You'll then see all four states have a black dot in them. Good.
8) Now press on whichever state you want to customise -- say, the Over state (in other words, press the black dot under the word "Over"). You'll see your 2D shape on the page. Now press that shape and customise its colour using the Properties panel that changes at the bottom of your screen.
9) Once you've finished, press on each button state in turn and customise the colour of its 2D shape. A different colour for each one is best while you're learning.
If you think you've finished and would like to preview your Flash document, save your document in a new folder, then press Ctrl/apple and Enter on your keyboard. If all has gone well, you should see your button working perfectly, with different colours as you press the button, hover over it, hit it, or leave it alone.
10) Finally, close the preview window and exit back out of the Symbol Editor by pressing the text link in the middle left of your screen, entitled "Scene 1".
Now you're created your button, well done!
To add the actionscript that makes Flash go to a webpage upon pressing the button, select the button by pressing the Selection Tool and the clicking the button you made. Press F9 to bring up the actionscript panel. Write this in by hand instead of cutting-and-pasting:
Code:
[font=Courier New]
on (press) {
getURL("http://www.google.com", "_blank");
}
[/font]You won't be able to preview the button working and to google.com if you preview your Flash file (new security measures in Flash). You'll have to upload it to the web before the code will work.
Explanation of code: You are telling Flash that when you do the action in brackets in line 1 (press the button that this actionscript is on), go to the URL (website) specified in the brackets on the line underneath. The "_blank" tells Flash to open the URL in a new page. If you wanted the link to open in the same page, you'd just write getURL("http://www.google.com");
Again, publish your Flash file and upload it to the web to see the link working (details in Tutorial A).
And that's the end of Tutorial B. Well done!
Tip: There are usually two or more ways of doing coding in Flash. One, as you've seen, is to add the actionscript to the button/movie clip/object itself as we've done; the other is to add the code in the main Timeline and point it at the appropriate object. As you may imagine, the code changes and you'll need to give the object a name so actionscript can recognise it.
If you want to make the button work using this other method, you'd add this code to keyframe 1 of your Timeline instead of on the button itself:
Code:
[font=Courier New]
but1.onPress = function(){
getURL("http://www.google.com", "_blank");
} [/font]Explanation of code: Since the actionscript is written in the Timeline, not on the button, we need to point Flash to the correct object (after all, you might have several buttons on the page, and how would Flash recognise each one without a name?). So, the "but1" line tells Flash, "When But1 is pressed, perform the function listed on the next line after the {". And that next line, if you notice, is exactly the same as the one we used in the other version of this code.
Finally, we insert the closing }
Congratulations! Again, to see the button working with this version of code, publish your Flash file and upload it to the web. Done correctly, the Flash movie will look no different to the last button, and it will still go to google when pressed.
Version 2 of this button: index
If you've done everything correctly and uploaded your Flash files into your web folder called TutorialB, you can use whichever link is appropriate to view your Flash movie:
http://www.chrons.741.com/highlander/tutorialB/
http://www.chrons.741.com/leish/tutorialB/
http://www.chrons.741.com/lenny/tutorialB/
http://www.chrons.741.com/momoka/tutorialB/
http://www.chrons.741.com/overread/tutorialB/
http://www.chrons.741.com/sephiroth/tutorialB/
http://www.chrons.741.com/wybren/tutorialB/
If anyone needs any help, ask in this thread and I'll offer advice. And if anyone's still stuck on Tutorial A, ask in that thread and I'll aid you there.
Last edited:
