Inserting a new keyframe The frame-by-frame animations inside the carMiddle and carRight movie clip symbols have already been done. In a gradient, one color gradually changes into another. Each layer can clxssroom adobe animate cc classroom in a book pdf free free different image that appears on the Stage, and you can draw and больше информации objects on one layer without affecting objects on another layer. Deleting or adding anchor points Use the hidden tools under the Pen tool to delete or add anchor points as needed. The tween span is represented by all the colored frames from the first keyframe to the last keyframe. The Zoom mode should be highlighted.
 
 

One moment, please.Adobe Animate Classroom in a Book release –

 

By using our site, pxf agree to our collection of information through the use of cookies. To learn more, view our Privacy Policy. To browse Academia. Log on with Facebook Log in with Google. Remember me on this computer. Enter the email address you classroim up with and we’ll email you a reset link. Need an account? Click here to sign up. Download Free PDF. Aziz Assefa. A short summary of this classrooj. PDF Pack. Download Download PDF. Translate PDF. All rights reserved. If this guide is distributed with software that includes an end user license agreement, ln guide, as well as the soft- ware described in it, is furnished under license and may be used or copied only in accordance with the terms of such license.

Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by animatee means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.

The content of this animqte is furnished for informational use only, is subject to change without notice, and should not be construed as commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibiitiy or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.

Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized animatee of such material into pdt new work could be a violation of the rights of the copyright owner.

Please be sure to obtain any permission required from the copyright owner. Any references to company names in sample files are for demonstration purposes only and are not intended to refer to any actual organization. Adobe animate cc classroom in a book pdf free free product screenshots reprinted with permission from Adobe Systems Incorporated.

Amazon, Kindle, Fire and all related logos are trademarks of Amazon. Microsoft, Windows, and Internet Explorer are either registered trademarks or trade- marks of Microsoft Corporation in the U. All other trademarks are the property of their respective owners. Notice to U. Government End Users. Consistent with 48 C. Government end users a only as Commercial Items and b with only those rights as are granted to all other end users pursuant book the terms and conditions herein.

Unpublished-rights reserved under the copyright laws of the United States. For U. Government End Users, Adobe agrees to comply adobe animate cc classroom in a book pdf free free all applicable equal opportunity laws including, if appropriate, the provisions of Executive Orderas amended, Section of the Vietnam Era Veterans Readjustment Assistance Act of 38 USCand Section of the Rehabilitation Act ofas amended, and the regulations at 41 CFR Parts through, and The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

For the latest on Adobe Press books, clxssroom to www. To report errors, please send a note adoobe errata peachpit. For information on getting permission for reprints and excerpts, contact permissions peachpit. Animate CC is widely used in the creative industry to develop engaging projects integrating video, sound, graph- ics, and animation.

Aodbe can create original content in Animate CC or import assets from other Adobe applications such as Photoshop or Illustrator, quickly design animation and multimedia, and use classrpom to integrate sophisticated interactivity.

Use Animate CC to generate graphics and animation assets, to build innovative and immersive websites, to create stand-alone applications for the desktop, or to create apps to distribute to mobile devices running on the Android or iOS system.

With extensive controls for animation, intuitive and flexible drawing tools, and output options for HD video, HTML5, mobile apps, desktop applications, and Flash Player, Adobe Animate CC adobe animate cc classroom in a book pdf free free a rare example of a robust multimedia authoring environment that enables your imagination to become reality.

Adobe animate cc classroom in a book pdf free free Classroom in a Book Adobe Animate CC Classroom in a Book release is part of the official training series for Adobe graphics and publishing software developed with the support of Adobe product experts. The lessons are designed so bolk can learn at your перейти pace.

Classroom in a Book also teaches many advanced features, including tips and techniques for using the latest version of this application. You can follow the book from start to finish, or do only the lessons that correspond to your interests and needs. You should have a working knowledge of your computer and operating adobe animate cc classroom in a book pdf free free.

You should know how to use the mouse and standard menus and commands, and also how to open, save, and close aobe. If you need to review these techniques, see the printed or online documentation included with your Microsoft Windows or Apple Mac OS software. In addition, you need to download the free Adobe AIR runtime, available at get. The following specifications are the minimum required system configurations.

For updates on system requirements and complete instructions on ccc the sdobe, visit fc. Online Content Your purchase of this Classroom in a Book includes online materials provided by way of your Account page on peachpit. These include: Lesson files To work through the projects in this book, you will need to download the lesson files from peachpit. You can download the files for ainmate lessons or it may be нажмите для продолжения to download them all in a single file.

Web Edition The Web Edition is an online interactive version of the book providing an enhanced learning experience. To accommodate the changes, sec- tions of the online book may be updated or new sections may be added.

Click the Launch link to access the product. Continue /441.txt to learn how to register your product to get access to the lesson files. If you purchased an eBook from a different vendor or you bought a print book, you must register your purchase on peachpit. Click the Access Bonus Content link below the title of your product to proceed to the download page. Click z lesson file links to download them to your computer.

Download the supplements from the same page as the lesson files. How adobe animate cc classroom in a book pdf free free Use the Lessons Each lesson in this book provides step-by-step instructions for creating one snimate more specific adobe animate cc classroom in a book pdf free free of a real-world project.

Some lessons build читать полностью projects created in preceding lessons; most stand alone. All the lessons build on one another in ffee of concepts and skills, so the best way to learn from this book is to proceed through the lessons in sequential order.

In this book, some techniques and processes are explained and described in detail only the first few times you perform them. The files in aniamte End fold- ers 01End, 02End, and so on within the Lesson folders are samples of completed projects for each lesson. Use these files for reference if you want to compare your work in progress with the project files used to generate the sample projects.

Additional Resources Adobe Animate CC Classroom in a Book release is not meant to replace documentation that comes with the program or to be a comprehensive reference for every feature.

Only the commands and options used in the lessons are explained in this book. For comprehensive information about program features and tutorials, refer to these resources: Adobe Animate Learn and Support: helpx.

Visit helpx. Adobe Creative Cloud Learn: For inspiration, key techniques, cross-product workflows, and updates on new anomate, go to the Creative Cloud Learn page, helpx.

Available to all. Adobe Forums: forums. Adobe Create: create. Resources for educators: www. Find solutions for education at all levels, including free продолжить чтение that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certified Associate exams. Also check freee these useful sites: Adobe Add-ons: creative. Adobe Animate CC product home page: www. A directory of AATCs is available at training. Herbert School of Communication at Hofstra University where he teaches tree storytelling, data journalism, and information design.

Download the project files for this lesson from the Registered Products cd on your Account page at www. Motion tweening is the basic technique of creating animation with symbol instances.

Account page, make sure to do so now. See 1 Double-click the 04End. The adobbe is an animated splash page for an imaginary soon-to-be-released motion picture. This file is an ActionScript 3. Saving a working copy ensures that the original start file will be available animatr you want to start over. Animation can be as simple as moving a box across the Stage from one frame to the adobe animate cc classroom in a book pdf free free. It can also be much more complex.

In Animate, the basic workflow for animation goes like this: Select an object on the Adobe animate cc classroom in a book pdf free free, right-click, ni choose Create Motion Tween from the context menu. Move the red playhead to a different point in time and move the object to a new position or change one of its properties.

Animate takes care of the rest. Motion tweens create animation for changes in position on the Stage and for changes in size, color, or other attributes. Motion tweens require you to use a symbol instance.

Animate also automatically separates motion tweens on their own layers, which are called tween layers.

 

Adobe Animate CC Classroom in a Book – .

 

An animation plays. During the animation, several overlapping photos appear one by one, with stars appearing at the end.

As the new photos appear, the previous photos become blurry, receding into the background. Close the preview window and the FLA file. Understanding document types and creating a new document Animate is an animation and multimedia authoring tool that creates media for multiple platforms and playback technologies.

Note Not all features are supported across all document types. Tools that are not supported by the current document type are dimmed in the Animate interface. Playback environment The playback, or runtime, environment is the technology that your final, published files use to play. Perhaps your animation will be exported as a video to be uploaded to YouTube.

Or your project could play as an app on a mobile device or even as a virtual reality immersive experience. You should make that decision first so you can choose the appropriate document type. The difference is that each document type is configured to export different, final published files. Note Animate supports only ActionScript 3.

If you need ActionScript 1. You can add interactivity by inserting JavaScript within Animate or adding it to the final published files. Choose WebGL-glTF-Extended or Standard for interactive animated assets to take advantage of hardware-accelerated support of graphics, or for supported 3D graphics.

Choose ActionScript 3. ActionScript 3. Choosing an ActionScript 3. Note The ActionScript 3. A projector plays as a stand-alone application on the desktop, without needing a browser. Be aware that Adobe will no longer support the Flash Player in browsers beyond Choose AIR for Desktop to create animation and interactivity that plays as an application on Windows or macOS desktops, without needing a browser.

You can add interactivity for your mobile app using ActionScript 3. Choose VR Panorama or VR to publish a virtual reality project for the web browser that lets your audience look in all directions. You can add animation or interactivity to your immersive environments.

Tip You can easily switch from one document type to another. For example, you can convert an ActionScript 3. Some functionality and features may be lost in the conversion, however. Animate offers two interfaces for creating new documents: the standard New Document dialog box and the slightly more elaborate Start screen which is always displayed if no document is open.

Both interfaces contain the same controls for defining the parameters of new documents, whether by selecting a preset for the most common types of intended projects or by choosing your own document type with specific values for its width and height. Note The Start screen adds an extra column to the left side of the same content displayed in the New Document dialog box.

At the top of the column are buttons that you click to toggle between displaying Home content the default view and Learn content video tutorials to help you start using Animate quickly.

Below those buttons are the Open button to find and open existing files and a list of recently opened files click a filename to open it. The presets are grouped in six categories of intended uses listed across the top of the dialog box ; click a category to display the presets it contains in the center of the dialog box. You can either use the presets as given or fine-tune their settings using the Details section on the right side of the dialog box.

If you would prefer to customize the document settings from scratch, then select the Advanced category at the far right. The center of the dialog box will now display all the available platforms. From the Home screen in Animate, select the Advanced category. In the Platforms area in the center of the dialog box, select ActionScript 3. In the Details area on the right side of the dialog box, choose the dimensions of the Stage by entering new pixel values for the Width and Height.

Enter for Width and for Height. Click Create. Animate creates a new ActionScript 3. Although the software application is called Animate, be aware that the file extension is. You should always save your Animate file with the extension. This exposes the contents of your document to you and to other developers to swap assets easily.

Getting to know the workspace The Animate work area includes the command menus at the top of the screen and a variety of tools and panels for editing and adding elements to your movie.

By default, Animate displays the menu bar, Timeline panel, Stage, Tools panel, Properties panel, Edit bar, and a few other panels. As you work in Animate, you can open, close, group, ungroup, dock, undock, and move panels around the screen to fit your work style or your screen resolution.

The same functionality is provided by the workspace switcher at the right end of the Application bar. Click the workspace switcher and choose a new workspace. The various panels are rearranged and resized according to their importance in the chosen workspace. For example, the Animator and Designer workspaces put the Timeline panel at the top of the work area for easy and frequent access. Saving your workspace If you find an arrangement of panels that suits your style of work, you can save it as a custom workspace and return to it at a later date.

