E-BOOK Explore Adobe Animate CC 2018 Learn the basic step to create an interactive content SAFIANI BINTI OSMAN HAIZATUL AKMA BINTI HAZALI
Explore Adobe Animate CC 2018 : Learn the basic step to create an interactive content Copyright 2021, Politeknik Muadzam Shah Material published in this e-book is under copyright of the Politeknik Muadzam Shah. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic,mechanical, photocopying, recording or otherwise without prior permission in writing from the publisher. The author has put forth its best in preparing and arranging the content in this ebook. The information provided here is true to best of author knowledge. The author disclaim any liabilities in connection with the use of information in this e-book. Author : SAFIANI BINTI OSMAN Department of Design and Visual Communication, Politeknik Muadzam Shah Bachelor's degree of Multimedia (Hons), Universiti Utara Malaysia Master of Science (ICT), Universiti Malaysia Pahang HAIZATUL AKMA BINTI HAZALI Department of Design and Visual Communication, Politeknik Muadzam Shah Bachelor's degree of Creative Media Computing, University of Hull, United Kingdom Master of Computer Science, Newcastle University, United Kingdom Explore Adobe Animate CC 2018 : Learn the basic step to create an interactive content
The completion of this e-book could not have been possible without the assistance of so many people whose name may be not be enumerated. Their contribution are highly appreciated and gratefully acknowledged. Acknowledgment Explore Adobe Animate CC 2018 : Learn the basic step to create an interactive content Assalammualaikum w.b.t and Good Day ! Thanks to Allah S.W.T for granted us strength in the most trying time to complete this e-book. We have learned and experience so much during the process. Alhamdulillah. To all family members, colleague, relatives and others who in one way or another shred their support either morally and physically, Thank You. To all of our student, thank you for being our inspirations while finishing this workbook. May this ebook be beneficial to you. Much love from us, Safiani & Haiza
Explore Adobe Animate CC focuses on the basic skill needed to acquire Animate CC. Using a step-bystep tutorial, this e-book will assist and lead you from basic technique to the level where you can create animation, deploy an interactive project and motion design content for various platform. This e-book consists of 7 chapter that cover the basic lesson. You can scroll down chapter by chapter or you can choose your preferable lesson. You will begin by knowing Adobe Animate quickly. Next, you will be getting familiar with the environment that you will work most such as timeline, properties and library. Moving on, you will learn the features and you will able to create simple animation. Following this, you will able to create a simple interactive design content where the used of action script and button will be shown. This e-book ends with on how to integrating video and audio in your project and publishing your project. This book is for those who are beginner user in Adobe Animate CC to understand and creating and deployment interactive media content. Preface Explore Adobe Animate CC 2018 : Learn the basic step to create an interactive content
Introduction to Adobe Animate CC Understand Adobe Animate Tool About Symbols T A B L E O F C O N T E N T 01 02 Create New File in Adobe Animate Getting to Know the Interface Understand the Timeline Preview and Saving Your Movie Creating Shapes Creating Curves Adding Text in Adobe Animate Creating Graphic Symbols Working with Movie Clip Symbols Importing Illustrator AI Files to Animate CHAPTER PAGE Getting Familiar with Adobe Animate CC 2018 1 4 6 8 11 Creating Shape and Text 12 16 19 20 About symbols 26 27 32 34 Introduction to Animating in Adobe Animate Create Frame by Frame Animation Create Classic Tween Create Motion Tween Create Shape Tween Animating Symbols and Mask 36 38 41 43 46 03 04 Arranging Object in Adobe Animate 23 Create Animation Guide 48 Create Masking in Animate 50 New Feature of Adobe Animate CC 2 Creating Button Symbols 30 Importing Photoshop PSD Files to Animate 35
T A B L E O F C O N T E N T 05 06 CHAPTER PAGE Creating Interactive Navigation 53 60 62 66 Working with sound and video 69 72 78 Publishing 89 91 102 07 Creating Button and Animate Button Understand ActionScript 3.0 Creating Scene to Scene Creating a Simple Quiz Importing Sounds Placing, Moving and Clipping Sound Incorporate Video in Adobe Animate About Publishing Publishing to Desktop Publication Publishing to Mobile Devices Exercises 110 References 113
In January 1997, FutureWave Software and its product has been sold to Macromedia, and then rebranded the name to Macromedia Flash. Since then, Flash gain so much popularity and synonyms with animation on the internet. Macromedia is the one who responsible to create web browser plugin and ActionScript programming language. In 2005, Adobe Systems acquired Macromedia and all their software including Flash and continues to be the owner of this software to this date. Under Adobe, had added some wide range of advance tool and functionalities. The development of Animate started from an early vector based graphics application known as SmartSketch. This software was use on stylus based devices developed by a company known as FutureWave Software. However, SmartSketch had to compete with others great software back then such as Illustrator and Freehand. Therefore, SmartSketch has been retooled it to be able an animation where people can play back and send graphic and animation over the Internet or browser. This product has given name as FutureFlash Animator. From FutureWave to Macromedia and now to Adobe, Animate has changed a lot over the years! Take a look at the logo below : Chapter 1 Getting Familiar with Adobe Animate CC 2018 Introduction to Adobe Animate CC With Adobe Animate CC, user can create vector animations, advertisements, games, motion graphics and other interactive media content and can be published to multiple platform like HTML5 Canvas, Flash Player&Air, WebGL and Snap SVG. Using Adobe Animate CC 2018 is a wise choice to develop a wonderful creations. Hence, let’s begin to get enlightened on the features. In late 2015, as the emergence of HTML5 and the demands for animations that leverage for web standard, Adobe target to create a new platform such as HTML Canvas. Adobe announced the next version of Flash Professional will be renamed as Adobe Animate CC. PAGE 01 Figure 1 .1 Adobe Flash and Adobe Animate logo
Adobe Animate CC introduces virtual camera functionality where you can stimulate camera's movement to give animation a more realistic view. Chapter 1 Getting Familiar with Adobe Animate CC 2018 New features of Adobe Animate CC Camera workspace A. Camera icon B. Camera properties C. Camera color effects D. Camera layer Adobe Animate Camera In others word, with camera, you are allow to pan the subject of the frame, zoom in the subject of interest, zoom in and out out the frame, rotate the camera and modify focal point. Hence, you can make your animation more dramatic. Camera tool is available for all the built-in doc-types in Animate - HTML Canvas, WebGL, and Actionscript. A B C D PAGE 02 Figure 1.2 Adobe Animate Camera Workspace
Chapter 1 Getting Familiar with Adobe Animate CC 2018 Export Format - Publish to any format Vector brushes Adobe Animate CC allows anyone to view their animations from desktop to mobile devices because this tool has adapted the web standards for the exporting animation. The best part is, you can view the animation without install the flash player plug-in. Adobe Animate CC lets the user to export the animation in multiple platforms easily including HTML5 Canvas, WebGL, Flash/Adobe AIR, and custom platforms like SVG. In addition, this program has introduced a new OAM packaging which enables you to package assets in .zip format. Another new features in Adobe Animate CC is vector brushes kind of similar to Art Brush and Pattern Brushes in Adobe Illustrator. Using this updated brush tool, you can resize, move, color, and animate your brush strokes in drawing. For instance, you can can create a characters that can talk, walk, blink that responds to the interaction . Adobe Animate CC allow you to sync audio in your animation. So, if you create animation series, you can do audio synchronization. Font Audio Sync Adobe Animate CC comes with the integration of Adobe Fonts. Thus, you have a thousand even a countless web fonts via a subscription plan and use them in HTML5 canvas documents. Or with any level of Creative Cloud plan, you can try limited fonts available in the Typekit library. Obviously, if you paid for the full plan, you get access to the full library that contain a thousand fonts. The Adobe Fonts library is available to you with your Creative Cloud subscription. PAGE 03
To start, type in search box Adobe Animate CC and click on the Adobe Animate CC. The welcome screen let you to perform the action by clicking at the link. Figure below shows the welcome screen link of Adobe Animate CC for you to Open on document that you work recently, creating new document from templates and create new document. 1. 2. Chapter 1 Create New File in Adobe Animate Getting Familiar with Adobe Animate CC 2018 PAGE 04 3.To create new document, in welcome screen's Create New Section, click ActionScript 3.0. Animate will open a new blank document. Or Select File --> New. Figure 1.3 Adobe Animate Welcome Screen Figure 1.4 Create new file Animate
Chapter 1 Getting Familiar with Adobe Animate CC 2018 PAGE 05 5. Click OK. The new file has been created. You also can choose and change the setting of the document. Figure 1.5 Setting properties for new file 4. Set your properties for the file such as color stage and size of stage. By default, your size of stage will be set 550px (height) and 400 (width). Create New File in Adobe Animate (continued)
1. After create a new document, the next step is you have to know the are of Adobe Animate workspace as show below. By default, Adobe Animate will display a menu bar, time line, library panel, tool panel, properties panel, and stage. Chapter 1 Getting Familiar Getting to Know the Interface 2. Below is the description for each of the common work area in Adobe Animate : Menu Bar located at the top of application window consist of main menu with a drop down menu to control functionality. Timeline is a panel to organize the layer and to control the animation. The main component in Timeline is Layer, Frame, and Play head. See figure below: Stage Timeline Tool Panel Properties Panel Library Panel Layer Playhead Frame Timeline header PAGE 06 Figure 1.6 Animate Interface Figure 1.6 Animate Interface
Chapter 1 Getting Familiar Getting to Know the Interface Library Panel is a panel to store and organize all the media that you use in the project, either you create in the Animate named as symbols or you import from others application to use in the document. Tools Panel is a group of tool use to select, draw, paint and modify an object and to change the view of the stage. To reveal your tools panel, simply click Window --> Tools and the panel will be displayed. Stage is a rectangular area located at the top center of the interface where you build your animation, It contains Properties Panel is a panel to display information, settings, and attribute for the object selected. Choosing a New Workspace Beside the Essential workspace, Animate also have a preset workspace to suit the objective of the user. To choose a new workspace, go to Window ---> Workspace. Below show a few preset workspace provided by Animate. For example, Animator workspace will arrange timeline at the top for easy access as the frequency of use. You can save your own preferred of window arrangement by save it as custom workspace. New workspace ---> name your workspace and click OK. When you open the document, choose Window, ---> Workspace ---> Your custom workspace will appear. If you wish to use the default workspace, Go to Window --- > Workspace ---> Essentials. PAGE 07 Figure 1.7 Type of Workspace in Adobe Animate (continued)
Chapter 1 Getting Familiar Understand the Timeline Timeline components has two main part : layer on the left and frame on the right. PAGE 08 Layer Icon - show the layer type. If you double click, it will display a Layer Properties. Layer Name - to organize your documents, it is advise to rename each of the layer by double click at the layer name. You also can re-arrange the order by select and drag the layer. Active Layer - the layer with a slash indicate that the layer was lock or hidden from view. Visibility of the Layer - to show or to hide click the eye icon. To lock the layer as well as to prevent any changes made to it, click lock icon. To unlock, simply click it again. Create and Delete Layers/Folder - the first icon in the box used to create a new layer. To copy the layer, drag the layer to the icon. The second icon is to create a new folder. The third icon used to delete. To delete selected layer, click and delete. Or to delete a folder, drag the folder to the icon. Figure 1.8 Timeline in Adobe Animate Figure 1.9 A shadow layer has been invisible by click the lock icon
Playback Control Chapter 1 Getting Familiar Understand the Timeline PAGE 09 Frame Keyframe Span Loop Onion Skin Term in timeline : Frame Key frame Span Playback Control Onion Skin Loop Each little rectangle is a frame. The red bar indicate the current frame. Indicates by a small circle dot. It is a frame that a new symbol added to timeline or an ActionScript added to the layer. End of animation or the next frame is key frame. To control the animation. Allow you to view the animation in low capacity. It give a picture on how your animation flow. Loop the region inside the box. Figure 1.10 A function in timeline (continued)
Chapter 1 Getting Familiar Add or Insert Frame in Timeline To insert a new frame , click Insert ---> Timeline --->Frame. (Press F5) To create a key frame, click Insert ---> Timeline ---> Keyframe (Press F6) or you can click at the desire frame on timeline, and right click. PAGE 10 Copy, Paste, Delete and Move the Frames To copy, select the frames, go to Edit --> Timeline --> Copy frames. Then, select the frame you want replace, and select Edit -->Timeline --> Paste Frames To delete, select the frames, go to Edit --> Timeline --> Removes Frames or Clear key frame to clear the context menu. Figure 1.11 To insert frame or key frame by right click Figure 1.12 To remove, delete and move the frame
Chapter 1 Getting Familiar Preview and Saving Your Movie You can go move the red play head back and forth to preview it quickly or you can click Control --> Play. You also can use the playback controller at the bottom of timeline window. Second, click Control -->Test. This option lets you to test the whole movie. or you can simply press Enter. Third, to test only current scenes, click Control --> Test Scene or CTRL +ALT +Enter To preview your movie, there are several ways can be done. 1. 2. 3. PAGE 11 To Save your Movie To save your movie, click File --> Save As or CTRL + SHIFT + S. A Save as dialog will appear. Choose the location to save your movie. For example My Documents\. In File name, fill in with your desire file name. In Save as type, choose Animate Document (.fla). Click Save. 1. 2. 3. 4. Figure 1.13 To save the Animate file To Preview Your Movie
Chapter 2 Creating Shape and Text Understand Adobe Animate Tool PAGE 12 Selection Tools in Adobe Animate Pointer Tool Subselection Tool Transform Tool 3D Rotation Tool Lasso Tool Below is the explanation the function of each tools labelled above : Pointer Tool ( Shortcut : V) This tool allow you to select the whole object and also different part of the drawing. Once you select, you can drag, delete or transform as a single object. Subselection Tool (Shortcut : A) This tool allow you to select the anchor points and you use this tool to reshape the path of animation. You can adjust the anchor points and Bezier handle to modifying the shape. Transform Tool (Shortcut : Q) This tool let you to free transform an object, where you can modify the height and width from anywhere. It also allow you to rotate the object. 3D Transform Tool (Shortcut : W) This tool can be used on any movie clip to rotate and transform the object around in x-axis, y-axis and z-axis. Lasso Tool (Shortcut : L) This tool can be used to create a irregular outline of an object, or to select an individual area of line that cannot selected using pointer or sub selection tool. Consist of 3 type : Lasso Tool, Polygon Tool and Magic Wand Tool. Figure 2.1 Type of selection tool in Adobe Animate
Chapter 2 Creating Shape and Text Understand Adobe Animate Tool PAGE 13 Drawing and Painting Tools in Adobe Animate Pen Tool Pencil Tool Type Tool Line Tool Brush Tool Below is the explanation the function of each tools labelled above : Pen Tool ( Shortcut : P) This tool have a similar features as pen tool in A.Illustrator and A.Photoshop. It is used to draw a precise path as a straight line or smooth or a curve. Each time you click on stage, you create an anchor point. Adjust the anchor points to get a straight or curve segments. Type Tool (Shortcut : T) This tool is to create a text box. Text can be transformed using free transform tool. Line Tool (Shortcut : N) This tool is to create line. The color is depend on the stroke colors. Sharp Tool (Shortcut : R) This tool allow you to draw a different shape simply by click and drag to stage. The color can be change in stroke and fill functions. Shape Tool Pencil Tool (Shortcut : Y) This tool used to draw a line with current stroke color. You can change the mode of the line by scroll down and choose an option Strengthen, Smoothing and Ink. Brush Tool (Shortcut : B) This tool used to draw tool based on strokes. It can be custom the shape and angle to suit your drawing need. Figure 2.2 Drawing tools in Adobe Animate (continued)
Chapter 2 Creating Shape and Text Understand Adobe Animate Tool PAGE 14 Color and IK Bones Tools in Adobe Animate Bone Tool Width Tool Paint Bucket Tool Ink Bottle Tool Below is the explanation the function of each tools labelled above : Bone Tool ( Shortcut : M) By applying this tool, you create a rig to character where you can see a separation shape in head, body, hand, leg and etc. But the shape a connected to each others. Paint Bucket Tool (Shortcut : K) This tool lets you to fill the selected enclosed area with a fill color area. If you apply on the outside enclosed area, it will cause a whole stage fill the color. Eyedropper Tool (Shortcut : I) This tool is used when you want to pick the same color on object that already have in your stage. Eraser Tool (Shortcut : E) As name as eraser, this tool use to erase line, shape or fill in your stage. Eyedropper Tool Width Tool (Shortcut : U) You use this tool to change the size of strokes and create a strokes profile based on your preferred to be use frequently. Eraser Tool Ink Bottle Tool (Shortcut : S) This tool works the same way as Paint Bucket Tool but applied only for strokes not fill. Figure 2.3 Color and IK Bones Tool (continued)
Chapter 2 Creating Shape and Text Understand Adobe Animate Tool PAGE 15 View and Stroke & Fill Tools in Adobe Animate Stroke Color Camera Tool Hand Tool Below is the explanation the function of each tools labelled above : Camera Tool ( Shortcut : C) In order to enhance your animation, you can apply this tool to add an effect to pan, zoom and rotate your animations. Hand Tool (Shortcut : H) This tool lets you to drag or move the stage so that you can view the object . Using hand tool, you can pans your view and moving the canvas Zoom Tool (Shortcut : Z) This simple tool allow you to zoom into your stage to get a closer look your object. Stroke and Fill Color Stroke and fill color has a pop up menu like this to allow you to choose your preferred color. Zoom Tool Ink Bottle Tool (Shortcut : S) This tool works the same way as Paint Bucket Tool but applied only for strokes not fill. Fill Color Figure 2.4 Stroke, Camera and View Tool Figure 2.5 Color Swatches (continued)
Chapter 2 Creating Shape and Text Creating Shapes PAGE 16 Change Size of Stage Before we start, by default the size of stage was set at 550 x 400 pixels with white background and the frame rate was 24fps. Therefore, to change the size of stage, follow the step below : 1.Click Property Panel Tab, click on Properties drop down menu. 2. On size, change the width (W) and Height (H) to 800 x 600 px. Use pixel as your unit as it was a default unit for stage size. 3. Click on stage to change the stage color to your preferred one. 4. Click on Advanced Settings, you can make this size as default by click Make Default button. 5. Check the Scale Content box if you want to resize the content when the stage is resized. 6. Now, you are ready to make a new object on stage. Figure 2.6 Properties Panel
Chapter 2 Creating Shape and Text Creating Shapes PAGE 17 Draw a cartoon face using basic shape To create a face. Click on Tool Tab, and click oval tool or press O to activate Oval Tool. Then, draw a round object sized 200 x 200 pixels, colored with skin color. (#FFCC99). Press again O, and then draw an oval sized W:50 H:88. Press V, select the small oval, press CTRL+C and then CTRL +V. Arrange the small oval as shown in figure below. 1. 2. 4. Now, we are going to create a mouth. Press 0, sized 120 x 120 pixel and fill color with deep red (#990000). Double click the oval, using selection tool, select a top half of the oval, and then press delete. Now you have a mouth. 3.To draw an eye, press O, fill color with black (#000000) and draw another oval with a smaller size fill color with white (#FFFFFF) as eye iris. Copy and paste and arrange on the face. Refer figure below : Figure 2.7 Combine an oval shape to create a head Figure 2.8 Using oval and fill to create an eyes Figure 2.9 Using oval and cut into half to create a mouth (continued)
Chapter 2 Creating Shape and Text Creating Custom Shape PAGE 18 5. To add some teeth, select the upper of the mouth using selection tool, fill in white color. To create a tongue, simply click the lower of the mouth, and fill in with light red (#CC3300). 6. Bring your selection tool to the tongue, wait until a black curve line appear , and then bend a bit to have a realistic tongue. Figure 2.10 Using selection tool to curve the shape to create a tongue 7. Next, to draw a hair. Press O, draw an oval colored with black. Next, select the bottom of the oval, press delete to get a half of oval. 9.Press A (subselection tool), click on the hair. An anchor point will appear. Adjust the anchor point, to get a hair cut. Repeat the process. 8. Next, draw a rectangle at the middle of the hair, and hit delete. Refer figure below. 10. Save your file as cartoon face in your desired location. Figure 2.11 Using oval and cut into half to create a mouth Figure 2.12 Cartoon face using shape
Chapter 2 Creating Shape and Text Creating Curves PAGE 19 Pen tool allow you to draw line, path and series of line. It is also used to manipulate existing line. The curve can be modified by adjusting the handle - named as Bezier or you can moved the anchor point. To help your modifying, make the grid visible, so that you can aligning anchor point easily. Click Pen tool on the tool panel. With out releasing the mouse, click on the stage, drag up and then release the mouse. Position the pointer on the right of the original pointer, drag your mouse in the opposite direction. You can see a curve is making. Release the mouse when you satisfied. 1. 2. 3. 4. 5. 6. Repeat the same process to create a flower motive. and fill the flower using fill. 7. Save your file as curve.fla Figure 2.13 Create curve using pen tool Figure 2.14 Modify the curve using bezier handle
Chapter 2 Creating Shape and Text Adding Text in Adobe Animate PAGE 20 Type of text field You can create 3 type of text field in Adobe Animate. Static Text : Display text that doesn't change at run time. Dynamic Text : Text that changed and updated at run time such as weather reports. Input Text : Text field that allow user to input text such as form or username. Creating Text 1. In tools panel, click on Text Tool - the big T (or press T for shortcut key), 2. On stage, click and create a text box or double click at and enter word Adobe Animate Text. Once you have create text, there are several text properties you can change as shown in figure below. This panel located at Properties Tab. Make sure you select the text first using selection tool to activate the properties Changing Text Properties Font Family Font Style e g: Bold, Italic Font Size Text alignment Word Spacing Font Color Text Indent Line Spacing Text Field Figure 2.16 Property panel for text Figure 2.15 Create text using Type Tool
Chapter 2 Creating Shape and Text Adding Text in Adobe Animate PAGE 21 Changing Text Properties Click Selection Tool or press V, and select the object text on stage. On Properties panel, click on Family drop down menu, choose : Verdana , and then click on size enter 40. To change the color of font, simply click on Fill and choose blue color (#0000FF), and change the style to Bold Italic. At paragraph : choose align center. Drag the text to the center of stage area. 1. 2. 3. Break Apart Text You can break apart each character into separate text field. So that, you can distribute the each character to separate layer and animate if freely without disturbing others character. To do that, create text Adobe Animate with Font : Arial Black, Size : 60, Style : Bold, color maroon (#CC0000). 1. 2. 3. Press V to activate Selection Tool, and select text object. 4. Click Menu Modify > Break Apart or press Ctrl + B. To distribute the character to each layer, use Distribute to Layers by click Ctrl + Shift + D Figure 2.19 Each of character has been separate Figure 2.20 Each character has been distribute to separate layer in timeline Figure 2.17 Changing color of text Figure 2.18 Changing the property of text (continued)
Chapter 2 Creating Shape and Text Adding Text in Adobe Animate PAGE 22 Break Apart Text 5. Hold shift key, select character d, b, m n and t. 6. On properties panel, change the fill color to blue (# 0000FF) and family font to : Bookman Old Style. 7. To group all the character in to one, use selection tool select all character, and press CTRL + G. 8. Save as break apart character.fla. Create a text hyperlink In Adobe Animate, you also can create URL text that can be clicked and link to the URL address, in condition the Adobe Animate has to be published and you device has an internet connection. If you have an existing text, select the text using text tool T or if you want to link all the text in the text field, use selection tool to select the field or Create text www.adobeanimtutorial.com with Font : Arial, Size : 20, color : blue (#0000FF). In the link at option section, enter the url to which you want the text go. Save as text url.fla. 1. 2. 3. 4. insert the URL here Figure 2.21 After assigned break apart, each character can have their own property Figure 2.22 Option panel to include the link (continued)
Chapter 2 Creating Shape and Text Arranging Object in Adobe Animate PAGE 23 Ruler and Grid right click --> ruler (Ctrl+Shift+Alt+R) or Click View Menu --> Ruler. 1.You can display ruler in Animate by simply do : 2. You also can show grid by doing the same step as above. To edit property of grid, right click --> edit grid. or View --> Grid --> Edit Grid. Ruler Grid Grid Properties 3. Another thing you can do with ruler is to add guide. For example, if you want to create border, click ruler and drag out to stage. You can see a tiny blue line. With that guide, it help you to arrange the object . Guide Guide 3. Double click at line to change the properties of your guide. Figure 2.23 View grid in your stage Figure 2.24 Add guide in your stage
Chapter 2 Creating Shape and Text Arranging Object in Adobe Animate PAGE 24 Stack Object Select the object, do one of the step below : Click Modify --> Arrange -->Bring to front or send to back . This is to move the object to the top or bottom of stacking order. Click Modify --> Arrange --> Bring Forward or Send backward to move the object forward or backward in stacking order. You also can use the fastest method by select the object --> right click --> arrange. In Adobe Animate, the object was stacked based on the order, which mean the recent object will place on the top. You can change the overlap object using arrange function. Before that, make them into symbol. 1. 2. Beside that, layer order also effecting the stacking order. For example, object in Layer 1 will appear in front of object in layer 1. Re-arrange the layer by dragging the layer into a new position. Align Object To align object, select the object, go to Modify --> Align. The Align properties panel will appear. Move your cursor at the icon to see what it does. Choose your desire align for the object. 1. 2. Figure 2.25 Align panel in Animate (continued)
Chapter 2 Creating Shape and Text Arranging Object in Adobe Animate PAGE 25 Align Object To align object horizontally, click the object on stage. Before that, create a horizontal and vertical space among the items. In the Align panel, choose Align left edge and align horizontal center. You can see Animate re-arrange the object based on your preference. 1. 2. 3. Match Object You can match the height and width of the object . For example, you want to change the shorter item to match with the taller item (match width). Align the object and click match width. 1. 2. 3. 4. You can apply a series of alignment to the same items. For instance, you can select all item, and arranging it left edge, and then equal the vertical space among the item. Figure 2.27 Align panel in Animate Figure 2.26 Align panel in Animate (continued)
Chapter 3 Creating Symbol About symbol PAGE 26 Graphic - use for static image or animation. A drawn vector, plain text or imported Button - create an interactive button that respond to mouse click, roll over or other event. You can create a button from graphic and add button states (up, over, down, hit). Movie Clips - reusable animation which have their own timelines. It like a submovie run inside the main movie. It can be one or more graphic symbols. A symbol is a reusable object created or used in Animate. You can reuse the symbol through out the document or in other document. There are 3 type of symbols that will be function as one of the three behavior : photo or any combination of this element can be converted into graphic. An Instance is a copy of the symbol or inside others symbol. Instance can have their own independent properties (dimension, position, color, size and function) that different from the original symbol. Editing the symbols will update to the all of it instance, but applying an effect will only change that instance not the original or others instance. The instance type can be change at Properties panel. Advantage using symbol Easily duplication animation. If you create a graphic for animation, you can use the same graphic for a multiple frame. For example, if you wish to change the size one of the part of the symbol, by changing the symbols in library, the entire instance of the symbol in the composition will be updated. Every symbol has it own timeline. Therefore, it provide flexibility where it can be played independently in the timeline. Button and Movie clip can be controlled using ActionScript. You can dynamic of the behavior. Using symbol in your document can reduce file size. Creating and saving a multiple content of symbol require a bigger space compare to creating and saving a several instance of the symbol. There are many reason to use symbol :
Chapter 3 Creating Symbol Creating graphic symbols PAGE 27 1. Use a brush tool by click on brush tool at tool panel or press B. Draw an ice cream. 2. Press V for selection tool to select the whole object. Then, go to modify --> Convert to Symbol or press F8. 3. A box should be appear. Name your symbol as : ice cream, and choose type as graphic. Press OK. 4. Now, your symbol should be in library. To call your library, click Window --> Library. Figure 3.1 Using brush tool to draw ice-cream Figure 3.2 Convert the symbol to graphic Figure 3.3 The symbol inside the library
Chapter 3 Creating Symbol Creating graphic symbols PAGE 28 6. Click on the ice cream in library panel and drag to stage. You can change the size by scale it down. 7. Repeat the same process but change the properties. You can scale, rotate or move the ice cream. 8. Note that, you can create as much ice cream but only ONE ice cream symbol in your library. Editing symbol Double click at any ice cream symbol on stage or double click "ice cream" at Library. If you notice, other object will be fade out - indicating that you are in symbol. Change the color of the ice cream to blue. You can see the other ice cream change as well. To return to the main Timeline, double click at the stage, or click "Scene 1" at the top of stage window. Let say if we want to change the color of ice cream to blue color. Because it is symbol, you just need to change the symbol, so the instance will also change. 1. 2. 3. Figure 3.4 Create another symbol in stage Figure 3.5 Editing symbols (continued)
Chapter 3 Creating Symbol Create a new symbol from existing symbol PAGE 29 Select any one of the existing ice cream on stage. Right click --> Duplicate Symbol. Name the symbol as icre cream bite'. If you look at the property, the symbol now is instance of icre cream bite. Let say if we want a new symbol showing a bite out of it. We can create a new symbol from the existing symbol. 1. 2. 3. 4. Now you can edit by double click at the symbol. 5. Use Eraser Tool to delete some part of it. 6. Save as graphic symbol. fla. Swapping a symbol Right - click one of the ice cream symbols, choose swap symbol. Beside this, you also can use property panel to swap symbol. In the pop up menu, choose ice cream bite symbols. Note that your symbols has been replace with new symbols. Let say if you want to create another ice cream bite, you can click and drag to add more ice cream bite symbols, but you will notice your stage will be crowded. Therefore, you can swapping the symbols (replace the symbol). 1. 2. 3. You will notice that swapped symbols has the same properties - rotation, size and placement as the old symbol. Figure 3.6 Create symbols from existing symbol
Chapter 3 Creating Symbol Creating button symbol PAGE 30 To create button symbol, you can create or imported an object to be converted into a button. Button symbols has their own timeline where there are 4 frame : Up, Over, Down and Hit. Each frame represent the button appearance in movie. Set up stage size 300 x 150 pixels. Draw a box fill color with yellow (#FFCC00) di the middle of stage. Right click the object --> Convert to symbol --> Choose button. Give name to your symbol as : Start_Button. On type section, choose : 1. 2. 3. 4. Button and then click OK. 5. Click on the button symbol on stage, press Ctrl + E to edit the symbol. Notice that you already in the button timeline. 6. Create a new layer named as : Start. Figure 3.7 Create button symbol Figure 3.8 Timeline button
Chapter 3 Creating Symbol Creating button symbol PAGE 31 7. Select layer Start, to activate the layer. Choose the Up frame, and create a text START di the middle of the box. Use Font : Arial, Size : 50, black color. 8. On layer Start, right click in frame Down, and click Insert Frame. 9. On Layer 1, select both frame Over and Down, right click and choose Convert to Keyframe. Notice that a small black dot inside the frame. 10. Click frame Over, select the object and then replace the color with Fill color become green (#66CC00). 11. Next, choose frame Down, select the object and change the color with Fill color become red (#FF0000). 12. By doing this, your button during Up will be in yellow color, when your roll over the mouse the button will change into green color and when you click the button it will become red color. 13. Click Ctrl + E to back to the stage or click on Scene 1 at the button timeline window. 14. Save your file as button symbol.fla. 15. Test your movie by click Ctrl + Enter. Button states : Up Frame : The normal appearance of button when user not interact with it. Over Frame : The appearance of button when user over the mouse or about to select. Down : The appearance of button when user click on the button or select the button. Hit : The button’s active area, which is the area that responds to the mouse click. Figure 3.9 Create button start Figure 3.10 Button start timeline (continued)
Chapter 3 Creating Symbol Working with movie clip symbols PAGE 32 Movie clip symbols has their own timeline. Movie clip symbols can be used with ActionScript. Movie clip symbols work as the graphic symbols. But there are two difference: Set your stage size. By using tool in tool panel, create a flag object on stage. Right click on the object, and choose convert to symbol. Name your symbols as : Flag and choose type : Movie Clip. Click OK. 1. 2. 3. Click Ctrl + E, or double click on stage, it bring you the the Flag timeline. 4. Now, let's make some adjustment to the flag. 5. Click at frame 3, press F6 to add keyframe, and adjust the flag by scale it or move the anchor point. Figure 3.11 Creating movie clip symbol Figure 3.12 Adjust the curve of flag
Chapter 3 Creating Symbol Working with movie clip symbols PAGE 33 6. Add another key frame at frame 5 either press F6 or right click insert keyframe, and then do another movement to the flag. Make it a bit different from the frame 3. 7. Now you have 3 keyframe and insert frame at frame 6. 8. If you move the red slider, you can see the flag movement (animation). 9. Test your move by pressing Ctrl + Enter. You will see the flag looping independently in the movie clip. 10. Save your movie as movie clip symbol.fla. Figure 3.13 Insert keyframe to create a movement (continued)
Chapter 3 Creating Symbol Importing Illustrator AI Files to Animate PAGE 34 Adobe Animate CC and Adobe Illustrator are vector based application. Thus, this two software was regularly use together. Illustrator is a drawing tools that allow creating a detailed art, meanwhile Animate give that art movement or action. Once you imported to Animate, the file can be in stage or library. To get the best result of visual, make sure you use RGB mode for color. To import Illustrator file, go to File --> Import --> Import to stage or Import to Library. Navigate the file Adobe Illustrator file to import, select and click Open. Import dialog box will appear and give a various options for import. 1. 2. 3. Figure 3.14 Import Ai file to Animate
Chapter 3 Creating Symbol Importing Illustrator AI Files to Animate PAGE 35 Select Illustrator Artboard : Identify which artboard of your artwork. Select All Layer : You can uncheck the box and select only layer that have your object. Import as bitmap : Create a bitmap. Create a movie clip : Identify layer which you want to converted into movie clip when imported to Animate. Registration : Let you register the focal point of the movie clip. Convert layer to : 3. In the import screen, you can choose the following option : # Animated layers : This option will imported layer in Illustrator with the label name and will put in layer accordingly in Animate timeline. # Single Animate Layer : All the layer in Illustrator will be put in single layer in Animate. # Keyframe : All the selected layer in Illustrator will be placed in individual keyframe in new layer. 6. If you import to library, the step is same File > Import > Import to library . The import box will appear similar as above step. 7. Your imported object will place either on the timeline or stage but the object has been added to your library. 4. The file that being imported as shown in figure was design in separated layers in Illustrator. 5. By choosing Convert layer to : Animate layers, the layers will appear in timeline as below. Figure 3.15 Layer in Timeline after import the AI files (continued)
Chapter 3 Creating Symbol Importing Photoshop PSD Files to Animate PAGE 35 Select File --> Import --> Import to stage or Import to Library. Locate the PSD file you want to import, select it and click open. The import box will appears with PSD import option. Animate can import Photoshop file (.psd) while keeping each of the individual layer editable, retaining the quality of the image and maintain others Photoshop features. If you save the file as .PNG file, the file will flatten and maintain the lossless compression and manipulate more the images in Animate. For instance, if you build a digital cut out animation, you need a .PNG files. 1. 2. 3. Select the layer you want to import to Animate by check the box next to the layer. You can set options for the selected layer . 4. You also can choose several option on the right side of the panel. This will depend on your specific project. 5. Click import to import the file. The artwork you selected will appear in stage. Figure 3.16 Import PSD Files to Adobe Animate
Motion tween Classic Tween Shape Tween Frame by Frame Animation Adobe Animate supports three type of animation as follow : Motion tween used to create movement animation in Animate. Motion tween can be created by identifying or set the different properties for the object between the first and last frame. The value of properties may be vary from position, color, size, rotation effect and filter. Classic tween is similar to motion tween but more complex to create and little flexibility offer. However, classic tween offer some type of control animation that motion tween do not. In shape tween, it is animation that transforming from one shape to another. For example, morphing from circle shape to star shape. Beside shape, sharp tween also can morph color. Shape tween can only tween one shape at a time. Frame by frame animation is a techniques that movement or image changes in every frame. This type of animation create a illusion of movement by store the values of changes in each frame. Introduction to Animating in Adobe Animate PAGE 36 Chapter 4 Animating Symbols and Mask Identifying Frame Indicator in Timeline There are frame indicators appear in timeline : A blue background in frame indicate a motion tween. A black dot state that a tween object has been assigned to it. The diamond indicated the last frame and property in key frame A empty dot show that the object of motion tween has been removed and can be replace with a new object. Figure 4.1 Motion tween assigned to the frame Figure 4.2 Motion tween with empty object
PAGE 37 Chapter 4 Animating Symbols and Mask Identifying Frame Indicator in Timeline If you create a class tween, a frame indicator with a small dot at the start frame and black arrow will appear. A dash line like figure below indicate that the motion tween is incomplete or broken. For example, the last key frame is lost. A black dot at the start frame with black arrow and green background indicate a shape tween. A small a indicate that the frame has been assigned with action script A small red flag indicate that the frame contain a label. Figure 4.3 A complete motion tween Figure 4.4 Incomplete motion tween Figure 4.5 Incomplete motion tween Figure 4.6 Action script assigned to frame Figure 4.7 Frame contain label (continued)
PAGE 38 Chapter 4 Animating Symbols and Mask Create Frame by Frame Animation You are going to create animation of bouncing ball. Create a file and set stage. Insert 3 layer. Name each of the layer as line, guide and ball. To insert frame to the 3 layer once, hold shift key, click on frame 25 each layer , 1. 2. 3. right click, insert frame or press F5. 4. Select the line layer. Draw a line use Line Tool. Increase the stroke to 10. Change fill color to blue. 5. Your line should look like this Figure 4.8 Insert layer in timeline Figure 4.8 Draw line using Line Tool Figure 4.9 A line at stage
PAGE 39 Chapter 4 Animating Symbols and Mask Create Frame by Frame Animation 6. Select layer guide. Use brush tool to draw a guide for ball as below : 7. Before draw a ball, enable the Onion Skin Outline. Located at underneath of the timeline as shown below. By using this option, it will display content of the previous and the next frame on the stage. So, this will be your reference to create the animation. 8. Start draw ball using brush tool from left to right. Figure 4.10 Draw a guide for ball Figure 4.11 Enable onion skin Figure 4.12 Draw a ball (continued)
PAGE 40 Chapter 4 Animating Symbols and Mask Create Frame by Frame Animation 9. Insert blank keyframe on frame 2, draw another ball. Do this, by imaging the motion of ball bouncing. See image below for example: 10. You noticed, each frame at your timeline has a keyframe. This indicate that each key frame has different value (changes of the ball). 11. Save your file as frame by frame animation.fla. Figure 4.13 Draw a ball animation with Onion Skin as a guide Figure 4.14 Each frame have a key frame (continued)
PAGE 41 Chapter 4 Animating Symbols and Mask Create Classic Tween Classic tween is an older way of animation where is used to create a transition between two symbols state. You may have a symbol at right stage at frame 1 and at frame 25 the same object move to the left stage. By assigning classic tween, you can notice the object is move from frame 1 to frame 25. By using an oval tool (press O key), draw a oval shape likely a ball on left stage. Select the ball shape, right click > convert to symbol > type : graphic. 1. 2. 3. Click at frame 20, right click --> insert key frame (or press F8 key). By doing this, the property of frame 1 is copied to key frame at frame 20. 4. Click at key frame 1, using selection tool, drag the ball to the bottom of right stage. Figure 4.15 Converting ball to graphic symbol Figure 4.16 Create new position to the ball
PAGE 42 Chapter 4 Animating Symbols and Mask Create Classic Tween 5. Right click in the timeline between the key frame 1 and key frame 20, choose Classic Tween. 6. You will notice your timeline display a frame indicator with tween span has a background color and an arrow between key frame. See figure below : 7. To preview your animation, click Ctrl + Enter. 8. Add a new layer, named it as text. Type a text in stage : Classic Tween and position it at the upper stage. 9. Click at key frame 20, insert key frame. 10. Select the text layer, click on key frame 1, move the text to bottom stage. 11. Click between the keyframe at text layer, right click --> choose Classic Tween. 12. Test your movie. You can see the ball and text move accordingly to the position you assigned. 13. Save your file as classic tween.fla Figure 4.17 Create classic tween Figure 4.18 Create classic tween for text (continued)