Using Dreamweaver to realize the effect of rain flowers

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.