Create an Animated GIF

In Chapters 6 and 9, where you were working in Photoshop to create a GIF animation, you used the Timeline panel with frames. As you saw in Chapter 22, Photoshop is not the only software that you can use to create these types of animations in a Timeline panel.

It really all depends on the workflow that you are presented with and how the images for the animation were acquired. For example, if you have a lot of photographs and are comfortable with Photoshop, you probably want to create the GIF Animation in that program. However, if you have a lot of illustrations from Illustrator, or have created the animation in Animate, then you likely would not want to import all your work back into Photoshop just to create an animate GIF.

One benefit is the Animate timeline, in which you have greater control over your shape and symbol movements. A drawback with Animate GIF animation is that sometimes the resolution is not as good as you get with exporting with Photoshop; if your animation has a lot of color photos, graphics, and gradients, you need to take a bit more time to adjust the settings in the Export Animated GIF dialog box to get the best quality.

In the Gif_Animation folder, you will find the original graphic—gif_images.ai, some completed GIF animation files, and the working gif_animation.fla file. Open the FLA file. Refer to Figure 24-1.

It is very similar to the paperweight graphic animation that you created in Photoshop in Chapter 6. The stage is currently 200×200 pixels.

However, this time, I used the Animate Timeline panel to create the object cooling effect. The Timeline panel uses a Classic tween and a Motion tween with two layers, and the duration lasts for about 4 seconds. Refer to Figure 24-2.

This time, all the images are converted to symbols and are stored in the Library panel as either movie clip symbols or graphic symbols, as seen to Figure 24-3.

Because the flowers do not make a lot of movement, I left them as graphic symbols, but I could have made them all into movie clip symbols if I wanted to. I made sure not to have any nested animations in the symbols because they will not function correctly when I export an animated GIF. All animation is on the stage of the HTML5 Canvas FLA file.

Once you have reviewed the animation with the playhead, you can now Export the File.

Export your GIF Animation

Go to File ➤ Export ➤ Export Animated GIF. This opens the Export Image dialog box, but only for the animated GIF options. Refer to Figure 24-4.

Currently, the default is a transparent background; however, you want to uncheck that so that you can keep the black area of the stage. Figure 24-5 is a close-up of the settings that I used for the GIF animation.

The following are the settings:

• GIF   Lossy: 0

• Selective

• Colors: 256

• Diffusion

• Dither: 0%

• Transparency: uncheck

• Interlaced: uncheck

• Web Snap: 0%

• Image Size: I increased the size to 300×300 px, or 150%, but you can leave at 200×200 px if you prefer the original size.

I chose Art Optimized and Clip to Stage because I wanted to keep the black background visible. Then I set the Animation looping to Once, and previewed it. Refer to Figure 24-6.

Animate creates a more banned effect with its GIF animation when it comes to gradients; however, I find that this gives almost an effect like heat rising and rippling as the object cools: in this case, that is OK for me. If you want a less banned effect, you may have to create more subtle gradients or use solid colors. When done, click Save at the bottom of the dialog box, as seen in Figure 24-7.

Name it animation gif_animation_300.gif so that you know you increased the size of the animation to 300 pixels, as seen in Figure 24-8.

Save your new file in your Images folder or to the location of your choice, and then exit the Image Export dialog box. Close gif_animation.fla without saving any changes. You have now completed the first project. Next, you will create some video.

Create a Video (.mov) File

In Chapters 7 and 9, you looked at in Photoshop how to work with the Timeline panel to create and render your video for Hot Glass Tango. You may have noticed that several of the animated introduction clips and the closing credits were not created in Photoshop but imported as MP4 files into Photoshop later. That is because they were animated in Adobe Animate and then exported as video or MOV directly into Adobe Media Encoder, which you look at in Part 5. Animate uses this two-step process to preserve the original quality of the animation, should you want to use it for other non-web related projects in another program like Adobe Premiere Pro. However, for this book your goal is to create an MP4 file for the web or to use later in Photoshop to keep the file size small for rendering.