Open the workspace switcher and choose New Workspace. The New Workspace dialog box appears. Enter a name for your new workspace. Click OK. Tip By default, the Animate interface is rather dark. However, you can change the interface to a lighter gray if you prefer.

Animate saves the current arrangement of panels and adds it to the options in the Workspace menu, which you can access at any time. About the Stage The big white rectangle in the middle of your screen is called the Stage. As with a theater stage, the Stage in Animate is the area that viewers see when a movie is playing. It contains the text, images, and video that appear on the screen. Move elements on and off the Stage to place them in and out of view.

The gray area is called the pasteboard. For now, leave Clip To Stage deselected, allowing the pasteboard to remain in view. You can also click the Clip Content Outside The Stage button to crop the graphic elements that fall beyond the Stage area to see how your audience will view your final project.

You can also choose different magnification view options from the menu just above the Stage. The Stage color, along with document properties such as the Stage dimensions and frame rate, is available in the Properties panel, which is the vertical panel just to the right of the Stage. In the Properties pane of the Properties panel, note that the dimensions of the current Stage the Size parameters are set at x pixels, which you chose when you created the new document.

Also in the Properties pane, click the Background Color box next to Stage: and choose a new color from the color palette. Choose dark gray Your Stage is now a different color. You can change the Stage properties at any time.

Working with the Library panel The Library panel is accessible from a tab just to the right of the Properties panel. Symbols are graphics used frequently for animation and for interactivity. About the Library panel The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type.

You can also create folders in your Library panel to help group items. When you import items into Animate, you can import them directly onto the Stage or into the library. However, any item you import onto the Stage is also added to the library, as are any symbols you create. You can then easily access the items to add them to the Stage again, edit them, or see their properties. In the Import To Library dialog box, select the background. Animate imports the selected PNG image and places it in the Library panel.

Continue importing photo1. You can also hold down the Shift key to select multiple files and import all of the images at once. The Library panel lists the filenames of all the imported images and provides a thumbnail preview of any selected file. These images are now available to be used in your Animate document. Adding an item from the Library panel to the Stage To use an imported image, simply drag it from the Library panel onto the Stage. Drag the background. Understanding the Timeline panel In the default Essentials workspace, the Timeline panel is located below the Stage.

The Timeline panel contains playback controls for your animation as well as the timeline itself, which displays the sequence of events in the animation in linear form through time. An Animate movie measures time in frames, just as in a filmstrip. As the movie plays, the playhead, shown as a red vertical line, advances through the frames shown in the timeline.

You can change the content on the Stage for different frames. At the top of the Timeline panel, Animate indicates the selected frame number, the current frame rate how many frames play per second , and the time that has elapsed so far in the movie. The timeline portion of the Timeline panel also displays layers, which help you organize the artwork in your document.

Think of layers as multiple filmstrips stacked on top of one another. Each layer can contain a different image that appears on the Stage, and you can draw and edit objects on one layer without affecting objects on another layer. The layers are stacked in the order in which they overlap each other so that objects on the bottom layer in the timeline are on the bottom of the stack on the Stage. You can hide, lock, or show the contents of layers as outlines by clicking the dots or square in the layer under the layer option icons.

When you want to see more layers, choose Short from the Frame View menu in the upper-right corner of the Timeline panel. The Short option decreases the height of frame cell rows. The Preview and Preview In Context options display thumbnail versions of the contents of your keyframes in the timeline. In this book, we show the timeline frames in their default size of Normal.

For finer control over the timeline frame sizes, drag the Resize Timeline View slider. The slider adjusts the size of the frames so you can see more or less of the timeline. Click outside the name box to apply the new name. Click the dot below the lock icon to lock the layer.

Locking a layer prevents you from accidentally moving or making changes to whatever is inside that layer. A lock icon appears in the layer. Adding a layer A new Animate document contains only one layer, but you can add as many layers as you need.

Objects in the top layers will overlap objects in the bottom layers. Select the background layer in the timeline. You can also click the New Layer button above the timeline. A new layer appears above the background layer. Double-click the new layer to rename it, and type photo1.

Your timeline now has two layers. The background layer contains the background photo, and the newly created photo1 layer above it is empty. Select the top layer, called photo1. Drag the library item called photo1. Note As you add more layers and your overlapping graphics become more complicated, click the dot below the eye icon in any layer to hide its contents.

Double-click the Layer icon to modify the level of transparency in the Layer Properties dialog box. Rename the third layer photo2. If you want to rearrange your layers and change how your graphics overlap each other, simply drag any layer up or down to move it to a new position in the layer stack. Inserting frames So far, you have a background photo and another overlapping photo on the Stage, but your entire animation exists for only a single frame, which is only a fraction of a second.

To create more time on the timeline and make this animation run for a longer duration, you must add additional frames. Select frame 48 in the background layer. Use the Resize Timeline View slider at the upperright corner of the Timeline panel to expand the timeline frames to make it easier to identify frame You can also right-click and choose Insert Frame from the context menu that appears. Animate adds frames in the background layer up to the selected frame, frame Select frame 48 in the photo1 layer.

Select frame 48 in the photo2 layer and insert frames on this layer. You now have three layers, all with 48 frames on the timeline. Since the frame rate of your Animate document is 24 frames per second, your current animation lasts 2 seconds.

Selecting multiple frames Just as you can hold down the Shift key to select multiple files on your desktop, you can hold down Shift to select multiple frames on the Animate timeline. If you have several layers and want to insert frames into all of them, hold down Shift and drag where you want to add frames. Creating a keyframe A keyframe indicates a change in content on the Stage.

Keyframes are indicated on the timeline as a circle. An empty circle means there is nothing in that particular layer at that particular time. A filled-in black circle means there is something in that layer at that time. The background layer, for example, contains a filled keyframe black circle in the first frame. The photo1 layer also contains a filled keyframe in its first frame. Both layers contain photos. The photo2 layer, however, contains an empty keyframe in the first frame, indicating that it is currently empty.

Select frame 24 on the photo2 layer. The frame number of a selected frame is displayed above the left end of the timeline. A new keyframe, indicated by an empty circle, appears in the photo2 layer in frame Select the new keyframe at frame 24 in the photo2 layer. Drag photo2. The empty circle at frame 24 becomes filled, indicating that there is now content in the photo2 layer. When your animation plays, your photo appears on the Stage at frame Understanding frames and keyframes is essential for mastering Animate.

Be sure you understand how the photo2 layer contains 48 frames with two keyframes—an empty keyframe at frame 1 and a filled keyframe at frame Moving a keyframe If you want photo2. You can easily move any keyframe by simply dragging it to a new position. Select the keyframe in frame 24 on the photo2 layer. Drag the keyframe to frame 12 in the photo2 layer. The photo2. Doing so will delete the contents of that keyframe on the Stage, leaving you with an empty keyframe. Your keyframe and its contents will be removed from the timeline.

Organizing layers in a timeline At this point, your working Animate file has only three layers: a background layer, a photo1 layer, and a photo2 layer. Layer folders help you group related layers to keep your timeline organized and manageable, just as you make folders for related documents on your desktop. Select the photo2 layer and click the New Layer button above the timeline. Name the layer photo3. Insert a keyframe at frame Drag photo3. You now have four layers. The top three contain photos of scenes from Coney Island that appear at different keyframes.

Select the photo3 layer and click the New Folder icon A new layer folder appears above the photo3 layer. Name the folder photos. Drag the photo1 layer into the photos folder. Notice how the bold line indicates the destination of your layer. When you place a layer inside a folder, Animate indents the layer name.

Drag the layers photo2 and photo3 into the photos folder. All three photo layers should be in the photos folder, in the same stacking order as they were in outside the folder. You can collapse the folder by clicking the arrow just to the left of the folder name. Expand the folder by clicking the arrow again. Be aware that if you delete a layer folder, you delete all the layers inside that folder as well.

Cut, copy, paste, and duplicate layers When managing multiple layers and layer folders, you can rely on cut, copy, paste, and duplicate layer commands to make your workflow easier and more efficient.

All the properties of the selected layer are copied and pasted, including its frames, its keyframes, any animation, and even the layer name and type. You can also copy and paste layer folders and their contents. To cut or copy any layer or layer folder, simply select the layer, right-click the layer name, and choose Cut Layers or Copy Layers. Right-click the timeline again and choose Paste Layers. The layer or layers that you cut or copied are pasted into the timeline.

Use Duplicate Layers to copy and paste in one operation. You can also cut, copy, paste, or duplicate layers from the application menu bar. For example, if nothing is selected, the Properties panel includes options for the general Animate document, including changing the Stage color or dimensions.

Move the playhead to frame 1 of the timeline, select the photo1. A very narrow blue outline indicates that the object is selected. In the Properties panel, type 50 for the X value and 50 for the Y value. You can also drag over the X and Y values to change their values. The photo moves to the left side of the Stage. The X and Y values are measured on the Stage from the upper-left corner.

X begins at 0 and increases to the right, and Y begins at 0 and increases downward. The registration point the point from which Animate makes measurements for imported photos is at the upper-left corner. In the Transform panel, select Rotate and type —12 in the Rotate box, or drag over the value to change the rotation. The selected photo on the Stage rotates 12 degrees counterclockwise. Select frame 12 of the photo2 layer.

Now click photo2. Use the Properties panel and Transform panel to position and rotate the second photo in an interesting way. Select frame 24 in the photo3 layer. Now click photo3. Use the Properties panel and Transform panel to position and rotate the third photo in an interesting way. Note When images are scaled or rotated in Animate, they may appear jagged. You can use the Bitmap Properties dialog box to smooth each image. Double-click the bitmap icon or the image thumbnail in the Library panel to open the dialog box and select the Allow Smoothing option.

Working with panels Just about everything you do in Animate involves a panel. In this lesson, you use the Library panel, Tools panel, Properties panel, Transform panel, History panel, and Timeline panel. Because panels are such an integral part of the Animate workspace, it pays to know how to manage them. To open any panel in Animate, choose its name from the Window menu. Individual panels float freely, and they can be combined in docks, groups, or stacks.

A dock is a collection of panels or panel groups in a vertical column. Docks stick to the left or right edges of the user interface. A group is a collection of panels that can be placed within a dock or that can float freely.

A stack is similar to a dock but can be placed anywhere in the interface. In the default Essentials workspace, most of the panels are organized in three docks on the right side of the screen. The Timeline and Output panels are grouped at the bottom, and the Stage is on the top. However, you can move a panel to any position that is convenient for you. To move a panel, drag it by its tab to a new location. To move a panel group or stack, drag it by the area next to the tabs.

As the panel, group, or stack passes over other panels, groups, docks, or stacks, a blue highlighted drop zone will appear.

If you release the mouse button while a drop zone is visible, the panel will be added to the group, dock, or stack. To dock a panel, drag it by its tab into a new position at the left or right edge of the screen.

If a vertical drop zone appears, dropping the panel will create a new dock. To group a panel, drag its tab onto the tab of another panel or the drop zone at the top of an existing group. To create a stack, drag a group out of a dock or an existing stack so it floats freely.

Alternatively, drag one free-floating panel onto the tab of another floating panel. You also have the option of displaying most of the panels as icons to save space but still maintain quick access.

