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

Lesson 16. Animating with Timelines > Changing Image Properties

Changing Image Properties

Timelines allow you to change the source properties of an image.

1.
Place the insertion point in the document window. Insert spacer.gif from the Lesson_16_Timelines/Images folder and with the image still selected use the Property inspector to change the size to 437 for width and 40 for height. Click the Align Center button and name the image title by using the image-name text box on the upper left corner of the Property inspector.

When you insert an image, it is automatically selected when Dreamweaver inserts it into the page. If you have inserted a spacer image, it is easiest to immediately change the width and height to the necessary values before clicking anywhere else in the document window, which would cause the image to be deselected.

2.
Click the first frame in the Timelines panel by clicking the 1 in the row of frame numbers. Select the spacer image in the document window and choose Modify > Timeline > Add Object to Timeline.

The image is added to the timeline; the title animation bar appears.

NOTE

If you do not name your images, they will appear in the Timelines panel with their default names: Image1, Image2, and so on. You named images when you worked with Behaviors in Lesson 5.

3.
Click the last keyframe on the title animation bar and move it to frame 60.

Frame 60 is the ending frame of the animation. In this exercise, the image source should change at that point. If you wanted the image to change at a different point you would need to add a keyframe to the title animation bar at the desired frame.

4.
On the Property inspector, click the folder icon to the right of the Src text field to browse for a new image source. Select the ship_header.gif image located in the Lesson_16_Timelines/Images folder.

With the last keyframe in the title animation bar still selected at frame 60, you should see the ship_header.gif image appear in the document window. Using a spacer image as the initial image as you have done in this exercise is one way to make the image appear. You can also achieve this effect by changing the visibility of a layer, which you will do in the following exercises.

5.
Command-click (Macintosh) or Ctrl-click (Windows) on the title animation bar at frame 15. On the Property inspector, click the folder icon to the right of the Src text field to browse for a new image source. Select the ship_title.gif image located in the Lesson_16_Timelines/Images folder.

You can save and preview the document. When you are done, close the ship.html file.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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