Flash CS6

From Digi Wiki
Jump to: navigation, search

Overview

Location: Applications > Adobe FlashCS6 > Flash CS6 or icon from dock. - fig.1

fig.1



Start New File

1) Choose the File menu and select New. - fig.2

fig.2

2) The New Document window will open allowing for you to choose the type of document you wish to open. A description of each type of document is listed on the right side of the window. - fig.3

fig.3

Toolbar

fig.4

See Figure 4, top to bottom (shortcuts in parenthesis)


  • 1) Selection Tool (V)
  • 2) Subselection Tool (A)
  • 3) Free transform tool (Q)
  • 4) 3D Rotation Tool W
  • 5) Lasso Tool (L)
  • 6) Pen Tool (P)
  • 7) Text Tool (T)
  • 8) Line Tool (N)
  • 9) Rectangle Tool (R)
  • 10) Pencil Tool (Y)
  • 11) Brush Tool (B)
  • 12) Deco Tool (U)
  • 13) Bone Tool (X)
  • 14) Paint Bucket Tool (K)
  • 15) Eye Dropper Tool (I)
  • 16) Eraser Tool (E)
  • 17) Hand Tool (H)
  • 18) Zoom (M, Z)
  • 19) Stroke Color
  • 20) Fill Color
  • 21) Black and White/ Swap Color
  • 22) Swap Color
  • 23) Snap to Objects (J)
  • 24) Smooth
  • 25) Straighten






Interface

1) The timeline is located at the bottom of the screen. - fig.5

fig.5

2) All of the tools, and properties are located on the right. - fig.6

Fig 6

3) Frame rate determines the number of frames your movie plays per second. NUMBER OF FRAMES divided by FRAME RATE (12 OR 24) equals TIME:

  • If you have 24 frames with a frame rate of 12 then it is 2 seconds long.
  • If you have 36 frames with a frame rate of 12 then it is 3 seconds long.
  • If you have 48 frames with a frame rate of 24 then it is 2 seconds long.
  • If you have 72 frames with a frame rate of 24 then it is 3 seconds long.

4) The Stage is where you create compositions. - fig.7

fig.7

Fills and Strokes

1) The circle, square, and pen tool have both fill and stroke. If you want to select the stroke of the object you must click the outline of the object. - fig.8

fig.8

2) For selecting the fill click on the inside. - fig.9

fig.9

3) To select both fill and stroke, you can double click on the object. - fig.10

fig.10

4) You will notice that in each one of these examples, you will see a gray dotted fill on which ever you select. The line and pencil tool only have strokes. The paintbrush tool has only a fill.

The Library

The library is where you can import images into flash. It is also there to see the graphics, movie clips, and buttons that will be talked about later in the tutorial. It is located in the same window as properties, the user just needs to click the Library tab. - fig.11

fig.11

Timeline

1) The timeline holds layers that you can use to animate objects. - fig.12

fig.12

2) To insert a layer for another animated object, you can use the button at the bottom left corner. - fig.13

fig.13

3) To add a new layer folder, click the button to the right of the motion guide button. - fig.14

fig.14

4) To delete a layer click the trash can to the right of the insert layer folder button. - fig.15

fig.15

5) To show or hide a layer, click the eye.

6) If you want to lock a layer so you can work on other layers without editing the layer you want locked, you can click the lock button next to the eye. - fig.16

fig.16

7) The unfilled square next to the right of the lock will give the shapes within the layers only outlines.

Importing

1) You can choose whether you want to import it to the stage or the library when you pull down the File menu and select Import. - fig.17

fig.17

Note: It is best to import to the library, so if you delete the object on the stage and you want to put it back onto the stage, you can pull it from the library instead of importing it again onto the stage. However, if you are just importing one item and want to insert it quickly into the project, importing it to the stage is very helpful. With importing multiple items in a group, it is best to import to the library.

The Keyframe

The Keyframe is used to signify a change in motion. To create a keyframe, go to the Insert pull down menu and select Timeline > Keyframe. - fig.18

fig.18

The keyframe looks like this in the Timeline. - fig.19

fig.19

Tweens

There are three different tween options that you can choose (motion, button and movie clip). For any kind of motion tweening, you need to convert to a Graphic. - fig.20-21

fig.20
fig.21


Classic Tweens

1) First convert to graphic.

2) Make a keyframe in the timeline where you want the animation to stop. You can adjust it later by clicking the dot on the bottom of the keyframe. - fig.22

fig.22

3) Go to the first frame in the timeline and click it. Position the object where you want it to start. Then click the keyframe and move the object where you want it to stop moving. - fig.23

fig.23

4) Then click on the first frame and then hold down shift and click on the keyframe. This will highlight all the frames. - fig.24

fig.24

5) You then need to make a motion tween between these. To do this you can go to the Insert pull down menu and select Classic Tween. - fig.25

fig.25

6) You will then notice that the frames that you added a tween to are filled with a blue background and an arrow. - fig.26

fig.26

Shape Tweens

