flash cs3 practical 4

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


2/19


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


3/19


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


4/19


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


5/19


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


6/19


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


7/19


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/19


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


9/19


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


10/19


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


11/19


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


12/19


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.


13/19


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.


14/19


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


15/19


Result:

15

Hand cursorwill appear when

touch on the invisible area.


16/19


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


17/19


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


18/19


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


19/19


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/

flash cs3 practical 4

Documents