Cogswell Polytechnical College Instructor: Audrey Blumeneau
SWE 120A Flash Programming: ActionScript 1
Lecture Notes 06 - Flash CC:
1. Buttons Creating your own a. Adding Sound Effects b. Animating your buttons
Goals:
1. Creating unique button designs 2. Creating buttons with sound effects 3. Creating button that animate Cogswell Polytechnical College Instructor: Audrey Blumeneau SWE 120A Flash Programming: ActionScript 2
Simple Interactivity - Buttons In order to make our movies interactive with our audience we will want to use Buttons. Flash provides ready made buttons in the Common Libraries but we can easily create our own individual three-state buttons as well as add sounds and animations to them.
Buttons have threestates which can be described as up, over and down state. ! Up state is how you see the button when you arrive at a site. ! Over state is what you see when you roll your cursor over that button. ! Down state is what you see when you press down on your mouse to click on the button. ! Hit State the hotspot area that one clicks on. Good for text or large areas (similar to image mapping in HTML), or for making invisible buttons. Cogswell Polytechnical College Instructor: Audrey Blumeneau SWE 120A Flash Programming: ActionScript 3
Making a basic three-state Button:
What we will create and learn: We will learn how to make a simple button with an up, over and down state by creating a new symbol and, once completed, bring several instances of this new symbol onto the stage.
Steps: 1. Insert > New Symbol and select Button as the symbol behavior. Notice how the symbol editor timeline looks different.
2. Take the Rectangle or Oval Tool and draw a button shape. Make sure to draw over the + as this is the registration mark for the center of this symbol Use the Align Panel (Cmd+K / Ctrl+K) to align the shape to the center of the registration mark (make sure the To stage on the Align Panel is checked when aligning).
3. Press the F6 key twice this puts a KeyFrame in the Over and the Down states on the timeline. You should now have a three-state button all with the same colors! 4. Change the colors in the Over and Down states using the Paint Bucket. 5. Go back to the Scene (Main stage/timeline) 6. From your Library click and drag an instance or two of your button to your stage (Make sure you named and selected a layer for buttons first). 7. To see it work you will Test the Movie. Control > Test Movie (Shortcut key: Cmd + Return / Ctrl + Enter). Now you can mouse over your button and even click on it to see how it looks. It wont go anywhere yet because we have given it any instructions yet. Cogswell Polytechnical College Instructor: Audrey Blumeneau SWE 120A Flash Programming: ActionScript 4
Adding a sound to a Button:
What we will create and learn: Adding a sound to a button makes clicking on a button just a little bit more fun. In this exercise we will use the button we created and return to the symbol editing mode so that we can add a sound to it. Note that you can do this exercise using the clip art buttons in the Common Library as well just bring it to the stage so that it resides in your movies Library.
Steps: (add on to any existing button in your movies library) 1. In your Library (Cmd+L / Ctrl+L), double click on the button icon you wish to edit. Note that you can also get into the symbol editor by double clicking on a button instance on the stage (This is something to be careful about as the stage doesnt change and it can be very confusing are you on the main timeline or inside the symbol editor? Make sure you know where you are!). 2. Make sure you are in the symbol editor and not on the main timeline. It should look like this:
3. In the symbol editor of your button, add a new layer and name it Sound.
4. Add a Blank KeyFrame (F7) to the Down State on the sound layer.
5. If you can do this at home or at work to put the Soundsfx.fla or sfx.fla into the Program folder for Flash then you can open the library from within the Common Library. Otherwise, you will open up the library from File > Import > Open External Library. Pick a sound you would like your button to have. Drag this sound to your current library. You can listen to them by clicking on the arrow in the view box of the library. Cogswell Polytechnical College Instructor: Audrey Blumeneau SWE 120A Flash Programming: ActionScript 5
6. With the Down State KeyFrame selected in the Sound layer, drag and drop an instance of a sound onto the stage (just drop anywhere). Notice that as soon as you drop the sound in, it shows up on the timeline as a little sound wave.
7. Go back to the stage by clicking the Scene icon. 8. Test your button by going to Control > Test Movie (Ctrl>Enter (Win) or Cmd+Return (Mac)).
Add Animation to a button:
1. Create a movie clip with some sort of animation. 2. Open up the button you are designing. 3. Add a new layer and call it Animation. 4. Add a Blank KeyFrame to the Over State. 5. Click and drag from the Library an instance of your animation movie clip to a location on your stage. 6. Go back to the stage and test your movie. When your cursor moves Over your button you should see your animation do its thing! Cogswell Polytechnical College Instructor: Audrey Blumeneau SWE 120A Flash Programming: ActionScript 6
Using the Hit State:
The Hit State is also known as the Invisible State because, whatever you put here - shape or symbol, it will not be seen by the visitor. The Hit State simply defines the area that is Hot or Clickable. It is similar to the concept of an Image Map in HTML.
Here is an example of a Button using text with a Hit State placed on it: