Scribd
Upload
26 views

Department of Information Technology: Learning Objectives. The Students Should Be Able To

This document contains instructions for creating motion tweening and shape tweening animations in Adobe Flash. It describes how to: 1. Create a pencil animation using motion tweening by drawing a pencil, converting it to a symbol, and moving it between keyframes. 2. Create a shape tween animation where a line is drawn and erased between keyframes. 3. Make an interactive button symbol using circles with gradient fills that change color on different button states. 4. Create a rotating color wheel animation using a circle divided into colored sections that spins via motion tweening.

Uploaded by

Cedie Legaspi
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Department of Information Technology: Learning Objectives. The Students Should Be Able To

This document contains instructions for creating motion tweening and shape tweening animations in Adobe Flash. It describes how to: 1. Create a pencil animation using motion tweening by drawing a pencil, converting it to a symbol, and moving it between keyframes. 2. Create a shape tween animation where a line is drawn and erased between keyframes. 3. Make an interactive button symbol using circles with gradient fills that change color on different button states. 4. Create a rotating color wheel animation using a circle divided into colored sections that spins via motion tweening.

Uploaded by

Cedie Legaspi
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

College of Engineering and Information Technology Department of Information Technology NAME: COURSE/YR/SEC: ITEC 60 Multimedia Systems Exercise 8: Motion

n Tweening and Shape Tweening DATE: SCORE:

Learning Objectives. The students should be able to:


To create movement between 1 frame to another frame in timeline. Combine basic flash tools

1- Click Start button > All Programs > Macromedia > Macromedia Flash. 2- Draw a pencil like in the illustration using Line Tool, Paint Bucket Tool and Selection Tool.

3- You will notice that a black circle appears into your time frame in timeline # 1.

4- Rename the layer as Pencil


5- Click the black circle in your time frame in timeline # 1. 6- Click Modify menu > Convert to Symbol or simply press F8 key.

7- The above window will appear, rename the symbol as pencil_mc and select Movie clip option
button as type. Note: _mc is a prefix for the symbol and instance movie clip

8- Click time frame 50 and right click it shown in the picture below, click Insert Keyframe.
9- Click the keyframe or black circle in your time frame in timeline 50. 10- Press arrow key right in your keyboard to change the position of your second pencil represented by the keyframe in timeframe 50.

Prepared by: Noel

A. Digma

11- Go to time frame 1, click the keyframe in time frame 1 and right click it and click Create Classic Tween. See the
picture below.

12- Your time line should look like this.

13- Press Control Enter ( Ctrl + Enter) to test movie.


\Part 2: Shape Tweening 1. Click the second circle in the pencil layer to lock the layer.

lock

2. Go to Insert Menu > Timeline > click Layer.

Prepared by: Noel

A. Digma

3. Double click the new layer and rename it as Ink.

4. Click the blank keyframe in timeframe 1 of ink layer and draw a line on the stage using line tool. See the picture below. (Draw the line below the tilt of the pencil).

5. Click Time frame 50 and press F6 ( F6 is a short cut keystroke to Insert Keyframe)
6. Go to keyframe 1 of ink layer and click it, erase the line until a short line left. See illustration below.

7. Click Time frame 1and go to Properties window, Click Tween and Select Shape or right click keyframe # 1 and
select Create Shape Tween

8. Press Control Enter (ctrl + Enter) to test movie. Save this as Exercise 1_Surname.
After Saving Press Control Enter again Note: it will automatically create an swf file e.g Exercise_Digma.swf send the .swf file to File Transfer Folder in IT302 ---Flash403/EXER1 folder 3 3

Prepared by: Noel

A. Digma

College of Engineering and Information Technology Department of Information Technology NAME: COURSE/YR/SEC: ITEC 60 Multimedia Systems Exercise 9: Creating an Interactive Button DATE: SCORE:

Learning Objectives. The students should be able to:


Use another symbol which is a Button
1- Create circle using Oval Tool, to create a perfect circle press Shift Key while dragging the mouse pointer. 2- Use Paint Bucket Tool to fill the circle youve created earlier. Use gradient gray color in the fill color in tool box.
Point the Paint bucket tool in the left side of the circle.

3- Create a circle again smaller than the first circle and place it in the middle of the first circle, this time point the Paint Bucket tool in the right side of the circle.

4- Create a circle again as your third circle, this time create circle smaller than the second circle. Use Gradient Blue fill color in tool box.

Prepared by: Noel

A. Digma

5- Put the third circle in the middle of the second circle, point the Paint Bucket tool in the left side of the third circle. See picture below.

6- Press control A (ctrl + A) to select all the object and press F8 to convert this object into symbol, this time rename
the symbol as sample_button_btn (_btn is a prefix for button symbol), select Button as Type and click OK.

7- After converting the object into Button symbol you will notice a blue border surrounding the object and a small circle at the middle of the object, it means that the object is already converted into symbol.

Prepared by: Noel

A. Digma

8- Now double click the button youve created to see buttons environment, shown in picture below.

9- Press F6 three times to insert keyframe in Over ,Down, Hit Time frames shown in picture below.

10- Click Over Time Frame and Click the Stage, this time use gradient red to fill the third circle using Paint Bucket tool.

11- Click Down Time Frame and Click the Stage, this time use gradient green to fill the third circle using Paint Bucket tool.

12- Press Control Enter (ctrl + Enter) to test movie. Save this as Exercise2_Surname. Press Control Enter Again
and send it to File Transfer Folder in EXER2
Prepared by: Noel

A. Digma

College of Engineering and Information Technology Department of Information Technology NAME: COURSE/YR/SEC: ITEC 60 Multimedia Systems Exercise 10: Creating a Color Wheel DATE: SCORE:

Learning Objectives. The students should be able to:


Learn about rotating objects through the use of motion tween
1- Create circle using Oval Tool, divide the circle into fractions using line tool same with pizza pie. See picture
below.

2- Fill each fraction using Paint Bucket tool with different colors.

3- After coloring the circle press control A to select All the object and press F8 to convert the object into Movie Clip Symbol, name the symbol as Color_Wheel_mc and click ok.

Prepared by: Noel

A. Digma

4- Right Click Keyframe 1 in Time Frame 1and Click Create Classic Tween, go to properties window , In Rotate
option select CW-Clockwise, see picture below.

5- Go to Time frame 50 and press f6, press control + enter to test movie. 6- Save your work as Exercise3_Surname.

Prepared by: Noel

A. Digma

You might also like