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 5. Using Wallaby Animations

After you’ve exported your animation, you probably will want to incorporate it into an existing page somehow. If a JavaScript guru is available to help you, great; otherwise, you’ll need to dig into the HTML and JavaScript and do a quick transplant of your animation code into your existing page.

Placing the Animation

Before we get started, keep in mind that, although your content will likely be more complex than this, the process we’re about to cover will be more or less the same regardless of the content’s complexity.

Now, even though the “splash” page is a widely known faux pas these days, for the sake of our basic example let’s say that you want to make one anyway. With that in mind, let’s assume you’ve created the following HTML document named enter.html with a link that says “Enter site”:

enter.html
<!DOCTYPE html>
<!-- Created with Adobe(R) technology -->
<html>
  <head>
    <meta charset="utf-8"></meta>
  </head>
  <body>
    <a href="main.html">Enter Site</a>
  </body>
</html>

In order to finish the page, you want your animation to appear above the “Enter Site” link on this page. We’ll use our scrolling marquis example from Chapter 2 as the animation to be placed.

Begin by copying the files necessary for the animation into the directory containing your existing HTML content. Let’s look at the files that were exported from our scrolling marquis animation, in Figure 5-1.

Figure 5-1. Exported marquis animation

Copy the marquis_assets, marquis.css, and marquis.js ...

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