Playback environment

The playback, or runtime, environment is the technology that your final published files use to play. Your animation could play in a browser with HTML5 and JavaScript. Perhaps your animation will be exported as a video to be uploaded to YouTube or an animated GIF on Twitter. 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 that you can choose the appropriate document type.

Document types

There are nine types of documents, but you’ll likely work with only two or three of them, as they are the most common. The nine documents target different playback environments that determine some of the animation and interactivity features. Your choices for Animate documents are the following:

• Choose ActionScript 3.0 to create animation to export to video or to export graphics and animation assets, such as spritesheets or PNG sequences. ActionScript refers to the native scripting language in Animate, which is similar to JavaScript, but choosing an ActionScript 3.0 document doesn’t mean you have to include ActionScript code.

  Note

  The ActionScript 3.0 document also supports publishing content as a projector for either Windows or macOS. A projector plays as a stand-alone application on the desktop, without needing a browser.

• Choose HTML5 Canvas to create projects that play back in a modern browser using HTML5 and JavaScript. You can add interactivity by inserting JavaScript within Animate or adding it to the final published files.

• Choose WebGL glTF Extended or WebGL glTF Standard for interactive animated assets to take advantage of hardware-accelerated support of graphics, or for supported 3D graphics.

• 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 in an AIR document using ActionScript 3.0.

• Choose AIR for Android or AIR for iOS to publish an app for an Android or Apple mobile device. You can add interactivity to your mobile app using ActionScript 3.0.

• Choose VR Panorama or VR 360 to publish a virtual reality project for a web browser that lets your audience look in all directions. You can add animation or interactivity to your immersive environments.

Regardless of the playback environment and document type, all documents are saved as FLA or XFL (Animate) files. The difference is that each document type is configured to export different final published files.

Creating a new document

You’ll create the simple animation that you previewed earlier by starting a new document.

1. Start at the Home screen in Animate, which is the default workspace when you launch the application. You can also get to the Home screen by pressing the Home button at the top left of the interface.

   

   The Home screen displays preset options for different playback environments and layout sizes.

   

   For example, when you select More Presets and choose the Full HD option under Character Animation, Animate creates a new ActionScript 3.0 document meant to export video at 1920 pixels by 1080 pixels. The Square option under Ads creates a new HTML Canvas document at 250 pixels by 250 pixels meant for playback in a browser.

2. Choose More Presets or choose Create New (File > New).

   

   The New Document dialog box appears. The row at the top contains six categories of intended uses; click a category to display the preset size layouts 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.

3. Select the Advanced category at the far right.

   

   The center of the dialog box now displays all the available platforms. You can select a document type and type your document’s dimensions into the Width and Height boxes.

4. In the Platforms area in the center of the dialog box, select ActionScript 3.0. 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 800 for Width and 600 for Height.

5. Click Create.

   Animate creates a new ActionScript 3.0 document with the specified Stage dimensions.

6. Choose File > Save. Name the file 01_workingcopy.fla, and from the File Format/Save As Type menu, choose Animate Document (*.fla). Although the software application is called Animate, be aware that the file extension is .fla or .xfl, both of which preserve echoes of the name of the ancestor of Animate: Flash. Navigate to the 01Start folder and click Save.

   Note

   If you save your Animate document as an Animate Uncompressed Document (.xfl), your document is saved as a collection of files in folders and not as a single document. This exposes the contents of your document to you and to other developers to swap assets easily. The XFL format is a more advanced saved document that you won’t be using in this book.

   Saving your file right away is a good working habit that ensures your work won’t be lost if the application or your computer crashes. You should always save your Animate file with the extension .fla (or .xfl if you save it as an Animate Uncompressed Document) to identify it as the Animate source file.

Choosing a new workspace

Animate also provides a few preset panel arrangements (“workspaces”) that may better suit the needs of particular users. Use the Window > Workspaces submenu or the workspace switcher at the top right of the interface to choose a different workspace or to save a new one.

1. 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.

2. Select the Essentials workspace.

   This book shows the step-by-step lessons in the Essentials workspace. It provides a good balance of access to the Stage and the most commonly used panels.

