GIF

Using this dialog box only gives you one frame exported as a static GIF image; if you want to export an animated GIF, then look at Option 5: Export Animated GIF, which brings up specific options for this type of file format. For now, let’s review the current settings in the Export Image dialog box. Refer to Figure 22-5.

Most settings in the Preset area are the same as Photoshop CC and Illustrator CC’s Save for Web (Legacy), so refer to Chapters 4 and 12 for a more detailed explanation of items such as lossy and dither. You can set image size and anti-aliasing to None, Art Optimized, or Text Optimized.

Clip To Stage sets the clipping boundary to the stage rather than the smallest enclosing box or clipping box.

Color Table for GIF has the same settings as the dialog box in Photoshop CC; however, in this section there is no option for animation, which you can only acquire if you export as an animated GIF. The color table menu has options for how to add, delete, and sort the colors. You can also save or load color tables from here.

JPEG

Most Preset settings are the same as in Photoshop CC or Illustrator CC’s Save for Web (Legacy), so refer to Chapters 4 and 12 for a more detailed explanation on quality and blur. You can set image size and anti-aliasing to None, Art Optimized, or Text Optimized. Refer to Figure 22-6.

PNG-8 and PNG-24

Most settings are the same as Photoshop CC and Illustrator CC’s Save for Web (Legacy), so refer to Chapters 4 and 12 for a more detailed explanation on color settings and dither. You can set image size and anti-aliasing to None, Art Optimized, or Text Optimized. Refer to Figure 22-7 for both options.

In all cases, clicking Save allows you to save an image in the folder you choose. Refer to Figure 22-8.

SWF Movie (removed in CC 2019)

When Animate CC was called Flash, it was popular to create SWF movies; however, gradually the Internet has moved away from this option. SWF animations are processor intensive on some deceives, making SWF less popular, so it has been slowly falling out of favor. This option has been removed in the CC 2019 version, I do not recommend this option for your website because some browsers have stopped this file format from being viewed on the web.

JPEG

This option allows you to create a single JPEG image from the current frame. Refer to Figure 22-10 for settings.

If you need a resolution to be slightly higher for printed or PDF material in InDesign CC, you can adjust the resolution. For print work, 300 dpi is a good quality setting, although the file size is larger; however, in most cases for the Internet, you leave this at the default of 72 dpi. Doing so adjusts the width and the height as well. To reset, click Match Screen, which returns it to the default size.

In the Include drop-down menu, you can set the dimensions of the file to the minimum image area to decrease the size of the file or set to full document size. You can also adjust the quality from 0 to 100 and choose if you want a progressive display of the image as it loads. The default is to leave it unchecked.

GIF

As with the JPEG, you can create a single static GIF image from the current frame. Refer to Figure 22-11.

If you need a resolution to be slightly higher for some printed or PDF material in InDesign CC, you can adjust the resolution; this adjusts the width and the height as well. In most cases, however, a JPEG file is a better export option for print work. To reset the size, click Match Screen, which returns it to the default size. In the Include drop-down menu, you can set the dimensions of the file to either the minimum image area to decrease the size of the file or set to full document size. You can also adjust the colors to be standard or 256. Note in the Option 1 Export Image dialog box that you have greater control over the colors using the color table; however, you can still decide whether the background is transparent, interlace, or smooth, and whether to dither the solid colors in the image.

PNG

As with the JPEG, you can create a single PNG image from the current frame. Refer to Figure 22-12.

If you need a resolution to be slightly higher for some printed or PDF material in InDesign CC, you can adjust the resolution; this adjusts the width and the height as well. JPEG is usually the best file format for print material, but you can achieve some good results with PNG as well. In the Include drop-down menu, you can set the dimensions of the file to either the minimum image area to decrease the size of the file or set to full document size. You can also adjust the colors to be 8, 24, or 32 bit. You can set the background to stage or opaque (a color chosen from the color picker) for 8 and 24 bits.

In Option 1: Export Image dialog box, you have greater control over the colors using the color table; however, you can still decide whether to smooth the graphics or not.