1) Create an object. This time, you do not have to convert it to a graphic because it is a shape tween. - fig.27

fig.27

2) Make a keyframe. Click the keyframe and then distort the object by using the Subselect tool. - fig.28, 29

fig.28
fig.29

3) Then select all frames in the layer and choose Insert >Shape Tween. - fig.30

fig. 30

4) Then you will see that the frames have been highlighted green with an arrow. - fig.31

fig.31

Note: You can use a shape tween to transform one object into another. For example you can transform a shape into a letter.

1) First, create your object. - fig.32

fig.32

2) Create a keyframe in the place where you want it to go. Click on the keyframe and delete your object. - fig.33

fig.33

3) Replace it with a letter, word(s), or another shape. In this case, we are using a “G.” - fig.34

fig.34

4) Break text apart by selecting the text and going to the Modify pull down menu. Under that, you will find Break Apart. - fig.35

fig.35

5) Select all frames and make a shape tween by using Insert > Shape Tween. - fig.36


fig. 36
fig. 36b

6) You will then see the frames highlighted with green and an arrow. - fig.37


fig. 37
fig. 37b

Color Tween

1) Color Tweens make objects change colors. First create your object. - fig.38


fig. 38

2) Make a keyframe. - fig.39


fig. 39

3) Select the keyframe and change the color of the object. - fig.40


fig. 40

4) Select all frames.

5) Choose shape tween from Insert at the top.

6) You will see the green highlighted frames with an arrow to show you that the tween is active. - fig.41

fig. 41

Size Tweens

1) To scale an object, use a size tween. First, create a shape. - fig.42

fig.42


2) If you are using text, you need to break the text apart. Separate the text twice. During the first separation the text will break into letters, and after the second it will be broken into shapes. Flash will indicate that the text has become an object because gray dots highlighting the object. - fig. 43, 44, 45

fig.43
fig.44
fig.45

3) With the keyframe selected, resize the object. - fig.46

fig.46


4) Select all the frames and choose Insert > Shape Tween.

5) The frames should now be green with an arrow. - fig.47

fig.47

The Motion Guide

1) A motion guide applied to a shape will make the shape move across the screen following a path that you create. First, create a shape. - fig.48

fig.48

2) Convert that shape into a symbol. - fig.49, 50

fig. 49
fig.50

3) Make a keyframe on the Timeline. - fig.51

fig.51

4) Right click the layer and choose Add Classic Motion Guide. - fig.52

fig.52

5) A Layer called Guide: Layer 1 will appear above the first layer. - fig.53

fig.53

6) Make sure that layer is chosen and select the pencil tool. - fig.54

fig. 54

7) Draw the path you want your shape to follow. - fig.55

fig. 55

8) Now, choose the first frame and drag your shape to the place where you want the animation to begin, and it should snap in place. - fig.56, 57

fig. 56

[[Image:flash_fig59.png|center|frame|fig. 57]

9) Choose the last frame and do the same. - fig.58, 59

fig. 58
fig. 59

10) Then, lastly right click anywhere on the frames and choose Create Classic Tween. - fig.60

fig. 60

Action Script

fig.61

A. Script pane: Type your code.

B. Panel menu: Actions Panel.

C. Actions toolbox: Insert an ActionScript element into the Script pane by double-clicking or dragging it directly into the Script pane. The Actions toolbox separates items into categories, and also provides an alphabetical index.

D. Script navigator: Where you are located in the timeline. Easily clickable.

Stop Frame Animation

LINK: http://www.youtube.com/watch?v=Yx1mJbMU5Mc

Convert to Symbol: Graphic, Button, and Movie Clip

1) Select the object on stage being used as a button.

2) Right-click the object, and Convert to Symbol.

3) Change the Type to either Graphic, Button, or Movie Clip and give it a name.

4) Select the graphic/button/movie clip on stage and then go to the Properties panel. - fig.60

fig.60

5) Define the Instance Name.

Drag and Drop

Note: All objects used in the drag and drop feature must be defined as a Movie Clip.

1) Select the target and define its Instance Name as target(name)_mc

2) Select the object and define its Instance Name as (name)_mc)

3) Go into the Actions panel and place code:

var startX:Number; var startY:Number;

name_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp); name_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);


function pickUp(event:MouseEvent):void { event.target.startDrag(true); event.target.parent.addChild(event.target); startX = event.target.x; startY = event.target.y; } function dropIt(event:MouseEvent):void { event.target.stopDrag(); var myTargetName:String = "target" + event.target.name; var myTarget:DisplayObject = getChildByName(myTargetName); if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){ event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp); event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt); event.target.buttonMode = false; event.target.x = myTarget.x; event.target.y = myTarget.y;

} else { event.target.x = startX; event.target.y = startY; } ]

name_mc.buttonMode= true ;

4) Double click target on stage to get to isolation mode.

5) Locate the small +, usually at the corner of the target and move it to the center of the target. - fig. 62, 63

fig.62
fig.63‎

6) Repeat for the object.

7) Render the file.