Looking for:
Adobe animate cc 2018 tutorial pdf free
❿
Adobe animate cc 2018 tutorial pdf free.(PDF) Adobe Animate CC Classroom in a Book | Aziz Assefa -
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 is a rare example of a robust multimedia authoring environment that enables your imagination to become reality. About 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 you can learn at your own 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 system. You should know how to use the mouse and standard menus and commands, and also how to open, save, and close files. 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 installing the software, visit helpx. 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 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, sec- tions 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 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 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.
Account page, make sure to do so now. See 1 Double-click the 04End. 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 ele- ment 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 charac- ters. 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. 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. 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?
Joey Judkins. Female character turn arounds for 2D animation in aniamte cc. Necrobots Series III. Manuel Cetina. Menu Interaction - Minimal Landing page. Stylized female character design tutorial. Amos Gyamfi. Elen Winata Pro. Flash character animation tutorial for games. Hello Dribbble! Rox Cardinal. Circular grid owl logo. 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.
You can tell whether a symbol is a graphic , button , or movie clip by looking at the icon next to it in the Library panel. Movie clip symbols The movie clip is one of the most powerful and versatile types of symbol. When you create animation, you will typically use movie clip symbols.
You can apply filters, color settings, and blending modes to a movie clip instance to enhance its appearance with special effects. A movie clip symbol also contains its own independent timeline. You can have an animation inside a movie clip symbol just as easily as you can have an animation on the main timeline.
❿