Open the Animated_movie_scenes folder, in which you will find eight ActionScript 3.0 FLA files. The reason that I used ActionScript 3.0 rather than HTML5 Canvas FLA is because I wanted to have all panel and tool options available to me so that I could create the video with no graphic restrictions. I already have the MOV created, should you want to compare what you do in this lesson to my settings. In Part 5, you look at the MP4 creation step.

The reason that I ordered the files in this manner was to keep a mental checklist of the order that I was planning for my storyboard for the video. The intro (scenes 1–6) and the end credits (scene 7) are like mini movies. They are only the last a few seconds, but they set and close the scenes for the entire Hot Glass Tango story.

Creating a Storyboard

If you’re planning a lot of scenes for an animation, it’s a clever idea to create a storyboard or a quick sketch so that you know what each scene is about. I usually start creating my scene with pencil and paper, and then I can scan my drawings into the computer and use Illustrator to draw the parts of the character or background. I usually review the stills at this point in Illustrator, and once the drawings are refined, I copy and paste the pieces or objects into an Animate file onto the stage. Then I convert them to symbols and begin the animation process. Refer to Figures 24-9 and 24-10 to see how the scenes could be part of a storyboard.

Reviewing the Files

You can open my FLA files and take a moment to look at the stage, the timelines, and the Library panels to review the symbols and layers (camera, tweens, and armatures) that are used to create scenes. Refer to Figure 24-11.

Note

I did not add any audio to these files because I planned to add that in Photoshop so that I could spread it over all the scenes, including the video footage with no major breaks. So, my files will render without sound. However, for your own projects, feel free to add audio sound effects and voices because they will be rendered as part of the video (.mov).

For this lesson, keep open the scene1_man_zoom_out_r2.fla file.

You can repeat the process that I show you with the other FLA files if you like afterward, since the steps are identical and you may want to practice this on your own a few times, if you don’t have a project to work with.

Note

In Chapter 9, when you rendered the Photoshop video in MP4 files can be quite large. In this case, the largest (.mov) of the eight is about 75 MB. Depending on your computer’s hard drive space, if you have longer animations that you plan to render, and you think the MOV will be over 500 MB, I recommend rendering them on an external drive (as you were instructed in Chapter 9) to avoid your program or computer crashing. However, my files are quite small so if you don’t want to put these files on an external drive, it should be OK because you are only rendering one file at a time, and not collectively.

Exporting the Video

Go to File ➤ Export ➤ Export Video. Refer to Figure 24-12.

As in Chapter 22, make sure that Ignore Stage Color (generate alpha channel) is unchecked, and that Convert Video in Adobe Media Encoder is checked.

Choose Stop exporting ➤ When last frame is reached, and then browse for a location to save your file. In this case, create your own folder in a different location so that you do not override my files.

Or give the exported file a new name, such as scene1_man_zoom_out_final.mov.

Click the Export button.

Opening in Adobe Media Encoder

At this point, do not move on exporting the next FLA file yet, but let Adobe Media Encoder open. The MOV file is added to the Queue panel in Media Encoder. Refer to Figure 24-13.

Do not do anything in Media Encoder yet because you deal with this next step in Part 5. Go back to Animate and export another FLA file to video; each time you do, this file is added to the Media Encoder Queue panel. When you are done, close your FLA file and then close Media Encoder. Media Encoder stores or remembers the linked names of the files in the Queue panel until you are ready to do the final rendering to an MP4 (H.264) format.

You have completed the second project. Now let’s move to the final project, where you create an HTML5 Canvas animation for the website.

Create an HTML5 Canvas Animation

In Chapter 22, Option 6 you reviewed the basic steps to Exporting a Canvas Animation by first checking the File ➤ Publish Settings and the clicking the Publish button in the dialog box. Now let’s work with a file for the Hot Glass Tango website.