Click the double arrowheads in the upper-right corner of a dock or stack to collapse the panels to icons. Click the double arrowheads again to expand the icons into panels. Using the Tools panel The Tools panel—the long, narrow panel on the far right side of the work area—contains selection tools, drawing and type tools, painting and editing tools, navigation tools, and tool options. When you select a tool, check the options area at the bottom of the panel for more options and other settings appropriate for your task.

Selecting and using a tool When you select a tool, the options available at the bottom of the Tools panel and the Properties panel change. When you select the Zoom tool, the Enlarge and Reduce options appear. The Tools panel contains too many tools to display all at once. Some tools are arranged in hidden groups in the Tools panel; only the tool you last selected from a group is displayed.

Press and hold the icon for the visible tool to see the other tools available, and then select one from the menu. Select the folder in the timeline, and then click the New Layer button. Name the new layer stars. That makes some of the tools and buttons invisible. In the timeline, move the playhead to frame 36 and select frame 36 in the stars layer.

You will create star shapes to appear at frame 36 in this layer. In the Tools panel, select the PolyStar tool, which is indicated by the hexagon shape.

In the Properties panel, click the colored square next to the pencil icon, which indicates the color of the outline, or stroke, and select the red diagonal line. The red diagonal line represents a color of None for the stroke. Click the colored square next to the paint bucket icon, which indicates the color of the fill, and select a bright, cheery color such as yellow. You can click the color wheel at the upper right to access the Adobe Color Picker, or you can change the Alpha percentage, which determines the level of opacity, also at the upper right.

Choose Star from the Style menu. These options define the shape of your star. Make sure the empty keyframe in frame 36 of the stars layer is selected. Start dragging on the Stage where you want to add a star, and continue dragging to change the width of your star. Without releasing the drag, move your cursor around the center of the star to rotate it. Make multiple stars of different sizes and with different angles of rotation.

Exit the PolyStar tool by selecting the Selection tool. Use the Properties panel or the Transform panel to reposition or rotate selected stars on the Stage, if desired. Or select the Selection tool and simply click to select a star and drag it to a new position on the Stage. The X and Y values in the Properties panel update as you drag the star around the Stage. Adding layer effects You can add interesting visual effects that change the appearance of objects in a particular layer.

These layer effects include color effects and filters, both available in the Properties panel when a keyframe is selected. Brightness controls the relative darkness or lightness of the layer. Tint controls how much color is added to the layer.

Alpha controls the transparency of the layer. A fourth option, Advanced, allows you to vary brightness, tint, and alpha together all at once. Filters are special effects that change or distort the appearance in more dramatic ways, such as adding a drop shadow or adding a blur. Adding layer effects to a keyframe Layer effects are keyframe based.

That is, a single layer can have different layer effects in different keyframes. Move the playhead to frame 12 on the timeline and select frames 12 in both the photo1 layer and the background layer by pressing Shift as you click each frame. Frame 12 is the point at which photo2 appears in the slideshow. A keyframe appears in frame 12 in both layers. While the two keyframes are still selected, click the Add Filter button in the Properties panel and choose Blur to add a blur filter to the two selected keyframes.

Increase the BlurX and BlurY values to 8 px. The background photo and the first photo become blurry, which accentuates the new photo that appears in the photo2 layer. Select frame 24 in the photo2 layer; this is the moment when photo3 appears.

This keyframe allows you to add a filter to the layer to change its appearance at that point in time. Click Add Filter in the Properties panel and choose Blur. Increase the Blur X and Blur Y to 8 px. The photo in the photo2 layer becomes blurry, helping your audience focus on the new photo that appears in the photo3 layer. Select frame 36 in the photo1, photo2, photo3, and background layers and insert a keyframe F6. The selected layers become slightly darker, which adds drama to the bright yellow stars that appear at that moment in the stars layer.

Undoing steps in Animate In a perfect world, everything would go according to plan. But sometimes you need to move back a step or two and start over. You can undo steps in Animate using the Undo command or the History panel. Closing a document clears its history. Note If you remove steps from the History panel and then perform additional steps, the removed steps will no longer be available.

You can choose the Undo command multiple times to move backward as many steps as are listed in the History panel. Drag the History panel slider up to the step just before your mistake. Steps below that point are dimmed in the History panel and are removed from the project. To add a step back, move the slider back down. Finish by returning the History panel slider to its original position next to the bottom step in the panel. Animate creates the required published files in the same location as your FLA file and opens and plays the animation in your default browser.

Animate automatically loops your movie in this preview mode. Close the browser window and return to Animate. Modifying the content and Stage When you first started this lesson, you created a new file with the Stage set at pixels by pixels. However, your client may later tell you that they want the animation in several different sizes to accommodate different layouts. Or they may want to create a version that will run on AIR for Android devices, which require specific dimensions.

Fortunately, you can modify the Stage even after all your content is put in place. When you change the Stage dimensions, Animate provides the option of scaling the content with the Stage, automatically shrinking or enlarging all your content proportionally. In the Properties section of the Properties panel, note that the dimensions of the current Stage are set at x pixels. Click the Advanced Settings button to open the Document Settings dialog box. In the Width and Height boxes, enter new pixel dimensions.

You can click the link icon between the Width and Height fields to constrain the proportions of the Stage. With the link icon selected, changing one dimension will automatically change the other proportionately. Select the Scale Content option. Leave the Anchor option as is.

The Anchor option lets you choose the origin from which your content is resized, if the proportions of the new Stage are different. Animate modifies the dimensions of the Stage and automatically resizes all the content. If your new dimensions are not proportional to the original size, Animate will resize everything to maximize the content to fit. Save the file. You now have two Animate files, identical in content but with different Stage dimensions. Animate can help alleviate much of the worry over lost work.

The Auto-Recovery feature creates a backup file in case of a crash. Note If you have unsaved changes in your open document, Animate adds an asterisk to the end of its filename at the top of the document window as a friendly reminder.

Using Auto-Recovery to create a backup The Auto-Recovery feature is a preference setting that applies to all Animate documents. It saves a backup file, so in case of a crash, you have an alternate file to return to. The Preferences dialog box appears. Select the General category from the left column.

The file remains as long as the document is open. When you close the document or when you quit Animate safely, the file is deleted. Review questions 1 What is the Stage? Review answers 1 The Stage is the rectangular area viewers see when a movie is playing. Objects that you store on the pasteboard outside of the Stage do not appear in the movie. A keyframe is represented on the timeline with a circle and indicates a change in content on the Stage.

The tool you most recently used is the one shown. Small triangles appear on tool icons to indicate that hidden tools are available. To select a hidden tool, press and hold the tool icon for the tool that is shown, and then select the hidden tool from the menu.

To undo multiple steps at once, drag the slider up in the History panel. Layer effects are added by selecting a keyframe and choosing a style or a filter from the Color Effect or Filter section of the Properties panel.

Modify the shape, color, and size of drawn objects. Understand fill and stroke settings. Create and edit curves and variable-width strokes. Apply gradients and transparencies. Use Art and Pattern brushes for expressive drawing. Create, edit text, and use web fonts. Distribute objects on the Stage.

Create and edit symbols. Understand symbols and instances. Apply filters to symbol instances. This lesson will take about 3 hours to complete. You can use rectangles, ovals, lines, and custom art or pattern brushes to create interesting, complex graphics and save them as symbols, which will be displayed in your Library panel. Combine gradients, transparencies, text, and filters for even greater expressive possibilities. Getting started Note If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now.

Double-click the 02End. The project is a simple static illustration for a banner ad. After all, you must learn to walk before you can run! And learning to create and modify graphics is an important step before doing any animation with Adobe Animate CC. In the Animate Start screen, select Web as the intended document presets category. Make the Stage size pixels by pixels, and click Create. Understanding strokes and fills Every graphic created within Animate starts with a shape.

A shape consists of two components: the fill, or the insides of the shape, and the stroke, or the outlines of the shape. The fill and the stroke function independently of each other, so you can modify or delete either without affecting the other. For example, you can create a rectangle with a blue fill and a red stroke, and then later change the fill to purple and delete the red stroke entirely. You can also move the fill or stroke independently, so if you want to move the entire shape, make sure that you select both its fill and its stroke.

Creating shapes Animate includes several drawing tools, which work in different drawing modes. The six digits after the sign represent the red, green, and blue contributions to the color. Using the Rectangle tool The coffee cup is essentially a cylinder, which is a rectangle with an oval at the top and an oval at the bottom. In the Tools panel, select the Rectangle tool. Make sure the Object Drawing mode button at the bottom of the Tools panel is not selected.

Choose a stroke color and a fill color from the bottom of the Tools panel. Choose dark brown for the stroke and CC light brown for the fill. On the Stage, draw a rectangle that is a little taller than it is wide.

Select the Selection tool. Drag the Selection tool around the entire rectangle to select its stroke and its fill. When a shape is selected, Animate displays it with white dots. You can also double-click a shape, and Animate will select both the stroke and fill of the shape.

In the Properties panel, Position And Size section, enter for the width and for the height. In the Tools panel, select the Oval tool. Make sure the Snap To Objects button is selected. This option forces shapes that you draw on the Stage to snap to each other to ensure that lines and corners connect to one another.

Drag from one side of the rectangle to the other to make an oval that touches both sides. Snap To Objects makes the sides of the oval connect to the sides of the rectangle. Note The last fill and stroke you used are applied to the next objects you create, unless you change the settings before you draw.

Draw another oval near the bottom of the rectangle. Animate drawing modes Animate provides three drawing modes that determine how objects interact with one another on the Stage and how you can edit them. Merge Drawing mode In this mode, Animate merges drawn shapes, such as rectangles and ovals, where they overlap, so that multiple shapes appear to be a single shape.

If you move or delete a shape that has been merged with another, the overlapping portion is permanently removed. Object Drawing mode In this mode, Animate does not merge drawn objects; they remain distinct and separate, even when they overlap. To enable Object Drawing mode, select the drawing tool you want to use, and then click the Object Drawing button at the bottom of the Tools panel. Primitive Drawing mode When you use the Rectangle Primitive tool or the Oval Primitive tool, Animate draws your rectangles or ovals as independent objects that maintain some editable features.

Unlike with regular objects, you can modify the corner radius and start and end angle of rectangle primitives, and adjust the inner radius of oval primitives using the Properties panel. Making selections To modify an object, you must first be able to select different parts of it. In Animate, you can make selections using the Selection, Subselection, or Lasso tool.

Typically, you use the Selection tool to select an entire object or a section of an object. The Subselection tool lets you select a specific point or line in an object.

With the Lasso tool, you can make a free-form selection. In the Tools panel, select the Selection tool. Click the fill above the top oval to select it. The shape above the top oval is highlighted.

The fill is cleared from the selected area. Animate deletes the individual strokes, leaving only the top oval connected to the rectangle. The remaining shape appears as a cylinder. The Free Transform tool, the Copy and Paste commands, and the Selection tool can help transform the plain cylinder into a coffee cup. Using the Free Transform tool The coffee cup will look more realistic if you taper the bottom rim.

In the Tools panel, select the Free Transform tool. Drag the Free Transform tool around the cylinder on the Stage to select it.

Transformation handles appear on the cylinder. Holding these keys while dragging lets you move both corners the same distance simultaneously. Click outside the shape to deselect it. The bottom of the cylinder is narrow, and the top is wide.

