Web animation using animate CC

► Right-click a layer name in the Timeline and select Insert Layer from the context menu... ► Right-click a layer name in the Timeline and choose insert folder from the context menu..

Web AnimatiO IIJ sinu

Web Animation Using Animate CC

© 2017 Aptech Limited

All rights reserved

No part of this book may be reproduced or copied in any form or by any means - graphic, electronic

or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent or transferred without the prior written permission of copyright owner Aptech Limited

All trademarks acknowledged

www.aptech-worldwide.com

E-mail: customercare@aptech.ac.in

Edition: 1 - October 2017

Preface

This book, Web Animation Using Animate CC introduces you to various features of Animate CC

Here, we will throw some light on various new and enhanced features of Animate CC Such as, drawing, illustration, authoring, audio syncing, cloud libraries, 4K+ video export, and OAM support

We will try out some improved Web publishing options using Animate CC In addition, this course enables professionals to have a more practical and result oriented approach to their work

The ARENA Design team has designed this course keeping in mind the goal of imparting knowledge

of Web Animation Using Animate CC The team will be glad to receive your feedback, suggestions, and recommendations for improvement of the book

Please feel free to send your feedback to the ARENA Design team at the Head Office, Mumbai

ARENA Design Team

TECHDD-WISE THE TECHNOLOGIES OF TOMORROW

Table of Contents

Session 01: Introduction to Anima te CC

About Animate CC

About Workspace

Manage Windo w s and Panels

Using the Stage

Summary

E xercise

Session 02 : Working with Tirneline, L yers, and Keyframes

Understanding the Timeline

Changing the Appearance of the Timeline

Changing the Display F rames in the Timeline

Session 03 Crea ting Basic Shapes and Working with Symbols

Creating Basic Shapes

Session 05: Creating Anima tion for Web

Understanding Motion Tween

Understanding Classic Tween

Understanding Shape Tween

Creating Animated GIF

Technical Aspects of Web Animation

Summary

E xercise

Session 06: Understanding Complex Anima tion

Importance of Movie Clip in Complex Web Animation Working with Multiple Timelines

Working with Scenes

Summary

E xercise

Session 07: Working with Sound and Video

Using Sound in Animate CC

Session 08: Understanding Basic Actio Scrip

Getting Started with ActionScript

The Actions Panel

Overview of Script Window

Tools in the Actions Panel and Script Window Writing and Managing Script

Summary

E xercise

Session 09: Publish Animate CC Proje ts

E xporting SWF Files

Exporting Graphics and Videos

Exporting Projector Files

Summary

Exercise

Ov-liv-evAYsiti INDUSTRY BEST PRACTICES

Session 1 Introduction to Animate CC Learning Outcomes

In this session, you will learn to:

► Describe Animate CC

► Identify Workspace

► Describe Windows and Panels

► Create documents using panels

► Identify Tools panel

~bout Animate CC

Graphic designers and artists love to experiment with animations and colors Using Animate CC gives them an outlet to express their creativity using interactive content enabling publication for various platforms These platforms include HTML5 Canvas, AIR, Flash Player as well as other platforms to get across to users, via mobile devices or desktops

Animate CC offers numerous opportunities Animate CC can be used to create the animated cartoons for film, Web, and television In addition, Animate CC can also be used for games for Android, iPad, iPhone devices, and Web browsers Animate CC also uses technologies for WebGL in case of native browsers and an assortment of advertisements based on the specifications Refer to Figure 1.1 for the Welcome Page This page includes the recent saved files and Templates

Figure 1.1: Welcome Page of Animate CC

If you are looking to enhance your projects you can use the Animate CC This software provides the necessary workflow options timeline, and tools for creating animations This provides users with the much-needed control over the pertinent properties of an animation These properties could range from easy functionality tweening, and effectual animation of content In addition to these aspects, Animate CC also manages and creates symbols using the project library and enhances the animation development process for the user

Figure 1 2 : Overview of the Animate CC Workspace

Considering that, Animate CC offers a wide range of tools users can employ as per their preferences Given here are few o the bars, tools, and panels

► Application bar: It is situated on the top of the workspace It contains the workspace switdler, application and other application controls Refer to Figure 1.3

Figure 1.3 : Application Bar

► Tools panel: This panel comprises editing and image creation tools as well as page elements, artwork, and so on Users can access this panel for tools based on the file they are working To add to the convenience the related tools grouped together Refer to Figure 1.4

