How to Add Buttons to Flash Movies
One of the main reasons Flash technology is so popular is it provides a good level of interactivity. Flash movies with interactive elements allow people to engage with them and enjoy a rich, multimedia experience. Creating interactivity within Flash movies using buttons is easy, even if you have no programming experience. You will need to use small amounts of ActionScript code to implement your buttons, but depending on the purpose of your Flash movie, this is often straightforward.
Other People Are Reading
Instructions
-
-
1
Create your Flash movie. Open Flash and create a new document. Save your document and give it an appropriate name. Get the movie ready to add your buttons. Create the other elements you need in your document before adding the buttons. If necessary, sketch a draft of what you want the movie to look like before you actually start adding the elements, because this can often save time in the long run.
-
2
Consider what buttons your movie is going to need, and what they are going to do, i.e., what is going to happen when someone presses them. This may seem obvious, but taking a few moments to think about the purpose of your buttons before you actually start creating them allows you to move forward in a focused way. If your movie is going to contain a number of different interactive elements, create each one in turn rather than all at once, because you will be able to identify bugs much more easily this way.
-
-
3
Create your buttons. You can create buttons in Flash from scratch, or you can use the ready-made buttons that Flash provides. If you want to choose a ready-made button, select "Window" > "Common Libraries" > "Buttons" from the menu, then choose a button you like and drag it onto the white stage area. If you want to create your own button, draw the shape you want using the tools. Select the shape and press "F8" or choose "Modify" > "Convert to Symbol." Give your button symbol a name and click the "Button" radio button. The button that is on your stage area is known as an instance of the symbol, the generic form of which is listed in the library. Give your button instance a name by selecting it and entering text in the "<instance name>" box in the "Properties" panel, using the format: "buttonName_btn".
-
4
Edit the frames of your button. Double-click your button symbol to enter its interior frames. You will see that there are four frames: "Up," "Over," "Down" and "Hit." "Up" is your button's default state, "Over" is when the user hovers the mouse over it, "Down" when it is pressed and "Hit" defines the click-able area. Select each frame in turn by clicking it and press "F6" or choose "Insert" > "Timeline" > "Keyframe." With each frame selected, alter the button appearance if you want to make it look slightly different in each of these states. If you chose a predefined button, these frames will already have been completed.
-
5
Add code for your buttons and test their functions. Go back to the main scene for your movie by clicking the back button to exit editing for your button instance. Insert a new layer in your movie by clicking the little white square in the "Timeline" area, and naming the new layer "code" or something similar. Click the new layer and open the "Actions" panel by clicking it or pressing "F9." Enter some code for your button:
//refer to the button using your instance name
buttonName_btn.onRelease=function() { trace("clicked " + this); };
This is just a simple example that writes out the details of which button has been clicked--you should enter code that reflects the purpose of your button. Test your movie and make sure the button does what you need it to.
-
1
Tips & Warnings
Stick with the ActionScript conventions for naming your symbols, using the "_btn" suffix for your buttons. This helps when you start to write code, because the Flash authoring environment will prompt you with appropriate suggestions as you type.
Be careful when you add buttons within other symbols such as Movie Clips. Sometimes this can affect the interaction within a Flash movie, causing it to behave in unexpected ways.
References
Resources
- Photo Credit herz button 2 image by askaja from Fotolia.com