It now looks more like a coffee cup. Tip If you press the Option or Alt key while moving one of the control points, Animate scales the selected object relative to its transformation point, represented by the circle icon. You can move the transformation point anywhere, even outside the object. Press Shift to constrain the object proportions.

Hold down the Shift key and select the top arc and bottom arc of the coffee cup opening. The top strokes of the oval are copied. A duplicate oval appears on the Stage, exactly overlying the original that you copied.

The duplicate remains selected. Transformation handles appear on the oval. Press the Shift key as you drag a corner inward. Make the oval about 10 percent smaller. Pressing the Shift key lets you change the shape uniformly so that the oval maintains its aspect ratio. The top edge of the coffee cup is in place. Select the Free Transform tool.

Drag the oval over the rim of the coffee cup so that it overlaps the front lip. You can also press the Down Arrow key to nudge the selected oval down the Stage.

Click outside the selection to deselect the oval. Select the lower portions of the smaller oval and the upper portions of the bottom oval and delete them. Your coffee cup now is now complete!

Changing shape contours With the Selection tool, you can push and pull lines and corners to change the overall contours of any shape. Move your mouse cursor close to one of the sides of the coffee cup. A curved line appears near your cursor, indicating that you can change the curvature of the stroke. Drag the stroke outward. The side of the coffee cup bends, giving the cup a slight bulge.

Drag the other side of the coffee cup outward slightly. The coffee cup now has a more rounded body. Changing strokes and fills If you want to change the properties of any stroke or fill, you can use the Ink Bottle tool or the Paint Bucket tool.

The Ink Bottle tool changes stroke colors; the Paint Bucket tool changes fill colors. In the Tools panel, select the Paint Bucket tool.

In the Properties panel, choose a darker brown Fill color Click the top surface of the coffee that is inside the cup.

The fill of the top oval changes to the darker brown color. Tip If your Paint Bucket tool changes the fill in surrounding areas, there may be a small gap in the shape outline that allows the fill to spill over.

Close the gap manually, or use the Gap Size menu at the bottom of the Tools panel to choose the gap size that Animate will close automatically. In the Tools panel, select the Ink Bottle tool. In the Properties panel, choose a darker brown stroke color Click the top stroke above the surface of the coffee.

Tip You can also select a stroke or a fill and change its color by using the Properties panel without selecting the Paint Bucket or Ink Bottle tool.

The stroke around the surface of the coffee changes to a darker brown color. Using gradient fills The fill is the interior of the drawn object. Currently, you have selected a solid brown fill color, but you can also use a gradient as a fill, or you can specify that the object have no fill at all. In a gradient, one color gradually changes into another. Animate can create linear gradients, which change color horizontally, vertically, or diagonally, or radial gradients, which change color moving outward from a central focal point.

By default, a linear gradient moves from one color to a second color, but you can use up to 15 color transitions in a gradient in Animate. A color pointer determines where each color is defined, and smooth color changes happen between each of the pointers. Add color pointers beneath the gradient definition bar in the Color panel to add more colors and, hence, more gradients. Select the Selection tool and then select the fill that represents the front surface of the coffee cup. The front surface of the coffee cup is filled with a color gradient that changes from left to right.

In the Color panel, select the color pointer at the left end of the color gradient definition bar the triangle above it turns black when selected , and then type FFCCCC in the Hex value field to specify a light tan color. You can also select a color from the Color Picker or double-click the color pointer to select a color from the color swatches.

Select the far-right color pointer, and then enter B for a dark tan color. The gradient fill for the coffee cup changes from light tan to dark tan across its surface. Click beneath the gradient definition bar to create a new color pointer. Drag the new color pointer to the middle of the gradient. The gradient fill for the coffee cup now changes gradually from light tan through white to dark tan.

Deselect the fill on the Stage by clicking elsewhere on the Stage. Select the Paint Bucket tool and make sure the Lock Fill button at the bottom of the Tools panel is deselected. The Lock Fill option locks the current gradient to the first shape to which it was applied so that subsequent shapes extend the gradient.

This allows multiple columns of tools to be shown. With the Paint Bucket tool, select the back surface of the coffee cup. Animate applies the gradient to the back surface.

Tip To delete a color pointer from the gradient definition bar, simply drag it off the bar. Using the Gradient Transform tool In addition to choosing colors and positioning the color pointers for a gradient, you can adjust the size, direction, or center of a gradient fill.

Select the Gradient Transform tool Free Transform tool. The Gradient Transform tool is grouped with the 2. Click the front surface of the coffee cup.

Transformation handles appear. Drag the square handle on the right side of the bounding box inward to squeeze the gradient tighter. Drag the center circle to move the gradient to the left so the white highlight is positioned slightly left of center. You can even rotate the gradient counterclockwise by dragging the round handle in the upper-right corner of the bounding box.

Drag slightly to the left so that the gradient tilts along the curve of the cup. Click the back surface of the coffee cup. Drag the round handle on the corner of the bounding box to rotate the gradient degrees so that the gradient fades from dark tan on the left to white to light tan on the right.

Narrow the gradient and move it to the right slightly so that the highlight falls on the right side of the inner surface. The coffee cup now looks more realistic because the shadows and highlights make it appear that the front surface is convex and the back surface is concave.

Tip Move the center circle to change the center of the gradient, drag the round handle to rotate the gradient, or drag the square handle to stretch or compress the gradient. Select the top surface of the coffee with the Selection tool.

Open the Colors panel and choose Radial Gradient. For the left color pointer, choose a light brown color, and for the right color pointer, choose a deep, chocolate brown color. The top surface of the coffee is filled with a radial gradient that is lighter in the center and darker at the edges.

Select the Gradient Transform tool. Drag the center point handle of the gradient near the right edge of the cup. Drag the width handle to the right to flatten the elliptical gradient so that it is about twice as wide as high.

Drag the size handle to the left to shrink the ellipse so that the gradient just covers the surface of the coffee. The top surface of the coffee is complete! With subtle variations to linear and radial gradients, you can achieve nice effects that give dimensionality and form to your objects.

Rename the layer containing your completed drawing coffee cup. Tip You can also use the Gradient Transform tool to change the width, orientation, size, or rotation of a bitmap fill. A group holds together a collection of shapes and other graphics to preserve their integrity. When the elements that compose the coffee cup are grouped, you can move them as a unit without worrying that the cup might merge with underlying shapes.

Use groups to organize your drawing. Select all the shapes that make up the cup of coffee. The cup of coffee is now a single group. When you select it, a blue-green outline indicates its bounding box. If you want to change any part of the cup of coffee, double-click the group to edit it.

Notice that all the other elements on the Stage dim, and the Edit bar above the Stage displays Scene 1 Group. This indicates that you are now in a particular group and can edit its contents. Click the Scene 1 icon in the Edit bar at the top of the Stage, or double-click an empty part of the Stage, and return to the main scene. Using variable-width strokes You can make many different styles of lines for your strokes.

In addition to a solid line, you can choose dotted, dashed, or ragged, or even customize your own. These include: Lesson files To work through the projects in this book, you will need to download the lesson files from peachpit. You can download the files for individual lessons or it may be possible to download them all in a single file. Web Edition The Web Edition is an online interactive version of the book providing an enhanced learning experience.

To accommodate the changes, sections of the online book may be updated or new sections may be added. Click the Launch link to access the product. Continue reading to learn how to register your product to get access to the lesson files. If you purchased an eBook from a different vendor or you bought a print book, you must register your purchase on peachpit. Click the Access Bonus Content link below the title of your product to proceed to the download page.

Click the lesson file links to download them to your computer. Download the supplements from the same page as the lesson files. How to Use the Lessons Each lesson in this book provides step-by-step instructions for creating one or more specific elements of a real-world project. Some lessons build on projects created in preceding lessons; most stand alone. All the lessons build on one another in terms of concepts and skills, so the best way to learn from this book is to proceed through the lessons in sequential order.

In this book, some techniques and processes are explained and described in detail only the first few times you perform them. The files in the End folders 01End, 02End, and so on within the Lesson folders are samples of completed projects for each lesson. Use these files for reference if you want to compare your work in progress with the project files used to generate the sample projects. Additional Resources Adobe Animate CC Classroom in a Book release is not meant to replace documentation that comes with the program or to be a comprehensive reference for every feature.

Only the commands and options used in the lessons are explained in this book. For comprehensive information about program features and tutorials, refer to these resources: Adobe Animate Learn and Support: helpx. Visit helpx. Adobe Creative Cloud Learn: For inspiration, key techniques, cross-product workflows, and updates on new features, go to the Creative Cloud Learn page, helpx. Available to all. Adobe Forums: forums. Adobe Create: create.

Resources for educators: www. Find solutions for education at all levels, including free curricula that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certified Associate exams. Also check out these useful sites: Adobe Add-ons: creative.

Adobe Animate CC product home page: www. A directory of AATCs is available at training. Herbert School of Communication at Hofstra University where he teaches multimedia storytelling, data journalism, and information design. Download the project files for this lesson from the Registered Products tab on your Account page at www.

Motion tweening is the basic technique of creating animation with symbol instances. See Getting Started at the beginning of the book. The project is an animated splash page for an imaginary soon-to-be-released motion picture. This file is an ActionScript 3. Saving a working copy ensures that the original start file will be available if you want to start over. Animation can be as simple as moving a box across the Stage from one frame to the next. It can also be much more complex.

In Animate, the basic workflow for animation goes like this: Select an object on the Stage, right-click, and choose Create Motion Tween from the context menu. Move the red playhead to a different point in time and move the object to a new position or change one of its properties.

Animate takes care of the rest. Motion tweens create animation for changes in position on the Stage and for changes in size, color, or other attributes. Motion tweens require you to use a symbol instance.

Animate also automatically separates motion tweens on their own layers, which are called tween layers. There can be only one motion tween per layer without any other element in the layer. Tween layers allow you to change various attributes of your instance at different key points over time. For example, a spaceship could be on the left side of the Stage at the beginning keyframe and at the far-right side of the Stage at an ending keyframe, and the resulting tween would make the spaceship fly across the Stage.

Senior animators would be responsible for drawing the beginning and ending poses for their characters. The beginning and ending poses were the keyframes of the animation. Understanding the Project File The 04Start. All the necessary graphic elements have been imported into the library. The Stage is set at a generous pixels by pixels, and the Stage color is black. You might need to choose a different view option to see the entire Stage. It will begin slightly lower than the top edge of the Stage, and then rise slowly until its top is aligned with the top of the Stage.

Create a new layer above the footer layer and rename it city. This positions the cityscape image just slightly below the top edge of the Stage. Motion tweens require symbols. Animate asks if you want to convert the selection to a symbol so it can proceed with the motion tween. Click OK. Animate automatically converts your selection to a symbol with the default name Symbol 1, and stores it in your Library panel.

Animate also converts the current layer to a tween layer so you can begin to animate the instance. Tween layers are distinguished by a special icon in front of the layer name, and the frames are tinted blue. The range of frames covered by the tween is the tween span. The tween span is represented by all the colored frames from the first keyframe to the last keyframe. Tween layers are reserved for motion tweens, and hence, no drawing is allowed on a tween layer. Holding down the Shift key constrains the movement to right angles.

A small black diamond appears in frame at the end of the tween span. This indicates a keyframe at the end of the tween. Animate smoothly interpolates the change in position from frame 1 to frame and represents that motion with a motion path. Animating changes in position is simple, because Animate automatically creates keyframes at the points where you move your instance to new positions. If you want to have an object move to many different points, simply move the red playhead to the desired frame, and then move the object to its new position.

Preview the animation Integrated into the bottom of the Timeline is a set of playback controls. You can also use the playback commands on the Control menu. The playhead loops, allowing you to see the animation over and over for careful analysis.

The playhead loops within the marked frames. Click Loop Option again to turn it off. Changing the Pacing and Timing You can change the duration of the entire tween span or change the timing of the animation by dragging keyframes on the Timeline.

Changing the animation duration If you want the animation to proceed at a slower pace and thus take up a much longer period of time , you need to lengthen the entire tween span between the beginning and end keyframes. If you want to shorten the animation, you need to decrease the tween span. Lengthen or shorten a motion tween by dragging its ends on the Timeline.

Your motion tween shortens to 60 frames, reducing the time it takes the cityscape to move. The timing of your entire animation remains the same; only the length changes. Your motion tween begins at an earlier time, so it now plays only from frame 10 to frame Add frames by Shift-dragging the end of a tween span.

The last keyframe in the motion tween remains at frame 60, but Animate adds frames through frame The keyframe at frame 60 is selected. A tiny box appears next to your mouse pointer, indicating that you can move the keyframe. The last keyframe in the motion tween moves to frame 40, so the motion of the cityscape proceeds more quickly. Span-based vs. However, if you prefer to click a motion tween and have the entire span the beginning and end keyframes, and all the frames in between be selected, you can enable Span Based Selection from the Options menu on the upper-right corner of the Timeline or you can Shift-click to select the entire span.

With Span Based Selection enabled, you can click anywhere within the motion tween to select it, and move the whole animation backward or forward along the Timeline as a single unit. You can change the color effect of an instance in one keyframe and change the value of the color effect in another keyframe, and Animate will automatically display a smooth change, just as it does with changes in position.

Animate will create a smooth fade-in effect. The cityscape instance on the Stage becomes totally transparent. The cityscape instance on the Stage becomes totally opaque.

Animate interpolates the changes in both position and transparency between the two keyframes. Animating filters is no different from animating changes in position or changes in color effect. You simply set the values for a filter at one keyframe and set different values for the filter at another keyframe, and Animate creates a smooth transition.

Click the upper-right side of the Stage to select the transparent instance. Or, click the woman layer in the Timeline to highlight it; then click within the outline that appears on the Stage.

Set the Blur X and Blur Y values to 20 pixels. The woman instance is blurred throughout the motion tween. Animate establishes a keyframe for filters at frame The Blur filter changes from the keyframe at frame to the keyframe at Animate creates a smooth transition from a blurry instance to an in-focus instance. Understanding property keyframes Changes in properties are independent of one another and do not need to be tied to the same keyframes.

That is, you can have a keyframe for position, a different keyframe for the color effect, and yet another keyframe for a filter. Managing many different kinds of keyframes can become overwhelming, especially if you want different properties to change at different times during the motion tween.

Fortunately, Animate CC provides a few helpful tools for keyframe management. When viewing the tween span, you can choose to view the keyframes of only certain properties.

For example, you can choose to view only the Position keyframes to see when your object moves. Or, you can choose to view only the Filter keyframes to see when a filter changes. Right-click a motion tween in the Timeline, choose View Keyframes, and then select the desired property among the list.

You can also choose All or None to see all the properties or none of the properties. When inserting a keyframe, you can also insert a keyframe specific to the property you want to change. Right-click a motion tween in the Timeline, choose Insert Keyframes, and then select the desired property. You can also view an advanced panel, called the Motion Editor, to see and edit how the different properties of your object change over the course of the motion tween.

These kinds of changes are made with the Free Transform tool or with the Transform panel. The car will start small, and then become larger as it appears to move forward toward the viewer.

The transformation handles appear around the instance on the Stage. The car becomes totally transparent. The current layer becomes a tween layer. A new keyframe is automatically inserted at frame to indicate the change in transparency.

You have used Animate to tween the change in position and the change in scale as well as the change in transparency from frame 75 to frame Motion presets If your project involves creating identical motion tweens repeatedly, Animate allows you to save and reuse motion tweens as presets. For example, if you want to build a slideshow where each image fades out in the same manner, you can save that transition as a motion preset.

Alternatively, right-click the motion tween and choose Save As Motion Preset. Animate provides a number of motion presets that you can use to quickly build sophisticated animations without much effort. Changing the Path of the Motion The motion tween of the left car that you just animated shows a colored line with dots indicating the path of the motion.

You can edit the path of the motion easily to make the car travel in a curve, or you can move, scale, or rotate the path just like any other object on the Stage. To better demonstrate how you can edit the path of the motion, open the sample file 04MotionPath. Moving the path of the motion You will move the path of the motion so the relative movement of the rocket ship remains the same but its starting and ending positions change.

The path of the motion becomes highlighted. The relative motion and timing of the animation remain the same, but the starting and ending positions are relocated. Transformation handles appear around the path of the motion. You can make the path smaller or larger, or rotate the path so the rocket ship starts from the bottom left of the Stage and ends at the top right.

Editing the path of the motion Making your objects travel on a curved path is a simple matter. You can either edit the path with Bezier precision using anchor point handles, or you can edit the path in a more intuitive manner with the Selection tool. The handle on the anchor point controls the curvature of the path. Make the rocket ship travel in a wide curve. Select the Selection tool and make sure the path is deselected.

Move your pointer close to the path of the motion. A curved icon appears next to your pointer, indicating that you can edit the path. Drag the path of the motion to change its curvature. Choose the spots where you drag carefully!

Each drag breaks the path into smaller segments, making it harder to achieve a smooth curve. Mastery will come with practice. In the motion picture splash page project, the orientation of the car is constant as it moves forward. However, in the rocket ship example, the rocket ship should follow the path with its nose pointed in the direction in which it is heading. Orient To Path in the Properties panel gives you this option. Use the Free Transform tool to rotate its initial position so that it is oriented correctly.

This means that an object and its motion are independent of each other, and you can easily swap out the target of a motion tween. Animate replaces the rocket ship with the alien.

The motion remains the same, but the target of the motion tween has changed. Select the object that you want to swap on the Stage. In the Properties panel, click the Swap button.

In the dialog box that appears, choose a new symbol and click OK. Animate will swap the target of the motion tween. Creating Nested Animations Often, an object that is animated on the Stage will have its own animation.

For example, the wings of a butterfly moving across the Stage may flap as it moves. Or the alien that you swapped with the rocket ship could be waving his arms. These kinds of animations are called nested animations, because they are contained inside the movie clip symbols. Movie clip symbols have their own Timeline that is independent of the main Timeline.

The alien appears in the middle of the Stage. In the Timeline, the parts of the alien are separated in layers. A keyframe is inserted at the end of the motion tween. The left arm rotates smoothly from the resting position to the outstretched position. Right-click his right arm and choose Create Motion Tween. Animate inserts a keyframe at the end of the motion tween. The arm rotates smoothly from the resting position to the outstretched position.

Your animation of the alien raising his arms is complete. Animate opens a window showing the exported animation.

The alien moves along the motion path while the nested animation of his arms moving plays and loops. To prevent the looping, you need to add code to tell the movie clip Timeline to stop on its last frame. But you can also have nested animations and graphics inside of graphic symbols, although they work a little differently.

It will only play if there are sufficient frames on the main Timeline where the instance is placed. Because of the ease with which you can pick and choose what frame inside a graphic symbol shows, graphic symbols are ideal for lip syncing or other character variations. Using the Frame Picker for phonemes If animated characters talk, their mouth will be synchronized with their words. Each sound, or phoneme, is produced by a different mouth shape.

 
 

– Adobe animate cc classroom in a book pdf free free

 
 

Click Loop Option again to turn it off. Changing the Pacing and Timing You can change the duration of the entire tween span or change the timing of the animation by dragging keyframes on the Timeline. Changing the animation duration If you want the animation to proceed at a slower pace and thus take up a much longer period of time , you need to lengthen the entire tween span between the beginning and end keyframes.

If you want to shorten the animation, you need to decrease the tween span. Lengthen or shorten a motion tween by dragging its ends on the Timeline. Your motion tween shortens to 60 frames, reducing the time it takes the cityscape to move.

The timing of your entire animation remains the same; only the length changes. Your motion tween begins at an earlier time, so it now plays only from frame 10 to frame Add frames by Shift-dragging the end of a tween span. The last keyframe in the motion tween remains at frame 60, but Animate adds frames through frame The keyframe at frame 60 is selected.

A tiny box appears next to your mouse pointer, indicating that you can move the keyframe. The last keyframe in the motion tween moves to frame 40, so the motion of the cityscape proceeds more quickly.

Span-based vs. However, if you prefer to click a motion tween and have the entire span the beginning and end keyframes, and all the frames in between be selected, you can enable Span Based Selection from the Options menu on the upper-right corner of the Timeline or you can Shift-click to select the entire span. With Span Based Selection enabled, you can click anywhere within the motion tween to select it, and move the whole animation backward or forward along the Timeline as a single unit.

You can change the color effect of an instance in one keyframe and change the value of the color effect in another keyframe, and Animate will automatically display a smooth change, just as it does with changes in position. Animate will create a smooth fade-in effect. The cityscape instance on the Stage becomes totally transparent. The cityscape instance on the Stage becomes totally opaque.

Animate interpolates the changes in both position and transparency between the two keyframes. Animating filters is no different from animating changes in position or changes in color effect. You simply set the values for a filter at one keyframe and set different values for the filter at another keyframe, and Animate creates a smooth transition.

Click the upper-right side of the Stage to select the transparent instance. Or, click the woman layer in the Timeline to highlight it; then click within the outline that appears on the Stage. Set the Blur X and Blur Y values to 20 pixels. The woman instance is blurred throughout the motion tween. Animate establishes a keyframe for filters at frame The Blur filter changes from the keyframe at frame to the keyframe at Animate creates a smooth transition from a blurry instance to an in-focus instance.

Understanding property keyframes Changes in properties are independent of one another and do not need to be tied to the same keyframes.

That is, you can have a keyframe for position, a different keyframe for the color effect, and yet another keyframe for a filter. Managing many different kinds of keyframes can become overwhelming, especially if you want different properties to change at different times during the motion tween. Fortunately, Animate CC provides a few helpful tools for keyframe management.

When viewing the tween span, you can choose to view the keyframes of only certain properties. For example, you can choose to view only the Position keyframes to see when your object moves.

Or, you can choose to view only the Filter keyframes to see when a filter changes. Right-click a motion tween in the Timeline, choose View Keyframes, and then select the desired property among the list. You can also choose All or None to see all the properties or none of the properties. When inserting a keyframe, you can also insert a keyframe specific to the property you want to change. Right-click a motion tween in the Timeline, choose Insert Keyframes, and then select the desired property.

You can also view an advanced panel, called the Motion Editor, to see and edit how the different properties of your object change over the course of the motion tween. These kinds of changes are made with the Free Transform tool or with the Transform panel.

The car will start small, and then become larger as it appears to move forward toward the viewer. The transformation handles appear around the instance on the Stage. The car becomes totally transparent. The current layer becomes a tween layer. A new keyframe is automatically inserted at frame to indicate the change in transparency.

