Photoshop PSD Import of File

In Import to Stage advanced options, the top area of the dialog box has an option if your (.psd) file has Photoshop layer comps, which you read about in Chapter 4. If the file only has one layer comp, then this area menu is unavailable; if two, then you can select the layer comp from the drop-down menu. Use Blending_effects_animate.psd for this example. Refer to Figure 19-20.

When working with several artboards, the preview layout appears with folders. You have to select artboards from the layers preview area on the left, as you would any other layer, as seen in Figure 19-21.

Whether you have one artboard or two, the settings you choose in Animate will affect which layers you plan to import.

If there are folders or artboards in your file, the up and down double arrows above the preview allow you to expand and collapse all folders at once. Refer to Figure 19-20.

By clicking Select all layers, you can ensure that all layers are imported. If you don’t want to import all layers or folders, uncheck the ones you do not want to include in the import. Refer to Figure 19-22.

For example, you may have created a background in Photoshop that was only for testing how an object appeared on a certain color. You may not plan to use that background as part of the animation, so uncheck it.

Animate gives you two options on how to import a shape layer.

If your (.psd) layer contains editable text, you have slightly different options. Refer to Figure 19-23.

If you want your layer to be a movie clip symbol added to the Library panel, you can check the “Create a movie clip” box (it is already checked if “Editable paths and layer styles” is selected). Then give the movie clip a name and set its registration point. The registration point is useful when objects may spin or move along a motion path. Refer to Figure 19-24.

Like the exporting of a graphic, you can set the quality of the import or publish settings. Compression can be lossy (compression of JPEG format) or lossless (no compression or a GIF or PNG format), and you can set a custom quality for the size. If you are worried the graphic may be too large, click the Calculate Bitmap Size button, which gives the file size. By Shift-clicking two or more layers in the preview, you calculate the file size of these bitmap shapes or layers collectively. You can then decide how these layers are converted and distributed.

The next section in advanced setting deals with how the layers convert to the stage. Refer to Figure 19-25.

When you are done with your settings, click the Import button. Refer to Figure 19-26.

Upon clicking Import, you may discover a warning in the Output panel regarding some effects not being applied. Refer to Figure 19-27.

If these effects do not retain simply, Edit ➤ Undo right away to remove the graphic from the stage and Library panel, and then re-import those layers as bitmaps. Alternatively, you may be able to reapply some settings using Animate, as you will see shortly.

In HTML5 Canvas, you can import as a bitmap to retain the basic blend settings. In ActionScript 3.0 FLA, you may not have to set bitmap for all layers. Either way, the bitmaps (Assets folder) and movie clip symbols appear in the Library panel on the Stage and Timeline panels. Refer to my final file, animate_photo_blend.fla. For the most part, this is a retained the bitmap representation of the blend that cannot be altered. Refer to Figure 19-28.

Illustrator AI Import

Importing an Illustrator (.ai) file to the stage is very similar to importing a Photoshop (.psd) file; however, there are a few key differences. Use the blendmode_stars.ai and blendmoded_stars2.ai files for this example.

Again, in a new HTML5 Canvas file, choose File ➤ Import ➤ Import to Stage. Make sure the settings are in Advanced Options so that you can follow along with me. As with Photoshop import, if you stay in the regular settings, it is assumed that you are editing all layers as a group, and you will not have the preview options, as seen in Figure 19-29.

• Select Illustrator Artboard: If your file has more than one artboard, you can choose the artboard from the drop-down menu that you want to import the objects from. Refer to Figure 19-30.

As with Photoshop PSD import, you can select all layers or chose the layer that you want to alter.

If the layer or sublayer contains text, as with the Photoshop (.psd) import, you can choose whether the text remains editable, is only vector outlines, or is a bitmap graphic. Refer to Figure 19-31.

Like Photoshop, you can set each layer as a movie clip symbol with a name, along with registration points. Refer to Figure 19-32.

However, you cannot alter the quality of the image as you could with the Photoshop (import) because you are working with vectors, and not bitmap shapes.

Like the Photoshop CC import, you can convert the layers to the following.

• Animate layers: Puts each graphic on its own layer. This is good if each item is to move separately in the keyframes; however, be aware that all sublayers import as one layer, so make sure to put each object on its own layer, or only import to the Library panel if you don’t want the sublayers to appear together. Refer to Figure 19-33.

• Single Animate layer: If all the layers are part of one background, then they appear on one layer, and not separately.

• Keyframes: Puts each layer on its own keyframe. This is good for stop-frame animations where one character needs multiple keyframes to create a movement, such as jumping or running.

• Place objects at original position: Ensures that the shapes remain in the same place in relation to the other Illustrator layers as they appeared in Illustrator regardless of the size of the Animate stage.

• Import as a single bitmap image: Ensures that all the layers import as one bitmap. If you don’t want this to happen, leave it unchecked.

• Import unused symbols: Imports the unused symbols.

• Set stage size the same as Illustrator Artboard (# X #): Increases or decreases the size of your Animate stage or canvas to match the size of the Illustrator artboard. If you don’t want your Animate stage to change, leave this box unchecked.

When you are done with your settings, click the Import button, as seen in Figure 19-34.

As with Photoshop, upon clicking Import, you may discover a warning in the Output panel about some effects not being applied. If these effects do not retain, simply Edit ➤ Undo right away to remove the items from the stage and Library panel, and import these layers again as a bitmap. Alternatively, you may be able to reapply some settings using Animate, as you will see shortly.

For HTML5 Canvas animations, when you import your movie clips, I recommend importing the objects with effects as a bitmap; however, be aware that it may come in as low resolution. For ActionScript 3.0 FLA files, you may be able to retain some of the effects and not have to import all layers as bitmaps. Either way, the bitmaps and movie clip symbols appear in the Library panel, as well on the stage and timeline. Refer to Figure 19-36.

In the HTML5 Canvas file, if you find that the resolution is too low upon import, make the shape a bit larger in a new Illustrator file. Illustrator imports at the size that the shape is on its artboard so if it is very small it may be very blurry. By increasing the size of the shape in a new file before importing, you get a better resolution of the effect that you are making into a bitmap. You can always scale the symbol down in Animate later without affecting the bitmaps quality. Refer to the animate_ill_blend.fla file.

Whether you import into an ActionScript 3.0 or HTML5 Canvas FLA file, if your Photoshop or Illustrator files have no effects applied to them when you import, leave them as editable, as this preserves the best quality of that graphic.

Nested Movie Clips

To create these kinds of movie clips, you cannot place one movie clip symbol on top of another for it to work correctly. Refer to my drawing in Figure 19-55.

The outer movie clip is called the parent, and for the following filters to work, rather than leaving it as the default blending of normal, you need to set the parent to layer. Then you need to double-click the “parent” movie clip to enter it. Inside this movie clip, you create another movie clip symbol, which becomes the “child.” It is nested within the “parent” or rests upon the inner shape. Because this setup is based on hierarchy, any modifications made to the parent affects the child. You can apply either a blend of Alpha or Erase to the child movie clip. Since a child rests within the parent, it appears as though the filter is not working correctly. Only until you exit the parent movie clip will the blending appear correct with the child that is nested within. Refer to Figure 19-56.

• Alpha: Applies an alpha mask, making the object invisible although still on stage.

• Erase: Like alpha, removes all base color pixels, including those in the background image. Acts like a mask layer.

For more information on blending modes in animate, visit https://helpx.adobe.com/animate/using/applying-blend-modes.html .

You can apply these blending modes by selecting your movie clip with the Selection tool (V) and choosing the blending mode from the drop-down menu.

Bevel (Action Script 3.0 FLA only)

Applies a highlight to the object that makes it appear to be curved up above the background surface. It is like the bevel and emboss found in Photoshop CC. Refer to Figure 19-64 for settings.

As with the drop shadow, you can adjust the spread using the x and y coordinates, strength, quality, color (now divided into shadow and highlight), angle of bevel, distance of bevel, and knockout. Type is like inner shadow in that the bevel can be inside, outside, or fully on the movie clip.

Gradient Glow (Action Script 3.0 FLA only)

Produces a glow with a gradient color across the surface of the glow. The gradient glow requires one color at the beginning of the gradient with an alpha (transparency) value of 0. You can move the position of the color with the handles, and you can change the color by double-clicking the handle to access the color picker. You can also add more color handles by clicking below the gradient, or drag them off to remove them. Refer to Figure 19-65 for settings.

As with the drop shadow, you can adjust the spread using the x and y coordinates, strength, adjust the quality, angle of glow, distance of bevel and knockout. Type is like inner shadow in that the gradient glow can be inside, outside or full on the movie clip. The gradient replaces the color property.

Gradient Bevel (Action Script 3.0 FLA only)

Makes a movie clip appear to be raised above the background, with a gradient color across the surface of the bevel. The gradient bevel requires one color in the middle of the gradient with an alpha value of 0; however, any gradient can have up to 15 color transitions. Refer to Figure 19-66 for settings.

As with the drop shadow you can adjust the spread using the x and y coordinates, strength, adjust the quality, angle of bevel, distance of bevel and knockout. Type is like inner shadow in that the bevel can be inside, outside or full on the movie clip. The gradient replaces the color property.

Adjust Color

Allows you to finely control the color attributes of the selected movie clip, including contrast, brightness, saturation, and hue; it is very similar to the color effects area you looked at earlier. Refer to Figure 19-67 for settings.

As you would in Photoshop or Illustrator you can apply several filters to a movie clip symbol using the plus (+) icon. You can remove all from the drop-down menu or one by selecting it and using the minus (–) icon. Refer to Figure 19-68.

You can enable or disable all filters from the plus (+) drop-down menu or use the Eye icon to turn them on or off one at a time.

The Widget icon lets you copy selected or all filters. You can paste, reset, or save the filters as a preset and edit the preset. Refer to Figure 19-69.