Flash CS3 Practical 4

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
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 click Insert
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 click Insert
Keyframe to insert a keyframe.
2
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
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
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
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
15. Click Up 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
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
4. A ‘Convert to Symbol’ dialog box will appear as shown below:
2
Change Symbol name Click ‘OK’
to button.
Select ‘Button’
1
5. Once you had created the button symbol, the symbol will be storing in the
‘Library’. (Window > Library or [ Ctrl + L ] )
9
6. Continue from the button that you had created from the ‘Task 1’,
double click on the button symbol or double click on 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. Select the empty frame below ‘Over’ frame and click right click 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
Result:

When Hand cursor place on
the button. The button will
turn into green color.
Task 4: Create Roll-over button with down stage
1. Continue from the button that you had created from the ‘Task 3’,
double click on the button symbol from the ‘Library ’or double click on 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
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:
 
When Hand cursor place on When press the button.
the button. The button will The button will turn
turn into green. into red.
13
Task 5: Invisible button
1. Repeat the first step 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 in ‘Task 3’ to test the result.
14
Result:

Hand cursor will appear
when touch on the invisible
area.
15
Working with sounds

Task 1: Import a Sound Clip
1. Click File
2. 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 Play button.
16
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
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].
Enable the sound Enable the sound to

to loop infinite. repeat accordingly to
count of numbers
being set.
18
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’. Double click on the
button symbol from the ‘Library ’or double click on 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/
19

Flash CS3 Practical 4

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flash CS3 Practical 4

Uploaded by

Copyright:

Available Formats

AACS1193 WEB DESIGN AND DEVELOPMENT Tutorial 4

Practical 4: Create Buttons and Sounds

Task 1: Create a Button Symbol

3. Type a name for the new button.

7. Click the Over frame.

9. Click the Down frame.

11. Click the Hit frame.

13. Click the scene name to return to Movie Edit mode.

Task 2: Create a New Button

9. Click the Over frame to select it.

11. Click the Down frame to select it.

15. Click Up frame to select it.

Task 3: Create Roll-over Button

4. A ‘Convert to Symbol’ dialog box will appear as shown below:

7. After double click, “four-frame timeline” will be appeared as shown below:

Task 4: Create Roll-over button with down stage

Task 5: Invisible button

1. Repeat the first step in ‘Task 4.

Working with sounds

8. Click the Play button.

Task 2: Import a Sound Clip

The effect will take place at the keyframe of the scene.

Task 3: Looping sounds.

Enable the sound Enable the sound to

Task 4: Button with sounds.

1. Repeat ‘Task 2 – Importing sounds’, page 12 – page 13.

Sound resources from:

You might also like