10. Publishing

Animate can publish content to various runtime environments, and your desired runtime environment determines the Animate document that you must choose when you first begin a project.

In this lesson, you’ll explore the publishing options for the document types in greater detail. You’ll work through an interactive HTML5 Canvas animation, and you’ll learn to create desktop applications.

If you want to target web browsers without requiring the Flash Player, then begin your Animate project with an HTML5 Canvas or WebGL document. To integrate interactivity into an HTML5 Canvas document, you use JavaScript rather than ActionScript. You can add JavaScript directly in the Actions panel or use HTML5 Canvas snippets.

Adobe AIR is another runtime environment. AIR (Adobe Integrated Runtime) runs content directly from your desktop, without the need for a browser. When you publish your content for AIR, you can make it available as an installer that creates a stand-alone application, or you can build the application with the runtime already installed, known as “captive runtime.”

You can also publish AIR applications as mobile apps that can be installed and run on Android devices and iOS devices such as the Apple iPhone or iPad, whose browsers do not support the Flash Player.

You can specify different options for publishing a movie, including whether to detect the version of Flash Player installed on the viewer’s computer.

1. Open the 10Start_banner.fla file, a simple animated banner for the fictional city of Meridien.

2. Choose File > Publish Settings. Alternatively, make sure no object is selected on the Stage so the Properties panel displays the Document properties. Then in the Publish section, under Profile click Publish Settings.

The Publish Settings dialog box opens, showing the general settings at the top, the formats on the left, and additional options for selected formats on the right.

The Animate (.swf) and HTML Wrapper formats should already be selected.

3. At the top of the Publish Settings dialog box, choose a version of Flash Player from the Target menu.

Some Animate CC features will not play as expected if you don’t choose the latest version of the Flash Player. Choose an earlier version of the Flash Player only if you’re targeting a specific audience that does not have the latest version.

4. Note that the ActionScript settings are for version 3.0, which is the latest and only version supported by this release of Animate.

5. Select the Flash (.swf) format on the left side of the dialog box.

The options for the SWF file appear on the right. Expand the Advanced section to see more options, if it isn’t already expanded.

6. If you wish, you can modify the output filename and location by entering a new filename. For this lesson, leave Output Name set to 10Start_banner.

7. If you’ve included bitmaps in your movie, you can set a global quality setting for JPEG compression levels. Enter a value from 0 (lowest quality) to 100 (highest quality). The value of 80 is the default, which you can leave as is for this lesson.

8. If you’ve included sound, click the Audio Stream or Audio Event value to modify the quality of the audio compression.

The higher the bit rate, the better the sound quality will be. As you’ll recall, in Lesson 9 you explored the settings for audio quality. In this interactive banner, there is no sound and thus no need to change the settings.

9. Make sure Compress Movie is selected to reduce file size and download times.

Deflate is the default option. Choose LZMA for better SWF compression. You’ll see the biggest improvements in file-size compression if you’ve built your project with more ActionScript code and vector graphics.

10. Select the HTML Wrapper format on the left side of the dialog box.

11. Make sure that Flash Only is chosen from the Template menu.

• EaselJS is a library that provides a display list that allows you to work with objects on the canvas in the browser.

• TweenJS is a library that provides the animation features.

• SoundJS is a library that provides functionality to play audio in the browser.

• PreloadJS is a library that manages and coordinates the loading of content.

With CreateJS, Animate CC generates all the necessary JavaScript code to represent your images, graphics, symbols, animations, and sounds on the Stage. Animate also outputs dependent assets, such as images and sounds. You can easily configure how those image and sound assets are organized in the publish settings.

You can also include your own simple JavaScript commands directly in the Actions panel to control your animation. Those JavaScript commands get exported in the JavaScript files.

Learn more about the CreateJS JavaScript libraries at www.createJS.com.