SVG

As noted in Photoshop CC and Illustrator CC, an SVG, or Scalable Vector Graphic, can be displayed as an image but is code that you can manipulate in a text editing program (e.g., Notepad ++) or for the web using Dreamweaver CC. Refer to Figure 22-13 to review the dialog box settings.

In Figure 22-13, you see that when you export an SVG. You can include or exclude hidden or turned off layers from your FLA file. The image location (non-SVG graphics within the file) can either be embedded or linked and placed into an image folder, or whatever name you choose for your project.

For more information, visit https://en.wikipedia.org/wiki/SVG_animation and www.w3schools.com/graphics/svg_examples.asp .

This allows you to save that information as an XML file, which may be useful for SVG animations. You see what commands are in Chapter 23.

SWF Movie

You can export a SWF movie if you plan to use it for a personal project on your computer; however, because some browsers no longer accept this format, I do not recommend using it for your website project.

JPEG

This brings up the same dialog box that you saw in Option 2, but without the Include drop-down option. Refer to Figure 22-16.

When you click OK, it creates a sequence of images based on the number of frames in your animation; for example, 20 frames is 20 images. So, if you have a lot of frames, consider whether you want to use this option because there is not a range option here. Files export with the name and then a sequence, such as 001.jpg, 002.jpg, and so forth.

GIF

This brings up the same dialog box that you saw in Option 2, but without the Include drop-down menu option. Refer to Figure 22-17.

As with JPEG, clicking OK creates a sequence of images based on the number of frames in your animation. There is no setting for the range of the sequence; keep this in mind if you have many frames. Files export with the name and then a sequence such as 001.gif, 002.gif, and so forth. This is not the same as a GIF animation, as you see in Option 5.

PNG

This brings up the same dialog box as you saw in Option 2. You can set the background to stage or opaque (a color chosen from the color picker) for 8 and 24 bits. Refer to Figure 22-18.

Clicking Export creates a sequence of images based on the number of frames in your animation. As with GIF and JPEG, there is no option to set the frame range. Files export with the name and then a sequence such as 001.png, 002.png, and so forth.

Tips for Controlling the Audio in Video When Exporting to MOV

Be aware that during export, if your animation contains audio, there may be times when the sound is not in sync. When creating a video animation in Animate or Premiere Pro, if you only have background music, you can set the sound to stream on the first frame. Do not use Event on the first frame because the sound may not copy.

In adding speech, you may need to set the sound as Event either on the second frame or a few frames into the video; otherwise, the sounds may not sync with the mouth movements. Creating an animated video takes practice. A good rule to remember is to always render then test your video a few times before you upload to your site.

While short animations of a few seconds are rather small when they render as MOV files, if your animation has a lot of filters or bitmap graphics, it might be best to render your files on an external drive. Please refer to Chapters 7 and 9 if you need to know how to accomplish this.

Publish Settings

In the Publish Settings dialog box, you find several tabs in which you can adjust your settings before publishing the canvas.

Available to all tabs is the Profile option at the top of the dialog box; it is set to default, but with the Widget icon, you can create, duplicate, rename, import (.apr), export, or delete a profile after you have made changes to the default. Refer to Figure 22-23.

In the JavaScript/HTML section, there are four tabs (Basic, HTML/JS, Image Settings, and Web Fonts). There are also three other additional tabs or other formats (JPEG image, OAM package, and SVG Image). Let’s look at each of these in order. The following items only publish if their respective check box is enabled.

JavaScript/HTML Basic Tab

The Basic tab is where you make most of the changes in your Publish Settings dialog box. You can give the output file a different output name, or keep the current name, and then click the folder next to the text field to locate the folder you want to publish the files into (if it is different than the current location that your HTML5 Canvas FLA is located). Refer to Figure 22-24.

• Loop Timeline: If you don’t want the timeline to loop and only play once, disable this checkbox; otherwise, leave it checked.

• Include hidden layers: If there are layers in your timeline that have the Eye icon turned off and are hidden because you don’t want them published, then disable the check box. Doing this may reduce file size; otherwise, leave it checked.

• Center Stage: Position the animation in the center of the browser or the viewing area. Animation can be centered by height, width, or both. Publish Settings uses a combination of CSS and HTML to center your <canvas> </canvas> tag on the HTML page in the browser. In Dreamweaver CC, you can adjust these settings to suit your design, as I show when you look at dissecting the published file.

• Make Responsive: Set the animation to scale to change the dimensions of the browser or the viewing area. Animations can respond to change in width, height, or both.

• Scale To Fit Visible Area: Scale the animation to fill the entire available viewing area. The aspect ratio is maintained always. Choose Fit In View or Stretch To Fit from the drop-down menu.

Note

This is important if you are building a responsive website and plan to package as an OAM in Dreamweaver. Without this setting, the OAM’s inner <canvas> will not become responsive, even if you use CSS to control the width of the <object> tag. For example, the following is in CSS Dreamweaver.

#EdgeID{

width:100%;

}

This is discussed further in Part 6.

• Include Preloader: Sometimes before a file loads, if it is very large, you may want to include a preloader animation; for example, showing a bar growing or circle spinning. You can use the default of the program or create your own GIF animation and then link it to the file when you choose to browse from the drop-down menu. Clicking Preview allows you to see what this preloader look like.

• Export Document as Texture: When checked this will export all symbols in the animation as one raster image or texture. If your file has a a lot of gradients as mine does you might want to leave unchecked as the quality might degrade and only use for animations with solid colors.

• Export Image Assets: When you combine your image assets, this allows Animate to put any files that it regards as bitmap or too large into a folder called images, or whatever name you choose. The <canvas> tag later references this folder when it needs to work with the JavaScript code inside the HTML (.html) and external JavaScript (.js) files that are published later. You can also combine small images in the library into what is known as sprite sheets.

You look at how to create sprite sheets independent of the Publish Settings dialog box in a moment. Essentially, sprite sheets are a combination of different frames combined into one image file. Accessing one image file rather than many makes the graphic appear faster. The published canvas then uses a combination of HTML, JavaScript, and CSS to reference parts of that sprite image when required. Figure 22-25 shows an example of how this could be used for button symbols.

• Export Sound Assets: If your file contains sounds or audio (.wav, mp3), they are stored in the sounds folder. Note that with HTML5 Canvas, you could not import an Ogg Vorbis file. Once the file is published, you can always go inside the file and alter this link on your own project in Dreamweaver CC and change the audio type or swap the audio file.

• Export CreateJS Assets: Exports a library of JavaScript code that comes from a company called CreateJS. you need this library for your animation to function You see how this library is connected when you open the file.

These folders can be toggled on or off; if toggled off, the assets are exported to the same folder as the output file. Refer to Figure 22-26.

Note

In a linked video, there is no folder option, so there is no new folder created to store your video other than what you created when you linked the component earlier. If you do not like this final link location, you need to edit the code in a text editor like Dreamweaver CC after it is published.

JavaScript/HTML HTML/JS Settings Tab

The HTML/JS tab controls such things as the HTML template that is used to publish the HTML5 Canvas file. Unless you have advanced knowledge of how the internal structure of the canvas works, for now leave it at the default. If you plan to use a different template, you can import new or export the template for someone else to use in their project. Refer to Figure 22-27.

Overwrite HTML File On Publish

This overwrites the current HTML file, if you published an earlier one. To avoid this, either uncheck this setting or make sure that you give the next file you publish a different name: file_rev2 and so on. By default, this is checked so that you don’t have multiple files made every time you publish.

This is good if you already have the HTML file linked in your website. You can also include JavaScript in HTML; this is the default. It includes JavaScript and JSON code in HTML and generates a single output file instead of a separate HTML and multiple JavaScript files. Click the button “Include JavaScript In HTML...” an alert message appears, as seen in Figure 22-28.

