Introduction to Multimedia Adobe Animate CC Lab...

Introduction to Multimedia

Adobe Animate CC

Lab Manual

2017-18 Semester 2

Table of Contents

A. Introduction ……………………………………………………………… p. 1

About Animate

Understanding the Workspace of Animate

B. Getting Started with Animate ………………………..………………….. p. 7

Animate Document Setup

Create Animation

Publishing

Basic drawing

C. Play with Text ………………………………………………………...….. p. 19

Text Tool

Transforming Text

Skew, Break Apart and Color Text

Vertical Text, Rotate Text and Zoom Text

D. Symbols and Interactivity ……………………………………………….. p. 26

Graphic symbol

Buttons symbol

ActionScript

Movie clip symbol

E. Special Effects……………………………………………………………… p.41

Shape Tween

Mask

Spotlight

Motion Guides

Motion Tween

Motion Presets

F. Combine Animate Movies………………………………………………… p.53

Add Scenes

Load Movies

G. Play with Graphic………………………………………………………….. p.64

Brightness

Tint

Alpha

Remove background

H. Play with Sound ……………………….…………………….…………….. p.71

Add background music

Add sound effect

I. Video ………………………………………...……………………………… p.76

Steps for importing video

ALL RIGHTS RESERVED. This lab manual is only for use in the course “Introduction to Multimedia” in HKU

SPACE Community College.

p. 1

A. Introduction

About Animate

What is Animate?

Animate is a development tool that allows you to create interactive

animations with cutting-edge drawing tools and publish them to multiple

platforms.

Animate can be used for

Web sites

Web-based applications

Interactive applications

Video

Where can you obtain Animate?

You can download a 7 days Free Trial version of Animate from

www.adobe.com.

Download page:

https://creative.adobe.com/products/download/animate?promoid=VY36K4

SD&mv=other

http://www.adobe.com/

https://creative.adobe.com/products/download/animate?promoid=VY36K4SD&mv=other

https://creative.adobe.com/products/download/animate?promoid=VY36K4SD&mv=other

p. 2

Understanding the Workspace of Animate

Playhead

Stage Tools Panel

Properties Panel

(Properties inspector)

Timeline

Pasteboard Menu Bar

p. 3

The followings are the important parts of the workspace: 1) Timeline, 2) Stage, 3)

Panels and 4) Tools Panel.

1). Timeline

The timeline is used to organize and control the movie’s content by specifying

when each object appears on the stage.

The timeline has separate layers.

Like transparent sheets of content stacked on top of one another. They

allow users draw or place images on different layers without affecting

other items on other layers. There is no limitation to the number of the

layers. A well-categorized system of layers allows users to manage

objects more efficiently.

Adding a layer causes it to be placed on top of the other layers.

Can be re-ordered by dragging up or down. The “Front and Behind”

position of the object on the stage is related to sequence of the layers.

Try to:

1. Insert / rename / delete layers

2. Show/Hide All Layers ( ) / Lock/Unlock ( ) All Layers / Show

all Layer as Outline ( )

Note: When you choose any of the layers, a pen icon will be displayed on the

layer.

The timeline has a playhead.

The playhead indicates which frame is playing.

You can manually move the playhead by dragging it left or right.

Dragging the playhead also allows you to do a quick check of the movie

without having to play it.

Insert

layer

Show/Hide / Lock/Unlock / Show all Layer

All Layers All Layers as Outline

Layer

Delete Layer

p. 4

The timeline is made up of individual units called frames.

Content is displayed in frames as the playhead moves over them when the

movie plays.

The status bar indicates the current frame the playhead is on.

2). Stage

Contains all objects that are seen by the viewer in the final movie.

You can draw objects on, or import objects to the stage.

3). Panels

Help you view, organize, and change elements or object in a file.

The options available on panels control the characteristics of symbols,

instances, colors, type, frames, and other elements. You can use panels to

customize the Animate interface.

Panels include Properties Panel, Library Panel, Tools Panel, Actions Panel,

Color Panel, Swatches Panel, and etc.

4). Tools Panel

Contains a set of tools used to draw and edit graphics and text.

Frames

Playhead

Current Frame

p. 5

Selection

Line

Pen

Pencil

Free Transform

Eyedropper

Hand

Subselection

3D Rotation

Text

Rectangle

Brush

Paint Bucket

Eraser

Zoom

Stroke Color

Fill Color

Lasso

Bone

p. 6

The followings are the tools and their functions:

Tool Name Function

Selection Selects objects on the work area; an object must be selected

before it can be modified.

Subselection Selects objects or parts of objects by dragging a rectangular

selection marquee.

Modifies specific anchor points in a line or curve.

Free Transform Moves, scales, rotates, skews, or distorts objects.

Lasso Selects objects or parts of objects by dragging a free-form

selection marquee.

Pen Draws lines or curves by creating a series of dots (anchor points

technically) that are automatically connected.

Text Creates and edits text.

Line Draws straight lines (strokes) of varying lengths, widths and

colors.

Rectangle Draws rectangles of different sizes and colors. Press and hold

[Shift] to draw a perfect square.

Oval Draws oval shapes. Press and hold [Shift] to draw a perfect

circle.

Pencil Draws freehand lines and shapes.

Brush Draws / paints with brush-like strokes.

Ink Bottle Applies color, thickness and styles to lines.

Paint Bucket Fills enclosed areas of a drawing with color.

Eyedropper Picks up styles of existing lines, fills, and text and applies them to

other objects.

Eraser Erases lines and fills.

Hand Moves the view of the Stage and Work Area.

Zoom Increases or reduces the view of the Stage and Work Area.

p. 7

B. Getting Started with Animate

Animate Document Setup

Animate document’s size and speed setup

Size: default 550 400 pixels

Speed: default 24 fps (frame per second)

Try to do the setup as follows:

1. Click on 550 400 pixels button in the Properties Panel to change the

document size

2. Enter a value in the FPS edit box to change the speed.

3. Click on the Stage’s swatch to choose background color.

p. 8

Create Animation

Starting Keyframe Ending Keyframe

Basic animation requires two keyframes: the starting keyframe and the ending

keyframe. A keyframe is a frame in which you define a change to an object’s

properties for an animation or include ActionScript code to control some

aspect of your document.

The number of frames between two keyframes determines the length of the

animation.

In Animate CC, there are 3 methods for creating an animation sequence: classic

tweening, shape tweening and motion tweening. In this course, we focus on

classic tweening and shape tweening.

In classic tweening, you define properties such as position, size, and rotation

for an instance (editable copies of symbols that are placed on the stage), group,

or text block at one point in time, and then you change those properties at

another point in time.

In shape tweening, you draw a shape at one point in time, and then you

change that shape or draw another shape at another point in time.

p. 9

Basic steps to create a classic tweening in Animate:

1. Create a starting keyframe with object(s).

2. Select the starting keyframe on the layer of the timeline if it is not selected.

3. Insert on the menu bar > Choose Classic Tween.

4. Click the ending keyframe on the layer of the timeline, and then insert

keyframe (Insert on the menu bar > Choose Timeline > Click Keyframe or

by right-click Insert Keyframe).

5. Modify the content in the ending keyframe.

Basic steps to create a shape tweening in Animate:

1. Create a starting keyframe with object(s).

2. Select the starting keyframe on the layer of the timeline if it is not selected.

3. Insert on the menu bar > Choose Shape Tween.

4. Click the ending keyframe on the layer of the timeline, and then insert

keyframe (Insert on the menu bar > Choose Timeline > Click Keyframe or

right-click Insert Keyframe).

5. Modify the content in the ending keyframe.

p. 10

Tutorial B1

Creating a Animate Movie (Classic Tween)

Steps:

1. Open a new Animate document (with ActionScript 3.0).

2. Click File and Save it as “tween-motion.fla”.

3. Click Fill Color Tool ( ) to choose any color you like.

4. Choose the Oval Tool ( ).

5. Use Oval Tool to draw a circle on the left hand side of the stage.

6. Select Frame 1 on Layer 1 of the timeline.

7. Click Insert on menu bar > Choose Classic Tween.

p. 11

8. Click Frame 40 on Layer 1 of the timeline.

9. Click Insert on the menu bar > Choose Timeline > Click Keyframe.

10. Click Selection Tool ( ) from Tools Panel.

11. Use the Selection Tool to drag the circle to the right hand side of the stage, as

shown in the above picture.

12. Click Control on the menu bar > Choose Test Movie > Choose In Animate

to play the movie.

13. Save your work.

Playback

Animate movies are viewable through a browser. The browser must have the

Flash Player plug-in. Web users must download

(https://get.adobe.com/flashplayer/) and install the player in order to view and

interact with Animate content.

Animate movies can be saved as executable files, called “projector”, which can

be viewed without the need of Flash Player.

Publishing

Output File Formats

Save: *.fla

Animate documents, which have the .fla filename extension, contain all

the information required to develop, design, and test interactive content.

It can be modified.

Publish: *.swf

The Shockwave file, in order to view your Flash/Animate movies on the

Web, you must change the movie to a Shockwave file (.swf) format.

*. html It is an HTML Wrapper. Flash/Animate generates the HTML code that

references to its Shockwave file.

https://get.adobe.com/flashplayer/

p. 12

*.exe It is a stand-alone projector file for Windows. It cannot be modified.

*.app

It is a stand-alone projector file for Mac. It cannot be modified.

For example,

File > Publish to export movies out of Animate

By default, it will export to .swf format, and

Will generate the HTML codes that reference the Shockwave file. e.g.

Tutorial B1 (cont’d)

Publish a movie

Steps:

14. Find and Open the Animate file “tween-motion.fla” if you have closed it.

15. Click File on the menu bar > Click Publish.

16. Locate and open (by double-click) the “tween-motion.html” which you have

just published.

Code specifying the Shockwave movie that the browser will play

p. 13

(Note: tween-motion.fla - the Animate movie file which you can modify

tween-motion.swf - the Flash Player file

tween-motion.html - the HTML document)

Create a projector (executable file)

Steps:

17. Open Animate program “tween-motion.fla” if you have closed it.

18. Click File on the menu bar > Publish Settings > Click Win Projector check

box > Click OK.

19. Click File on the menu bar > Click Publish.

p. 14

20. Locate and Open (or double-click) the “tween-motion.exe” which you have

just published.

Exercise B1

Requirements:

1. Open tween-motion.fla.

2. Insert a new layer and rename it to “square”.

3. Draw a square (any color) on the square layer.

4. Create a classic tween on the square layer and make the square move from

the top to bottom of the stage.

5. Save the movie.

p. 15

Basic Drawing

Tutorial B2

Steps:


2. Click File and Save it as “tools.fla”.

3. Click View on the menu bar > Grid > Show Grid

4. Use different tools such as Rectangle Tool, Oval Tool, Polystar Tool and

Line Tool to draw the followings:

Rectangle tool Line

Selection

Free Transform

Subselection

Lasso

Pen

Paint Bucket

PolyStar tool Oval tool

p. 16

(Tips to draw stars:

)

5. Click Selection Tool ( ) to select objects as the following samples

6. Click Lasso Tool ( ) to select irregular objects just like the followings,

p. 17

7. Click Free Transform Tool ( ) > Click the Rotate and Skew option in

the Option section of the Tools panel.

8. Insert a new layer > Click Frame 5 and insert a keyframe in this new layer >

Use Pen Tool to draw an arrow like the followings:

p. 18

(Try to use Paint Bucket Tool to fill any color and use Ink Bottle Tool to

change the stroke color and style.)

9. Click Subselection Tool ( ) to distort the arrow.

(Hint: click the boundary of the arrow to display the handles, and then distort

the arrow by dragging the handle at the tip of the arrow.)

p. 19

C. Play with Text

Text Tool

Animate acts similar to a word processor.

It provides a lot of flexibility when formatting text. The Properties panel allows

you to change the font, size, style and color of a single character or an entire text

block.

You can use the Properties panel to set margins, indents and line spacing. You

can also align paragraphs such as left, right, center and justified.

Transforming Text

Text is also an object, and can therefore be transformed like other objects in

Animate.

The entire block gets transformed.

Use Break Apart command to transform individual letters.

Break apart is a process of making each area of color in a bitmap image into a

discrete element you can manipulate separately from the rest of the image. Also,

the process of breaking apart text to place each character in a separate text block.

Skewing a text block Reshaping a letter after the text block

has been broken apart.

p. 20

Skew, Break Apart, and Color Text

Tutorial C1

Steps:


2. Click File > Save it as “text.fla”.

3. Type a word “Cat” on the stage, you may change the font size (please choose a

bigger size), font type and font color.

4. Skew the text like the above picture by selecting the word “Cat” and click

Free Transform Tool ( ).

5. Type another “CAT” on the stage, and fill each letter with different colors (Tip:

use the Properties panel)

p. 21

6. Save your work.

7. Change the shape of the letter “C” into a cat shape like the picture below.

(Tip: Use Selection Tool to select the text > Right-click Break Apart twice,

then you will find that the letters become a dot pattern. It indicates that they

can now be edited > Click the Subselection Tool > Click the edge of the letter

“C” and reshape the letter to cat shape.)

p. 22

8. Change the word “CAT” with gradient color or multiple colors like picture

below.

Color Panel

(Tip: Select each letter > Use Fill Color Tool ( ) > Choose gradient

color or use Color Panel to change color)

9. Save your work.

Vertical Text, Rotate Text and Zoom Text

Tutorial C2

Before After

Create Classic Tween for the vertical word “Hello” so that it can fly from the right

to the left hand side of the stage starting from Frame 1 to Frame 10.

Steps:


2. Click File and Save it as “TextVnR.fla”.

3. Click File > Import to stage / Import to Library > Choose any picture such

as “Jellyfish.jpg”.

4. Use Free Transform Tools to resize picture to make it the same size as the

stage.

5. Rename Layer 1 as Background.

p. 23

6. Insert Frame in Frame 45 of Background layer.

7. Insert another new layer ( ) and rename it to V-Hello.

8. Use Text Tool to type a vertical “Hello” on the right hand side of pasteboard

like the picture below. (Tip: Use the Properties Panel to set the text attributes:

font size = 50, color = yellow, Text Direction button = Vertical.)

9. Right-click in Frame 1 and select Create Classic Tween

10. Insert Keyframe in Frame 10 > Drag the vertical word Hello to the left side

on the stage.

11. Right-click in Frame 10 on Layer V-Hello > Select Remove Tween. This

action will remove the tweening effect from Frame 10 to Frame 45)

p. 24

Create Classic Tween for the word “Hello” so that it can fly and rotate from the top

to the center of the stage starting from Frame 1 to Frame 20 of R-Hello layer like the

picture below.

Steps:

12. Insert a new layer and rename it as R-Hello.

13. In Frame 1 of the R-Hello layer, use Text Tool to type “Hello” on top of the

picture like the following:

14. Right-click in Frame 1 on Layer R-Hello > Select Create Classic Tween.

15. Under the Properties window, select CW in the Rotate dropdown list and

type 2 in the times input box.

16. Insert Keyframe in Frame 20 on Layer R-Hello.

17. Drag the word “Hello” to the center.

18. Right-click in Frame 20 on Layer R-Hello > Select Remove Tween.

(This will remove the tweening effect from Frame 20 to Frame 45)

19. Save your work and test the movie.

p. 25

Create Classic Tween for the word “Welcome” which can zoom from large to small

on the stage starting from Frame 21 to Frame 30 of the Welcome layer.

Steps:

20. Insert a new layer and rename it as Welcome.

21. Insert Keyframe in Frame 21 on Layer Welcome.

22. Type a BIG word “Welcome” (such as size = 95) on the stage.

23. Right-click in Frame 21 on Layer Welcome > Select Create Classic Tween.

24. Insert Keyframe in Frame 30 on Layer Welcome > Click Free Transform

Tool and drag the edge of the word Welcome to make it smaller.

25. Right-click in Frame 30 on Layer Welcome > Select Remove Tween.

(This will remove the tweening effect from Frame 30 to Frame 45)


p. 26

D. Symbols and Interactivity

What is symbol?

In order to create a smaller file size, Animate allows you to create symbol

(including graphic, button and movie clip) that can be re-used without adding file

size.

Symbols reside in the Library.

Dragging a symbol from the Library to the stage creates an instance. Animate

calls the original a symbol and the copies instances.

Three types of symbols:

1) Graphic

Graphic symbols are effective for re-usable single images.

Can be static images or animated images.

Can be changed in each instance of the image.

Are tied to the main Timeline of the movie.

2) Button

Animate can create interactive buttons that respond to mouse clicks,

rollovers, or other actions.

Each button has its own four-frame Timeline. When you select the button

behavior for a symbol, Animate creates a Timeline with four frames. The

first three frames display the button's three possible states; the fourth frame

defines the active area of the button. The Timeline doesn't actually play; it

simply reacts to pointer movement and actions by jumping to the

appropriate frame.

There are 4 states of buttons, they are:

Up: A visual state representing how the button appears when the

mouse pointer is not over it.

Over: A visual state representing how the button appears when the

mouse pointer is over it.

Down: A visual state representing how the button appears after the

user clicks the mouse.

p. 27

Hit: A special, non-visual state that determines the area of the screen

which the mouse sees as the “interactive” or “hot” area.

ActionScript After you have created the button, you may need to add different actions to

this button. Actions can be implemented by ActionScript. ActionScript

is the scripting language of Adobe Animate. It allows you to create a

movie that behaves exactly as you want. It has its own rules of syntax,

reserves keywords, provides operators, and allows you to use variables to

store and retrieve information.

To add ActionScript, you can:

Click Window on menu bar > Choose Actions to display Actions panel.

Script pane Code Snippets

3) Movie Clip

A movie within a movie.

Retains independent timeline when you insert an instance of symbol into a

movie.

Keeps going even if the main timeline stops.

Advantages to create a movie clip symbol

Maintain its own independent timeline.

Require only one layer and one frame in the main movie.

Sound and associated ActionScript statement can be added.

Can be used to animate a button.

p. 28

Tutorial D1

Create Graphic Symbol


2. Click File and Save it as “ball.fla”.

3. Draw a ball on the stage as shown in the picture:

4. Select the ball on the stage.

5. Click Modify on menu bar > Click Convert to Symbol (or right-click to

choose Convert to Symbol).

6. Type “ball” in the name box and select Graphic.

7. Open the Library Panel (if necessary) and find the “ball” graphic symbol in

the library. (To open the library panel, click Window > Choose Library).

8. Drag the “ball” symbol from the library to the stage so that your stage can

have another copy of the ball. The original is called symbol and the copy is

called instance.

p. 29

9. Double-click a ball symbol (any one ball) to enter symbol-editing mode.

10. Change the color of the ball from red to green (select the red part of the ball,

and change the fill color of the ball from the Properties panel)

11. Click Scene 1 to exit the editing mode.

You will find that the ball color of the instance on the stage reflects the color

changes you made to the symbol.

Break Apart an Instance

12. Use the Selection tool to select a ball (any ball you like) on the stage.

13. Click Modify on the menu bar > Click Break Apart. Now, the object is no

longer linked to the symbol in the library.

14. Click a blank area of the stage to deselect the object.

15. Change the color of the ball from green to blue.

16. Check and compare the ball on the stage and the ball symbol in the library.

The symbol indicates that you are in the edit symbol mode

p. 30

(The color of the ball of the original symbol remains unchanged, but the one

which you applied the Break Apart command is different from the original

symbol in the library. It is because you used the Break Apart command to

break the link of the instance to its symbol so it won’t follow the original.)

Create Movie Clip Symbol

17. Select the blue ball.

18. Click Modify on the menu bar > Convert to Symbol (or right-click to choose

Convert to Symbol).

19. Type the name “ball movie”, then select Movie Clip and click OK.

20. Enter symbol-editing mode to edit the “ball movie” (you can double-click

“ball movie” icon in the library to enter the editing mode or double-click the

blue ball on the stage.)

21. Add Classic Tween to make the ball turning (Hit: use Free Transform tool.)

p. 31

22. Click Scene 1 to exit the editing mode and return to normal mode.


Tutorial D2

Create Buttons

1. Open the Animate document namely “TextVnR.fla”.

2. Lock all layers in order to protect them from being modified unintentionally.

3. Insert a new layer > Rename the layer as “buttons”.

4. Draw two red (any red) buttons like the following picture. One button is for

play and another is for stop.

p. 32

