Flash

From Digi Wiki
Jump to: navigation, search

Location: Applications/Adobe FlashCS3/Flash CS3 or icon from dock (fig 1)

Fig 1







Start New File

1)Choose the File menu and select New. (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 2
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

When you open a new file there are basic items that you should know

The timeline hovers at the top (fig 5).
The document properties is on the right. You can determine the size, background, and frame rate of your project using these document properties (fig 6).


Fig 5


Fig 6




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.

The Stage is where you create everything (fig 7).


Fig 7






Using Fills and Strokes

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. For selecting the fill click on the inside (fig 8).


Fig 8













To select both fill and stroke, you can double click on the object (fig 9).

Fig 9












You will notice that in each one of these examples, you will see a gray dotted fill on which ever you select (fig 10).
The Line, and Pencil tool only have strokes. The Paintbrush Tool has only a fill.

Fig 10














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. You can get to the library by going to the Window pull down menu and selecting Library (fig 11).

fig. 11

This is the library (fig 12).

fig. 12

The Timeline

The timeline holds layers that you can use to animate objects (fig 13).

fig. 13

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

fig. 14

To add a motion guide, whom we will discuss later in the tutorial, click the button to the right of the insert layer button (fig 15).

fig. 15

To add a new layer folder, click the button to the right of the motion guide button (fig 16).

fig. 16

To delete a layer click the trash can shape to the right of the insert layer folder button (fig 17).

fig. 17

To show or hide a layer, an eye ball will hide or show the object on the stage (fig 18).


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

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


fig. 18

Importing

The two ways of importing are by importing to the stage and importing to the library. 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.

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


fig. 19

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

fig. 20

The keyframe looks like this in the Timeline (fig 21).

fig. 21

Tweens

There are three different options that you can choose. For any kind of motion tweening, you need to convert to a Graphic (figs. 22-23). The other options: button and movie clip will be learned later in the tutorial (fig 23).

fig. 22
fig. 23

Motion Tweens

1) First convert to graphic (fig 24).

fig. 24
Fig 24


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

fig. 25

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

fig. 26

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

fig.27

5) You then need to make a motion tween between these. To do this you can go to the Insert pull down menu. Go down to Timeline and select Create Motion Tween (fig 28).

fig. 28

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

fig.29





Shape Tweens

1) There are two different kinds of shape tweens. Create an object. This time, you do not have to convert it to a graphic because it is a shape tween (fig 30).

fig. 30

2) Make a keyframe. Click the keyframe and then distort the object by using the Subselect tool (fig 31).

fig. 31

3) Then select all frames in the layer and go down to the Document Properties and under Tween, pick the option, Shape (fig 32).

fig. 32

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

fig. 33

Another Shape Tween

You can use a shape tween to transform one object into another. For example you can transform a shape into a letter.
This is how you do it:

1) First, create your object (fig 34).

fig. 34

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

fig. 35

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

fig. 36

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

fig. 37

5) Select all frames and make a shape tween by using the Document Properties (fig 38).


fig. 38

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

fig. 39

Color Tween

Color Tweens make objects change colors.

1) First create your object (fig 40).


fig. 40

2) Make a keyframe (fig 41).


fig. 41

3) Select the keyframe and change the color of the object (fig 42).


fig. 42

4) Select all frames (fig 43).


fig. 43

5) Choose shape tween in the Document Properties (fig 45).

fig. 44

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

fig. 45

Size Tweens

To scale an object, use a size tween.


1)First, create a shape (fig 46).

fig. 46


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

fig. 47


3) With the keyframe selected, resize the object (fig 48).

fig. 48


4) Select all the frames and make a shape tween (fig 49).

fig. 49


5) The frames are should now be green with an arrow. (fig 50).

fig. 50



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

fig. 51

2) Convert that shape into a symbol (fig 52,53)

fig. 52
fig. 53








































3) Make a keyframe on the Timeline (fig 54)

fig. 54

4) Right click the layer and choose "Add Classic Motion Guide" (fig 55). A Layer called "Guide: Layer 1" will appear above the first layer. (fig 56)

fig. 55
fig. 56



















5) Make sure that layer is chosen and select the pencil tool (fig 57)

fig. 57

6) Draw the path you want your shape to follow (fig 58)

fig. 58

7) Now, choose the first frame (fig 59) and drag your shape to the place where you want the animation to begin, and it should snap in place. (fig 60)

fig. 59
fig. 60

8) Choose the last frame and do the same (fig.61, 62)

fig. 61
fig. 62

9) Then, lastly right click anywhere on the frames and choose "Create Classic Tween" (fig 63)

fig. 63

Relevant Links

http://www.adobe.com/designcenter/video_workshop/

Professors Notes

scroll bars

1. Window > Components. Drag UIScrollBar to the stage. Delete it.

2. Double click on text graphic.

3. Select text field.

4. In Properties window, select "Dynamic Text" from the drop-down menu.

5. Name the instance.

6. Drag the UIScrollBar component from the library to the right edge of the text field.

7. Name the UIScrollBar instance.

8. Adjust the size of the text field to only the number of lines you want showing.

9. Adjust the size of the UIScrollBar instance.

10. Return to the scene.

11. Drag the text graphic onto the stage in the proper frame/layer.


video

1. File > Import > Import Video.

2. Enable: All Video Formats, Select Video, Open.

3. Continue.

4. Choose "Progressive Download from a web server."

5. Choose a skin for the player controls.

6. Choose import settings, click Finish.

7. Drag the FLVPlayback component from the library onto the stage in the proper frame/layer.

8. Name the FLVPlayback instance.

9. In Parameters window (tab next to Properties window), scroll down and link to movie under "Source".


button functionality

1. Drag button symbol onto stage in proper frame/layer.

2. Name the button instance.

3. Make a note of what frame label you want this button to jump to.

4. Highlight keyframe in actions layer.

5. Window > Actions.

6. Type in stop();

7. Click on Script Assist Button.

8. In side list, click on "fl.controls" > "button" > "events". Double click on "CLICK".

9. Type in button instance name in "Object" space.

10. Type in MouseEvent.CLICK in "Type" space.

11. Type in a unique name in "Listener" space.

12. In side list, click on "language elements" > "statements, keywords & directives" > "definition keyword". Double click on "function".

13. Type in the unique name (from "Listener" space in 10 above) in "Name" space.

14. Type in event:MouseEvent in "Parameters" space.

15. Type in void in "Type" space.

16. Click off of Script Assist Button.

17. Between { } type gotoAndPlay("______"); with the frame label you want to go to in between the quote marks.


example:

my button instance = button1

my frame label I'm jumping to = blue

my unique name = jump

my action script =import fl.controls.Button;

stop();

button1.addEventListener(MouseEvent.CLICK,jump);

function jump(event:MouseEvent):void {

gotoAndPlay("blue");

}

Action Script

fig. 59

A. Script pane B. Panel menu C. Actions toolbox D. Script navigator

A. Type your code. B. Actions Panel. C. 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. 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

  • 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 (figs. 61-62)

fig. 61
fig. 62‎

6. Repeat for the object

7. Render the file!