DreamWeaver makes a moving advertisement bar

Source: Internet
Author: User
Tags dreamweaver
In many web pages, when you move the mouse over an image, another image is displayed. For this advertisement, you must use the Layer and Timeline (Timeline) functions in Macromedia DreamWeaver, you have to prepare two advertisement images of the same size. Create a mobile advertisement bar.

1. Use DreamWeaver to open any webpage, and use blank pages. Select "Insert"> "Layer" in the menu, that is, a blank Layer1 is displayed in the webpage, and you can name it. Point the cursor to the blank Layer1 and choose Insert> interactive Image> rolover image ", in the pop-up dialog box, insert the images of your ad strips (note that original image indicates the first image, and rolover image indicates the images that appear when you move the cursor to the first image, and you must select preload rolover image) to adjust the layer size so that the layer is as close as possible to the image size.

2. Select "Modify"-> "Timeline"-> "Add object to Timeline" in the menu bar ". After you click, a dialog box is displayed, indicating that only images and layers can be added to the timeline. After the dialog box is confirmed, we select the Layer (click the Layer tag or Layer boundary, or select a Layer using the Layer panel. When a Layer is selected, the Layer boundary displays the resize handle, hold down the left mouse button and drag it into the first channel of the timeline animation bar, that is, the line "1" on the panel, such as 1, 2, 3, and so on, A default 15-frame animation is immediately added to the timeline.

Then, click the key frame marker at the end of the animation bar, select layer Layer1 on the page, and drag it to the animation end point, or, on the "layer property Panel", change the "left L" attribute size of the layer to determine the position of the end frame layer. At this point, the page shows a line from the animation start position to the end position, which is the motion track of the layer. If you want the page to open and start to exercise, you can check "auto play" on the "TimeLine" panel, as shown in Figure 3: press the "->" Arrow in the middle of the timeline to preview the animation directly, or press the F12 key to preview the animation.

Next, we will do a series of beautification work, because this simple linear motion is not beautiful, and the advertisement images have not changed.

3. Changing the attribute of the time bar produces a moving change

(1) rename the animation moving speed when the animation moving distance remains unchanged. Because the number of frames when we pull the layer to the start of the timeline panel is the default 15 frames, we feel a little faster during the preview. To change the speed, we have to change the total number of frames in the animation. Right-click the "First Channel" in the "timeline panel" and choose not to place the end frame. Drag to the right to the desired end frame, for example, 75 frames. Open the mouse. At this time, the empty circle of the ending frame is also moved to the 75th frame. Press F12 to preview the animation. However, we only change the animation movement speed while keeping the length of the animation trajectory unchanged, that is, the number of frames on the timeline. If you change the starting and ending frame layers at the same time, different speed effects will be generated. You can try it on your own.

(2) generate curve motion. The animation above is just a simple straight line movement. If it changes to a curve movement, the aesthetics will be greatly enhanced. Key frame settings are the most important in curve motion (this is easy to understand if you have learned flash ).

A. add a key frame on the "timeline panel animation bar": Select the key frame in the first channel of the animation bar, click the right button, and select "add keyframe ", immediately add a key frame at the insertion point.

B. Move the layer at the added key frame: after the key frame is selected, select the layer on the page and move the layer to the desired place. The straight line changes to a curve. You can add several more key frames and move the layer to smooth the generated curve. Press the F12 key to preview. Is the curve much better than the previous line?

Appendix: in the process of using Dreamweaver, if you want to use layer for dynamic advertisements at one time, you cannot insert layers and tables in any way, but neither reinstallation nor localization is available, my colleagues have used it and are learning the English version. So I wonder where the settings are modified? After finding all the settings, you will find that you only need to change "table view --> layout view under the view menu to standard view" to insert layers and tables.
<

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.