5. Select the Play button on the stage > Modify on the menu bar > Convert to

Symbol > Name the button as “Playbutton” > Choose the type Button > Click

OK to confirm and exit.

6. Click Edit on the menu bar > Choose Edit Symbols. After entering into

editing mode, you will see the button timeline like the following:

7. Select Frame Over > Right-click to Insert Keyframe. Repeat the same steps for

Frame Down and Frame Hit.

p. 33

Change the color of different button states:

Up: No change Over: Green

Down: Blue Hit: Draw a rectangle

Select Frame Hit and draw a rectangle (any color, same size or a little bit bigger

than the original graphic) to cover it.

8. Click Scene 1 to quit the edit mode.

9. Click Control in menu bar > Click Test Movie to play the movie.

p. 34

10. Select the Stop button on the stage > Click Modify on the menu bar > Convert to

Symbol > Name button as “Stopbutton” > Choose the type Button > Click OK to

confirm and exit.

11. Click Edit on the menu bar > Choose Edit Symbols. After entering into

editing mode, you will see the button timeline like the following:

12. Select Frame Over > Right-click to Insert Keyframe. Repeat the same steps

for Frame Down, and Frame Hit.

Change the color of different button states:

13. Select Frame Over and change color to green.

14. Select Frame Down and change color to blue.

15. Click Scene 1 to exit the editing mode.

16. Click Control on the menu bar > Click Test Movie.

17. Save your work.

Add ActionScript to a frame - Stop Actions

18. In the same file “TextVnR.fla”, select Frame 1 on the buttons layer.

19. Click Window on menu bar > Choose Actions in order to open the Actions

Panel.

p. 35

20. Click the Code Snippets button.

21. On the Code Snippets Panel, expand ActionScript and Timeline Navigation.

22. Double-click “Stop at this Frame”. Then, the corresponding ActionScript

will appear in the Script pane.

p. 36

23. Save and test the movie.

The movie stops playing, because we assigned a stop action to the first frame

of the timeline, so the playhead stops playing. (Note: The piece of

ActionScript has been added to Frame 1 of the automatically-created Actions

layer.)

p. 37

Add ActionScript to buttons – Play and Stop buttons

24. Single click to select Playbutton on the stage. On the Properties Panel, type

btn_play as the instance name.

25. Open the Actions Panel. Select Playbutton, and then click Code Snippets.

26. On the Code Snippets Panel, expand ActionScript, Time Navigation, and

then double-click Click to Go to Frame and Play.

p. 38

27. Modify the ActionScript from gotoAndPlay(5); to gotoAndPlay(1);


p. 39

Note:

When Playbutton has been clicked and released, the playhead will move to Frame 1

and the movie will start playing.

29. Single-click to select Stopbutton. On the Properties Panel, type btn_stop as

the instance name.

30. Open the Actions Panel. Select Stopbutton, and then click Code Snippets.

31. On the Code Snippets Panel, expand ActionScript, Time Navigation, and

then double-click Click to Go to Frame and Stop.

p. 40

32. Modify the ActionScript from gotoAndStop(5); to gotoAndStop(1);

33. Save all the work and test the movie.

Note:

When Stopbutton has been clicked and released, the playhead will move to Frame 1

and the movie will stop there.

p. 41

E. Special Effects

Shape Tween

In classic tweening, we cannot change the shape of an object. But we can use a shape

tween to change a shape into another one over time.

Layer

Layers are located on the Timeline. They are used to organize and control the movie’s

content by specifying when each object appears on the stage.

Layer types:

1. Normal

It is the default layer type. All objects on these layers appear in the movie.

2. Mask

A layer that contains mask item(s) through which underlying masked

layer(s) are visible.

3. Masked

A layer that contains the objects that are hidden and revealed by a mask

layer.

4. Folder

A folder helps to organize layers.

5. Guide

Guide layers are used to create a path for animated objects to follow.

p. 42

Shape Tween

Tutorial E1 - circle becomes square, number 1 becomes 2

before after

Steps:

1. Open a new Animate document.

2. Click File > Save it as “ShapeTween.fla”.

3. Rename Layer 1 to “shape”.

4. Use Oval Tool ( ) to draw a circle (any color) on the lower left corner of

the stage.

5. Click Frame 1 on “shape” layer > Right-click to choose Create Shape

Tween.

6. Click Frame 20 on the “shape” layer > Right-click to choose Insert

Keyframe.

7. Delete the circle and draw a square on the upper right corner of the stage.

8. Test the movie and save your work.

9. Insert a new layer and rename it as “number”.

10. Click Frame 1 on the “number” layer.

11. Use Text tool to type a number “1” in the middle of the stage.

12. Click Frame 20 on the “number” layer > Right-click to choose Insert

Keyframe.

13. Delete the number “1” and type a number “2”.

14. Select the number 2 > Right-click to choose Break Apart.

15. Select the number 1 > Right-click to choose Break Apart. (So that both 1 and

2 are broken apart.)

16. Click Frame 1 on “number layer > Right-click to choose Create Shape

Tween.

17. Test the movie and save your work.

p. 43

Mask

Tutorial E2

Steps:


2. File > Save it as “Mask.fla”.

3. Double-click “Layer 1” on the Timeline panel and rename it to “Photo”, and

