• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 9. Creating Animations > Exploring on your own

Exploring on your own

In this part of the lesson, you'll use a shortcut to add a simple animation to a page using a graphic in a floating box. You'll use the Features page from the matchbox.site that you worked with earlier in the book. We've added the image and placed the floating box for you. You'll create and record the animation.

Open the file features_fb.html in the folder Lessons/Lesson09/09Start/Extra/.

Scroll down the page if necessary until you see the list of features below the drawing of the match.

Notice that we have added a floating box containing an image. You'll now add motion to the floating box so it moves from item to item in the list when a viewer views the page.

Move the mouse pointer over an edge of the floating box so that the pointer turns into a hand pointing left. Click to select the floating box. When the floating box is selected, the Inspector becomes the Floating Box Inspector.

Click the Record button () in the Floating Box Inspector to begin recording your action.

Move the pointer over the floating box until the hand points to the left, and then drag the floating box in the movement pattern you would like the viewer to see. (We moved the box in arcs so the match head pointed from feature to feature in the list.) Release the mouse to stop the recording.

Choose File > Save.

Resize the document window so that you can see the full page.

Click the Preview tab () in the document window to view the finished motion. Click the Layout tab to return to the Layout Editor.

Open the DHTML TimeLine Editor by clicking the Open DHTML Timeline Editor button () at the top of the document window. Notice that your animation has been recorded automatically in the DHTML Timeline Editor. You can edit the action in the Timeline Editor.

Close the document when you are finished.

Adding a simple animation can be that easy.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint