Flash Tools By: Noel A.

Digma - arrow selection tool - sub selection tool - free transform tool - lasso tool - pen tool - Text tool - line tool - move tool - line color Parts of Flash IDE - rectangular tool - pencil tool - brush tool - ink bottle tool - paint bucket tool - eye dropper tool - eraser tool - magnifying tool - fill color

Menu Bar

Time line

- blank key frame (white circle in frame 1) - key frame (black circle that represents object on stage)

- alignment panel

ITEC 70 Computer Graphics: Noel A. Digma

Page 1

- color and swatches panel

- library panel Properties panel

Action Panel

CISM 111 Computer Elective 2 Name:__________________________ ITEC 70 Computer Graphics: Noel A. Digma Page 2

Course Year & Section:_____________ Activity No. 1 and 2 in Flash By Noel A. Digma Motion Tweening and Shape Tweening Objectives: To create movement between 1 frame to another frame in timeline. 1. Click Start button > All Programs > Macromedia > Macromedia Flash Mx 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. ITEC 70 Computer Graphics: Noel A. Digma Page 3

11.Go to time frame 1, click the keyframe in time frame 1 and right click it and click Create Motion 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.

2. Go to Insert Menu > Timeline > Layer

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).

ITEC 70 Computer Graphics: Noel A. Digma

Page 4

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.

8. Press Control Enter (ctrl + Enter) to test movie.

ITEC 70 Computer Graphics: Noel A. Digma

Page 5

Name: ________________________ Course Year and Section__________ By Noel A. Digma Activity # 3 Creating Interactive 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.

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.

ITEC 70 Computer Graphics: Noel A. Digma

Page 6

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.

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

ITEC 70 Computer Graphics: Noel A. Digma

Page 7

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. ITEC 70 Computer Graphics: Noel A. Digma Page 8

Name: ________________________ Course Year and Section__________ By Noel A. Digma Activity # 4 Creating Color Wheel (Rotating Object) 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.

4. Click Keyframe 1 in Time Frame 1 and go to properties window, Click Tween and Select Motion, In Rotate option select CW-Clockwise, see picture below. ITEC 70 Computer Graphics: Noel A. Digma Page 9

5.

Go to Time frame 50 and press f6, press control + enter to test movie.

ITEC 70 Computer Graphics: Noel A. Digma

Page 10