then click File > Import to stage (import any picture).

4. Insert a new layer and rename it to “Text”, and then type “your name” on the

stage.

5. Create mask: Right-click Layer Text on the Timeline > Choose Mask.

6. Test and Save the movie.

p. 44

Mask – Spotlight

Tutorial E3


2. File > Save it as “Spotlight.fla”.

3. Rename Layer 1 to “Text”, and then type “Catch me if you can!” on the stage.

4. Set background color to black and the text to yellow.

5. Insert Frame in Frame 40 on “Text” layer.

6. Insert a new layer and rename it to “Mask”.

7. Click Oval tool on the toolbox to draw an oval (position at the beginning of

the sentence) on the stage.

8. Right-click Frame 1 on “Mask” layer > Choose Create Classic Tween >

Click Frame 40 on the same layer > Drag the oval to the end of the sentence.

9. Select the “Mask” layer > Right-click to choose Mask.

10. Test and save the movie.

p. 45

Motion Guides

Tutorial E4


2. Save file as “Motion.fla”.

3. Rename Layer 1 as “Bean”.

4. Right-click Layer Bean to choose Add Classic Motion Guide. (After that you

will find that there are 2 layers).

5. Click Pencil tool > Click Pencil Mode (the lower part of the Tools

panel) > Click Smooth option.

6. Click Frame 1 on the Guide layer > Draw a big “S” on the stage.

7. On the Guide layer, click Frame 40 > Right-click to choose Insert Frame.

8. On Layer Bean, draw an oval. Then, drag the oval over the beginning of the

path (big “S”) like the picture below. (The oval’s registration point must

intersect with the path).

p. 46

9. On Layer Bean, click Frame 1 > Right-click to choose Create Classic

Tween > Click Frame 40 on the same layer > Right-click and Insert

Keyframe > Drag the oval to the end of the path (make sure that the

registration point intersects with the path).


p. 47

Motion Tween

Tutorial E5


2. Save file as “MT.fla”.

3. Rename Layer 1 as “face”.

4. Import the file “face.png” to Frame 1 of the face layer.

5. Right-click Frame 1 of the face layer, and choose “Create Motion Tween”.

p. 48

6. Convert the image into a symbol by clicking “Ok” in the “Convert selection

to symbol for tween” dialog.

7. Right-click Frame 10, choose Insert Keyframe, and then Position.

p. 49

8. Move the image to another position of the stage (e.g. the top right corner).

9. Right-click Frame 20, choose Insert Keyframe, and then Scale.

10. Move the image to another position of the stage (e.g. the bottom right corner).

11. Use the Free Transform Tool to scale down the image.

12. Right-click Frame 30, choose Insert Keyframe, and then Rotation.

p. 50

13. Move the image to another position of the stage (e.g. the top left corner).

14. Use the Free Transform Tool to rotate the image.

15. Right-click Frame 40, choose Insert Keyframe, and then Rotation.

16. Move the image to another position of the stage (e.g. the bottom left corner).

17. Use the 3D Rotation Tool to rotate the image.


p. 51

Motion Presets

Tutorial E6


2. Save file as “MP.fla”.

3. Rename Layer 1 as “ball”.

4. Import the file “ball.png” to Frame 1 of the ball layer.

5. Move the image to the top left corner of the stage.

6. Use the Free Transform Tool to scale down the image.

7. Select the image.

8. On the menu, choose Window, and then Motion Presets.

p. 52

9. On the Moton Presets Panel, choose Default Presets, and then “bounce-out-

3D”.

10. Convert the image into a movie clip by clicking “Ok” on the “Convert

selection to symbol for tween” dialog.


p. 53

F. Combine Animate Movies

Scenes

Scenes provide a way to break up a long or complex document into smaller and more

manageable sections.

Each scene has its own Timeline.

Open the Scene Panel: Window > Scene

To add a Scene, choose Insert on the menu bar > Scene, or use the Scene Panel.

Scene Panel allows you to manage and name your scenes

Rename a scene

Duplicate a scene

Add a scene

Delete a scene

Reorder scenes

New scenes can be created with new content.

Existing content can be split into multiple scenes by copying and pasting

frames from one scene’s timeline to another.

By default, Animate plays scenes in order.

Buttons can cause a movie to jump from one scene to another.

p. 54

Scenes

Tutorial F1 - Click a button jumps to a scene

1. Open an Animate document “Scenes.fla”.

2. Create a classic tween for the title “Main Menu” (above and outside the stage)

so that it can fly from the top to the upper middle of the stage like the picture

below.

(Before) (After)

3. Click Window on the menu bar > Select Scene to open the Scene panel.

4. Double-click Scene 1 to rename it to Menu.

5. Click the Add scene icon > Double-click Scene 2 to rename it to Ch1.

6. Click Menu in the Scene panel and notice that the timeline has changed to the

Menu scene.

p. 55

7. Click Ch1 in the Scene panel and notice that the timeline has changed to the

Ch1 scene, which is blank.

8. Type a heading “Chapter One” in scene Ch1.

9. Save and test movie.

There is no content or stop ActionScript in the Ch1 scene, so the movie just

jumps from one scene to another.

p. 56

Add interactivity to scenes

10. Make sure that the Menu scene is displayed.