Clicking OK alters the setting to stop including JavaScript in HTML. It generates separate JavaScript and HTML files. Animate CC needs to publish the document once for this to take effect. Refer to Figure 22-29.

If you do not want this setting, click Cancel and exit the Publish Settings dialog box so that you do not save the changes.

Advanced JavaScript Options

The following are the advanced JavaScript options.

• Hosted Libraries: When checked, uses copies of the libraries hosted on the CreateJS CND at code.createjs.​com. It allows libraries to be cached and then shared between various sites.

• Compact Shapes: When checked, vector instructions are output in a compact form, and when deselected, the instructions are readable and verbose; this is useful if you need to debug or learn how the code operates.

• Multiframe bounds: When checked, the timeline symbols include a frameBounds property containing an array or rectangles corresponding to the bounds of each frame in the timeline. A multiframe bound significantly increases the publish time, so by default, it is unchecked.

• JavaScript Name Spaces: These are the namespaces used in JavaScript to identify items.

  • Symbols: lib

  • Images: images

  • CreateJS: createJS

If you are an advanced user, you can alter these name spaces; however for now, leave as is.

JavaScript/HTML Image Settings Tab

With your HTML5 Canvas files, you can generate your spritesheets as PNG images, JPEG images, or both. Some settings are enabled or disabled. Alternatively you can also choose the option to export document as a texture. For now leave this setting unchecked. Refer to Figure 22-30.

By default, PNG is chosen since it can have transparency; however, if this is not an issue, you can use JPEG and give it a matte background. As you saw with other export options, you can adjust the quality and size of the image, or in this case, the sprite sheet file. Also, as you saw in the Basic tab section of this chapter, the spritesheet combines all the frames of a button symbol or bitmap graphics onto a one-page image. This improves the speed and performance of the canvas animation.

JavaScript/HTML Web Fonts Tab

As with Photoshop CC and Illustrator CC, web fonts are available in Animate CC. You look at how to access them in more detail in Chapter 23. If you have a domain URL where your content is hosted, you can enter this URL domain link in the blank text area. Refer to Figure 22-31.

Note

You can leave this area blank, if you are using your own web fonts rather than ones found Typekit, the computer’s default font using the static text or dynamic text (accessed via the Text tool(T) and Properties panel), or have no fonts in the file. Only a setting of dynamic text on a font allows you to access the Typekit (Adobe Fonts) and Google web fonts, as you see in Chapter 23.

After reviewing these four tabs, if you are not altering any other publish settings, you can either click OK at the bottom of the dialog box and continue working on your file with the saved settings, or click Publish and view the final files. Refer to Figure 22-32.

However, before you do that, let’s look at a few more settings in case you want to output other formats at the same time.

Other Formats

On the left side of the Publish setting you can also choose to publish when checked other formats at the same time as the HTML5 Canvas. The following text explains those choices.

JPEG Image

This publishes a JPEG image of the current frame, but not a sequence. You can give the file a different name and output location. Refer to Figure 22-33.

You can adjust the size or match to movie’s width, height, and quality, and choose to load as progressive.

OAM Package

Along with the package, this generates a PNG poster from the current frame; it can be transparent. You can give the file a different name and output location , or you can use another external file for the poster image (also a PNG) if you locate it in another folder. Refer to Figure 22-34.

The OAM (.oam) files generated in Animate CC can be placed in other Adobe applications, such as Dreamweaver CC, Muse CC, and InDesign CC. An OAM package is an animated widget file, or OpenAjax Metadata.

An OAM file is like a ZIP file that packs all the necessary assets into an Assets folder and includes some configuration information in an XML document.

To look inside, you can try replacing the .oam extension to .zip, and review the content inside of it. It is sometimes called an Animate Deployment Package file.

In Dreamweaver CC, the same file is called Animated Composition because inserting it brings the Animate CC composition into Dreamweaver CC onto an area of a page. You look at how to insert this file in Dreamweaver CC in Part 6. Essentially, when the OAM file is inserted in a <div> tag on an HTML page, Dreamweaver CC unpacks the OAM and creates an Animation assets folder within the main or root site folder, which may include JavaScript, XML, and image files. These files link to that animation and are placed inside the HTML file in an <object> tag, that looks something like this:

<object id="EdgeID" type="text/html" width="570" height="420" data-dw-widget="Edge" data="animation_assets/motion/Assets/flower_stock.html">

      </object>

The <object> tag has an ID of EdgeID, which is a throwback to before Adobe Edge Animate merged with Flash to become Animate. Like the <canvas> tag, the <object> tag becomes a window into what is going on inside the flower_stock.html file, which contains various JavaScript links controlling the movements within the <object> tag.

The OAM package publishes at the same time and separately when you publish the Canvas (JavaScript/HTML). Also, to ensure what is inside the OAM package and the HTML5 Canvas are responsive, set the basic tab of the JavaScript/HTML to the make responsive. As noted, This setting is also packaged into the OAM. This is the only way that you are able to scale the OAM successfully in Dreamweaver. Refer to Figure 22-35.

Note

You can also publish an OAM file from an ActionScript 3.0 FLA file, but this relates to SWF files, which are not part of this chapter.

SVG Image

Like Export Option 2, this generates an SVG image of the current frame. You can give the file a different name and output location. The SVG profile is SVG 1.1. You can include hidden layers, and the image location can be embedded or linked to the folder that the SVG image is saved in. The links update if you need to republish. Refer to Figure 22-36.

Other Image Format Alternatives with ActionScript 3.0 FLA Files

While the HTML5 Canvas gives you quite a few format options that you can publish, there may be situations where where you need a few additional formats. The following formats are listed here.

PNG Image

If you need to just publish a single frame as PNG, you can do this only with an ActionScript 3.0 FLA file. Refer to Figure 22-37; otherwise, use Options 1 and 2.

GIF Image

If you need to just publish a single frame or an animation as a GIF, you can do this only with an ActionScript 3.0 FLA file; otherwise, use Option 2: File ➤ Export ➤ Export Image (Legacy), or Option 5: File ➤ Export ➤ Export Animated GIF. Refer to Figure 22-38.

Note

Unlike in Option 5, you can set the repeat times to a specific number, as you would in Photoshop CC.

For more advanced information on publishing HTML5 Canvas, visit https://helpx.adobe.com/animate/using/creating-publishing-html5-canvas-document.html .

Let’s return to the newly HTML5 Canvas file and look at what it is made up of when the files are published.

Dissecting the Canvas HTML5 File

Now let’s look inside flower_stock.html, the HTML5 Canvas file. Refer to Figure 22-39.

Unlike the OAM file that was created as a package, HTML5 Canvas files remain separated (.js and .html) within the folder you published them to. Also, unlike the OAM there may not be an XML file in all cases. In both cases, the folders that are created are image and sound folders if there are images and sounds that required in the animation. And if there was a video file and linked components then these would be included in the OAM package as well.

You can copy the created code in the <head> and <body> sections into your own HTML page, and then add CSS to style it to match the theme of your site. Alternatively, you can use OAM package, which you may find easier to handle when you add it to a webpage. You look at that in more detail in Part 6.

Always make sure to test your new file and adjust the links (JavaScript, audio, and video) if they are in distinct folder locations on your own site. You look at this in more detail in Part 6. Personally, I find the HTML5 Canvas animation to be as great as the index or intro page on a site to welcome visitors and encourage them to visit other pages within the website. You create one in Chapter 24.

Export PNG Sequence

This allows you to export all the frames within a Movie clip Symbol (nested) as a PNG sequence. The dialog box lists the total number of frames within the Movie Clip and you can set the size, resolution, color quality, and background color as either stage or opaque. Then decide whether to smooth the graphics or not. This is like Option 3 from earlier in the chapter, but you are only working with one symbol and not the whole animation. Refer to Figure 22-40.

Generate Sprite Sheet

