Adobe Edge Animate CC For Dummies (2013)

---

Creating a poster is best done when you finish creating your animation. Follow these steps:

1. Find a still shot that represents the point you want to make with your animation.

This point is most likely at the very beginning of the animation or the very end.

2. Place your Playhead at the point you want to capture.

This allows you to preview your poster.

3. Click the camera icon as shown in Figure 14-1.

Figure 14-1: Click the camera icon to open the Capture a Poster Image box.

A new box appears with a couple options, as shown in Figure 14-2.

4. Capture your poster image:

• You can capture a new poster image at the current Playhead position by clicking Capture.

• If you already have a poster image, but want to replace it with a new one, you can click Refresh.

Doing so overwrites any previously saved poster files.

Edge Animate saves the poster as a .png file in your images folder.

Figure 14-2: Click Capture to Create the poster or click Refresh to overwrite an old poster.

In the bottom-right corner of the Capture a Poster Image box, there is a Playhead icon. You can click that icon to move the Playhead to the position where the previous poster was taken. For example, if the Playhead was at the beginning of the Timeline for the last poster you created and you want to take the new poster image at that same location but the Playhead is now at a different point in the Timeline, simply click that Playhead icon to create a new poster at the same location as the last time you created a poster.

After you click Capture, a new box appears, as shown in Figure 14-3.

Figure 14-3: After creating a poster, you put it to use through Publish Settings or edit the down-level Stage.

From here, you can open the Publish Settings, which is described later in this chapter in the section, Using the Publishing Settings and Publish. You can also choose to Edit Down-Level Stage, which I describe in the next section.

Using the down-level Stage

The down-level Stage is put in use when your audience uses a browser that doesn’t fully comply with the advanced animation features of Adobe Edge Animate CC. Given the current worldwide usage of Internet Explorer, especially in the United States, using a down-level Stage is in the best interest of all web content designers and animators.

Whether you click Edit from the Down-level Stage section of the Properties panel (Figure 14-4) or you reach the Down-level Stage section while creating a poster, the settings are the same.

Figure 14-4: Click Edit to open the Down-level Stage properties.

If you click the Edit button for the down-level Stage but don’t have a poster created, Edge Animate prompts you to create a poster. To get back to the Stage, simply click Stage in the breadcrumb navigation (as indicated in Figure 14-5).

Figure 14-5: Click Stage to get back to your composition if you don’t have a poster created.

Once you do have a poster created and you get to the Down-level Stage properties, you can set several properties (as shown in Figure 14-6):

Text: You can use the Text tool to add text to the poster. Simply select the Text tool and then create a text box on the Stage.

Position and Size: You can set where you want the poster image to appear within the Stage. You can use either X and Y coordinates, or simply use the auto W and H settings, per the default. Using Auto for width and height places your poster in its original dimensions. You can even toggle the px switch to use percentages instead of fixed coordinates.

Image: From this section, you can swap out the current poster image for another image. Simply click the double-arrow icon to select another image from your library assets.

Link: You can turn your poster image into a clickable link. Simply insert the URL you want members of your audience to visit when they click the image. You can also click the drop-down arrow to choose whether the new URL opens in the current browser window, a new window, _top, or _parent.

Figure 14-6: Configure the Down-level Stage properties.

Using the Preloader

Adobe Edge Animate CC has a preloader. The preloader defines what appears before anything else. For instances when your animation may take a long time to load, it’s a good idea to use something like an hourglass timer. By using a timer, you alert your audience that the animation is loading and that they will need to wait. You can add a timer through the Preloader section on the Properties panel (shown in Figure 14-7).

In addition to choosing preloader art, you can also choose when JavaScript and images load, either as soon as they can or only when needed. I explain this further in the following sections.

Figure 14-7: Use the Preloader option for animations that take time to load.

Choosing either the Immediate or Polite option

Two different buttons appear in the Preloader properties. The first button (Figure 14-8) enables you to choose either:

The Immediate option loads all JavaScript, graphics, fonts, and everything else all at once when the audience opens your composition.

The Polite option loads the JavaScript (js) as page-load events fire, such as an action (say, when someone taps a button).

Figure 14-8: The Polite option loads js as page-load events fire.

Choosing the preloader art

Edge Animate provides a few different pieces of artwork that you can use as an animated timer. If your animation takes a long time to load onto the screen, your audience may start to think that it’s broken or that they landed on the wrong URL. To prevent your audience from leaving, show some sort of hourglass timer that tells your audience to pull up a chair and stick around for a while. To get started, click the Edit button, as shown in Figure 14-9.

Figure 14-9: Click Edit to open the preloader’s art options.

When you click the Edit button, you can work on the preloader from the Stage, this is similar to when you edit a Symbol in that it is separate and independent from the main Timeline. For more information on Symbols, see Chapter 12.

The settings in the Properties panel update while you edit the preloader. You can now Insert Preloader Clip-Art, as shown in Figure 14-10.

Figure 14-10: Open the menu with preloader art.

Choosing the preloader art

From the preloader art menu, you can choose from several different animation hourglass-type icons, as shown in Figure 14-11. After you select an animated piece of art, click Insert near the bottom of the window.

Each type of preloader art has different dimensions and file sizes. It’s a good idea to choose art that fits within the Stage of your composition.

If you don’t like any of these ideas, Edge Animate provides you with the option of swapping out the art, which I describe next.

Figure 14-11: Choose an animated preloader clip and then click Insert.

Adding preloader art, just like anything else, increases file size. You probably don’t want to add a large preloader to a composition that is already large. You can see how large the preloader is (size affects page-loading speeds) when you open the drop-down menu to select and insert the preloader gif (Figure 14-12).

Figure 14-12: Edge Animate provides a visual graph depicting preloader art size.

Editing the preloader clip art

After you insert one of the clip art options, the Properties panel displays new settings, as shown in Figure 14-13. You can edit the following properties:

Position the art by X and Y axis points. You can choose between pixel or percent.

Edit the width and height. You can choose between pixel or percent.

Swap out the current image. This is also how you can use custom preloader art, which I cover in more detail in the next section.

Add a link. You do so by adding a URL in the box and set the target window from the drop-down arrow.

Figure 14-13: Properties for preloader art.

You can also edit the preloader art directly from the Stage, as shown in Figure 14-14.

Figure 14-14: Edit the preloader art from the Stage.

Using custom preloader art

If you don’t like any of the preloader clip art that Edge Animate provides, you can use your own art instead. After you select one of the preloader clip art options and then close that menu, you can swap out the preloader image from the Properties panel. When you click the Swap Image icon (as indicated in Figure 14-15), you can choose from images in your Library Assets. This enables you to choose your own custom art.

Figure 14-15: Swap out the preloader clip art with your own art from Library Assets.

Using the Publishing Settings and Publish

The rest of this chapter covers the publishing settings. This includes the web options and publishing your composition for use with other Adobe tools and iBooks. To open the publishing settings, from the main menu, click File→Publish Settings, as shown in Figure 14-16.

Figure 14-16: Open the Publish Settings from the File menu.

Using the web options

After you click Publish Settings on the File menu, the Publish Settings box appears. From within that box, you see three options on the left side. When you select the Web option, more web settings appear on the right (see Figure 14-17).

Figure 14-17: Use the Web Publish Settings for online animations.

The advantage to using the Web Publish Settings is that it allows Edge Animate to perform different types of optimization and minification to the files. When you click the Publish button, Edge Animate generates a lighter file output, which means the file is significantly reduced as compared to simply saving the composition.

The Web Publish Settings include

Target Directory: Click the folder icon to choose where you want the web files saved.

Use Google Chrome Frames: Check this box to create a Google Chrome Frame for when your audience is using Internet Explorer 8 or earlier. If your audience doesn’t have Google Chrome Frame installed, you can prompt them to install it.

There are three options on how to display the prompt, as shown in Figure 14-18. A Google Chrome Frame provides the means for members of your audience to view your animation when they use IE 8 or earlier, versions that don’t properly support Edge Animate.

Host runtime files on Adobe CDN: If you choose this option, you benefit from faster downloads and easier-to-manage output with runtime hosting provided by Adobe via Akamai servers. Uncheck this option if your content needs to run offline.

Publish Content as Static HTML: Creates an HTML file with additional div tags. This provides more options for working with the HTML file, such as adding it to an existing web page and helps with SEO.

Edge Animate generates the following code when you publish your project as a static HTML page. In addition to a div tag for the Stage, tags for the other elements appear:

<body style="margin:0;padding:0;">

<div id="Stage" class="EDGE-10260726">

<div id="Stage_Rectangle" class="edgeLoad-EDGE-10260726" title="Use as Alt Tag"></div>

<div id="Stage_Text" class="edgeLoad-EDGE-10260726 Text Box">Text</div>

<img id="Stage_swirl" class="edgeLoad-EDGE-10260726 swirl image" alt="Alt Tag" title="Accessibility"

src="images/green%20swirl.jpg"></img>

</div>

</body>

You can copy and paste the code within the body tags to insert your animation into an existing web page. Just remember to upload the associated JavaScript files and the images as well. See Chapter 15 for additional information on how to embed your animation into another HTML file.

Figure 14-18: Choose the type of prompt, or No Prompt, for your audience to install Google Chrome Frame.

Using the Edge Animate Deployment Package

Use the Edge Animate Deployment Package if you're publishing your composition for use with other Adobe software tools such as InDesign, Muse, and others. When you select the Edge Animate Deployment Package from the Publish Settings, you can choose different settings from the right, as shown in Figure 14-19. When you select these options and then click Publish, Edge Animate creates an .oam file for use with other Adobe software.

Figure 14-19: Choose where to save the file, what to name it, and the poster image for .oam files.

The settings for the Edge Animate Deployment Package include

Target Directory: Click the folder icon to choose where to save the .oam file.

Published Name: Name the .oam file in this box.

Poster Image: You can swap out the poster image by clicking the double arrow icon.

When you finish with the settings, click Save to exit the window, or click Publish to generate the files.

Publishing as iBooks / OSX

Use the iBooks / OS X setting if you're publishing your composition for use with Apple's iBooks Author. When you select the iBooks / OS X from the Publish Settings, you can choose different settings from the right, as shown in Figure 14-20. When you select these options and then click Publish, Edge Animate creates an .wdgt file for use with Apple's software.

Figure 14-20: Choose where to save the file, what to name it, and the poster image for .wdgt files.

The settings for the iBooks / OS X include

Target Directory: Click the folder icon to choose where to save the .wdgt file.

Published Name: Name the .wdgt file in this box.

Poster Image: You can swap out the poster image by clicking the double arrow icon.

When you finish with the settings, click Save to exit the window, or click Publish to generate the files.

For Edge Animate to generate these special files, you must either click Publish on the File menu (Figure 14-15) or click Publish from the Publish Setting box. Clicking Save or Save As doesn’t generate the special files.