You have used Animate to tween the change in position and the change in scale as well as the change in transparency from frame 75 to frame Motion presets If your project involves creating identical motion tweens repeatedly, Animate allows you to save and reuse motion tweens as presets.

For example, if you want to build a slideshow where each image fades out in the same manner, you can save that transition as a motion preset. Alternatively, right-click the motion tween and choose Save As Motion Preset.

Animate provides a number of motion presets that you can use to quickly build sophisticated animations without much effort. Changing the Path of the Motion The motion tween of the left car that you just animated shows a colored line with dots indicating the path of the motion.

You can edit the path of the motion easily to make the car travel in a curve, or you can move, scale, or rotate the path just like any other object on the Stage. To better demonstrate how you can edit the path of the motion, open the sample file 04MotionPath.

Moving the path of the motion You will move the path of the motion so the relative movement of the rocket ship remains the same but its starting and ending positions change. The path of the motion becomes highlighted. The relative motion and timing of the animation remain the same, but the starting and ending positions are relocated. Transformation handles appear around the path of the motion. You can make the path smaller or larger, or rotate the path so the rocket ship starts from the bottom left of the Stage and ends at the top right.

Editing the path of the motion Making your objects travel on a curved path is a simple matter. You can either edit the path with Bezier precision using anchor point handles, or you can edit the path in a more intuitive manner with the Selection tool.

The handle on the anchor point controls the curvature of the path. Make the rocket ship travel in a wide curve. Select the Selection tool and make sure the path is deselected. Move your pointer close to the path of the motion. A curved icon appears next to your pointer, indicating that you can edit the path.

Drag the path of the motion to change its curvature. Choose the spots where you drag carefully! Each drag breaks the path into smaller segments, making it harder to achieve a smooth curve. Mastery will come with practice. In the motion picture splash page project, the orientation of the car is constant as it moves forward.

However, in the rocket ship example, the rocket ship should follow the path with its nose pointed in the direction in which it is heading. Orient To Path in the Properties panel gives you this option. Use the Free Transform tool to rotate its initial position so that it is oriented correctly. This means that an object and its motion are independent of each other, and you can easily swap out the target of a motion tween.

Animate replaces the rocket ship with the alien. The motion remains the same, but the target of the motion tween has changed. Select the object that you want to swap on the Stage.

In the Properties panel, click the Swap button. In the dialog box that appears, choose a new symbol and click OK. Animate will swap the target of the motion tween.

Creating Nested Animations Often, an object that is animated on the Stage will have its own animation. For example, the wings of a butterfly moving across the Stage may flap as it moves. Or the alien that you swapped with the rocket ship could be waving his arms.

These kinds of animations are called nested animations, because they are contained inside the movie clip symbols. Movie clip symbols have their own Timeline that is independent of the main Timeline. The alien appears in the middle of the Stage. In the Timeline, the parts of the alien are separated in layers. A keyframe is inserted at the end of the motion tween.

The left arm rotates smoothly from the resting position to the outstretched position. Right-click his right arm and choose Create Motion Tween.

Animate inserts a keyframe at the end of the motion tween. The arm rotates smoothly from the resting position to the outstretched position. Your animation of the alien raising his arms is complete. Animate opens a window showing the exported animation. The alien moves along the motion path while the nested animation of his arms moving plays and loops. To prevent the looping, you need to add code to tell the movie clip Timeline to stop on its last frame.

But you can also have nested animations and graphics inside of graphic symbols, although they work a little differently. It will only play if there are sufficient frames on the main Timeline where the instance is placed. Because of the ease with which you can pick and choose what frame inside a graphic symbol shows, graphic symbols are ideal for lip syncing or other character variations. Using the Frame Picker for phonemes If animated characters talk, their mouth will be synchronized with their words.

Each sound, or phoneme, is produced by a different mouth shape. Animators draw a collection of these mouth positions to be used to synchronize to the soundtrack. You can store each mouth position as a keyframe in a graphic symbol.

The file contains your familiar alien character on the Stage. The alien is not animated on a path, but his head is a graphic symbol with multiple keyframes inside of its Timeline. Notice that the Timeline contains five keyframes in the mouth layer. Each keyframe shows the mouth in a different position.

Frame 1 has a small closed mouth, frame 2 a rounded mouth, frame 3 a wide open mouth, and so on. Animate creates a SWF to play the animation. Nothing happens because there is only a single frame on the main Timeline, and a graphic symbol needs frames on the main Timeline to play its own Timeline. Frames are added to both layers up to frame Animate plays the animation.

The graphic symbol plays all of its five keyframes repeatedly during the 45 frames of the main Timeline. Leave the value of the First field at 1. The Frame Picker panel opens. The Frame Picker shows thumbnail images of all the frames inside the graphic symbol. Drag the other side of the coffee cup outward slightly. The coffee cup now has a more rounded body. Changing strokes and fills If you want to change the properties of any stroke or fill, you can use the Ink Bottle tool or the Paint Bucket tool.

The Ink Bottle tool changes stroke colors; the Paint Bucket tool changes fill colors. In the Tools panel, select the Paint Bucket tool.

In the Properties panel, choose a darker brown Fill color Click the top surface of the coffee that is inside the cup. The fill of the top oval changes to the darker brown color. Tip If your Paint Bucket tool changes the fill in surrounding areas, there may be a small gap in the shape outline that allows the fill to spill over. Close the gap manually, or use the Gap Size menu at the bottom of the Tools panel to choose the gap size that Animate will close automatically.

In the Tools panel, select the Ink Bottle tool. In the Properties panel, choose a darker brown stroke color Click the top stroke above the surface of the coffee.

Tip You can also select a stroke or a fill and change its color by using the Properties panel without selecting the Paint Bucket or Ink Bottle tool. The stroke around the surface of the coffee changes to a darker brown color. Using gradient fills The fill is the interior of the drawn object. Currently, you have selected a solid brown fill color, but you can also use a gradient as a fill, or you can specify that the object have no fill at all.

In a gradient, one color gradually changes into another. Animate can create linear gradients, which change color horizontally, vertically, or diagonally, or radial gradients, which change color moving outward from a central focal point.

By default, a linear gradient moves from one color to a second color, but you can use up to 15 color transitions in a gradient in Animate. A color pointer determines where each color is defined, and smooth color changes happen between each of the pointers. Add color pointers beneath the gradient definition bar in the Color panel to add more colors and, hence, more gradients. Select the Selection tool and then select the fill that represents the front surface of the coffee cup.

The front surface of the coffee cup is filled with a color gradient that changes from left to right. In the Color panel, select the color pointer at the left end of the color gradient definition bar the triangle above it turns black when selected , and then type FFCCCC in the Hex value field to specify a light tan color. You can also select a color from the Color Picker or double-click the color pointer to select a color from the color swatches. Select the far-right color pointer, and then enter B for a dark tan color.

The gradient fill for the coffee cup changes from light tan to dark tan across its surface. Click beneath the gradient definition bar to create a new color pointer.

Drag the new color pointer to the middle of the gradient. The gradient fill for the coffee cup now changes gradually from light tan through white to dark tan. Deselect the fill on the Stage by clicking elsewhere on the Stage. Select the Paint Bucket tool and make sure the Lock Fill button at the bottom of the Tools panel is deselected.

The Lock Fill option locks the current gradient to the first shape to which it was applied so that subsequent shapes extend the gradient. This allows multiple columns of tools to be shown. With the Paint Bucket tool, select the back surface of the coffee cup. Animate applies the gradient to the back surface. Tip To delete a color pointer from the gradient definition bar, simply drag it off the bar. Using the Gradient Transform tool In addition to choosing colors and positioning the color pointers for a gradient, you can adjust the size, direction, or center of a gradient fill.

Select the Gradient Transform tool Free Transform tool. The Gradient Transform tool is grouped with the 2. Click the front surface of the coffee cup. Transformation handles appear. Drag the square handle on the right side of the bounding box inward to squeeze the gradient tighter. Drag the center circle to move the gradient to the left so the white highlight is positioned slightly left of center.

You can even rotate the gradient counterclockwise by dragging the round handle in the upper-right corner of the bounding box. Drag slightly to the left so that the gradient tilts along the curve of the cup. Click the back surface of the coffee cup. Drag the round handle on the corner of the bounding box to rotate the gradient degrees so that the gradient fades from dark tan on the left to white to light tan on the right.

Narrow the gradient and move it to the right slightly so that the highlight falls on the right side of the inner surface. The coffee cup now looks more realistic because the shadows and highlights make it appear that the front surface is convex and the back surface is concave. Tip Move the center circle to change the center of the gradient, drag the round handle to rotate the gradient, or drag the square handle to stretch or compress the gradient.

Select the top surface of the coffee with the Selection tool. Open the Colors panel and choose Radial Gradient. For the left color pointer, choose a light brown color, and for the right color pointer, choose a deep, chocolate brown color. The top surface of the coffee is filled with a radial gradient that is lighter in the center and darker at the edges. Select the Gradient Transform tool.

Drag the center point handle of the gradient near the right edge of the cup. Drag the width handle to the right to flatten the elliptical gradient so that it is about twice as wide as high. Drag the size handle to the left to shrink the ellipse so that the gradient just covers the surface of the coffee. The top surface of the coffee is complete! With subtle variations to linear and radial gradients, you can achieve nice effects that give dimensionality and form to your objects.

Rename the layer containing your completed drawing coffee cup. Tip You can also use the Gradient Transform tool to change the width, orientation, size, or rotation of a bitmap fill. A group holds together a collection of shapes and other graphics to preserve their integrity. When the elements that compose the coffee cup are grouped, you can move them as a unit without worrying that the cup might merge with underlying shapes. Use groups to organize your drawing. Select all the shapes that make up the cup of coffee.

The cup of coffee is now a single group. When you select it, a blue-green outline indicates its bounding box. If you want to change any part of the cup of coffee, double-click the group to edit it. Notice that all the other elements on the Stage dim, and the Edit bar above the Stage displays Scene 1 Group.

This indicates that you are now in a particular group and can edit its contents. Click the Scene 1 icon in the Edit bar at the top of the Stage, or double-click an empty part of the Stage, and return to the main scene. Using variable-width strokes You can make many different styles of lines for your strokes. In addition to a solid line, you can choose dotted, dashed, or ragged, or even customize your own.

In addition, you can create lines with variable widths and edit the variations with the Width tool. Transparency is measured as a percentage and is referred to as alpha.

In the Tools panel, select the Pencil tool. Choose Smooth from the Pencil Mode menu at the bottom of the Tools panel. In the Properties panel, select a dark brown stroke color. In the Fill And Stroke section of the Properties panel, enter 15 for the stroke size.

From the Style menu, choose Solid, and from the Width menu, choose the thick and thin profile, Width Profile 2. Tip Edit variable-width lines as you would any other stroke. Use the Selection or Subselection tool to bend the curves or move the anchor points. Draw a few wavy lines above the coffee.

Animate renders each line with a thick-and-thin width. Although it appears as a complicated shape, the entire object is a single selectable stroke.

Editing the width of lines You can finesse where the bulges appear in your lines, and how much of a bulge there is. Use the Width tool to make those edits. In the Tools panel, select the Width tool. Move your mouse pointer over one of your variable-width strokes. Anchor points appear along the line to show you where the thick and thin portions of the line are located. Drag the handles at any anchor point to change the width of the line.

