Web AnimatiOIIJsinu Animate CC 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 APTECH LIMITED Head Office: Aptech House, A-65, MIDC, Marol, Andheri (East), Mumbai - 400 093, India www.aptech-worldwide.com E-mail: customercare@aptech.ac.in Edition: - October 2017 ® ARENA MU LTIMEDIA 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 Animate CC About Animate CC About Workspace Manage Windows and Panels Using the Stage Summary Exercise Session 02: Working with Tirneline, Layers, and Keyframes Understanding the Timeline Changing the Appearance of the Timeline Changing the Display Frames in the Timeline Onion Skinning Moving the Playhead Understanding Layers Using Keyframes Summary Exercise Session 03: Creating Basic Shapes and Working with Symbols Creating Basic Shapes Types of Symbols Editing Symbols Using Library Panels Summary Exercise Session 04: Working with Filters and Effects Understanding Filters Working with Filters Applying Filters Summary Exercise Session 05: Creating Animation for Web Understanding Motion Tween Understanding Classic Tween Understanding Shape Tween Creating Animated GIF Technical Aspects of Web Animation Summary Exercise Session 06: Understanding Complex Animation Importance of Movie Clip in Complex Web Animation Working with Multiple Timelines Working with Scenes Summary Exercise Session 07: Working with Sound and Video Using Sound in Animate CC Importing Sound Adding Sound Using Video in Animate CC Summary Exercise Session 08: Understanding Basic ActionScript Getting Started with ActionScript The Actions Panel Overview of Script Window Tools in the Actions Panel and Script Window Writing and Managing Script Summary Exercise Session 09: Publish Animate CC Projects Exporting SWF Files Exporting Graphics and Videos Exporting Projector Files Summary Exercise Ov-liv-evAYsiti INDUSTRY BEST PRACTICES SYNC WITHTHEINDUSTRY Session 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 1.1 About Workspace Animate CC offers an elaborate workspace This workspace helps to manipulate and create documents by employing various elements that could enhance the document further This inclLdes windows panels and bars In order to provide users the ability to have their workspace in order Animate CC offers the workspace just like the other in the Adobe Creative Suite This allows adapting easily to the working of the various tools and panels offered Refer to Figure 1.2 for a labeled overview of the Animate CC Workspace 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 of 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 Tools ~ ; •: : tt ~== • ~ T / El ,,,♦• r:_/ ,./ • • @) • I- • ~ "".J JI ;:;· •.•· • e » ~ ■ "1 ■ -·• Figure 1.4: Tools Panel Quick Test 1.1 Application bar contains tools for creating and editing images a True b False The type of projects you can create with Animate CC is limited a True b False ► Control panel: This is a common panel available in various software It houses various options for a particular tool that user chooses In case of Animate CC, the Property Inspector serves as a Control panel Refer to Figure 1.5 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 The command gotoAndStop() imparts the information about the frame where it needs to go and where it should stop Therefore, it requires a single parameter in the parentheses IshortFHm.9o