Figure 1 5 : Control or Property Inspector Panel

► Document Window: This window shows the file that is currently in use Various files can be docked and grouped together for easy access to the user This comes handy when users work on multiple files at a given time

► Panels: In addition to the various other tools available on the workspace, there is a special panel,

which helps to modify the artwork and monitor it as well Similar to the Document window the panels can be docked and grouped together

► Application frame: This frame assembles the various workspace elements in one window When users work on their file, they can resize or move the frame These panels are still visible if use· accidently switches to another application

Note

If a particular panel is closed or collapsed, you can expand it by clicking the arrow button

1.2 Manage Windows and Panels

Users can use the Workspace as per their preferences Workspaces can be saved ensuring its options, available panels, and so on are retained Now let's take a look at how you can manage windows and panels better

1.3.1 Working with Windows

While working with Document windows, other open windows appear as tabs Here, we will look at how you can move the document windows in order to make your work simpler Some of the common

document window tasks include:

► Rearranging: Users can drag the Document windows by dragging the window to another

location

► Docking: To dock a Document window, users must drag the tab out of the group and release the

mouse button when it is placed into another window group This will dock the window to the new location

► Undocking : o undock a window, users must drag the tab out of the group and release the mouse button

► Creating window groups: For creating groups, users must drag the document windows and drop them into another group Alternatively, user can create groups by using the Layout button situated

on the Application bar

► Switching between documents: For switching between documents, rag the selected window over the document tab for a while

Similar to docking and undocking document windows, the panels can also be docked and undocked

A dock is an area on the workspace that is a window of all the assorted panel groups or panels

These are at a vertical position on the workspace Some common panel related tasks include:

► Docking a panel: Drag the panel by the tab and release the mouse button anywhere near the

bottom, top, or between two panels

► Docking a panel group: Drag the panel group by the title bar and release the mouse button once

it is inside a dock

► Removing a panel group or panel: Drag the panel group or panel by the title bar or tab

respectively and either make it float by itself on the workspace or release the mouse button when you drag it inside another dock area

► Moving panels: When users are moving a panel, a faint blue highlight drop zone is visible This

is a demarcation area for areas on the workspace you can place the panel When the user drags the panel to a non-demarcated area The location of the mouse triggers the prospective drop zones for the panel

► Adding and removing panels: When a user removes all panels from a particular panel dock, the dock will disappear To add a panel to a dock, the user can select and dock it anywhere on the

workspace Alternatively, right clicking the tab and thereon selecting close will remove the panel

► Stacking panels: When panels are detached from a dock, they become free-floating panels As a

user, you can stack multiple panels or even panel groups as a single unit Similar to docking, you can stack a panel by clicking the tab, dragging and releasing the mouse button when the panel is

over another panel Shuffle the order of the panels as per your preference Always remember to

release the mouse button when the panel is between two panels instead of a title bar drop zone

You can follow the same process for removing a panel Refer to Figure 1.6

Figure 1.6: Free Floating Staked Panels

► Resizing Panels: Resizing panels or a stack panels can be done by dragging the panel from any side You can also maximize or minimize a panel or even a stack of panels by double-clicking a

1.3 Using the Stage

When you open Animate CC the rectangular blank that you see on the screen is the Stage Here you can place graphic content This area represents the Web browser window or Flash Player window, which will have the output of the document you are working on You can change the Stage view using the Zoom in and Zoom out options Refer to Figure 1 7 To assist users in positioning the graphics on the Stage features such as rulers grids and guides are available

This is Stage

Figure 1 7: Stage

1.4 1 Zoom the Stage

Zoom in and zoom out are handy features offered for users convenience Using these features, users can design intricate graphics based on the type of document they are working on Zoom tool offers various levels of magnification Minimum magnification is 8% and maximum is 2000% The Zoom tool

is in the Tools panel Let us look at how users can use the Zoom tool to their benefit:

► Zooming in (on an element): Using the Zoom tool, click the element You can use the Reduce

and Enlarge modifiers based on the need

► Zooming in or out (Stage): Click View and select Zoom In or Zoom Out options These options zoom in or zoom out entire stage

► Specific percentage: users can specify the percentage of magnification for Zoom in or out For this, you can go to View and click Magnification ➔ Show All

► Show Current frame content: For displaying the current frame contents got to View click magnification

► Show other elements on Stage: Many times users need to access other tools while working on

a scene in the document In order to show the other elements on Stage, users can click View ➔

Pasteboard

Note

On opening a document in Flash, a tab appears across the top of the document window Clicking the tab, displays the document

1.4.2 Moving Stage view

At times, when users magnify the Stage the other tools and panels on the Stage are not visible For changing the view you can use the Hand tool in the tools menu This tool will help you to move the Stage without changing the magnification level of the Stage You can switch between tools by holding down the Spacebar and clicking the required tool in the Tools menu

1.4.3 Stage Rotation

Animate CC has introduced a new Rotation tool, which helps users to rotate the Stage view briefly The Rotation tool helps in drawing and painting at a specific angle, without adjusting the actual objects on stage as compared to the Free Transform tool Using this tool, users can rotate the Stage, irrespective of which tool currently selected This can be done by holding down the Shift and Space keys together, and thereafter dragging the mouse to rotate the view

In order to use the Rotation tool:

► Select the Rotation tool (H) that is grouped together with the Hand tool (H) Alternately, users can press Shift and Space keys together for switching to the Rotation Tool temporarily while simultaneously working with other tools

► When the Rotation Tool is selected, the Pivot point for rotation will appear on the screen,

indicated by a crosshair Users can change the position of the Pivot point by clicking at any point

► For resetting the stage to its default view, users can click the Center Stage button

1.4.4 Scale the Content to fit the Stage Size

Animate CC also offers the Scale Content option Using this tool, users can scale the content featured on the stages as per their requirement Each time you resize the content it will resize based

on the proportion of the stage Users can directly access the Scale content option from the Property Inspector The option also includes a link option for proportionately increasing the dimensions of the Stage Similar to image and video editing options offered by other software the height and width or aspect ratio is locked You must ensure that the Linking option is enabled A1y changes to one property will simultaneously change the other property as well

Similar to the Pivot point, Animate CC also has the anchor point feature, which helps to scale the stage based on specific height and width When the 'Scale Content' option is disabled, the stage will use the directions based on the anchor point

1.4.5 Use Rulers

The Rulers are situated vertically and horizontally along the sides of the stage Users can change the measurement index of the Rulers based on their preference The Rulers have lines indicating the dimensions of the graphic element placed on the Stage Refer to Figure 1.8

► Show/hide rulers: Go to View ➔ Rulers

► Specify unit of measurement: Go to Modify and select Document Here you will find the Ruler

Units menu where you can specify the unit of measurement

Figure 1.8: Image Dimensions

Tip

Rulers and Grid can be enabled from the View menu

l.4 Summary

In this session, Introduction to Animate CC, you learned that:

► Animate CC can be used for animated cartoons for film, Web, and television

► Animate CC manages and creates symbols using the project lbrary and enhances the animation development process for the user

► Control panel has various options for a particular tool that is chosen by the user

► The Application frame assembles various workspace elements in one window When users work

on their file, they can resize or move the frame

► While working with Document windows, various open windows are arranged as tabs

► Users can shuffle the order of the panels as per your preference

► To assist users in positioning the graphics on the Stage, features such as rulers, grids, and guides are available

► Animate CC has an enhanced Rotation tool

J

'

1.5 Exercise

1 Whir.h kP.ys WhP.n prP.SSP.rl IO!JP.lhP.r will hP.lp in quir.kly rot;iting thP Str1gP.?

a Shift and Control

b Shift and Space

c Alt and Space

d Enter and Shift

2 Which of the following statements are true?

a You can change the unit of measure used in the rulers from the default of pixels to another unit

b When rulers show, they appear along the top and right sides of the document

c To create groups of stacked or tiled documents drag the window's tab out of the group

d To scale Stage so that it fits completely in the application window go to View ➔ Zoom 11 or View

3 What happens when you move or resize the Application frame or any of its element?

a The elements within it overlap

b All the elements within it respond to each other

c The Application frame turns into different small units

d The multiple applications cannot t>e positioned side-t>y-side

4 What is a common name for the Control panel in Animate CC?

Answers to Exercise

2 You can change the unit f measure used in the rulers from the default of pixels to another unit

3 All the elements within it respond to each other

2.1 Understanding the Timeline

The Timeline displays the places where the animations need to occur in the document This includes

frame-by-frame animation, motion paths, or tweened animation Controls of the layers section of the Timeline allows the user to hide, lock, or unlock layers, show and at the same time display layer

contents in the form of outlines One has the authority to drag Timeline frames to a new location on the similar layer or different layer In order to have a better understanding, refer to Figure 2.1

