How to make a moving advertising bar

Advertising Editor's note:The content of the article is the Chinese version of Dreamweaver 4.0, with a map of the English version of the Dreamweaver 4.0

You on the Sina homepage will see it on the page there is a floating advertising bar, the mouse moved up, will also become another publicity pictures. This banner does not occupy the space of the page, it is independent on the page, it is really a good way to publish advertising bar. So how exactly is this moving ad bar made? Below, please follow me step by step to learn to do, after reading the textbook, you will do it yourself.

To do this banner, to use the Macromedia Dreamweaver in the layer (layer) and timeline (timeline) function, but also to prepare two basic size of the same advertising picture. We have the latest version of DreamWeaver4.0, for example, to make mobile ad strips. If you do not have this software, please go to www.4u2v.com to find it.

One, with Dreamweaver open any one page, blank page also can. In the menu, choose Insert Inserts-> layer layer, you can also name the page if you see a blank Layer1. Then the cursor point to the blank Layer1, select Insert Insert-> image, insert the first picture of your banner, adjust the layer size, make the layer as close to the picture size, and set the picture link. Then move the layer to the starting position of the animation.

Second, in the menu bar Select the "Modify Modify"-> "Timeline Timeline"-> "add objects to the Timeline add object to Timeline." After clicking, the pop-up dialog box tells you that only the image and layer can be added to the timeline. When the dialog box is determined, we select layer (click the layer mark or layer boundary, or use the layer panel to select a level, when a layer is selected, the layer boundary will display the resize handle, hold down the left mouse button, drag into the Timeline animation bar of the first channel, that is, the Panel on the vertical writing 1,2,3, etc. "1" that line, A default 15-frame animation is added immediately inside the timeline. As shown in Figure 1:

Then, click the last keyframe marker in the animation bar, select the layer Layer1 in the page, drag it to the end of the animation, or change the layer's left Lproperty size in the Layer's property panel to determine the position of the end frame layer. At this point, the page shows a line from the beginning position of the animation to the end position, which is the trajectory of the layer. To get the page to open, it starts to move, tick the "Auto play AutoPlay" button on the Timeline Timeline panel, as shown in Figure 2: If you press the "->" arrow in the middle of the timeline, you can preview the line animation directly, or press the F12 key preview.

Next, we have to do a series of landscaping work, because this simple linear motion effect is not beautiful, and advertising pictures have not changed. Change the properties of the time bar to produce mobile changes

(1) in the animation moving distance unchanged, the name of the animation moving speed. Because we pull the layer into the Timeline panel at the beginning of the frame number is the default 15 frames, in the preview of the above feel a bit faster. To change the speed, we have to change the total number of frames in the animation. Left-click to select the "First Channel" end frame in the timeline panel, drag right to the end frame you want, such as 75 frames, release the mouse. At this point, the empty small circle of the ending frame is moved to the 75th frame. Press F12 to preview, the animation movement speed obviously slows down. But note that we just keep the animation trajectory of the length of the same situation, change the speed of animation movement, that is, the number of frames on the timeline. If you change the position of the starting and ending frame layers at the same time, there will be various speed effects that the reader can try.

(2) The motion that produces the curve. The animation above is simply a straight line motion, and if the movement of the curve is changed, the aesthetic degree is greatly strengthened. The most important thing in curve motion is the setting of key frame.

a. Add a keyframe to the timeline panel animation bar: Select the first channel of the animation bar you want to add a keyframe, control-click, and immediately add a keyframe at the insertion point. Or right click on the first channel to select the animation bar you want to add keyframes, in the Pop-up shortcut menu select "Add key frame Add Keyframe", you can also add keyframes.

b. Move layers at added keyframes: Select the layers in the page and move the layers to where you want them, with the assurance that the key frames that you added later are selected. At this point the line changes into a curve. You can add a few more keyframes and move the layers so that the resulting curve moves more smoothly. Press the F12 key preview, the curve effect is not better than the previous line effect?

C. Directly through the drag layer, generate the path, produce animation. -> Select the layer from the initial insert layer and keep the layer selected-> move layer to animation start-> Open Menu modify modify-> timeline Timeline "->" Recording layer move path record path Layer "-> drag layers on the page to create the desired motion path-> release the mouse at the end of the animation, an animation bar is automatically generated in the timeline, and a number of keyframes are defined.

Four, add mouse trigger attribute, produce the alternating change of advertisement picture

The mouse triggers various properties that can produce a variety of changes. Here we want to use the onmouseout and onmouseover two attributes.
Open the Menu window Windows-> Select behavior Behaviors-> pop-up behavior window-> the advertisement picture in the selected layer-> click "+" in the "Behavior" window and select "Swap image" in the pop-up menu.

In the Swap Image dialog box, navigate to the path where you choose your advertising picture-> in the Swap Image dialog box, the system defaults to a "onmouseout restoration image" before it is ticked-> press "OK" button directly.

The Behavior Status window is more than the onmouseout and onmouseover two mouse triggers events that we mentioned earlier. Press F12 Preview, move the mouse to the picture, see if the picture changes? Move the mouse again, and revert to the original picture. This simple picture alternation behavior is complete.

V. Details of the final thought

1. about the path length. Assuming the animation is from the top, the page height more than one screen, if the path is not long enough, then the page is quickly browsed to the next screen when the above layer of animation can not see. It should be best to draw the path to the bottom of the page, and then set the timeline animation bar so that the layer can slowly move up the path down.
2. How to set loop playback. DreamWeaver4.0 By default is constant loop, and in DreamWeaver3.0 you can tick in the timeline status bar. If you want to cycle only a few times, you edit the behavior's parameters to set the number of loops: Double-click the frame in the behavior channel that you want to add behavior to, pop up the behavior window, click "+" in the Behavior window, select "Timeline Timeline" in the pop-up menu, and then select "Going to Timeline frame go to Timeline Frame, pop-up dialog, and enter the number of loops you want in the Loop Times Loop time Entry field (the default is to leave blank to indicate a constant loop). If you want looping playback not to start at the first frame, you can enter the frame number (default is frame 1th) in the Jump to frame enter field.

See here, you should be able to create a moving advertising bar. With practice, you'll find more detail about the timeline, behavior, and layers. www.4u2v.com have more relevant articles, if you are interested, please continue to visit.

Turn from: Dynamic Network production guide www.knowsky.com