11. Double-click Layer 1, and rename it to “Title”.

12. Insert a new layer and rename it to “Chapter 1”.

13. Create a button and name it as “Chapter 1” in Frame 30 on Layer Chapter 1.

14. Select Frame 30 on “Chapter 1” layer, right-click to choose Actions > Assign

a stop statement to Frame 30. (The statement will then be added on the

Actions layer.)

p. 57

Add ActionScript on “Chapter 1” button

15. Select the “Chapter 1” button in the Menu scene. On the Properties Panel, type

“btn_toCh1” as the instance name.

16. Right-click Frame 30 on Chapter 1 layer to open the Actions Panel.

17. Select the “Chapter 1” button > Click Code Snippets > Expand ActionScript,

Timeline Navigation on the Code Snippets Panel > Double-click Click to Go

to Frame and Play.

p. 58

18. Change the ActionScript statement from

gotoAndPlay(5); to

gotoAndPlay(1, “Ch1”);


Create a back button in Chapter One and add actions to this button

20. Click the Scene list ( ) > Click Ch1 to go to Scene Ch1.

21. Right-click Frame 1 on Layer 1 to choose Actions > Assign a stop function

to Frame 1. (The stop statement will then be added to the Actions layer.)

p. 59

22. Insert a new layer and rename it to “Menu”.

23. On Layer Menu, create a button called “Home”. Select the “Home” button.

On the Properties Panel, type “btn_toMenu” as the instance name.

24. Select the “Home” button. Right-click Frame 1 on Actions layer to open the

Actions Panel.

25. Select Code Snippets. On the Code Snippets Panel, expand ActionScript,

Timeline Navigation, and then double-click Click to Go to Frame and Play.

p. 60

26. Change the ActionScript statement from

gotoAndPlay(5); to

gotoAndPlay(1, “Menu”);


p. 61

Load Movies

Load Movie action can be used to load a movie. You can split a single movie into a

number of different movies and use ActionScript to load movies as needed. You must

know the name and location of the movie file you want to load.

Tutorial F2 - Use a button to a load movie

1. Open an Animate document called “loadmovie.fla”.

2. Select “Chan’s Project 1” button. On the Properties Panel, type “btn_proj1” as

the instance name.

3. Open the Actions Panel.

4. Select the “Chan’s Project 1” button, and then click Code Snippets. On the

Code Snippets Panel, expand ActionScript, Load and Unload, and then

double-click Click to Load/Unload SWF or Image.

p. 62

5. Specify the target movie file by replacing the filename placeholder with

“Scenes.swf”.

p. 63

6. To remove the original movie from the screen before loading the target movie,

the following piece of ActionScript needs to be inserted.


p. 64

G. Play with Graphics

Understanding the Format

1. Vector graphics

Vector graphics describe images using lines and curves, called vectors, which also

include color and position properties. Vector graphics are usually based on

mathematical formulas.

For example, the image of a leaf is described by points through which lines pass,

creating the shape of the leaf's outline. The color of the leaf is determined by the

color of the outline and the color of the area enclosed by the outline.

Animate is a vector-based application. All images and motion within the

application are calculated according to mathematical formulas. This vector-based

format results in smaller file size.

2. Bitmap graphics

Bitmap graphics describe images using colored dots, called pixels. Bitmap image

is based on pixels, not on a mathematical formula.

For example, the image of a leaf is described by the specific location and color

value of each pixel in the grid, creating an image in much the same manner as a

mosaic.

p. 65

Working with Graphics

In Animate, graphic objects are items on the Stage. Animate lets you move, copy,

delete, transform, stack, align, and group graphic objects. You can also link a

graphic object to a URL. Keep in mind that modifying lines and shapes can alter

other lines and shapes on the same layer. Basically, there are two ways to work

with graphics. You can draw (graphics create by you) or import images / photos.

Drawing

You draw graphics by using tools in Animate.

Image / Photo

Import images or photo into your Animate.

Changing the properties

You can change the brightness, tint, and alpha of the graphics; redefine how

the graphic behaves.

For example, changing the color and transparency of a graphic

p. 66

Brightness, Tint and Alpha

Tutorial G1

Change photo brightness

Steps:


2. Save file as “Photos.fla”.

3. Rename Layer 1 to Photo1.

4. File > Import any photo and resize if necessary.

5. In Frame 1, Create Classic Tween > In Frame 10, Insert Keyframe.

6. Click Frame 1 > Select the photo > In the Properties Panel, choose Brightness

in the Style dropdownlist and set the Bright parameter to 100%.

7. Insert Keyframe in Frame 20 > Insert Keyframe in Frame 30.

8. In Frame 30, select the photo > In the Properties Panel, choose Brightness in

the Style dropdownlist and set the Bright parameter to 100%.


p. 67

Change photo colors - tint

Steps:

1. Use the same file.

2. Insert a new Layer and rename to Photo2.

3. In Frame 30 on Layer Photo2, Insert Keyframe > File > Import any photo

and resize if necessary.

4. Right-click the photo > Choose Convert to Symbol > Choose Graphic > OK.

5. Insert Frame in Frame 60 on the same layer.

6. Insert Keyframe in Frame 40 and Frame 50 of the same Layer.

