8/8/2019 Flash CS3 Practical 4
1/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Practical 4: Create Buttons and Sounds Create 4 types of flash button, which consists of :
- Standard button
- Roll-over button
- Roll-over button with down stage
- Invisible button
Task 1: Create a Button Symbol
1. Click Insert.
2. Click New Symbol.
3. Type a name for the new button.
4. Select a button behavior type
5. Click OK.
1
8/8/2019 Flash CS3 Practical 4
2/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
6. Create or place the object you want to use as a button on the stage.
7. Click the Over frame.
8. Insert a keyframe into the frame. You can right-click the frame and clickInsert
Keyframe or press F6 to insert a keyframe.
9. Click the Down frame.
10. Insert a keyframe into the frame. You can right-click the frame and clickInsert
Keyframe to insert a keyframe.
2
8/8/2019 Flash CS3 Practical 4
3/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
11. Click the Hit frame.
12. Insert a keyframe into the frame.
13. Click the scene name to return to Movie Edit mode.
14. Open the Library.
3
8/8/2019 Flash CS3 Practical 4
4/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
15. Click and drag the button from the Library to the stage.
Task 2: Create a New Button
1. Start a new button. (See the section Create a Button Symbol- to create a new
symbol.
2. Click the Over frame.
3. Click Insert.
4. Click Timeline.
5. Click Blank KeyFrame. (Right-click the frame and click Insert Blank
KeyFrame)
4
8/8/2019 Flash CS3 Practical 4
5/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
6. Repeat Steps 3-5 to add blank keyframes to the Down and Hit frames.
7. Click the Up frame to select it.
8. Create a new object or place an existing object on the Stage.
9. Click the Over frame to select it.
10. Create a new object or place an existing object on the Stage to use as the active
button state.
5
8/8/2019 Flash CS3 Practical 4
6/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
11. Click the Down frame to select it.
12. Create another new object or place an existing object on the stage
13. Click the Hit frame.
14. Draw a filled shape large enough to encompass the largest object size used in your
button frames.
6
8/8/2019 Flash CS3 Practical 4
7/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
15. ClickUp frame to select it.
16. Press ENTER
Task 3: Create Roll-over Button
1. On the Tool Box, select Oval Tool .Then creates blue oval shape.
7
8/8/2019 Flash CS3 Practical 4
8/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
2. Select Selection Tool on the Tool Box and select the entire blue oval or
double click the oval shape.
3. After select the entire oval, click right button of your mouse and select
Covert to Symbol. Or press F8.
8
8/8/2019 Flash CS3 Practical 4
9/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
4. A Convert to Symboldialog box will appear as shown below:
5. Once you had created the button symbol, the symbol will be storing in the
Library. (Window > Library or [ Ctrl + L ])
9
Change Symbol name
to button.Select Button
1
2
3
Click OK
8/8/2019 Flash CS3 Practical 4
10/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
6. Continue from the button that you had created from the Task 1,
doubleclickon the button symbol ordoubleclickon the icon which look like
this at the content of the Library
7. After double click, four-frame timeline will be appeared as shown below:
10
8/8/2019 Flash CS3 Practical 4
11/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
8. Select the empty frame below Over frame and clickrightclick the mouse button
to select Insert Keyframe or press F6.
9. After insert keyframe, change the button symbol color into green. Then click
to return to the work stage to test for the result.
11
8/8/2019 Flash CS3 Practical 4
12/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Result:
Task 4: Create Roll-over button with down stage
1. Continue from the button that you had created from the Task 3,
doubleclickon the button symbol from the Library ordoubleclickon the icon
which look like this at the content of the Library.
2. Select the empty frame below Down frame and click right click the mouse
button to select Insert Keyframe or press F6.
12
When Hand cursorplace on the
button. The button will turn into
green color.
8/8/2019 Flash CS3 Practical 4
13/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
3. After insert keyframe, change the button symbol color into red. Then click
to return to the work stage to test for the result.
Result:
13
When Hand cursorplace on the
button. The button will turn into
green.
When pressthe button.
The button will turn into
red.
8/8/2019 Flash CS3 Practical 4
14/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Task 5: Invisible button
1. Repeat thefirststep in Task 4.
2. Select the empty frame below Hit frame and click right click the mouse button
to select Insert Keyframe or press F6.
3. After insert keyframe, change the button symbol color into grey and resize the
button by selecting . Then repeat the step 3 inTask 3to test the result.
14
8/8/2019 Flash CS3 Practical 4
15/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Result:
15
Hand cursorwill appear when
touch on the invisible area.
8/8/2019 Flash CS3 Practical 4
16/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Working with sounds
Task 1: Import a Sound Clip
1. Click File2. Click Import
3. Click Import to Library
4. Click the sound file you want to import
5. Click Open
6. Open the Library panel
7. Click the sound file
8. Click the Playbutton.
16
8/8/2019 Flash CS3 Practical 4
17/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Task 2: Import a Sound Clip
1. Assume you have created the movie scene and wanted to add audio as
background sound. Select the audio file in the Library and drag towards the
work stage of your movie scene.
The effect will take place at the keyframe of the scene.
2. To play the whole scene with sound, select Control > Test Movie or
[CTRL + Enter].
17
8/8/2019 Flash CS3 Practical 4
18/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Task 3: Looping sounds.
1. By taking the same example from Task 2, click on the keyframe , refer (1). The
Properties column will appear below the work stage. If properties column does
not appear, select Window > Properties or [CTRL + F3]. In the properties, select
Loop, refer (3). Finally, test the scene by enter [CTRL + Enter].
18
1
2
Enable the sound to
repeat accordingly tocount of numbers
bein set.
Enable the sound
to loop infinite.
3
8/8/2019 Flash CS3 Practical 4
19/19
AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4
Task 4: Button with sounds.
Continue from the Task 5 - Invisible button, page 14 page 15. Now we will learn to
add sound into button.
1. Repeat Task 2 Importing sounds, page 12 page 13.
2. The selected audio files now were stored in the Library.Doubleclickon the
button symbol from the Library ordoubleclickon the icon which look like this
at the content of the Library.
3. Select the keyframe that wanted to add audio. Then drag the audio file towards
the blue button.
4. Repeat step 3 above for next 2 keyframes of Over and Down frame.
5. After insert audio files, click to return to the work stage to test for the
result.
Sound resources from:
http://www.a1freesoundeffects.com/
http://www.wavplanet.com/
http://www.talkingwav.com/