Classic tweens, an older way of creating animation, are retained as a runtime tween, which saves file size and gives you the opportunity to control the animation dynamically via JavaScript. In this section, you’ll learn to create classic tweens to complete a sample bird animation that you’ll export to HTML5.

Classic tweening is an older approach to animation, but it is very similar to motion tweening. Like motion tweens, classic tweens use symbol instances. Changes to the symbol instances between two keyframes on the Timeline are interpolated to create the animation. You can change an instance’s position, rotation, scale, transformation, color effect, or even the filter effect if the symbol is a Movie Clip.

The key differences between classic tweens and motion tweens are as follows:

• Classic tweens require a separate Motion Guide layer to animate along a path.

• Classic tweens are not supported in the Motion Editor.

• Classic tweens don’t support 3D rotations or translations.

• Classic tweens are not separated on their own tween layer. However, classic and motion tweens share the same restriction that no other object can exist in the same layer as the tween.

• Classic tweens are Timeline-based, and not object-based, meaning you add, remove, or swap the tween or the instance on the Timeline and not the Stage.

Learning to create animation with classic tweens will help you maintain leaner animation sizes when you publish to HTML5 Canvas.

1. On the main Timeline, insert a new layer, and name it landscape. Drag the new layer below the bird layer but above the sky layer.

2. Choose Insert > New Symbol (Ctrl+F8/Command+F8).

The Create New Symbol dialog box appears.

3. Enter scrolling landscape for the name, and choose Movie Clip from the Type menu.

4. Click OK.

The new movie clip symbol named scrolling landscape opens in symbol-editing mode. The Stage is blank, indicating that the movie clip symbol is currently empty.

5. Drag the graphic symbol called mountains from the Library panel to the Stage and position it so its lower-left corner aligns with the registration point of the movie clip symbol. In the Properties panel, in the Position And Size section, the position coordinates should read X=0, Y=−155.55.

6. Add frames (Insert > Timeline > Frame, or F5) up to frame 30.

1. Select frame 30 in Layer 1 of your movie clip symbol, and insert a new keyframe (Insert > Timeline > Keyframe, or F6).

A new keyframe containing a copy of the mountains instance is inserted at frame 30.

2. At frame 30, move the instance of the mountain graphic symbol to the left so the midpoint of the mountains image is centered over the registration point. The Properties panel should show X=−800.

The left and right edges of the graphic match up, so when the animation plays as a loop, the effect is a seamless scrolling mountain range.

1. Right-click any frame between the first and second keyframe and choose Create Classic Tween.

Animate creates a tween between the first and second keyframe, indicated by an arrow extending along a blue background.

2. Press Enter/Return on your keyboard, or press the Play button under the Timeline to preview the animation.

A smooth animation plays, showing the mountains moving from right to left.

3. Select Loop at the bottom of the Timeline and choose Marker Range All from the Modify Markers menu to play back the Timeline tween in a loop.

4. To add a little more complexity to the animation, you’ll add a second layer of mountains. Insert a new layer, and drag it under the existing layer.

5. Drag another instance of the mountains symbol to the Stage, and in the Properties panel, in the Position And Size section, make sure that the Lock Width And Height icon is broken and change the width (W) to 2000 pixels and the height (H) to 200 pixels. Position the lower-left corner of the instance at the registration point of the symbol so the Properties panel shows X=0, Y=−200.

You’ll have two mountain ranges, with the taller and wider one behind the first one.

6. Insert a new keyframe (Insert > Timeline > Keyframe, or F6) at frame 30 of the bottom layer.

7. In the end keyframe at frame 30, move the mountains instance to x=−1000.

8. Right-click any frame between the first and second keyframe, and choose Create Classic Tween.

9. Press Return/Enter on your keyboard, or press the Play button under the Timeline to preview the animation. Select the Loop option to play the tween as a loop.

The second mountain instance moves from right to left, but it’s slightly offset from the one in the foreground, creating a rich layered effect. Zoom in to the Stage so the edges of the graphics aren’t visible; this will give you a better idea of the seamless scrolling effect.

10. Exit symbol-editing mode to return to the main Timeline.

1. Drag the movie clip symbol named scrolling landscape from the Library panel to the Stage and position the instance so its left and bottom edges align with the left and bottom edges of the Stage. In the Properties panel, in the Position And Size section, the values should read X=0, Y=400.

2. Save your finished work.

Your final project contains two movie clip instances, each containing multiple classic tweens.

1. Choose File > Publish.

Animate exports the animation as HTML and JavaScript files and saves them in the same folder as your FLA file (according to the default Publish Settings options).

2. Double-click the HTML file, named 10_workingcopy_build.html.

Your default browser opens and plays the animation.

1. Click Publish Settings in the Properties panel, or choose File > Publish Settings to open the Publish Settings dialog box.

2. On the Basic tab, do one or more of the following:

Deselect Loop Timeline if you want the Timeline to play only once.

Click the folder icon next to the Output Name field to save your published files to a different folder or under a different filename.

Change the paths next to the Export Asset Options if you want to save your assets to a different folder. The Images checkbox must be selected if your file contains images, and Sounds must be selected if your file contains sounds. For example, if you replaced the gradient fill for a bitmap image in the sky layer of your 10_workingcopy_build.fla file, upon export Animate creates a folder named images that contains the bitmap image.

Select Center Stage to center-align your Animate project in the browser window. You can use the menu next to the option to choose to center your movie Horizontally, Vertically, or Both.

Select Make Responsive to have your Animate project respond to changes in the browser window dimensions, and use the menu next to the option to choose whether the project responds to changes in window height, width, or both. The Scale To Fill Visible Area option determines how your project fills the available space in the browser window.

Select Include Preloader.

3. Select the Advanced tab:

Select Include JavaScript In HTML if you want to publish a single file that includes all the necessary JavaScript and HTML code for your file. If you choose this option, Animate will overwrite the exported file each time you publish.

Deselect the Overwrite HTML File On Publish if you want to preserve the HTML file and simply change the JavaScript code that gets generated that drives your animations.

The Hosted Libraries option tells your published file where to find the CreateJS JavaScript libraries. When the option is selected, your published file points to a CDN (Content Distribution Network) at http://code.createjs.com to download the libraries. When the Hosted Libraries option is deselected, Animate includes the CreateJS JavaScript libraries as separate documents that must accompany your project files.

Leave all the other Advanced JavaScript Options at their default settings.

4. Select the Spritesheet tab:

Select Combine Image Assets Into Spritesheets if you want to create a single image file for all the bitmaps that you’ve imported into your library. An HTML5 web page can load a single image file and retrieve specific portions of the image quicker than multiple smaller images.

Select a Format option for the exported image and set the quality, size, and background color for the image. If you choose a size that’s too small to fit the images in your library, Animate will publish multiple sprite sheets as needed.

5. Click OK to save all your settings.

1. Choose Window > Code Snippets.

The Code Snippets panel opens.

2. Click the arrow in front of the HTML5 Canvas folder.

The folder expands to show the code snippets organized in folders according to their function.

3. Open the Event Handlers folder.

4. Select the instance of the bird movie clip on the Stage; then double-click Mouse Click Event in the Event Handlers folder.

Animate warns you that your movie clip instance requires a name and offers to provide a name for you.

5. Click OK.

Animate automatically names your movie clip instance and adds JavaScript code in the Actions panel. The code is extensively commented to explain how the code works.

A new layer, named Actions, is added to the Timeline with a tiny letter “a” in the first keyframe, indicating the location of the new code on the Timeline.

The JavaScript code appears very similar to the following:

Click here to view code image

