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 ...

Get Creating HTML5 Animations with Flash and Wallaby now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial