In the previous chapter, we had a look at some of the more important features of the overall Adobe Animate user interface (UI). We'll now look specifically at creating content within Animate in a form that can be accessed or reused in additional ways. We will explain the differences between publishing to a specific target platform and exporting to various file types, and we'll see why you'd want to choose one workflow over the other in certain cases. We'll also have a look at the new Assets panel and how to package assets for distribution and reuse through this mechanism. To close off the chapter, we'll examine the quick share and publish workflow.
After reading this chapter, you'll come away with the following skills:
You will need the following software and hardware to complete this chapter:
In this section, we are going to compare what it means to publish a document versus what it means to export a document. When dealing with any Animate document, there are going to be a number of choices you can make depending on what type of files you want to generate from your project.
Let's consider what it means to publish your document first. Often, new users to Animate think that by choosing a certain document type, this choice will lock them into producing only a specific type of content. This is actually only the case when considering the publish workflow.
Every document in Animate publishes to a specific target platform, such as the following:
However, we are not restricted to the publishing format as the only way of generating content from Animate.
We'll now consider what it means to export your content. Consider an ActionScript 3.0 document. Yes, it publishes for Flash Player, and that may initially seem useless. If you consider the choices for exporting in place of publishing, though, the possibilities really open up. For example, you can export the following from a single ActionScript 3.0 project:
Exporting your content allows you all the power and flexibility of your chosen document type without being locked into a specific platform!
In addition, the publish workflow will allow the generation of even more asset types, such as SWC files, Projector files, SWF Archive files, OAM bundles, and more! All of this, from a simple ActionScript 3.0 document! It is vitally important to understand both the publish and export workflows for every document type.
In this chapter, we'll be working with a simple set of example project files that engage various major document types available to Animate. You can find them as part of this book's chapter files available at .
Locate the file named ActionScript3.fla and open it to view the project:
It is a simple animation displaying the Adobe Animate logo scaling up across a color-shifting background. Of course, you can design your own projects as well if you would prefer to use your own creations.
We'll next learn specifically about the publish and export workflows and how they differ from one another.
The full Publish Settings dialog can be accessed with two different methods. In the Properties panel, when working with the Doc tab selected, you will find a Publish Settings section, and here, clicking the More settings button will open the dialog:
You can also open the Publish Settings dialog by choosing File | Publish Settings… from the application menu.
The Publish Settings dialog itself will differ in its appearance and available options depending on the document type you are working with. In the following figure, you can see the vast differences between this dialog when working with an ActionScript 3.0 document versus working with a document targeting HTML5 Canvas:
In either case, the dialog will appear. From within this dialog, you can tweak a great variety of settings that determine how your project will publish. We'll learn more about these platform-specific settings later in this chapter. Clicking the Publish button from within the dialog will publish your project in accordance with these settings. The folder that your project is published to can be set within Publish Settings and will default to publish in the same location as the document (.fla) itself.
Tip
You can also publish directly, bypassing the Publish Settings dialog altogether, by choosing File | Publish from the application menu.
In addition to the publish workflow, we can also choose to export our content to a variety of different formats. We'll have a look at this next.
While publishing your content is intrinsically bound to your chosen document type, exporting content is completely different. These differences are not well understood by many Animate users and the differences are often overlooked.
There are actually a number of places in Animate through which you can invoke various export options. We'll cover them all in this chapter, but the most direct way to export content is from the Animate application menu.
Go to the application menu and choose File | Export – a submenu will appear, containing a variety of export options:
These export options are available to us regardless of the document type. They are not bound in any way to the publish options or restrictions inherent to a certain platform:
We'll explore many of these options in the latter part of this chapter.
In this section, we gave an overview of what it means to publish from Animate compared to what it means to export content from Animate. Coming up, we'll look specifically at the publish workflow and how the settings differ across the target platforms specified by the Animate document type.
In Chapter 2, Exploring Platform-Specific Considerations, we had a look at the variety of platforms that are tied to each document type in Animate. We'll now build upon that introduction to explore the various publish settings for these document types. The settings available for each document type vary quite a bit, with the ActionScript-based documents having the most settings due to their longevity and the beta documents having the least for the same reason.
We'll now look at the various native document types within Animate, focusing on particular associated settings when publishing your content.
By default, ActionScript 3.0 documents will publish both a .swf file and a .html file to act as a container document. Of course, due to Flash Player being completely banned from web browsers, this isn't all that useful!
With the Publish Settings dialog open, you'll immediately be struck with just how many settings there are for this publish workflow. You can view these settings in the following screenshot:
Along the side are the PUBLISH settings, for publishing your Flash content along with SWC, and also the OTHER FORMATS.
Note
Shockwave Component (SWC) is a format that was popular during the heyday of Flash Player, as it could be used to bundle assets and code together in a way that more code-based applications (such as Flex Builder) could interpret and make use of. It isn't so useful anymore.
These OTHER FORMATS include the aforementioned HTML wrapper, along with a number of image export types. There are two formats here that are especially noteworthy: Projector and SWF Archive.
Projector files can be published for either macOS or Windows and are basically a compiled executable program that contains your project alongside a special version of Flash Player that can be used to run your content on the desktop. The neat thing about this format is that there is no need to perform any sort of installation – it just runs!
SWF Archive is a mechanism that renders each individual layer of your project as a separate .swf file, then bundles the entire set as a .zip archive. This is a good mechanism for getting your project into additional applications such as After Effects for per-layer compositing workflows.
Tip
You can also import an entire .fla file directly into After Effects to achieve the same result. A new composition will be created with each layer from Animate translated to a layer in After Effects.
These are the overall settings to keep in mind when publishing ActionScript 3.0 document types. Let's turn our attention to HTML5 Canvas documents next.
While HTML5 Canvas is a much more recent document type than ActionScript 3.0, it includes an impressive amount of publish settings due to its importance within the Animate software, especially since a .swf file can no longer be used within web browsers. Since HTML5 Canvas is a completely native web technology, it can step in and take over for Flash Player in many circumstances.
Just as with ActionScript 3.0, you'll find a variety of choices along the left-hand side of the Publish Settings dialog under PUBLISH and OTHER FORMATS. PUBLISH, in this case, includes only a single target – JavaScript/HTML. Here, you will find all the major publish settings for HTML5 Canvas documents.
These JavaScript/HTML settings are divided into three tabs, the first of which is the Basic tab:
Here, we find the most general settings to do with publishing HTML5 Canvas documents. Notable settings include the following:
The second tab is centered around more advanced settings around how HTML and JavaScript are handled as part of the publish process:
The HTML/JS tab includes a number of more advanced settings when considering how your content is published. Settings of the greatest importance in this area include the following:
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>
The third and final tab (Image Settings) has to do entirely with how images are published as part of the HTML5 Canvas publish pipeline:
These settings determine the handling of image files, including how they are exported, which image file type to use (along with specific encoding settings), and which portions of your content to render as part of this output:
When publishing HTML5 Canvas documents it is obvious with so many settings available that this is considered one of the major publish options as part of Adobe Animate.
Whether dealing with AIR for desktop, AIR for iOS, or AIR for Android, there are a great number of publish settings to consider, and they differ a bit between each target platform. Additionally, whenever you're exploring the publish settings for any AIR document, you'll actually have two sets of publish settings to deal with.
The first group of settings is accessed and handled in exactly the same way as with an ActionScript 3.0 document:
There are only two differences here as opposed to an ActionScript 3.0 document. The first is that your only options under PUBLISH are Flash (.swf) and SWC. This is due to the fact that AIR requires an SWF file to be generated first, in order to compile and package the AIR bundle. The second difference is that we are targeting AIR and not Flash Player, which leads directly into the second group of settings in a completely different dialog.
The second and perhaps most important group of AIR settings is accessed by clicking the small wrench icon directly to the right of the Target dropdown in the Publish Settings dialog. This reveals the AIR Settings dialog with an additional set of settings specific to your AIR project:
There are a lot of settings here, and they are grouped within the following tabs:
We will have a deeper look at other aspects of the AIR settings when we build a small application in Chapter 13, Building Apps for Desktop and Mobile.
With the AIR settings out of the way, we'll finally have a peek at the various settings available in the WebGL glTF and Virtual Reality (VR) document types.
Since the various beta document types are still under development, these settings could change rather quickly. At this time, though, they are all nearly identical.
Choosing Publish Settings for the VR document types reveals a Publish Settings dialog similar to what we've seen for other platforms, while the WebGL glTF settings dialog appears a bit differently, as shown in the following figure:
Regardless of which document type you are working with, all four employ WebGL within the HTML <canvas> element and so they all have the same settings, aside from differences in the appearance of the dialog itself.
The particular settings are as follows:
Again, these settings are quite minimal when compared to ActionScript 3.0, HTML5 Canvas, or AIR, but that is to be expected with a set of new document types still in development.
Note
Animate also has the capability to support third-party publish and export workflows through the use of extensions. We'll have a look at some of these possibilities in Chapter 14, Extending Adobe Animate.
In this section, we had a look at the Publish Settings dialog across the native document types that ship with Adobe Animate. Coming up, we'll see how to export our content, bypassing the publish mechanisms in various ways.
While publishing is completely dependent upon the Animate document type that's been chosen for a project, exporting is completely free from such restraints and can be undertaken regardless of the document type and publish platform. For instance, whether you're using ActionScript 3.0 or HTML5 Canvas documents, you can always export to an image sequence, animated GIF file, or HD video file through Adobe Media Encoder.
Let's have a look at some of these export options and see how they differ from the more restricted publish workflows.
If your project is non-interactive, a video file is often the best format for producing it in a distributable format. Video, of course, is an incredibly popular format for sharing creative content, and it can be generated from any document type, making it quite versatile.
From the application menu, choose File | Export | Export Video/Media…, and the Export Media dialog will appear, as shown in the following screenshot:
The Export Media dialog is dense with options. One of the nicer additions over the past few versions of Animate is the inclusion of the ability to define what portion of your timeline you'd like to render to video, in addition to being able to select the video format and preset directly within the dialog itself.
The options presented here include the following:
You can also select whether you want to start the render queue immediately or not through a checkbox. Animate leverages Adobe Media Encoder to process video exports in a similar fashion to Premiere Pro and After Effects. Once you hit Export, Media Encoder will appear and process your video if that option has been selected, in accordance with the settings you have chosen. Media Encoder may take some time to open since it is a separate application from Animate – so be patient.
Tip
If the process doesn't kick off immediately after clicking Export, it may help to manually open Adobe Media Encoder first, then proceed to click Export after it is active.
Again, video is a tremendously popular option for producing content from Adobe Animate.
Perhaps just as popular as video among certain social networks and online platforms is the animated .gif file. The Graphics Interchange Format (GIF) file is one of the oldest available for internet playback and was supported in web browsers even before the existence of Flash Player. Traditionally, these files have been used as small, animated elements as part of a web page design, but in recent years, they've been used purely as content for use in social networks and online platforms.
From the application menu, choose File | Export | Export Animated GIF..., and the Export Image dialog will appear:
Unlike when exporting still images, this dialog will be tuned specifically for the export of animated .gif files. You will be presented with a preview of your resulting animation, underneath which are statistics such as file size and format properties. Along the opposite side are the settings you can tune to modify aspects of the resulting file.
Note
If you are using the stage background as a background color for your .gif image, it may appear incorrectly here. You can simply add in a background shape the same color as the background color of the stage to get around this anomaly.
The various settings are grouped into four categories:
Clicking the Preview… button will generate a preview of your resulting GIF file and display it within a web browser.
Here is an example of what is shown during an animated GIF preview:
Directly below that in the preview, you will find some example HTML tags that demonstrate how to incorporate the file into your documents:
<html>
<head>
<title>HTML5Canvas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="HTML5Canvas.gif" width="1280" height="720" alt="">
</body>
</html>
The entire preview process generates a single web view that includes an output of the image file encoding information, followed by an example of how to utilize the exported animated .gif file within a .html document. It couldn't get any easier.
Note
Be very careful to keep an eye on the file size of your exported .gif files. It is very easy to produce a GIF that is far larger than an equivalent video file!
To actually save your animated GIF, choose Save, and then you will be prompted for a name and location with which to save the exported file.
Now that we've covered the process required to generate an animated GIF file, let's have a look at additional image-based output choices.
Image file sequences are a series of .png, .jpg, or .svg files, which are generated frame by frame from your animation.
Choose Export | Export Movie… from the application menu and then choose an image sequence format and click Save to make an export dialog appear:
The dialog settings will vary depending upon the selected image sequence format.
Note
You can also export single image files instead of full sequences through the export menu by choosing Export | Export Image… or Export | Export Image (Legacy)… for .png, .jpg, .gif, or .svg file generation with the legacy choice. A single still image will be generated from the current playhead location on the timeline.
An image sequence is a useful way of getting your content into software that may not support formats such as SWF, as just about anything can handle a sequence of images. However, we can actually export a .swf file through this same export menu!
There is one more spot within Animate that allows the direct export of your content into a variety of formats, though this option works with individual assets and not the entire document.
If you open the Library panel and right-click on any symbol, a menu will appear:
This menu will include a set of additional export options that will export the selected object. You'll find a number of export options here that we've covered elsewhere, in addition to the additional options of exporting a symbol to a sprite sheet or texture atlas. Both of these options will open a dialog where you can tweak the settings to your needs.
In this section, we had a look at the variety of export options available across Animate document types. Coming up, we'll look specifically at how to export Animate content for use within Animate!
A new method of getting content out of Animate is the ability to export Animate asset (.ana) files. These files can contain packaged objects, motions, bones, and audio for personal backup or distribution among other Animate users. This differs a bit from the other export options we've seen since the intended platform of use is Animate itself!
While Animate has had a Library panel for most of its existence, it is only used on a per-document basis to contain assets such as bitmap images, sound files, and internal symbols. Once that document is closed, you'd need to open it back up again to transfer any assets between documents for reuse.
Tip
If the Assets panel is not visible within your chosen workspace, you can enable it by selecting Windows | Assets from the application menu.
The new Assets panel works differently from the Library panel in that it contains a persistent set of assets that exist apart from any single document. When you first use the panel, it is prepopulated with a library of material from Adobe – but the real power of this panel comes into play once you create your own custom collection of assets and include them in the panel. Managing important assets in this way allows quick access to them – no matter what document you might be working in at any one time.
Assets are organized into main categories that include Animated, Static, and Sound clips:
You can search the panel for keywords and tags or expand a number of subcategories to find what you need.
Upon the initial installation, Animate includes a small number of default assets within the Assets panel. Adobe makes additional assets available through a download mechanism located at the bottom of the panel. It appears as a small cloud with a downward-facing arrow. If additional assets are available for download, this icon becomes brightly colored and you can then click on it to download additional assets from Adobe's servers.
Note
You might expect an Animate authoring file to hold the .ana extension, however, the extension for an authoring file is actually .fla! The reason for this is due to Animate formerly being known as Flash Professional.
The most direct way of exporting Animate Asset files is from the Library panel:
If you right-click on a symbol in the Library panel, you are given two menu options regarding asset files. Choosing Export Asset… will create a .ana file on your filesystem. Selecting Save As Asset… will not produce a .ana file but rather add the asset directly into your Assets panel without an intermediary import process.
Another mechanism for exporting assets can be found in the application menu by choosing File | Export | Export Scene as asset, as shown in the following screenshot:
This option allows you to export a full scene from the main timeline as a single Animate asset. This method produces the exact same type of assets as the library method since the main timeline is basically a giant Movie Clip symbol anyway – it is only accessed differently.
When choosing to export an Animate asset file from either the Library panel or through the File | Export | Export Scene as asset menu, you are presented with the Export Asset dialog, as shown in the following screenshot:
From here, you can choose from the available assets to include in your file, depending on whether these types of assets exist in the selected symbol. A system of checkboxes allows you to include the following:
You are also provided with the opportunity to tag the asset with keywords, which can then be searched through when using the Assets panel.
Once you click Export, your assets will be bundled into a .ana file on your local machine, ready to be imported or distributed:
There are a handful of uses for these Animate asset files. They can be preserved as a backup, distributed to other members of your team (or even strangers on the internet), or can be immediately imported back into Animate for use through the Assets panel:
You will then be taken to a file browser to locate your .ana file.
Once the .ana file has been imported, you can locate it within the Custom tab of the Assets panel:
You can filter and search custom assets just as is possible with the default assets.
Tip
It is also possible to delete assets from the Assets panel that you no longer need. Right-click on the asset you want to remove and choose Delete from the right-click menu that appears. Note that you can also rename assets in this way!
In this section, we explored a new mechanism for exporting useful assets from Animate using the new Animate asset export and import features. Coming up, we'll look at how to quickly publish and export content using the Quick Share and Publish menu.
The social share and quick publish options allow us to produce content directly to some of the most common formats – regardless of the traditional differences between exporting and sharing your Animate content. Both are accessed from the Quick Share and Publish menu in the upper right of the Animate UI – left of both the workspace switcher and the Play Movie button:
When you click this button, you gain access to the Social share (One click social media share) and Publish (Export in multiple formats) options:
Choosing either option will open a secondary menu of choices. Let's take a look at these options.
Choosing Social share will bring you to the next step in that process, which presents the choice of sharing directly to Twitter or YouTube, with more social channels coming soon:
Selecting either of these two options will necessitate an authentication task that allows Animate to publish directly to the selected platform on your behalf. You only need to provide permissions once for each social network.
Once authenticated, Animate generates the media in a format suitable for either channel and allows the inclusion of a small message (with hashtags, of course!) before posting. After the content is successfully posted to the chosen social channel, Animate lets you know through a small confirmation dialog – at that point, the media is live.
Choosing Publish leads to some alternative choices that depend on your document target platform.
For instance, if you're using HTML5 Canvas, you'll get the option to publish an MP4 video file, an animated GIF file, or a set of files compatible with HTML/JavaScript:
However, if working from an ActionScript 3.0 document type, you'll be presented with only options for video and animated GIF files – since a .swf file is no longer appropriate for public distribution.
Just as with the channel selection for social sharing, the quick publish options will likely change over time – especially as more targets are added to Animate.
In this section, we gave an overview of the Quick Share and Publish options that are available within Adobe Animate.
In this chapter, we explored a wide variety of publish options depending on the chosen document type, and also the export options available to us, regardless of document type and target platform. It is so important to understand the differences between these two ways of getting content outside of Animate!
When executing the publish workflow across different document types, we now have a better familiarity with the options available to each, and also how these settings can differ drastically between target platforms. Regarding export workflows, we've seen how varied these can be and the wide array of file formats that can be chosen – regardless of the initial document type. We also had a look at the various export options when generating Animate asset files, and we saw how to access and use the quick share features.
In the next chapter, we'll explore how to create and manipulate assets within Animate to design engaging animated content.