Creating HTML5 Animations with Flash and Wallaby

Chapter 4. Using Wallaby

Before getting started, remember that your document file must be produced with Flash Professional CS5 or later in order for it to work.

If you haven’t downloaded Wallaby yet, do so now. You can download an installer for either Mac OS or Windows from the Adobe Labs website (http://labs.adobe.com/technologies/wallaby/); once you’ve downloaded the installer, run it.

Converting Animations

Now, in order to convert your animation, open Wallaby and click the Browse button to locate your Flash document. Once you’ve selected it, go ahead and click Convert (see Figure 4-1).

Wallaby will ask you where you want to save the resultant .html file. This is slightly misleading because Wallaby will actually be exporting the .html file and all the additional files necessary to power your animation. As such, it makes sense to create a new folder for your animation. This saves you from having to hunt down each of Wallaby’s files in a cluttered folder.

Once the export is complete, you can open your folder and you should see something similar to Figure 4-2.

We’ll cover how to actually use these files in your site in the next chapter, but for now, let’s look at the individual files:

jquery-1.4.2.js

JQuery is a JavaScript library that’s used for creating the different aspects of the animation. This is always included in the main .html file.

marquis_assets

This folder contains the individual assets needed for the animation, in SVG format.

marquis.css

This file contains all the CSS information for the animation.

marquis.html

This is the animation’s main .html file containing the necessary HTML markup for the animation.

marquis.js

All of the generated JavaScript code that performs the animation is in this file.

marquis.log

This is a logfile containing information about the export process.

Each of these files is necessary to power the animation. Be sure to keep them within the same folder. If you decide to move them around, that’s fine; just make sure you update the file references in the .html file to reflect the changes, or the animation won’t work.

Figure 4-1. A Flash document ready for Wallaby to convert

Figure 4-2. The resultant files exported for the animation

Preferences

If you click the Preferences button in Wallaby, you’ll get a couple of options—specifically, Preview in Default Browser and Enable Logging (see Figure 4-3).

Figure 4-3. Wallaby Preferences

Both of these options are fairly self-explanatory. If you deselect Preview in Default Browser, your animation will not automatically open after the conversion is complete. Enable Logging, if selected, will generate a logfile in the export directory containing information about the export process. This can be useful for taking a close look at a project that may be generating a lot of errors. If no errors exist, this logfile will simply log the details of your successful export (see Figure 4-4).

Figure 4-4. A successful export log

Status

During the export process, the Status area will basically tell you when the conversion is in process and when it has finished. If there were errors in the project, the Status area will reflect this; otherwise, it will show a success message.

Errors and Warnings

All errors and warnings during the export process are echoed to the Errors and Warnings text area. When you are developing your animation this area is critical in terms of telling you whether you’ve used an unsupported feature in your animation project.

Whereas errors will prevent the project from exporting, warnings will allow the project to export. Some warnings can potentially be overlooked, but make sure you check your animation and ensure that the results are as expected. For example, if I were to try to convert a project with lines with a line style of hatched I would get a warning informing me that this specific line style is unsupported (see Figure 4-5). If this line style were critical to the design I wanted for the animation, I might want to consider creating that effect in a way that is supported by the exporter. If it didn’t matter, I could just disregard this warning.

Figure 4-5. A warning about an unsupported feature

All told, the Wallaby tool is very basic and easy to use. If you’ve been careful to avoid any unsupported features of Flash and you’ve periodically kept an eye on the performance of your animation while you were building it, you should be able to export your final animation without a hitch.

Next we’ll look at how to incorporate your animation into your existing content or site.