7. Click Frame 30 on Layer Photo2 > Select the photo.

8. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color

to green and the percentage to 50%.



to red and the percentage to 50%.



to blue and the percentage to 50%.


Green Red Blue

p. 68

Change photo transparency - Alpha

1. Use the same file.

2. Add Layer 3 and rename to Photo3.

3. In Frame 65 on Layer Photo3, Insert Keyframe > File > Import any photo

and resize if necessary.

4. In Frame 65, Create Classic Tween.

5. In Frame 75, Insert Keyframe.



8. Click Frame 65 > Select the photo > In the Properties Panel, choose Alpha in

the Style dropdownlist and set the percentage to 10%.

p. 69

9. Click Frame 95, select the photo > In the Properties Panel, choose Alpha in

the Style dropdownlist and set the percentage to 10%.

10. Remove Tween from Frame 75 to Frame 84.


p. 70

Remove Background

Tutorial G2

1. Open the Animate document “RemoveBg.fla”.

2. Rename Layer 1 to Background.

3. File > Import any photo and paste it to the stage.

4. Select the imported photo > Right-click to Break Apart the photo.

5. Click Lasso button ( ) > Click Magic Wand ( ) in Option.

6. Pick any point in a particular region using the Magic Wand > Right-click to

select cut or Press the Delete button on the keyboard to remove that region.

7. Save your work after you have finished.

p. 71

H. Play with Sound

Importing sounds

You can place sound files into Animate by importing them into the Library for

the current document.

To import a sound to an Animate document:

1. Choose File > Import to Library.

2. In the Import dialog box, locate and open the desired sound file.

To add a sound to a movie:

1. Import the sound into the Library if it has not already been imported.

2. Choose Insert > Layer to create a layer for the sound. (When placing a sound

on the Timeline, it is recommended that you place it on a separate layer.)

3. With the new sound layer selected, drag the sound from the Library panel onto

the Stage. Then, the sound is added to the current layer.

Note: You can place multiple sounds on one layer, or on layers containing other

objects. However, it is recommended that each sound be placed on a

separate layer. Each layer acts like a separate sound channel. The sounds

on all layers are combined when you play back the movie.

p. 72

Sound

Tutorial H1

Add background music

Steps:


2. Save file as “Sound.fla”.

3. Rename Layer 1 to Bg.

4. File > Import a photo to the Library.

5. Drag the photo to the stage.

6. File > Import a music file to the Library.

7. Insert a new layer > Rename Layer 2 to music.

8. Click Frame 1 on Layer music.

9. Go to the Library panel > Click to select the desired sound file > Drag it to

the stage.


11. Insert Frame in Frame 40 for both Layer photo and Layer music (to ensure

that the whole movie lasts for 40 frames).

12. You may repeat the background music several times or loop the background

music.

p. 73

13. To avoid the background music from overlapping, “Event” should be changed

to “Start” in Sync.

p. 74

Tutorial H2

Use buttons to Play and Stop sound

Steps:


2. Save file as “controlsound.fla”.

3. Create a play button and stop button.

4. Double-click the play button to enter editing mode.

5. Insert a new layer in play button > Rename the layer to play sound.

6. Insert Keyframe at “Down” frame on that layer.

7. Import any sound file to the library.

8. Drag the sound file from library to the stage. (make sure you have selected

‘down’ frame)


10. Use Selection tool to select the Stop button. On the Properties Panel, type

“btn_stop” as the instance name.

p. 75

11. Open the Actions Panel.

12. On the Actions Panel, click Code Snippets. On the Code Snippets Panel,

expand ActionScript, Audio and Video, and double-click Click to Stop All

Sounds.


p. 76

I. Video

To import video into Animate you must use video encoded in the FLV or H.264

format. The Video Import Wizard (File > Import > Import Video) checks video files

that you select for import, and alerts you if the video might not be in a format that

Animate can play. In the event that the video is not in either the FLV or F4V format,

you can use Adobe Media Encoder to encode the video in the appropriate format.

Adobe Media Encoder

Adobe Media Encoder is a stand-alone encoding application employed by programs

such as Adobe Premiere Pro, Adobe Soundbooth, and Animate for output to certain

media formats. Depending on the program, the Adobe Media Encoder provides a

specialized Export Settings dialog box that accommodates the numerous settings

associated with certain export formats, such as Adobe Flash Video and H.264. For

each format, the Export Settings dialog box includes a number of presets that are

tailored for particular delivery media. You can also save custom presets, which you

can share with others or reload as needed.

Import video file

Tutorial I1

1. Open a new Animate program.

2. Save file as video.fla.

3. Click File on menu bar > Choose Import > Choose Import Video.

4. Browse to select any video file.

p. 77

In case the video is not in a format that Animate can play, Adobe Media

Encoder should be used to encode the video in the appropriate format. Adobe

Media Encoder can be started by clicking the Convert Video button.

p. 79

Next, the new video file should be selected by clicking the Browse button

again.

Then, you may follow the steps in the Video Import Wizard.

p. 80

The Skinning panel allows you to choose the playback controls used to play

the video. Then, it will start importing the video.

p. 81


Introduction to Multimedia Adobe Animate CC Lab...

Documents

Transcript of Introduction to Multimedia Adobe Animate CC Lab...