O'Reilly logo

Creating HTML5 Animations with Flash and Wallaby by Ian L. McLean

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 2. Creating a Basic HTML5 Animation

For your first animation you will build a simple scrolling text marquis. This will be very similar to the old HTML <marquis> tag, and while it isn’t exactly fancy, it’s a perfectly simple example to start with.

Once you’re done, you’ll need the Adobe Wallaby application to export the animation. If you haven’t installed it already, take a moment to download it from the Adobe Labs website (http://labs.adobe.com/).

Creating a New Project

Before you begin building your animation, you’ll need to create a new project in Flash. Select FileNew to access the New Document window (see Figure 2-1).

The New Document window
Figure 2-1. The New Document window

Here you’ll see several different options for creating a new document. For our purposes, we want to create an ActionScript 3.0 document, so select ActionScript 3.0 and click OK.

Flash will open a new project where you’ll be presented with a blank canvas where you will draw and animate your text.

Creating the Text

At this point, you’re ready to create your text, so go to the toolbar and select the Text tool (), as shown in Figure 2-2).

The Text tool on the toolbar
Figure 2-2. The Text tool on the toolbar

With the Text tool selected, go ahead and click anywhere on ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required