3. If you have moved some of the panels around and want to return to one of the prearranged workspaces, choose Window > Workspaces > Reset [preset name] and click Yes in the confirmation dialog box. Or, from the workspace switcher, choose the reset icon in front of the workspace name.

   Note

   The default workspace is Basic if you state that you are a new user; otherwise, the default workspace is Essentials.

   

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.

1. Open the workspace switcher and enter a name for your new workspace in the field below New Workspace.

   

2. Click the Save Workspace icon next to the new name.

   

   Animate saves the current arrangement of panels and adds it to the options in the Workspace menu, which you can access at any time.

   

3. By default, the Animate interface is dark gray. However, you can change the interface to a lighter gray if you prefer. Choose Animate > Preferences > Edit Preferences (macOS) or Edit > Preferences (Windows), and in the General preferences category, choose a different level of gray.

   Tip

   If you want to save and share your workspace preferences (in addition to other customizations), you can export them into an ANP file. Choose Animate > Preferences > Export Preferences to save a file that others can import.

   

   In this book, the screenshots are shown in the Dark mode.

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. You can use the rulers (View > Rulers) or grids (View > Grid > Show Grid) to help you position items on the Stage.

Additional positioning aids include guides (pulled from the top or side rulers; View > Guides) and the Align panel, among others. You’ll learn about these tools in later lessons in this book.

By default, you’ll see the gray area off the Stage where you can place elements that won’t be visible to your audience. The gray area is called the pasteboard. To see only the Stage, choose View > Magnification > Clip To Stage to select the option. 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 so that you can see how your audience will view your final project.

To scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit In Window. You can also choose different magnification view options from the menu just above the Stage.

Changing the Stage properties

Now you’ll change the color of 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.

1. In the Document Settings section of the Properties panel, note that the dimensions of the current Stage (the Size parameters) are set at 800x600 pixels, which you chose when you created the new document.

   

2. Also in the Properties panel, click the Background Color box next to the Stage and choose a new color from the color palette. Choose dark gray (#333333).

   

   Your Stage is now a different color. You can change the Stage properties at any time.

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.

To display the Library panel, choose Window > Library, or press Command+L/Ctrl+L.

Importing an item to the Library panel

Often, you’ll create graphics directly with the drawing tools in Animate and save them as symbols, which are stored in the library. At other times you’ll use the Asset Warp tool to create a rig inside graphics, which are also stored in the library. You can also import media such as JPEG images or MP3 sound files, and they, too, are stored in the library. In this lesson, you’ll import several images into the library to be used in the animation.

1. Choose File > Import > Import To Library. In the Import To Library dialog box, select the background.png file in the 01/01Start folder and click Open. Choose All Files (*.*) from the Enable menu if the image files are dimmed.

   Animate imports the selected PNG image and places it in the Library panel.

2. Continue importing photo1.jpg, photo2.jpg, and photo3.jpg from the 01Start folder.

   You can also hold down the Shift key to select multiple files and import all 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.

1. Choose Window > Library to open the Library panel if it isn’t already open.

2. Drag the background.png item onto the Stage and place it approximately in the center of the Stage.

   

Renaming a layer

It’s a good idea to separate your content on different layers and name each layer to indicate its contents so that you can easily find the layer you need later.

1. Double-click the name of the existing layer, Layer_1, to rename it, and type background.

2. Click outside the name box to apply the new name.

   

3. Click 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. The lock icon indicates that you can’t make edits to the layer because it is locked.

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, unless you change the layer depth with the Layer Depth panel. You’ll learn more about this option in Lesson 7, “Animating the Camera.”

1. Select the background layer in the timeline.

2. Choose Insert > Timeline > Layer. You can also click the New Layer button above the timeline.

   

   A new layer appears above the background layer.

3. Double-click the new layer to rename it, and type photo1. Click outside the name box to apply the new name.

   Your timeline now has two layers. The background layer contains the background photo, and the newly created photo1 layer above it is empty.

4. Select the top layer, called photo1.

   Tip

   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. Alternatively, hold Shift and click the dot below the eye icon to make the layer partially transparent so that you can see what’s below it. Hiding or making a layer transparent affects only how you see your project in Animate—it doesn’t affect your final exported project. Double-click the Layer icon to modify the level of transparency in the Layer Properties dialog box.

5. Choose Window > Library to open the Library panel if it isn’t already open.

6. Drag the library item called photo1.jpg from the library onto the Stage.

   

   The photo1 image appears on the Stage and overlaps the background image.

7. Choose Insert > Timeline > Layer, or click the New Layer button above the timeline, to add a third layer.

8. Rename the third layer photo2.

Working with layers

If you don’t want a layer, you can easily delete it by selecting it and then clicking the Delete button above the timeline.

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.

1. Select frame 48 in the background layer. Use the Resize Timeline View slider at the upper-right corner of the Timeline panel to expand the timeline frames to make it easier to identify frame 48.

   

2. Choose Insert > Timeline > Frame (F5). You can also choose Frame from the menu above the timeline or right-click frame 48 and choose Insert Frame from the context menu that appears.

   

   Animate adds frames in the background layer up to the selected frame, frame 48.

   

3. Select frame 48 in the photo1 layer.

4. Choose Insert > Timeline > Frame (F5), choose Insert Frame above the timeline, or right-click and choose Insert Frame to add frames in the photo1 layer up to frame 48.

5. 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.

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.

Understanding Auto Keyframe mode

There are two modes for creating keyframes. The Auto Keyframe option above your timeline can be either enabled or disabled.

If it is enabled (the keyframe icon displays a letter “A”), adding or editing content on the Stage automatically creates a new keyframe at that point in time. If it is disabled, you create keyframes manually, as described in this task. Generally, for the projects in this book, you’ll want to keep the Auto Keyframe option disabled. This way, you will learn to create a keyframe only when you specifically want one, and you will avoid accidentally creating keyframes.

In the next task, you’ll insert a keyframe in the photo2 layer at the point in time when you want the next photo to appear.

1. Make sure the Auto Keyframe option is off. Select frame 24 on the photo2 layer. The frame number of a selected frame is displayed above the left end of the timeline.

   

2. Choose Insert Keyframe from the menu above the timeline, or choose Insert > Timeline > Keyframe (F6).

   A new keyframe, indicated by an empty circle, appears in the photo2 layer in frame 24.

   

3. Drag photo2.jpg from your library onto the Stage.

   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 24. You can drag the blue playhead along the top of the timeline to “scrub,” or show what’s happening on the Stage, at any point along the timeline. You’ll see that the background photo and photo1 remain on the Stage throughout the timeline but that photo2 appears only at frame 24.

   

   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 24.

   

Moving a keyframe

If you want photo2.jpg to appear later or earlier in time, you need to move the keyframe in which it appears closer to or farther from the right on the timeline. You can easily move any keyframe by simply dragging it to a new position.

1. Select the keyframe in frame 24 on the photo2 layer.

2. Drag the keyframe to frame 12 in the photo2 layer. As you drag, you’ll see a box icon appear under your cursor, indicating that you are repositioning the keyframe.

   

   The photo2.jpg file now appears on the Stage much earlier in the animation.

   

Creating layer folders

For this project, you’ll continue to add layers for additional photos, and you’ll place those layers in a layer folder.

1. Select the photo2 layer and click the New Layer button above the timeline.

2. Name the layer photo3.

3. Insert a keyframe at frame 24.

4. Drag photo3.jpg from the library onto the Stage.

   You now have four layers. The top three contain photos of scenes from Coney Island that appear at different keyframes.

   

5. Select the photo3 layer and click the New Folder icon at the top of the Timeline panel.

   

   A new layer folder appears above the photo3 layer.

6. Name the folder photos.

   

Adding layers to layer folders

Now you’ll add the photo layers to the photos folder. As you arrange layers, remember that Animate displays the content in the layers in the order in which they appear in the timeline, with the top layer’s content at the front and the bottom layer’s content at the back.

1. 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.

   

2. 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 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.

Layer highlighting

Sometimes it’s useful to highlight certain layers as you’re working on a project to indicate that something is important in that layer.

Click the dot in the layer below the Highlight Layers indicator.

The selected layer becomes underlined in a highlighted color—the same color that is used for outlines and bounding boxes for the Show Layers As Outlines option.

Click the dot in the layer again to remove the highlight. You will not need it highlighted for the rest of this task.

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. Choose Edit > Timeline, and then choose Cut Layers, Copy Layers, Paste Layers, or Duplicate Layers.

Positioning an object on the Stage

You’ll begin by using the Properties panel to move the photos. You’ll also use the Transform panel to rotate the photos.

1. Move the playhead to frame 1 of the timeline, and select the photo1.jpg image that you dragged onto the Stage in the photo1 layer. A very narrow blue outline indicates that the object is selected.

2. In the Properties panel, type 50 for the X value and 50 for the Y value. Press Return (macOS) or Enter (Windows) to apply the values. You can also drag over the X and Y values to change them. 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.

3. Choose Window > Transform to open the Transform panel. The Transform window is also accessible from the column of icons on the side of the Properties panel.

4. In the Transform panel, select Rotate and type –12 in the Rotate box, or drag over the value to change the rotation. Press Return/Enter to apply the value.

   The selected photo on the Stage rotates 12 degrees counterclockwise.

   

5. Select frame 12 of the photo2 layer. Now click photo2.jpg on the Stage to select it.

6. Use the Properties panel and Transform panel to position and rotate the second photo in an interesting way. Use X=200, Y=40, and a Rotate value of 6 to give it some contrast with the first photo.

   

7. Select frame 24 in the photo3 layer. Now click photo3.jpg on the Stage to select it.

8. Use the Properties panel and Transform panel to position and rotate the third photo in an interesting way. Use X=360, Y=65, and a Rotate of –2 so that all your photos have visual variety.

   

   Tip

   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. In later lessons, you’ll learn to use other panels to control various aspects of your project. 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 edge 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 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 you drag it over the top or bottom of an existing dock, a horizontal drop zone will show you the panel’s new location. 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 that 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.

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. For example, when you select the Rectangle tool, the Object Drawing Mode option appears. 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. A small triangle in the lower-right corner of the tool’s button indicates that there are other tools in the group. Press and hold the icon for the visible tool to see the other tools available, and then select one from the menu.

Tearing off tools

You can customize the Tools panel to display only the tools you need or the tools you use most often. You can also arrange the tools to your liking.

1. Click the Edit Toolbar option at the bottom of the Tools panel.

   

2. Additional tools appear in an adjacent Drag And Drop Tools panel. Drag the tools that you want into the Tools panel.

   You can add spacers (horizontal separators) to create groups of tools, which can be torn off from the main Tools panel to create a floating panel.

   Note

   If you’re working with a smaller display, the bottom of the Tools panel may be cut off. That makes some of the tools and buttons invisible. But there’s an easy way to fix the problem: drag the right edge of the Tools panel to widen it so that it can show multiple columns of tools.

   

3. Choose the options from the upper-right corner to reset the Toolbar to its default workspace configuration, select a different size icon for the tools, or close the Drag And Drop Tools menu.

   

Adding graphics

You’ll use the PolyStar tool to add a little decoration to your short animation.

1. Select the folder in the timeline, and then click the New Layer button.

2. Name the new layer stars.

3. Lock the other layers below it so that you don’t accidentally move anything into them.

4. In the timeline, move the playhead to frame 36 and select frame 36 in the stars layer.

5. Choose the Insert Keyframe button above the timeline, or choose Insert > Timeline > Keyframe (F6), to insert a new keyframe at frame 36 in the stars layer.

   

   You will create star shapes to appear at frame 36 in this layer.

6. In the Tools panel, select the PolyStar tool, hidden under the Rectangle tool and indicated by the hexagon shape.

   

7. In the Properties panel, click the colored square next to the Stroke option, which indicates the color of the outline, and select the red diagonal line if it isn’t selected already.

   The red diagonal line represents a color of None for the stroke.

8. Click the colored square next to the Fill option, which indicates the color of the inside of the shape, 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.

   

9. In the Properties panel, under the Tool Options section, choose Star from the Style menu. For Number Of Sides, enter 5, and for Star Point Size, enter 0.5. These options define the shape of your star.

   

10. 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.

    

11. Exit the PolyStar tool by selecting the Selection tool.

12. 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 to a keyframe

Layer effects are keyframe based. That is, a single layer can have different layer effects in different keyframes. You’ll add a filter and a color effect to different keyframes in your layers to help add some depth to the slideshow and to help new images stand out as they’re added.

1. Move the playhead to frame 12 on the timeline, and select frame 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.

2. Choose the Insert Keyframe button above the timeline (F6).

   A keyframe appears in frame 12 in both layers.

   

3. 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.

   

4. Increase the Blur X and Blur Y values to 8 px.

   The background photo and the first photo become blurry, which accentuates the new photo that appears in the photo2 layer.

   

   The keyframes on your timeline become colored white, indicating that a layer effect is applied.

5. Select frame 24 in the photo2 layer; this is the moment when photo3 appears.

6. Choose Insert Keyframe from above the timeline (F6). This keyframe allows you to add a filter to the layer to change its appearance at that point in time.

   

7. Click Add Filter in the Properties panel and choose Blur. Increase Blur X and Blur Y to 8px.

   The photo in the photo2 layer becomes blurry, helping your audience focus on the new photo that appears in the photo3 layer.

   

8. Select frame 36 in the photo1, photo2, photo3, and background layers and insert a keyframe (F6).

   

9. In the Color Effects section of the Properties panel, choose Brightness from the Style menu and drag the Bright value to –30%.

   The selected layers become slightly darker, which adds drama to the bright yellow stars that appear at that moment in the stars layer.

   Note

   You can also apply color effects and filters to individual symbol instances on the Stage, which you’ll learn about later in this book.

   

Testing your movie

To quickly see your animation, choose Control > Play, or simply press the Return/Enter key.

To see how an animation or movie will appear to a viewer, choose the Test Movie button at the upper-right corner of the Animate workspace, or choose Control > Test. You can also press Command+Return/Ctrl+Enter to preview your movie.

1. Choose Control > Test or the Test Movie button at the upper-right corner of the Animate workspace.

   Animate opens and plays the animation in a new panel.

   

   Animate automatically loops your movie in this preview mode.

2. Close the Test Movie panel.

Using Quick Share and Publish

When you are done with your project, export and share it quickly and easily to your favorite social media platforms. Adobe provides a seamless workflow from Animate straight to Twitter, YouTube, video, and animated GIFs.

1. In the upper-right corner of Animate, click Quick Share And Publish, and choose Social Share.

2. Choose Twitter or YouTube as your target platform. In this lesson, we’ll show you how Quick Share works with Twitter.

   

3. The preview window displays the first frame of your project to show how it would appear on Twitter. Add a description. You can keep, edit, or remove the suggested hashtags.

   

   The number above the description indicates the number of characters left for your tweet.

4. Click Share.

5. Adobe Media Encoder automatically opens to convert your project to the compatible media format. If you’re not signed in to Twitter, Animate will ask for authorization to access Twitter to post your exported animation. You will be required to sign in using your Twitter handle and password.

   

   Once authorized, you can post tweets directly from Animate.

   Note

   Keep an eye on the Quick Share and Publish options because Adobe will continue to add more social media channels.

   

6. Navigate to Twitter to check out your tweet and accompanying animation.

   

Stage resizing and content scaling

You’ll create another version of this animated project with different Stage dimensions. Choose File > Save to save the work you’ve done so far.

1. In the Document Settings section of the Properties panel, note that the dimensions of the current Stage are set at 800x600 pixels. Click the More Settings button to open the Document Settings dialog box.

   

2. In the Width and Height boxes, enter new pixel dimensions. Enter 400 for Width and 300 for Height.

   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 proportionally.

3. 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.

4. Click OK.

   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. This means that if your new Stage size is wider than the original, there’ll be extra Stage space to the right. If your new Stage size is taller than the original, there’ll be extra Stage space on the bottom.

5. Choose File > Save As.

6. In the Save dialog box, choose Animate Document (*.fla) from the File Format menu, and name the file 01_workingcopy_resized.fla. Save the file.

   You now have two Animate files, identical in content but with different Stage dimensions. Close this file and reopen 01_workingcopy.fla to continue this lesson.

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.

1. Choose Animate > Preferences > Edit Preferences (macOS) or Edit > Preferences (Windows).

   The Preferences dialog box appears.

2. Select the General category from the left column.

3. Select the Auto-Recovery option, if it’s not already selected, and enter a time (in minutes) for the interval at which Animate creates a backup file.

   Note

   To find out how to keep your copy of Animate up to date and to learn about the many sources of help available to you within Animate, see the Getting Started section at the beginning of this book.

   

4. Click OK.

   If you make changes to your file but do not save it within the Auto-Recovery interval, Animate creates a new file in the same location as your FLA with RECOVER_ added to the beginning of the filename. 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.