The method of using Dreamweaver to realize the rain effect on the Web page

Under the light blue sky, a flower petal flutters with the wind, slowly floats in the screen. You must say this effect can be achieved with flash. In fact, with Dreamweaver can also be very easy to achieve!

Dreamweaver's ability to surpass FrontPage as a web designer's preferred design tool is the powerful design feature of DHTML, which is actually a kind of DHTML. But with Dreamweaver, you don't have to write lengthy code that can be easily handled in a few drag-and-drop windows in the DW.

First, use firework or imageready software to produce several animated GIF petal pictures. Take ImageReady3.0 as an example. Press CTRL + N to create a new file, the size of 100*100, background color can be set according to the context of the Web page. Press CTRL + Shift + N to create a new layer, name Flower1, and use the sketch tool (polygonal Lasso Tool) to sketch out the shape of a petal, as shown in Figure 1. Then set the foreground color to pink (the color code is: ff99ff), press Edit/fill to fill, and then right-click on the Flower1 on the level version and select Layer Style/stroke, as shown in Figure 2. Select a color that is slightly darker than the pink in the pop-up stroke panel, (the color code is: C764B4), size is 1, so the petals are stroked and look more realistic. Such a petal was made.

Now let's get the petals moving. Copy the Flower1 one layer, press the right button on the layer, and select duplicate Layer. The name is Flower2. Open the ImageReady animation panel, the operation is: Window/show Animation, appear as shown in Figure 3 Animation panel. Press the bottom row and the second button to create a new animated shadow. Return to and select the position of the first shadow and hide the Flower2 layer on the Level Panel. The action is to click the eye in front of the layer, as shown in Figure 4.

Then in the animation panel, select the position of the second shadow, back to the level board, showing the FLOWER2 layer, hide the flower layer. Then select the Flower2 layer, press Ctel + T, when the petals in the Free transformation State, you can use the mouse to move up and down to change the shape of the petals. As shown in Figure 5.

Make a small change to the petals of the FLOWER2 layer shown in the second shadow with a free transform. Then use the method described above, create a new third shadow and Flower3 layer, and then use the free transform to do some small changes, in turn, can do about 6 levels, pay attention to the last one and the first shadow continuity. Only relative layers are displayed in each shadow, and the remaining layers are hidden.

When you're done, in the animation panel, hold down the CTRL key, select all the shadows, and then press the right button at the 0 sec to select the interval between each shadow, not more than 0.1 seconds is recommended. The animation of such a petal is completed. You can press the play button on the screen (the triangle) to watch the animated petals you make. Petals irregular in situ shift movement, according to the above method to do several large, in the 100*100px,90*90px around, used for the near petals, but also make a few small, in 60*60px around, for the distant petals. You can do an animation in the ImageReady, and then use the Flip function (Edit/transform/), so that the image of different angles of the flip, there are different angles of change, so in the final effect, you can avoid the single petal.

Open Dreamweaver, press CTRL + N to create a new HTML document. Then press Insert/layer, insert a layer, name "Flower1", press Insert image in the layer, insert one of the pictures we just made, and click to select the layer as the size of the picture. When selected, it must be the image of Figure 6 is selected the layer, determine the selected layer instead of the picture, and then select Modify/timeline/add object to Timeline, when the layer will join the waiting line, this time line will appear two hollow period-like circle, Connected with a straight line, the two-circle representation is the key shadow that determines the trajectory of the petal movement. As shown in Figure 7.

To determine the position of the red line in the first grid, and then drag the layer to the upper right corner of the Dreamweaver main panel, this step is to confirm the beginning of the petals falling. Then the final grid of the Flower1 layer in the waiting line is pulled to the position of grid 60th, and then the line is positioned in the 60th grid, back to the DW panel to pull the flower1 layer to the lower-left corner of the screen, and this step is to determine the end of the picture falling. Note that when you determine the starting and ending points, be sure to see the position of the red line, the position of the red line represents the current operation of the first few shadows. The start and end shadows must be key shadows. Then select the upper AutoPlay and loop, as shown in Figure 8, which means running automatically and looping. At this point you can press F12 to preview and you can already see the petals moving along a straight line.

Let's make the movement of the petals appear softer, without a rule. In the Waiting line panel, click on the 15th shadow, confirm the lines in the line in the 15th position, press the right button, select Add Keyfreme, as shown in Figure 9, when the main panel layer will automatically move to the 15th grid should go to the position, drag the layer to other places (can be arbitrary drag, Depending on how you want the petals to move, this step is to make sure where the layer should be when it moves to the 15th shadow. Then move the red line to the 30th and 45th positions repeat the above action, and then press F12 Preview, the petals are irregular move. Again, the insertion of the waiting line must be a layer rather than a picture, otherwise the petals will not move.

In accordance with the above approach, we add a layer, insert another slightly smaller picture in the layer, repeat the above action, but the layer can change the trajectory of the movement, only need to change the edge of the selected key shadow, the layer in the main panel position on it. By analogy, generally add to the FLOWER10 layer above the appearance, only the sky rain effect.