Exaggerate some of the restrictions and bulges. Drag an anchor point along the stroke to move its location. Drag anywhere along the stroke to add a new anchor point and define the width at that location.

Animate displays a small plus sign next to your pointer to indicate that you can add an anchor point. Using swatches and tagged swatches Swatches are predefined samples of color. Tagged swatches are specially marked swatches that are linked to the graphics on your Stage that are using them. If you change a tagged swatch in your Swatch panel, all your graphics that use the tagged swatch will be updated. Select the Selection tool and click one of the variable-width strokes above your coffee mug.

The Swatches panel opens, showing the default colors with gradients in the bottom row. A new swatch appears with the exact color of the coffee wisp that you selected. The Tagged Color Definition dialog box appears. Enter coffee steam in the Name field and click OK. The dialog box closes and a new tagged swatch appears in the Tagged Swatches section of the Swatches panel.

Select the Selection tool and, holding down the Shift key, click every coffee wisp above the mug. Open the Swatches panel. Select the coffee steam tagged swatch.

The selected graphics use the tagged swatch as their color. In the Properties panel, a tagged swatch is indicated by the white triangle in the lower-right corner of the color. Updating tagged swatches The real power of tagged swatches is apparent when you have to make updates to your project.

Since each wisp uses a tagged swatch, you can simply update the color of the tagged swatch and all graphics using that tagged swatch will update. In the Tagged Swatches section of the Swatches panel, double-click the coffee steam tagged swatch. The Tagged Color Definition dialog box opens with the name and color information. Change the color to a different shade of brown and a different Alpha, or transparency, value.

The new color appears in the top half of the color preview window. Click OK to close the dialog box. The new color information is saved and all the graphics using the tagged swatch update to the new color.

For more precise control, you can use the Pen tool. First, change the Stage background to a light brown color CC Drag the layer to the bottom of the layer stack and then lock all the other layers. In the Tools panel, select the Pen tool.

Choose Hairline from the Style menu and Uniform from the Width menu. Begin your shape by clicking off the left edge of the Stage to establish the first anchor point. Keep holding the mouse button and drag in the direction you want the line to continue. You will drag out a direction line from the new anchor point, and when you release the mouse button you will have created a smooth curve between the two anchor points.

Continue to move the mouse to the right across the Stage, pressing and dragging out direction lines to build the outline of the wave. Keep going past the right edge of the Stage and click once to set a corner point.

You have drawn the top edge of your wave; now you need to complete the shape by drawing the bottom. Click once below the previous corner point, and then draw a wavy line back to the left across the Stage, similar but not exactly parallel to the first curved line. Take care not to place your anchor points directly under the anchor points in the upper line so that the wave has a free-form outline.

Continue the lower wavy line past the left edge of the Stage and click below the initial anchor point to place another corner point. Close your shape by clicking the first anchor point. Select the Paint Bucket tool. Set the Fill color to a dark brown.

Click inside the outline you just created to fill it with color. Select the Selection tool, and double-click the outline to select all of it. Press the Delete key to remove the stroke. It takes practice to get used to the Pen tool. Use the Selection tool or the Subselection tool to refine your curves.

Hover over a line segment and look at the arced line segment that appears near your pointer. This indicates that you can edit the curve.

If a right-angle segment appears near your cursor, this indicates that you can edit the corner point. Drag the curve to edit its shape. In the Tools panel, select the Subselection tool. Click the outline of the shape. Drag the anchor points to new locations or move the handles to refine the overall shape.

Lengthening the handles makes the curve flatter. Tilting the handles changes the direction of the curve. Deleting or adding anchor points Use the hidden tools under the Pen tool to delete or add anchor points as needed. Press and hold the Pen tool to access the hidden tools under it. Select the Delete Anchor Point tool. Click an anchor point on the outline of the shape to delete it. Select the Add Anchor Point tool. Click the curve to add an anchor point.

Creating paths with the Pen tool You can use the Pen tool to create paths that are straight or curved, open or closed. Understanding the elements of a path and how to create those elements with the Pen tool makes paths much easier to draw.

Creating a straight line. To create a straight path, click the mouse button. The first time you click, you set the starting point. Each time that you click thereafter, a straight line is drawn between the previous point and the current point.

To draw complex straight-segment paths with the Pen tool, simply continue to add points. Creating a curved line. Curved line segment B. Direction point C. Direction line D. Selected anchor point E. Unselected anchor point Creating a closed path.

To create a curved path, start by pressing the mouse button to place an anchor point, then drag to create a direction line for that point and release the mouse button. Then move the mouse to place the next anchor point and drag out another set of direction lines. At the end of each direction line is a direction point; the positions of direction lines and points determine the size and shape of the curved segment. Moving the direction lines and points reshapes the curves in a path.

Smooth curves are connected by anchor points called smooth points. Sharply curved paths are connected by corner points. When you move a direction line on a smooth point, the curved segments on both sides of the point adjust simultaneously, but when you move a direction line on a corner point, only the curve on the same side of the point as the direction line is adjusted. When a path contains more than one segment, you can drag individual anchor points to adjust individual segments of the path, or select all of the anchor points in a path to edit the entire path.

Use the Subselection tool to select and adjust an anchor point, a path segment, or an entire path. Closed paths differ from open paths in the way that you end each one. To end an open path, select the Selection tool or press Escape. Closing a path automatically ends the path. You can apply transparency to either the stroke or the fill. Modifying the Alpha value of a fill 1.

Select the Selection tool and select the shape in the dark brown wave layer. The Paste In Place command puts the copied item in the exact same position from where it was copied. Move the pasted shape slightly to the left or to the right so the crests of the waves are somewhat offset. Select the fill of the shape in the light brown wave layer. The color swatch in the Color panel previews your newly selected color.

Transparency is indicated by the gray grid that you can see through the transparent color swatch. Tip You can also change the transparency of a shape from the Properties panel by clicking the Fill Color icon and changing the Alpha value in the pop-up color picker. For a more painterly approach, use the Paint Brush tool. The Paint Brush tool allows you to make shapes that are more organic and free-form as well as shapes with regularly repeating patterns for borders and decorations.

And, as with other graphics created with Animate, the shapes you create with the Paint Brush tool remain fully vector based. In the timeline, add a new layer on top of your other layers and rename it chalk. Select the Paint Brush tool. In this example, we chose a vibrant yellow. In the Fill And Stroke section, enter 15 for the stroke size. Now, to choose your brush style, click the Brush Library button to the right of the Style menu. The Brush Library panel opens.

Select a category to see the subcategories, and select a subcategory to view the individual brushes. The Charcoal — Thick brush is added to the Style menu in the Properties panel, and it becomes the currently active brush style.

Select the Selection tool and move your coffee mug and its aroma to the side to make some room. Select the chalk layer, and then select the Paint Brush tool. Now for the fun. If you double-click a letter with the Selection tool, you can edit the path of the letters. You can also use the Subselection tool to edit the vector path of the paintbrush mark. Push and pull on the stroke, move, or edit it with the Transform tool just like you would any other vector shape.

Create a new layer above all your other layers and rename it border. Select the Line tool. Click the Stroke color swatch in the Properties panel and select a muted brown or orange color that would harmonize well with the rest of the background graphics. In the Properties panel, click the Brush Library button next to Style.

The Brush Library panel opens, unless it is already open. If you find something more appealing, feel free to select it instead. Double-click your choice. The Dashed Square 1. Create a long horizontal line at the top edge of the Stage and another one at the bottom of the Stage. Tip Hold Shift while drawing with the Line tool to constrain the tool to horizontal or vertical lines.

The dashed regular pattern at the top and bottom of the Stage provides a nice contrast to the curves and chalk-style lettering. Editing and creating your own Art or Pattern brush You might not find a brush to your liking in the Brush Library, or you may need something very specific for your project.

In either case, you can edit an existing brush or you can create an entirely new one. Pattern brushes repeat a shape over the length of a stroke whereas Art brushes stretch the base art over the length of the stroke.

The Paint Brush Options dialog box appears, with multiple controls for refining how the brush applies the base shapes. Art brushes and Pattern brushes have different options. Experiment with different spacing, how the shapes repeat or stretch to fit, or how corners and overlaps are handled. To create an entirely new brush, first create some shapes on the Stage that you want to base your brush on.

For example, if you want to create a train track, create the base art that repeats for a Pattern brush. The Paint Brush Options dialog box appears. From the Type menu, you can choose either Art Brush or Pattern Brush, and then refine the brush options. The preview window shows you the results of your chosen options. Enter a name for your new brush and click Add. Your new brush will be added to your Style menu and available for you to use. Click the Manage Paint Brushes button in the Properties panel.

Select the brushes you want to delete or save to your Brush Library. You cannot delete a brush that is currently in use. Pressure-sensitive graphics tablets Animate supports input from pressure-sensitive tablets, such as the Wacom graphics tablets, to control variable-width strokes or the Art or Pattern brushes.

Pressing harder with the stylus creates fatter strokes, whereas pressing lightly results in thinner strokes. You can adjust the tilt or sensitivity percentages in the Paint Brush Options dialog box to modify the range of thicknesses in the shapes you create. Try drawing with a stylus on a tablet with variable-width strokes enabled for a natural, intuitive way of creating vector images. In Animate, you can do the same thing with the Stage using the Rotation tool. The Rotation tool is grouped under the Hand tool in the Tools panel.

Select the Rotation tool and click the Stage to specify the pivot point, indicated by a crosshair. Once the pivot point has been established, drag the Stage to rotate it to your desired angle. Click the Center Stage button at the top of the Stage to reset the Stage to its normal orientation. When you create static text on the Stage and publish to an HTML5 project, Animate automatically converts fonts into outlines.

The downside is that too much text can bloat your file size. Use dynamic text to leverage web fonts available either through Adobe Fonts formerly Typekit or Google Fonts. Thousands of high-quality fonts are available to you through your Creative Cloud subscription, and the fonts are hosted by Adobe and accessible directly through the Properties panel within Animate. High-quality open source fonts are available through Google Fonts, which are hosted on Google servers.

Select the top layer. Select the Text tool. Begin typing. Enter Taste the difference. The text may not fit, or it might not be the size or font that you want. Exit the Text tool by selecting the Selection tool. Add three more pieces of smaller text on the Stage in the same layer just below your tag line: Coffee, Pastries, and Free Wi-Fi. Make sure you have an Internet connection because Animate retrieves the list of available fonts from the web.

The processes for adding an Adobe font and a Google Font are very similar. Choose Google Fonts from the menu that appears. Animate displays the Google Fonts dialog box. The list of fonts can be very slow to load. Be patient! Choose Alphabet from the Sort By menu. The list of Google fonts on the right is displayed alphabetically.

You can choose to sort by date, by popularity, or by other criteria. The Google Fonts are listed with a sample sentence fragment. You can scroll through the font families with the scroll bar on the right.

You can also search for specific fonts or use the Category menu to narrow your search. For now, peruse the range of typefaces and pick one that you think would suit this banner ad. Click the name of your preferred font under the sample text, then click Done.

The dialog box closes and the selected Google font will be added to your Animate project. In the Properties panel, Character section, choose the newly added web font from the Family menu. Web fonts are listed at the very top of the menu. Your selected Google font is applied to the text box on the Stage.