Rather than publish your entire animation, you can generate a sprite sheet (frames loaded on one sheet to save time for the program to find the images for the animation) for one or more of your symbols. You can publish it for more than one symbol by Shift-click selecting them and then right-clicking and choosing Generate Sprite Sheet from the pop-up menu. Refer to Figure 22-41 and button_example.fla.

They appear on the left side of the Generate Sprite Sheet dialog box. Refer to Figure 22-42.

The Preview tab shows how the final sprite sheet appears before export.

Further settings allow you to control the image dimensions, which are by default set to autosize, and control the width and height; or choose custom options. The image formats are JPEG or PNG. Refer to Figure 22-43.

PNG 8 or 32 can contain transparency, so it is usually 32 that is the default option. You can set the background color. JPEG must have a background color, but you can adjust the quality. Other settings on the right include

• Algorithm: How the packing is applied to the frames, Basic (default), or Max Rects; this alters which symbols appear and in what order.

• Data format: This outputs the internal format used for image data; if you’re not sure what setting to use, leave this area blank. Refer to Figure 22-44.

• Rotate: Rotates the sprites 90°. This option is only available for some data formats.

• Trim: Saves space on the sprite sheet by trimming unused pixels from each symbol frame added to the sheet.

• Stack frames: Prevents duplicate frames within the selected symbols from being duplicated in the resulting sprite sheet.

• Border and shape padding: Adds extra padding around the sprites.

Then you can choose where the sprite sheet is saved by selecting browse in the lower left and choosing a location and clicking export to export the sprite sheet.

Generate Texture Atlas

The texture atlas is not for web design, but more for gaming and app development using an extra plug-in known as Unity, which binds objects together for the animation.

Since the topic of this book is about building animations and video for the web, I am not going into any detail on this feature; however, if you would like to learn more, check out https://helpx.adobe.com/animate/using/create-sprite-sheet.html .

AIR Options

When you choose File ➤ New, under the Advanced tab, you find three Adobe AIR options. Refer to Figure 22-45.

Each of these files can be adjusted and set to a new setting in the Properties panel under the Publish tab. Refer to Figure 22-46.

When you click Publish Settings, this information is carried into the dialog box under the Target drop-down menu. Refer to Figure 22-47.

While at first glance it might appear that you are creating a SWF file, if you click the little wrench (player settings) by the Target drop-down menu, you see that this is an AIR package. Refer to Figure 22-48.

This setting is not available to Flash files. Refer to Figure 22-49.

For AIR packages to run and publish on the web, you are required to set up various signature certificate and security settings for those who sell and download the files; this keeps users safe. Refer to Figure 22-50.

Projector

Two other options found in the export settings are Mac Projector (.app) and Win Projector (.exe). Refer to Figure 22-51.

A projector is a self-contained file that includes the Flash player runtime if your audience doesn’t have a Flash player installed. These files play like an application, but don’t require a web browser. It begins to run once you double-click the icon; however, unlike AIR, you don’t have the same range of publishing options and settings.

WebGL

Found under File ➤ New under the Advanced Tab now has 4 WebGL options: gltf Standard, gltf Extended, VR 360, and VR Panorama. All are in Beta version. 360 and Panorama animations can be used for virtual reality and game environments. This Web Graphics Library is a JavaScript API for rendering 2D and 3D graphics within any compatible web browser without the use of plug-ins. Besides JavaScript, it uses JSON files (JavaScript Object Notation), which is like XML; both are for storing data to render complex graphics. For more information, visit https://en.wikipedia.org/wiki/WebGL .

However, when you choose any one of these WebGL options, be aware that Animate CC WebGL does not currently allow the use of the 3D tools, some text features, masks, and video, because they are not currently supported; however, as the technology improves, this is likely to change. Refer to Figure 22-52.

As with HTML5 Canvas, you have the option to create along with certain WebGL files, JPEG images, and an SVG image.

For more information on WebGL publishing, visit

https://helpx.adobe.com/animate/using/creating-publishing-webgl-document.html .