r, r.,

j I◄ ◄ I ► I ► ► I ♦ [! !ill ~ ~ ! · ~

Figure 2 1: Timeline of Animate CC

At the time when animation is being played, the original frame rate is shown There is a possibility that

it may vary from the document's frame rate setting in case the computer is unable to calculate as well

as display the animation fast enough

2.2 Changing the Appearance of the Timeline

The Timeline is shown by default in the main document window To change its position, users can detach the Timeline from the document window Thereafter it can be moved around or even docked

to any another panel You can also hide the Timeline Refer to Figure 2.2

Figure 2.2: Dragging the Timeline

To change the location of the Timeline you can:

► Drag the title bar to the bottom or the top of the document window This will help to dock and undock Timeline

► Drag the Timeline title bar to a chosen location This helps to dock and undock Timeline to other panels Pressing control while dragging will help to prevent Timeline from docking to other panels Blue bar appearing determines the place of the docking of the Timeline

► Drag the bar separating the layer names and frame portions of the Timeline This helps to shorten

or extend the layer name fields in the Timeline panel

2.3 Changing the Display Frames in the Timeline

Clicking the Frame View situated in the upper right corner of the given Timeline will help to show the frame view popup menu Refer to Figure 2.3

Figure 2.3: Frame View Pop-up Menu

Select from the following options:

► Selecting from large medium, normal, small or tiny will help to select the width of the frame cells {choosing the large frame-width setting will assist in viewing the details of the sound waveform)

► In order to diminish the height of frame cell rows choose short

► Choosing the Tinted Frames helps to turn the tint of the frames ON or OFF

► Selecting preview will enable the thumbnails of the content of each frame which is scaled to fit the

Timeline frames This may turn out to be the reason for the variation in the content size and may require extra screen space

► To show the thumbnail of the content of each full frame that includes the empty space, select preview in the context This is essential for the viewing the ways the elements moving in the frames over the course of the chosen animation In reality the previews are commonly smaller than with the preview options

► In order to customize the number of frames in the Timeline view, select between Fit Less Frames and Fit More Frames in view in the Timelinejust adjacent to the resize Timeline view slider

► To reset the Timeline zoom to the original state choose the Reset the Timeline zoom to the default level adjacent to the frame slider bar

Perform one• of the following actions to change the height of the layer:

► Double-click the layer's icon (the icon to the left of the layer name) in the Timeline

► Right-click the layer name and select Properties from the context menu

► Select the layer in the Timeline and select Modify ➔ Timeline ➔ Layer Properties

Here in layer properties; you can change the height of the layer by selecting the option 'Layer height'

2.3.2 Resize the Timeline

► In case the Timeline is docked to the main application window, drag the bar that separates the

Timeline from the stage area

► In case the Timeline is not docked to the main application window, drag to the bottom right corner

surrounding frames are dimmed, making it appear as if every frame were presented on sheet of semi

-transparent onion skin paper and the sheets were piled on top of each other The earlier frames appear to be on top of the present frame whereas the fr ame occurring post cu r rent frame eme r ge

below the current frame The dimmed frames cannot be edited In order to simplify for the

differentiation of frames, the outlines are color coded Blue is used to represent past, red for current, and green for future frames

Do one of the followings:

► Select the Onion Skin icon Iii (icon left to the Loop Icon) in the Timeline Every frame between start onion skin and end onion skin markers are superimposed in the form of one frame in the document window

► Choose [iJ to show onion skinned frames in the form of outlines Refer to Figure 2.4

- !I loYet , 3

!I Laye< 2

!I Laye< 1

Onion Skm Outlines

I I◄ ◄ I ► I► ►I + c! 'a ft:5 !I L ".;

Figure 2.4: Onion Skin Outlines

2.5 Moving the Playhead

The red colored playhead on top of the Timeline shifts as any document plays in order to depict the

present frame displayed on the stage The Timeline header displays the frame numbers of the

animation Moving the playhead to the frame in the Timeline helps to show a frame on the stage Refer to Figure 2.5

~ 11 uiu III I 1◄ ◄ 1 ► 1 ► ►1 ~ c! 'ii '{) ,e [ · ~

Figure 2.5: Mov;ng the Playhead

Moving the playhead will helps to display a certain frame while working with a great number o frames which cannot be displayed in the Timeline at once

► Clicking the frame's location in the Timeline header or dragging the playhead to the desired position will help to go to a specific frame

► Clicking the center frame button of the Timeline helps to go to the center of the Timeline of the present frame

► Turning ON the loop option streaming audio or animation can be looped within a range of frames

2.6 Understanding Layers

Layers assist in organizing the a work in the document One can draw or edit objects on one layer

without upsetting objects of other layers In regions of stage without anything on a layer one can see through it to the layers underneath

To draw, paint or even modify a layer or folder in the Timeline a layer must be selected to make it

active A pencil icon adjacent to a layer or folder name in the Timeline is indicative that the layer or folder is active Despite multiple layers can be selected, only a single layer can be active at a given time

At the time of creating an animate CC document only a single layer is formed Organizing the artwork

animation or other elements of the document addition of more layers is involved One can also hide, lock, or even rea ange the layers The number o layers one can create is d termined by the memory

of the computer and the layers do not exceed the file size of the published SWF file The objects placed into layers add to the file size

Creating layers and placing layers in them helps to organize and manage layers One can expand or collapse layer folder in the Timeline without affecting whatever is seen on the stage Using separate layers or folders for sound files ActionScript, frame comments, and frame labels helps to locate the

items easily

To create special sophisticated effects, apply guide layers to make drawing and editing easier and to mask layers

There are five layers that can be used for animation

► Normal layers include maximum of the artwork in a given FLA file

► Mask layers include objects that are used for masking or hiding selected portion of layers below

them

► Masked layers are available und rneath a mask layer and it is lnked with the mask layer The portion of the masked layer revealed by the mask layer

► Guide layer includes strokes which can be used to guide arrangement of the objects on the other

layers or motion of classic tween animation on other layers

► Motion Tween layers include objects animated with motion tweens

► Armature layers include objects with reveres kinematic bones attached

Normal Mask Masked, and Guide layers can have motion teens or reverse kinematic bones When these items are present in any one of those layers there are restrictions to the type o content that can be a dde d to th e layer

2 6 1 Create a Layer

When the layer is created, it appears above the selected layer The newly intr duced layer becomes the active layer

► Clicking the New Layer b tton below the Timeline Refer to Figure 2.6

Timeline Out put

9 Layer2

Ill j 1◄ ◄I ► I► ►I "'? ~ 'a

Figure 2.6: New Layer Button on the Timeline

► Select Insert ➔ Timeline ➔ Layer Re f e r to Figure 2.7

File Edit Vif?W Insert Modify Text Commands Control Debug Window Help

► Right-click a layer name in the Timeline and select Insert Layer from the context menu Refer to

II I •◄ ◄I ► I► ►I +

2.6.2 Create a Layer Folder

Perform one of the following:

► Select a layer or folder from the Timeline and select Insert ➔ Timeline ➔ Layer Folder

► Right-click a layer name in the Timeline and choose insert folder from the context menu The new

folder appears above the layer or folder that was selected

► Click the new folder icon at the bottom o the Timeline The new folder appears above the layer or

folder that was selected

2.6.3 Organize Layers and Layer Folders

In ord r to organize the document the layers and folders in the Timeline needs to be rearranged

Layer fold rs assist in organized workftow by placing layers in a tree structure Folders may include

both layers and other folders letting the user to organize layers in very much similar manner as one

organizes files of the computer

The layer control in the Timeline is responsible for affecting all layers within the fold r For instance

locking a layer folder locks all the layers that are within the specific folder

► To move a layer or layer folder into a destination layer folder drag the layer or layer folder name

to the destination layer folder name

► To change the ord r o layers or folders, drag one or more layers or folders in the Timeline to the

desired position

► To expand or collapse a folder click the triangle to the left of the fold r name

► To expand or collapse all folders, right-click and select Expand All Folders or Collapse All Folders

2.6.4 Rename a Layer or a Folder

The new layers are automatically named according to order such as layer 1 layer 2 layer 3, and so

on It is better to rename the layers for better reflection of their contents

One of the following steps needs to be done:

► Double-clicking the name o the layer or folder in the Timeline and entering the name helps to

modify the name in the name

► Right-clicking the name o the folder and selecting properties from the context me u Entering the

new name in the name box and clicking OK helps to modify the name

► Selection of a layer or folder in the Timeline and choosing the path Modify ➔ Timeline ➔ Layer Properties Then after entering the name in the name box click OK for renaming

2.6.5 Select a Layer or a Folder

Perform one of the following:

► Click the name of a layer or a folder of the Timeline

► Click any frame in the Timeline of the layer to choose

► Choose an object on the stage which is in the layer to select

► To choose contiguous layers or folders, click their names with pressing Shift in the Timeline

► To choose non-contiguous layers or folders, click their names with pressing Ctr! in the Timeline

2.6.6 Copy Frames from a Single Layer

► Choose from among a range of frames in a given layer To choose the entire layer, click the layer

name in the timeline

► Select Ed it ➔ Timeline ➔ Copy Frames

► Click the frame where one wants to start pasting and choose Ed it ➔ Timeline ➔ Paste Frames

To paste and replace the precise number o copied frames on the target timeline use the paste and Overwrite Frames option Refer to Figure 2.9 for full workflow

(., , ,,

(~,,., , _ _ ,.,.,,

'lot•:tt.11=-Figure 2.9: Paste and Overwrite Frames Workflow

A: Select frames and copy

p ,~11,., ,

B: Right-click the frame on which you want to paste and select Paste and Overwrite Frames

C: The pasted frames overwrite the exact number of frames on the Timeline

2.6.7 Copy Frames from a Layer Folder

► Collapse the folder by clicking the triangle situated on the left to the folder name in the timeline

Then click the folder name to choose the entire folder

► Choose Edit ➔ Timeline ➔ Copy Frames

► For creation of a folder, choose Insert➔ Timeline ➔ Layer Folder

► Click the new folder and choose Edit ➔ Timeline ➔ Paste Frames

2.6.B Delete a Layer or Folder

To select the layer or folder, click its name in the Timeline or any frame in the layer

Perform one of the following:

► Click the delete layer button in the timeline

► Drag the folder or layer to the delete layer button

► Right-click any of the layer or folder name and choose delete folder from the context menu When a layer folder is deleted all the enclosed layers and their con.tents are deleted as well

2.6.9 Lock or Unlock One or More Layers or Folders

► To lock a folder or layer, click in the lock column situated to the right of the name To unlock the layer or folder, click the lock column again

► To lock all folders and layers, click the padlock icon To unlock them, click it once again

► Dragging through the lock column helps to lock or unlock multiple folders or layers

► ALT clicks the lock column to the right of a layer or folder name in ord r to lock all folders or

layers Performing the function again unlocks the folders and layers

A keyframe can be explained as the frame where a new case symbol appears in the timeline A

keyframe can also be a frame that is inclusive of ActionScrip code to control few features of the document One can also add blank keyframes to the timeline as a placeholder for symbol that is planned to be added later, or leave explicitly the frame blank

Types of keyframes are as follows:

► A property keyframe is a frame in which one can define a change to the property of an object for

an animation Animate can tween or by defa lt fill in the property values between the keyframes

so that fluid animations are produced As property keyframes helps you to produce animation

without drawing every individ al frame so they make the animation easier Series of frames with tweened animation can be named as motion tween

► A tweened frame is a frame which is piece of a motion tween

► A static tween is a tween that is not the part o a motion tween

In order to control the sequence of events in the document and its animation the keyframes and

property keyframes are arranged in the timeline

2 7 1 Insert Frames in the Timeline

► To insert a new frame, select Insert ➔ Timeline ➔ Frame (FS) Refer to Figure 2.10

B l ank Kq,tr ame

Figure 2 10: Add Frame from Insert Menu

► For creating a new keyframe select Insert ➔ Timeline ➔ Keyframe (FG ) , or right-click the frame where user wants to place a certain keyframe, and choose Insert Keyframe from the context

menu Refer to Figure 2.11

Fite Edit Vi~

6_ t_2.fl.l X

Modify Tec:t Commands

Motion Twttn Shipe Tween

► To generate a new Olank keyframe, choose Insert ➔ Timeline ➔ Blank Keyframe , or right-click

the frame where user wants to place the keyframe, and choose Insert Blank Keyframe from the context menu Refer to Figure 2.12

Figure 2.12: Add Blank Keyframe using Insert Menu

2 1.2 Select Frames In the Tlmellne

Animate allows to select from two different frames in the timeline In the selection based on frame,

one selects isolated frames in the timeline In the selection based on span, the whole frame sequence from a keyframe to the next is chosen when one clicks any frame in the sequence One can specify span based selection in the animate preferences

► Clicking the frame helps to select one frame

► Dragging the cursor over the frames or clicking multiple frames holding shifts helps to select multiple contiguous frames

► To choose multiple non-contagious frames, hold control and click additional frames

► To choose the entire span in the timeline choose Edit ➔ Timeline ➔ Select All Frames

► To choose an entire span of static frames, double-click a specific frame between two keyframes

In case o span based selection enabled, click in the sequence

► For selection of the entire span based frames dick it once {whether its motion tween or inverse kinematics) If the Span Based Selection has been enabled in the preferences In case o Span

Based Selection disabled, double-click the span For selection of multiple spans, click each of them by holding the Shift key

2.7.3 Label Frames in the Timeline

One can label frames in the timeline in ord r to help in organizing its contents One can also label a frame so that they are able to refer to that frame in ActionScript by its label In that case if the timeline

is rearranged and the label is moved to an alternate frame number, the ActionScript will still refer to the frame label and do not require to be updated

Frame labels are also applicable to keyframes The most reasonable practice is the creation of a separate layer in the timeline for containment of the frame labels

To add a frame label:

► Choose the frame which is wised to be labeled in the timeline

► After the selection of the frame the label name needs to be entered in the label section of the property inspector Afte labeling Enter or Return needs to be pressed Refer to Figure 2.1

Figure 2.13: Label a Frame from Property Inspector Panel

2 7.4 Distribute to Keyframes

The Distribute to Keyframes option gives the authority to dis ibute multiple objects on the stage to

unitary keyframes each

► Choose more than one objects of any layer on the stage

► Right-click ant any place on the stage and choose distribute to keyframes

2.7.5 Copy or Paste a Frame or a Frame Sequence

Choose one from the following:

► Choosing the frame or sequence and select Edit ➔ Timeline ➔ Copy Frames Select the

frames or sequence that one wants to replace and select Edit ➔ Timeline ➔ Paste Frames

► Alt +drag a keyframe to the location where it is to be copied

2.7.6 Delete a Frame or a Frame Sequence

► Choose a frame or sequence and select Ed i t ➔ Timeline ➔ Remove Frame or right-click the

frame or sequence and choose Remove Frame from the context menu Adjacent frames remain

unaltered

2 7 7 Convert a Keyframe to a Frame

► Choose the keyframe and select Edit ➔ Timeline ➔ C lear Keyframe , or right-click the keyframe

and choose keyframe from the context menu

► The stage contents of the cleared keyframes and all frames to the succeeding keyframe are

replaced by the stage contents of the frame that precedes the cleared keyframe

from eResources 4 Me» My Varsity>> Web Animation Using Animate CC» Shaw Me Haw

2.8 Summary

► The Timeline displays the places where the animations need to occur in the document

► The Timeline is shown by default in the main document window

► The frame under the playhead is presented in full color, whereas the surrounding frames are dimmed, making it appear as if every frame were presented on sheet o semitransparent onion

► The red colored play head on top of the Timeline shifts as any document plays in order to depict the present frame displayed on the stage

► To draw, paint, r even modify a layer or folder in the Timeline a layer must be selected to make

it active

► Layer folders assist in organizing the workflow by allowing placing layers in a tree structure

► The new layers are automatically named according to order such as layer 1, layer 2, layer 3, and

► To paste and replace the precise number of copied frames on the target timeline use the paste

► One can label frames in the timeline in order to help in organizing its contents

2.9 Exercise

1 Which of the following statements is true?

a Armature layers contain objects with inverse kin matics bones attached

b Outlines are color-coded, where blue is used for current, red is used for past current, and green is used for future frame

c When you create a Animate CC document, it contains two layers

d If you delete a frame the surrounding frames are also deleted

2 Which length o time is used in Adobe Animate CC?

5 If the Timeline is rearranged and labels are moved what will ActionScript refer to?

a New frame label

c Second frame label

d First frame label

6 Which key combination is used for non-contiguous layers?

a Shift and click

b Ctrl and click

c Alt and Click

d Ctrl and Shift

Session 3

Creating Basic Shapes and Working with

Symbols

In this session, you will learn to:

► Create Basic Shapes

► Outline the types of Symbols

► Identify Symbols

► Describe the Library Panel

3.1 Creating Basic Shapes

The Rectangle and the Oval tools will help in creating basic geometric shapes, apply strokes, and also to specify the rounded corners Adding to the Object and Merge drawing modes, the Recta1gle and Oval tools do provide the needed Primitive Object type of drawing mode

While creating the ovals or rectangles with the respective tools, the Animate shall help in drawing the

shapes in the form of separate objects All these shapes would be unlke the shapes that the user

creates using the Object Drawing mode The corner radius part of the rectangles is specified using the primitive shape tools with the controls from the Property inspector It gets followed on the start and end part of the angles and with the interior radius o the ovals After creating the primitive shape, you can alter the dimensions and radius by picking up the shape from the Stage and by adjusting them using the controls within the Property inspector

3 1.1 Draw Rectangle Primitives

► In order to select the Rectan r:=J Primitive tool, you need to click and hold your mouse bLtton exactly on the Rectangle tool and then select the Rectangle Primitive tool D that can be

► When the rectangle primitive is selected, the user can make use of the controls from the Property

inspector for any further change in the shape and apply or fill with the stroke colors Refer to Figure 3.1

: El : Rectangle Primitive Tool

• Fill and Stroke

~ ·

-Stroke:

Style: Solid Scale: Normal , Hinting

Cap: C:

Join: I'; Miter:

• Rectangle Options

Reset

Figure 3.1: Properties of Rectangle Primitive

These Property inspector controls are specific to the Rectangle Primitive tool:

Rectangle Corner Radius Controls: This will let the user to specify their corner radius for the needed rectangle The user shall enter the numeric value in each of the text boxes that are necessary for the interior radius While entering the negative value, the user needs to create one inverse radius The user can also stop selecting constrain corner radius icon, so that the corner radius gets adjusted individually

Reset: It helps in r,esetting the Rectangle Primitive tool controls and also restores all the rectangle primitive shapes that are drawn upon the Stage based on its initial shape and size

► In ord r to specify various corner radiuses for every corner, you need to deselect it from the Lock

icon from the Rectangle Options area that belongs to the Property inspector Once it gets locked, all the radius c.ontrols are said to be restrained from getting the corner to use the same radius

► In order to reset all the corner radii, you need to click upon the Reset button from the Property

inspector

3.1.2 Draw Oval Primitives

► Click and then hold your mouse button upon the Rectangle tool D and then select the Oval Primitive tool 0

► In order to create an oval primitive, you need to drag the Primitive Oval tool from the Stage For constraining the shape into a circle just Shift and drag

► Once the oval primitive gets selected from the Stage, the user can make use of the controls that

can be found within the Property Inspector to modify it to any shape or fill up with stroke colors

Refer to Figure 3.2

Propert i es

Oval primitive

► Position and Size

, Fill and Stroke

► All the Property Inspector controls are same with the Oval Primitive tools

slices, and with other creative shapes

• Inner Radius: This is the interior part that lies within the oval The user can enter their

desired number value for this inner radius inside the box even click upon the slider to

interactively adjust the inner radius size The user can also enter values that start from o to 99

by representing the fill percentage that shall be removed later

• Close Path: It defines the user specified path to stay closed If the user specifies the open path, then no other fill shall get applied to the ending shape until a stroke is drawn The close

path gets selected by defa lt

► Reset It resets the Oval Primitive control tools and helps in restoring any oval primitive shape thiat

is drawn upon the initial shape and size

3.1.3 Draw Ovals and Rectangles

The Rectangle and Oval tools form these geometric shapes

► In order to choose the Rectangle tool D or the Oval toolO , click and hold the mouse button

► In order to create an oval or rectangle the user needs to drag the Oval or Rectangle tool upon the Stage

► For the Rectangle shaped tool, the specified corners that are rounded shall be selected by

clicking upon the Round Rectangle modifier and by entering a value for the corner radius Zero as

a value shall create a square corners

► Drag upon the Stage If you are about to use the Rectangle tool, then press the Up Arrow and

Down Arrow keys by dragging them to adjust the radius o the rounded corners

► For the Rectangle and Oval tools, you need to Shift and drag, in order to constrain the exact

shapes with the circles and squares

► In order to specify the specific size of the rectangle or oval, you need to select the Rectangle or Oval tool and by pressing the Alt key Later on, click upon the Stage, so that the Rectangle and

Oval setting dialog box gets displayed

► For the ovals, the user needs to specify the height and width in terms of pixels and to draw them

from the center

For the rectangles, the user needs to specify the heig t and width in terms of pixels and then draw them from the center or not

3.1.4 Polygons and Stars

► You can choose the PolyStar toolO by clicking and holding on the mouse button upon the Rectangle tool and then by selecting it from the pop-up that appears on the screen

► Select Window ➔ Properties and then select stroke and fill attributes