Choose a color that works nicely with the composition. Select the other three pieces of text and use the Family menu to apply the same web font. Removing a web font If you change your mind, you can easily remove a Google web font and choose a different one. Select all the text that uses the web font you want to remove. Deselect the font by choosing a different one. Click the Selected Fonts tab. Animate displays all the fonts, indicated by a blue checkmark, that have been selected for your project.

In this example, the Google font Architects Daughter is selected because it was previously added to our project. You must deselect a font from every bit of text before removing it from your project.

Deselect the font by clicking it. Now, no fonts are displayed in the Selected Fonts area. Click Done. The Add Web Fonts dialog box closes. The web font is removed from the Family menu in the Properties panel.

Matching the color of an existing object If you want to match a color exactly, you can use the Eyedropper tool to sample a fill or a stroke. After you click an object with the Eyedropper tool , Animate automatically switches to the Paint Bucket tool or the Ink Bottle tool loaded with the selected color and associated properties that you can apply to another object.

Select the Eyedropper tool. Click the fill of the shape in the dark brown wave layer. The three selected pieces of text change color to match the fill of the dark brown wave layer. Using the same colors helps to unify the composition. Aligning objects The Align panel, as you might guess, aligns any number of selected objects horizontally or vertically.

It can also distribute objects evenly. Select the first small piece of text, Coffee. Move the text box left or right until smart guides appear. Align the left edge of the selected text with the left edge of the larger text above it. Select the third small piece of text, Free Wi-Fi. Move the text left or right until smart guides appear. Align the right edge of the selected text with the right edge of the larger text above it. Shift-click all three small pieces of text to select them.

Deselect the Align To Stage option, if it is selected. Click the Align Bottom Edge button. Animate aligns the bottom edges of the text.

Click the Space Evenly Horizontally button. The selected text is adjusted so that the spaces between them become uniform. Using rulers and guides You may want to be more precise in your placement of your graphics. In Lesson 1, you learned how to use the x and y coordinates in the Properties panel to position individual objects. Another way to position objects on the Stage is to use rulers and guides.

Rulers appear on the top and left edge of the pasteboard to provide measurement along the horizontal and vertical axes. Guides are vertical or horizontal lines that appear on the Stage but that do not appear in the final published movie. Horizontal and vertical rulers measured in pixels appear along the top and left edges of the pasteboard. As you move objects on the Stage, tick marks indicate the positions of their bounding boxes on the rulers. Move your mouse pointer over the top horizontal ruler or the left vertical ruler and drag a guide onto the Stage.

A colored line appears on the Stage that you can use as a guide for alignment. Double-click any guide with the Selection tool to call up the Move Guide dialog box to enter pixel values for precise guide positioning.

Objects will now snap to any guides on the Stage. This prevents you from accidentally moving them. You could copy the existing cup and paste it into the document, but that would add to the size of your file and performance can suffer.

Instead, a better approach is to convert your coffee cup into a symbol so you can use it over and over again. A symbol is a reusable asset that you can use for special effects, animation, or interactivity.

Animate uses three kinds of symbols: graphic, button, and movie clip. You can use a symbol countless times in a project, but Animate includes its data only once. That means that symbols can reduce file size and download time for many animations. Symbols are listed in the Library panel. When you drag a symbol to the Stage, Animate creates an instance of the symbol, leaving the original in the library. An instance is a copy of a symbol that has been placed on the Stage. You can think of the symbol as an original photographic negative, and the instances on the Stage as prints of the negative.

From a single negative, you can create multiple prints. At any time, you can go inside your symbol and edit it, which means editing or replacing its contents. Three types of symbols Each of the three kinds of symbols in Animate is used for a specific purpose. Each drag breaks the path into smaller segments, making it harder to achieve a smooth curve.

Mastery will come with practice. In the motion picture splash page project, the orientation of the car is constant as it moves forward. However, in the rocket ship example, the rocket ship should follow the path with its nose pointed in the direction in which it is heading.

Orient To Path in the Properties panel gives you this option. Animate inserts keyframes for rotation along the motion tween to orient the nose of the rocket ship to the path of the motion. Use the Free Transform tool to rotate its initial position so that it is oriented correctly. This means that an object and its motion are independent of each other, and you can easily swap out the target of a motion tween. Select the object that you want to swap on the Stage. In the Properties panel, click the Swap button.

In the dialog box that appears, choose a new symbol 2 Click OK. Animate will swap the target of Animate replaces the rocket ship with the alien. The motion remains the same, the motion tween.

Creating Nested Animations Often, an object that is animated on the Stage will have its own animation. For example, the wings of a butterfly moving across the Stage may flap as it moves. Or the alien that you swapped with the rocket ship could be waving his arms.

These kinds of animations are called nested animations, because they are contained inside the movie clip symbols. Movie clip symbols have their own Timeline that is inde- pendent of the main Timeline. The alien appears in the middle of the Stage. In the Timeline, the parts of the alien are separated in layers. A keyframe is inserted at the end of the motion tween. The left arm rotates smoothly from the resting position to the outstretched position. Right-click his right arm and choose Create Motion Tween.

Animate inserts a keyframe at the end of the motion tween. The arm rotates smoothly from the resting position to the outstretched position. To prevent the looping, 11 Click the Scene 1 button in the Edit bar at the top of the Stage to exit symbol- you need to add code to tell the movie clip editing mode. Timeline to stop on its Your animation of the alien raising his arms is complete.

Wherever you use the last frame. JavaScript in later lessons. But you can also have nested animations and graphics inside of graphic symbols, although they work a little differently. It will only play if there are sufficient frames on the main Timeline where the instance is placed. Because of the ease with which you can pick and choose what frame inside a graphic symbol shows, graphic symbols are ideal for lip syncing or other character variations.

Using the Frame Picker for phonemes If animated characters talk, their mouth will be synchronized with their words. Each sound, or phoneme, is produced by a different mouth shape. Animators draw a collection of these mouth positions to be used to synchronize to the soundtrack.

You can store each mouth position as a keyframe in a graphic symbol. The file contains your familiar alien character on the Stage.

The alien is not animated on a path, but his head is a graphic symbol with multiple keyframes inside of its Timeline. Notice that the Timeline contains five keyframes in the mouth layer. Each keyframe shows the mouth in a different position. Frame 1 has a small closed mouth, frame 2 a rounded mouth, frame 3 a wide open mouth, and so on. Animate creates a SWF to play the animation. Nothing happens because there is only a single frame on the main Timeline, and a graphic symbol needs frames on the main Timeline to play its own Timeline.

Frames are added to both layers up to frame Animate plays the animation. The graphic symbol plays all of its five keyframes repeatedly during the 45 frames of the main Timeline. Leave the value of the First field at 1. The Frame Picker panel opens.

The Frame Picker shows thumbnail images of all the frames inside the graphic symbol. When the animation plays frame 12, the alien head graphic symbol will change to frame 4.

When the animation reaches frame 14, the head symbol will switch to displaying frame 2. Easing Easing refers to the way in which a motion tween proceeds.

You can think of easing as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, then build up speed, and then stop suddenly. Or, the object can start off quickly and then gradually slow to a halt. Your keyframes indicate the beginning and end points of the motion, but the easing determines how your object gets from one keyframe to the next.

A simple way to apply easing to a motion tween is to use the Properties panel. A negative value creates a more gradual change from the starting position known as an ease-in.

A positive value creates a gradual slowdown known as an ease-out. Splitting a motion tween Easing affects the entire span of a motion tween. If you want the easing to affect only frames between keyframes of a longer motion tween, you should split the motion tween. However, the actual movement of the car starts at frame 75 and ends at frame The motion tween is cut into two separate tween spans.

The end of the first tween is identical to the beginning of the second tween. The motion tweens of all three cars have now been split. This applies an ease-out to the motion tween. Animate plays the Timeline in a loop between frames 60 and so you can examine the ease-out motion of the three cars. Frame-by-Frame Animation Frame-by-frame animation is a technique that creates the illusion of movement by making incremental changes between every keyframe.

Frame-by-frame animations increase your file size rapidly because Animate has to store the contents for each keyframe.

Use frame-by-frame animation sparingly. When the movie clip loops, the car will rumble slightly to simulate the idle of the motor. Inserting a new keyframe The frame-by-frame animations inside the carMiddle and carRight movie clip sym- bols have already been done. Inside the carRight movie clip, three keyframes establish three different positions for the car and its headlights.

The keyframes are spaced unevenly to provide the unpredictable up and down motion. Animate inserts a keyframe in frame 2 of the lights layer and the smallRumble layer. The contents of the previous keyframes are copied into the new keyframes.

Changing the graphics In the new keyframe, change the appearance of the contents to create the animation. You can use the Properties panel to decrease the Y-position value by 1 pixel or press the Down Arrow key to nudge the graphics by 1 pixel. The car and its headlights move down slightly. For a random motion like an idling car, at least three keyframes are ideal. Keyframes are inserted into frame 4 of the lights and smallRumble layers. You can use the Properties panel or automatically modify press the Up Arrow key twice to nudge the graphics by 2 pixels.

Animating in 3D presents the added complication of a third z axis. When you choose the 3D Rotation or 3D Translation tool, you need to be aware of the Global Transform option at the bot- tom of the Tools panel. Moving an object with the global option selected makes the transformation relative to the global coordinate system, whereas moving an object with the local option on makes the transformation relative to itself.

Insert a new layer at the top of the layer stack and rename it title. The movietitle instance appears in your new layer in the keyframe at frame Animate converts the current layer to a tween layer so you can begin to animate the instance. The 3D rotation control appears on the selected movie clip.

That means controlling where to point the camera to frame the action, zooming in or out, panning, or even rotating the camera for special effect. All of these camera movements are available in Animate with the Camera tool. The Timeline contains added frames and a motion tween in the title layer. On the Stage, the camera controls appear.

Camera layer; it only hides it from view. To delete camera filters. Disable the Camera layer by choosing your Selection tool, or by clicking trash can icon. Your camera will initially hide a part of her face to create a little bit of mystery. There are two modes on the controls, one for Rotate and another for Zoom. The Zoom mode should be highlighted. The Camera view zooms closer into the Stage.

The slider snaps back to the center, allowing you to continue dragging to the right to continue zooming. You can also enter a numerical value for the zoom in the Properties panel in the Camera Properties section. Your Stage shows a close-up view of the cityscape between the two main characters. As with any bitmap, zooming in too dramatically will reveal the limitations of the original embedded image. The contents of the Stage move to the right. So if you point your camera to the left, the objects in view will move to the right.

Animating a pan A pan is the motion of the camera left to right or up and down. In the context menu that appears, choose Create Motion Tween. A motion tween is added to the Camera layer, indicated by the blue-colored frames. Hold down the Shift key to constrain the motion to a straight vertical line. A new keyframe is established at frame 25, and Animate creates a smooth motion of the camera between the two keyframes.

Panning across the Stage Your viewers now see this mystery woman, who is looking to her left. But who or what is she looking at? A new keyframe is automatically created at frame 70 with the camera in its new position. The camera pans across the Stage from left to right between frames 40 and The camera will hold its position from frame 70 to frame The Brightness, Contrast, Saturation, and Hue values appear, all of them with a value of 0. The view through the camera becomes desaturated and all the graphics on the Stage appear black and white.