this.movieClip_2.addEventListener(“click”, fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler ()
{
 // Start your custom code
 // This example code displays the words “Mouse clicked” in the Output panel.
 alert(“Mouse clicked”);
 // End your custom code
}

6. The JavaScript code adds an event listener for a mouse click on the instance of the bird. When a click happens, the alert() JavaScript command is triggered, which displays a simple message in a native alert dialog box in the browser.

7. Choose Control > Test to test your newly inserted interactivity.

Animate exports HTML5 and JavaScript and displays the animation in a browser.

8. Click the flying bird in the browser.

A browser dialog box appears with the words “Mouse clicked.”

9. Click OK to dismiss the dialog box, and close the browser window.

1. Select the bird movie clip on the Stage.

2. In the HTML5 Canvas > Actions folder of the Code Snippets panel, double-click the Stop A Movie Clip snippet.

The Actions panel shows that JavaScript code has been added to the movie. The new code stops the Timeline of the bird movie clip instance.

However, the code is triggered immediately. You want the animation of the bird to stop only when the user clicks the bird.

3. Select the newly inserted code, and choose Edit > Cut (Ctrl+X/Command+X).

4. Place your cursor inside the curly braces of your function, and choose Edit > Paste (Ctrl+V/Command+V).

With the pasted code, the command to stop the Timeline of the bird animation happens only after a mouse click is detected.

5. Choose Control > Test to test interactivity.

Animate exports HTML5 and JavaScript and displays the animation in a browser.

6. Click the flying bird in the browser.

The bird stops flapping its wings, and a browser dialog box appears with the words “Mouse clicked.” The scrolling mountains in the background continue to move, however.

There are two approaches to creating an HTML5 Canvas document with Animate assets. First, you can simply create a new HTML5 Canvas document and copy and paste the layers from one file to your new file. Second, you can open your old Flash file (an ActionScript 3.0 document) and choose Commands > Convert To Other Document Formats. Animate makes the conversion, and you can save your new file as an HTML5 Canvas document.

1. Open the 10Start_convert.fla file in the 10Start folder.

The project is the animated promotion of the fictional movie Double Identity from a previous lesson. The ActionScript 3.0 document contains bitmaps and motion tweens with changes in position, scale, color effects, 3D effects, and filters.

The file targets the Flash Player. The frame rate is set at 30 frames per second, with a black Stage fixed at a generous 1280 pixels in width and 787 pixels in height.

2. Choose Commands > Convert To Other Document Formats.

In the dialog box that appears, choose HTML5 Canvas from the Convert Your Document To menu and enter the new filename as 10_workingcopy_convert.fla.

3. Click OK.

Animate duplicates your content into a new HTML5 Canvas document. The new HTML5 Canvas document contains your converted content.

4. View the warnings in the Output panel.

The Output panel displays the following warning:

* 3D cannot be imported in HTML5 Canvas document.

The HTML5 Canvas document does not support either the 3D Rotation or the 3D Translation tool, so the tween does not display. Keep an eye out for the messages in the Output panel to make sure you understand how Animate handles the transition of your content from Flash Player to HTML5, and what features are unsuccessfully ported over. Often, you’ll have to do additional edits to your animation after each conversion.

5. Choose Control > Test to test the converted content.

Animate exports HTML5 and JavaScript and displays the animation in a browser. The converted animation plays, showing all the motion tweens, including the nested animations of the idling cars. The 3D animation of the title, which is unsupported, appears at the end without any animated effects.

The Output panel displays additional warnings regarding features included in the animation.

1. Examine the folder on your desktop where you saved your Animate file, 10_workingcopy_convert.fla.

Animate has created an additional folder named images. Inside the images folder are all the bitmap assets for the animation saved as a single PNG image. The JavaScript code in your exported documents dynamically loads just the images that it needs to display from the single PNG image, called a sprite sheet.

2. Return to the Animate CC application.

3. Choose File > Publish Settings.

The Publish Settings dialog box appears. On the Basic tab, the Export Image Assets option lets you set the path and name of the folder that contains all your bitmap images.

If Export Image Assets is deselected, Animate will still export and play an animation, but without any images.

Close the Animate file. Next, you’ll learn about publishing an application to play on a computer desktop.

You can output your movie as an AIR file, which installs an application on the user’s desktop. Adobe AIR is a more robust runtime environment that supports a broader range of technologies.

Viewers must download the free Adobe AIR runtime from Adobe’s website at http://get.adobe.com/air/. Alternately, you can output an AIR project with the Captive Runtime option, which includes the AIR runtime so your audience doesn’t need to download anything additional.

1. Open 10Start_restaurantguide.fla.

This is the same interactive restaurant guide that you created in a previous lesson, with a few modifications to the background image.

2. In the Properties panel, in the Publish section, note that AIR 23.0 For Desktop is chosen from the Target menu.

3. Click the Edit Application Settings button (wrench icon) next to the Target menu.

The AIR Settings dialog box appears.

4. Examine the settings on the General tab.

The Output File field shows the filename of the published AIR installer as 10Start_restaurantguide.air. The Output As options provide three ways to create an AIR application. The first choice, AIR Package, should be selected; here is a description of what each option does:

• AIR Package creates a platform-independent AIR installer.

• Windows Installer (Windows)/Mac Installer (Mac) creates a platform-specific AIR installer.

• Application With Runtime Embedded creates an application without an installer or the need for the AIR runtime to be installed on the end user’s desktop.

5. In the App Name/Name field, enter Meridien Restaurant Guide.

This will be the name of your published application.

6. From the Window Style menu, choose Custom Chrome (Transparent).

Custom Chrome (Transparent) creates an application without any interface or frame elements (known as chrome), and with a transparent background.

7. Click the Signature tab at the top of the AIR Settings dialog box.

Creating an AIR application requires a certificate so that users can identify and trust the developer of the Animate content. For this lesson, you won’t need an official certificate, so you can create your own self-signed certificate.

8. Click the Create/New button next to Certificate.

9. Enter your information in the empty fields. You can use Meridien Press for Publisher Name, Digital for Organization Unit, and Interactive for Organization Name. Enter your own password in both password fields, and then enter meridienpress.p12 in the Save As field. Click the Folder/Browse button to save it in a folder of your choice. Click OK.

Animate creates a self-signed certificate (.p12) file on your computer.

Animate automatically fills out the path to your .p12 file in the Certificate field. Make sure that the Password field is filled (the password must match the one you used to create the certificate), and that Remember Password For This Session and Timestamp are selected.

10. Now click the Icons tab at the top of the AIR Settings dialog box.

11. Select icon 128x128, and click the folder icon.

12. Navigate to the AppIconsForPublish folder inside the 10Start folder, select the restaurantguide.png file provided for you, and click Open.

The image in the restaurantguide.png file will be the application icon on the desktop.

13. Click the Advanced tab at the top of the AIR Settings dialog box.

14. Under Initial Window Settings, enter 0 for the X field and 50 for the Y field.

When the application launches, it will appear flush to the left side of the screen and 50 pixels from the top.

15. Click Publish and then click OK.

Animate creates an AIR installer (.air).

1. Double-click the AIR installer that you just created, 10Start_restaurantguide.air.

The Adobe AIR Application Installer opens and asks to install the application. Since you used a self-signed certificate to create the AIR installer, Adobe warns of a potential security risk due to an unknown and untrusted developer. (Since you can trust yourself, you’re safe to proceed.)

2. Click Install, and then click Continue to proceed with the installation at the default settings.

The application called Meridien Restaurant Guide is installed on your computer and automatically opens.

Notice that the application is positioned at the far left edge of your desktop, 50 pixels (between one-quarter and one-half inch, depending on the resolution of your display) down from the top edge, as you specified in the AIR Settings dialog box. Note, too, that the Stage is transparent so your graphic elements float over the desktop, much like the appearance of other applications.

3. Exit/Quit the application by pressing Alt+F4/Command+Q.

You can publish either a Macintosh or Windows projector from an ActionScript 3.0 or AIR document. However, unlike when you’re creating an AIR application, with a projector you don’t have publishing options such as choosing thumbnails for the app icon, or specifying a transparent background or initial position when the app is launched.

1. Open 10Start_restaurantguide.fla.

2. Choose Commands > Export As Projector.

The Publish Settings dialog box opens.

3. Under Other Formats in the left column, select Mac Projector and/or Win Projector. Windows projectors have the file extension .exe and Mac projectors have the file extension .app.

4. Specify the filename and location where you want Animate to save the projector. Each projector (Mac and Windows) needs a unique filename, so highlight each option to enter it.

5. Click Publish.

Animate creates the selected projector or projectors in the output location, with a filename that matches the Animate filename. Click OK.

6. Double-click the projector file.

The restaurant guide opens as a separate application on your desktop. Compare your projector application with your AIR application.

• You can use the mobile device simulator provided with Animate, the AIR Debug Launcher, to test mobile interactions. The SimController that accompanies the AIR Debug Launcher emulates specific interactions such as tilting the device (using the accelerometer), touch gestures such as swiping and pinching, or even using the geolocation functions.

• For iOS devices, Animate can publish an AIR app to test in the native iOS Simulator, which emulates the mobile app experience on your Mac OS desktop.

• Connect a mobile device to your computer with a USB cable and Animate can publish an AIR app directly to your mobile device.

1. Open 10Start_mobileapp.fla.

The project is a simple application with four keyframes that announces an imaginary sports challenge set in our familiar city of Meridien.

The project already contains ActionScript that enables the viewer to swipe the Stage left or right to go to the next or previous frames.

Examine the code in the Actions panel. The code was added from the Code Snippets panel, which includes dozens of code snippets for interactivity on mobile devices.

2. In the Properties panel, notice that the target is set for AIR 23.0 for Android.

3. Choose Control > Test Movie > In AIR Debug Launcher (Mobile), which should already be checked.

The project publishes to a new window. In addition, the SimController application launches, which provides options for interacting with the Animate content.

4. In the Simulator panel, click Touch And Gesture to expand that section.

5. Select Touch Layer.

The simulator overlays a transparent gray box on the Animate content to simulate the touch surface of the mobile device.

6. Choose Gesture > Swipe.

The simulator is now enabled to emulate a swipe interaction. The instructions at the bottom of the panel detail how you can create the interaction with just your mouse cursor.

7. Press on the touch layer over your Animate content, drag to the left, and then let go of your mouse button.

The yellow dot represents the contact point on the touch layer of the mobile device.

The project recognizes the swipe interaction, and the second keyframe appears.

8. Swipe left and right.

Animate advances ahead one frame, or moves back one frame.

9. Close the window.

Although it’s beyond the scope of this lesson to present the steps in detail, you’ll see the required certificates, assets, and configurations to properly publish and distribute an app through the iTunes store.

1. In Animate, choose File > New, select AIR for iOS for Type, and click OK.

Animate creates a new Animate file, configured for iOS. The Stage size is set at 640 × 960, and the target is set to AIR 23.0 for iOS.

2. Click the wrench icon next to the Target menu.

The AIR For iOS Settings dialog box appears.

3. Click the General tab.

The General tab contains information about the output files and general settings. The actual published file has the extension .ipa. You can choose different aspect ratios (landscape or portrait), and target specific devices (iPhone and/or iPad) and resolutions. The iOS Simulator SDK field is the path to the iOS Simulator file used for testing (Control > Test Movie > On iOS Simulator). The Included Files list contains the two required files (a SWF and an XML file), but you can add additional dependent media files if required for your project. For iOS apps, you can also include a PNG file with a specific filename as the default launch image—for example, [email protected]—that appears as soon as an app loads.

4. Click the Deployment tab.

The Deployment tab contains information for testing and distribution. The Certificate and Provisioning Profile fields specify the names of required documents that you create as a certified Apple Developer. They certify you as a known and trusted developer so Apple and your potential customers can purchase and download your app with confidence.

The iOS Deployment Type menu lists the various ways you may publish your app, such as testing on a connected USB device, testing on a variety of devices (ad hoc), or for final distribution to the iTunes store. Each phase of development requires different certificates and a new round of publishing.

5. Click the Icons tab.

The Icons tab lists the dimensions available for the icons that will identify your app on each mobile device. You must provide icons in a range of resolutions depending on the device you target Select a dimension and click the folder icon to navigate to the graphics file to use for each icon.

6. Click the Languages tab.

The Languages tab lists the different languages available for your app to support. Select the check box in the Enable column next to a language to support it in your app.

But there’s always more to learn. Continue practicing your Animate skills by creating your own animation or interactive site. Get inspired by seeking out animation and multimedia projects on the web and exploring apps on mobile devices. Expand your Animate knowledge by exploring the Adobe Animate Help resources and other fine Adobe Press publications.

2. What files do you need to upload to a server to ensure your final Animate movie plays in the Flash Player in web browsers?

3. How can you tell which version of Flash Player a viewer has installed?

4. What is CreateJS?

5. Why is it recommended that animations built in HTML5 Canvas use classic tweens?

6. How do you incorporate interactivity in an HTML5 Canvas document?

7. What is the difference between the way ActionScript and CreateJS JavaScript handle frame numbers on the Animate Timeline?

8. What are the various ways you can test a Animate file for a mobile device?

9. What is a code-signing certificate, and why do you need one for an AIR application?

2. To ensure that your movie plays as expected in web browsers, upload the Animate SWF file and the HTML document that tells the browser how to display the SWF file. You also need to upload the swfobject.js file, if one was published, and any files your SWF file references, such as video or other SWF files; be sure that they are in the same relative location (usually the same folder as the final SWF file) as they were on your hard drive.

3. Select Detect Animate Version in the HTML tab in the Publish Settings dialog box to automatically detect the version of Flash Player on a viewer’s computer.

4. CreateJS is a suite of open source JavaScript libraries: EaselJS, TweenJS, SoundJS, and PreloadJS. When you publish or test an HTML5 Canvas document, Animate uses CreateJS to generate all the necessary JavaScript code to represent your images, graphics, symbols, animations, and sounds on the Stage. It also outputs dependent assets, such as images and sounds.

5. Although an HTML5 Canvas document supports all motion tweens and shape tweens, they are exported as frame-by-frame animations, and can increase the file size of your exported JavaScript code. Use classic tweens, which are retained as runtime tweens that conserve file size and allow you to control the animation dynamically via JavaScript.

6. Insert JavaScript on a Animate Timeline by writing code directly into the Actions panel. If you’re new to JavaScript, you can use the HTML5 Canvas Code Snippets panel, which provides JavaScript snippets for common interactions, such as mouse clicks and Timeline control.

7. In the JavaScript for CreateJS, frame numbers begin at 0. In Animate, frame numbers begin at 1. For this reason, frame labels should be used so you can avoid references to frame numbers.

8. You can test your Animate project for a mobile device by testing it in the Air Debug Launcher (Control > Test Movie > In AIR Debug Launcher [Mobile]). The accompanying SimController allows you to simulate various mobile interactions, such as pinches and swipes. You can also test your Animate project by publishing it directly to a connected USB device (Android or iOS). Lastly, you can test an iOS app in the native iOS Simulator (Control > Test Movie > On iOS Simulator).

9. A code-signing certificate is a certified document that acts as your digital signature. You purchase one from a certification authority. It provides a way for your audience to authenticate your identity so they can confidently download and install desktop AIR applications, or AIR apps for Android or iOS.