Subject: DMA - Digital Media- 2015
Class 10 - More Animation & Video in Flash
Today's Class - Interaction
Today we will look at how to use the Button symbol to create mouse-activated interaction. You can use a Rollover or a Click to trigger the content on the Stage to change, and the good thing about the Button symbol is that the different "States" of the Button are built in and require no code to function.
We are going to construct a simple interaction using the Kaleidoscope animation from Class 08, but we will put it in a button so that it won't "play" until we roll the mouse over it.
Here is an example:
The steps to creating this interactive are as follows:
1. Open your kaleidoscope Flash file from Class 8 or 9. If you don't have it, you can download my example from the Class notes
2. Save the file as a new file: File > Save As and give the file a new name such as "interactive.fla" so we don't overwrite the original kaleidoscope file.
3. Remove all instances of the Kaleidoscope MovieClip from the stage. We will create a button symbol in the Library and then put it on the stage when complete.
4. Open your Kaleidoscope MovieClip so that you can see the first frame. We will now take a screen capture of this so that we can use it as the "static" state of our button. To capture a defined screen area on the Mac hold down the following keys: Command-Shift-4 (on the Mac) - you should now see the cursor change to cross-hairs and you can click and drag an area of your screen which will automatically be saved as a screen capture PNG image file on your desktop. Or on Windows, press the Print Screen button and paste the image into a new blank image in Photoshop.
5. Open that PNG file in Photoshop and edit it so that the background is transparent. Crop away any unnecessary pixels around the kaleidoscope to make the image as small as possible. Save the file as a PNG-24 with transparency and in Flash, go to File>Import to Library to import it into Flash's Library.
6. We will now create a new Button symbol in the Library called "Button1". Once created, we should have it opened so that we can see the 4-state timeline inside it. Place a Keyframe on the first frame, and then place the image of your Kaleidoscope on that first frame. Now create Keyframes on all the other frames so that the image appears on each frame.
7. Replace the image on Frame 2 of the Button1 symbol with the Kaleidoscope MovieClip. Frame 2 is the "Rollover" state for the button, Frame 3 is the "Click" state for the button and Frame 4 is the "Hit-state" of the button. So by placing the kaleidoscope MovieClip on Frame 2, a mouse rollover will trigger the kaleidoscope to play.
8. To make sure our "Hit-state" is accurate, we need to replace the bitmap image (which is square), with a circle that is the right size to create an active area for the rollover to work within. The circle can be any colour because it is invisible - it just needs to be the right size in the right position.
9. Keep saving your work as you go. Once your Button1 symbol is complete, you can go back to your main timeline and drag one or more instances of Button1 onto the Stage from the Library.
10. Save and test your movie. You may need to tweak your button so that the content on the various frames lines up. You can also apply blends to the Button symbols once they are on the main timeline.
11. Experiment more with this exercise - see what effects and interactions you can create.
Work on Assessment Task 2 which is due in Class 11.
Homework / Readings
Experiment with Flash if you can & work on Task 2 which is due next week.