Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Dreamweaver to achieve the effect of rain on the web page", the content of the explanation in the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use Dreamweaver to achieve the effect of rain on the web page"!

Under the light blue sky, a blossoming petals floated down with the wind, slowly floating in the screen. You must say that this effect can be achieved with FLASH. In fact, it can also be easily realized with DREAMWEAVER!

The reason why Dreamweaver can surpass Frontpage and become the preferred design tool for web designers lies in its powerful design function for DHTML. The effect mentioned above is actually a kind of DHTML. But with Dreamweaver, you don't have to write lengthy code, you can easily do it with a few drag-and-drop in the DW window.

First of all, several dynamic pictures of GIF petals are made with software such as Firework or Imageready. Take ImageReady3.0 as an example. Press Ctrl+N to create a new file with a size of about 100mm / 100. the background color can be set according to the background of the web page. Press Ctrl + Shift + N to create a new layer, named Flower1, and use the drawing tool (Polygonal Lasso Tool) to sketch the shape of a petal, as shown in figure 1. Then set the foreground color to pink (color code: FF99FF), press Edit / Fill to fill, then right-click on the layer version of Flower1, and select Layer Style / Stroke, as shown in figure 2. Select a slightly darker color than the pink one in the pop-up Stroke panel (color code: C764B4), and Size select 1 so that the petals are stroked and look more realistic. Such a petal is finished.

Now let's get the petals moving. Copy the Flower1 to a layer, right-click on the layer, and select Duplicate Layer. Name it Flower2. Open the animation panel of Imageready and operate as follows: Window / Show Animation, and the animation panel shown in figure 3 appears. Press the penultimate button in the bottom row to create a new animated frame. Go back to and select the position of the first shadow box and hide the Flower2 layer on the layer panel. The operation is to click the eye in front of the layer, as shown in figure 4.

Then on the animation panel, select the position of the second shadow box, go back to the layers panel, show the Flower2 layer, and hide the Flower layer. Then select the Flower2 layer, press Ctel + T, when the petals are in a free transition state, you can use the mouse to move up and down to change the shape of the petals. As shown in figure 5.

Use the free transformation to make a small change to the petals of the Flower2 layer shown in the second frame. Then use the method described above to create a new third frame and Flower3 layer, and then use free transformation to do some small changes, which can be done about 6 layers in turn. Pay attention to the continuity between the last frame and the first one. Only relative layers can be displayed in each frame, and the rest of the layers should be hidden.

When done, in the animation panel, press and hold the Ctrl key, select all the frames, and then right-click at 0 sec to select the interval between each frame. It is recommended that the interval between each frame should not exceed 0.1s. The animation of such a petal is completed. You can press the play button (the triangle) on the animation panel to view your animated petals. Petals move irregularly in place, according to the above method, make several large petals, about 100px90px, for near petals, and also make a few small ones, around 60*60px, for distant petals. You can do an animation in Imageready, and then use the flip function (EDIT / Transform /) to flip the picture at different angles, resulting in changes in different angles, so that the singleness of the petals can be avoided when doing the final effect.

Open Dreamweaver and press Ctrl + N to create a new Html document. Then press Insert / Layer, insert a layer, name it "flower1", press Insert Image in the layer, insert one of the pictures we just made, make the size of the layer the same as the size of the picture, click to select the layer (the layer must be the appearance of figure 6 when selected), make sure the layer is selected instead of the picture, and then select Modify / Timeline / Add object to Timeline, and the layer will be added isochron. At this time, two hollow period-like circles appear on the isochron, which are connected by a straight line, and the two circles represent the key shadow grid, which determines the trajectory of the petal movement. As shown in figure 7.

Determine the position of the red line in the isochron in the first grid, and then drag the layer to the upper right corner in the main panel of the Dreamweaver. This step is the starting point to confirm that the petals fall. Then pull the last frame of the flower1 layer in the isochron to the position of grid 60, then determine the position of the red line in grid 60, go back to the DW panel and pull the flower1 layer to the lower left corner of the screen, this step is to determine the end point where the picture falls. When determining the starting point and end point, be sure to see the position of the red line. The position of the red line represents the number of frames you are currently doing. The starting frame and the ending frame must be the key frames. Then select the Autoplay and Loop above, as shown in figure 8, which means autorun and looping. At this point you can press F12 for a preview, and you can already see the petals moving in a straight line.

Let's make the movement of the petals a little softer and more irregular. In the isochron panel, click in the 15th shadow box to confirm that the red line in the isochron is in the 15th grid, right-click, and select add keyfreme, as shown in figure 9, the layer of the main panel will automatically move to the position where the 15th grid should be, and drag the layer to another place (you can drag as much as you want, depending on how you want the petal to move) This step is to confirm where the layer should be when it is moved to the 15th frame. Then move the red line to the position of the 30th and 45th grid to repeat the above action, and then press F12 to preview, at this time the petals move irregularly. Again, it must be the layer, not the picture, that inserts the isochron, otherwise the petals will not move.

According to the above practice, we add another layer, insert another smaller picture in the layer, and repeat the above action, but the trajectory of the layer movement can be changed, just when the edge is selected in a key shadow frame, the position of the layer in the main panel is fine. By analogy, generally added to the Flower10 layer above the appearance, there is a rain of flowers all over the effect.

Thank you for your reading, the above is the content of "how to use Dreamweaver to achieve the effect of rain on the web page". After the study of this article, I believe you have a deeper understanding of how to use Dreamweaver to achieve the effect of rain on the page, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.