Go to the canvas_animation folder and open the scene6_end_canvasan_HTML5_Canas.fla file. I converted this file from the ActionScript 3.0 FLA, scene6_end_canvasan.fla. This is a scene that was out of the original movie intro, but I decided that it would make a good HTML5 Canvas animation to modify and add sound to for my index.html or intro page on the website. So, I chose File ➤ Convert to HTML5 Canvas. Refer to Figure 24-14.

I saved the file to scene6_end_canvasan_HTML5_Canas.fla, which is the file you should have open in Animate.

Take some time to review the file; you will notice that it has a sound layer and sound in the Library panel. Refer to Figures 24-15 and 24-16.

In Chapter 20, when you imported audio. You don’t have a lot of control of the duration or volume that the audio plays at in an HTML5 Canvas file. The sound keeps on playing even if the animation has reached its conclusion. Unlike with video, only when the sound file has reached its conclusion will it stop. In some cases, this might be OK for your intro page, if you want some quiet music playing while the user decides which page to navigate to next. In most cases, make sure that the sound does not run more than 30 seconds to a minute after the animation has stopped, or this could become tedious and annoy the viewer. They might leave the page and not continue to the rest of the website. So, run some tests to determine the sound duration, and then clip it in Adobe Audition CC or Media Encoder CC to the appropriate length.

Publish HTML5 Canvas and OAM File

With your file open, go to File ➤ Publish Settings and use the Default settings. In the Publish Settings dialog box , go to the Basic tab and make sure that Publish JavaScript/HTML is checked. Refer to Figure 24-17.

Make sure to browse an output name and location for the file to output so that you do not overwrite my files in case you need to compare them later. Uncheck the Loop Timeline box so that the animation and sound will only play once.

• Center stage: Check the box and choose the Both setting (in some projects, you may want to leave this uncheck if the animation will not be at the center of the stage).

• Make responsive: Check the box and the Both setting for your responsive site.

• Scale to fill visible area: Keep the box unchecked.

• Include preloader: Keep the box unchecked.

Make sure that the Image, Sound, and CreateJS export settings are checked and have the same folder, as seen in Figure 24-17. Alternatively, you can try “export document as texture”, but I found this made the gradients too raster so I left it unchecked.

You do not need to adjust any of the other tab settings for JavaScript/HTML in this project.

Next, check OAM Package under OTHER FORMATS. Select it so that you can see its options. Refer to Figure 24-18.

Browse where the OAM file will output under. The Output name and location for the OAM and Canvas files should remain the same for now.

Under poster image, choose to generate from current frame a PNG file and transparent should remain in checked. In this case, you should have the playhead on the last frame in the Timeline panel. If you do not, click OK to exit the Publish Settings dialog box to correct this. Refer to Figure 24-19.

Then drag the playhead to the last frame in the Timeline panel and choose File ➤ Publish Settings. Refer to Figure 24-20.

If some settings in the basic tab change, make sure to reset it, as seen in Figure 24-17, and then click Publish to publish the HTML5 Canvas and its related OAM package, which you will insert later on the index.html web page for the Hot Glass Tango website.

The Output panel may give a warning regarding colors if Animate cannot accurately reproduce the gradients because of the type of graphics that were imported Illustrator; but you can ignore the warning for this file.

Only circular (not oval) radial gradients are supported. (7)

If you compare this HTML5 Canvas scene to the video version, you will notice very little reduction in gradient quality.

In the folder that you output the files into, there is an OAM file, a sounds folder containing the sound, and external JS and HTML files.

You can now close the scene6_end_canvasan_HTML5_Canas.fla file without saving changes (File ➤ Exit Animate). You have now completed the third project and are ready to move to Part 5 to work with Media Encoder .

Summary

In this chapter, you reviewed how to create animations for webpages and video clips for the Hot Glass Tango website. This chapter concludes your study of Animate CC. Make sure to review any areas of Part 4 that you don’t understand so that you feel comfortable working with your own graphics in Animate.

In Part 5, you journey to the next junction point in the software maze: Adobe Media Encoder CC. You’ll discover how it can be used to create and export audio and video files.