Make the night rain with flash

Source: Internet
Author: User
Tags delete key extend final
In some wonderful flash movies can often see the effect of drizzle, give a warm and romantic feeling. This example makes rain drops falling from the night sky, splashing and rippling effects.

The final effect of the night rain as shown in Figure 1:
Fig. 1 The final effect of night rain
   1,Start Flash first, set the movie stage size to 450 pixel x280 pixels, and the background color of the movie is Dark Gray (#282C3E).

   2,In order to make the rain more realistic, we first make the rain fell to the ground formed RipplesEffect. Create a new movie clip symbol, named Rain drop Ripple, after entering the editing area of the component, draw a long oval with the Ellipse tool, double-click the outline of the oval with your mouse, press the DELETE key on the keyboard to remove the outline, and then open the Color mixer panel. Select the radial gradient fill in the Fill style Drop-down list, and then add 3 sliders below the color below, set the slider color to white on both sides, and set the middle slider to black, as shown in Figure 2;
Figure 2 Setting the fill color

The gradient of the oval fill is then followed by the set fill color, as shown in Figure 3:


Figure 3 Filling the ellipse with color
   3,Inserts a keyframe at frame 5th and 45th of the timeline, respectively. Select the ellipse of frame 45th, use the Zoom tool to enlarge it appropriately, and set its transparency to 0 in the property panel, then go back to frame 1th, narrow the oval properly, and then set the transparency of the ellipse in this frame to 0, Then set up the shape gradient animation effect from frame 1th to 5th frame, 6th frame to 45th frame, the timeline as shown in Figure 4;


Figure 4 Setting shape gradient transition animation

In this way, the ripple effect of the watermark from scratch and gradually expand and dissipate is realized.

  4, the next to make the effect of rain drops, and then combined with just the production of the watermark effect, it reached a more realistic effect of the rain. Create a new movie clip symbol, named Rain drop, and after entering the component's editing area, create a new two layer, named Rain Drop and Ripple, which sets the effect of raindrops falling in the layer rain drop and sets the watermark diffusion effect in the layer ripple.

  5, back to the layer rain drop, first use the Oval tool to draw a small oval, and then use the Arrow tool to adjust it to the small down large raindrop shape, and as shown in Figure 2 the Fill color settings to fill the gradient, as shown in Figure 5;


Fig. 5 Making Raindrops

  6, extend the timeline to frame 40th, select the Raindrop for this frame, use the arrow tool to move it vertically downward for a distance, and then set the raindrop transparency of this frame to 0% to achieve a raindrop fade effect, and finally set the 1th frame to the 40th frame for the shape gradient effect, the timeline as shown in Figure 6:


Figure 6 Setting the gradient effect

  7, back to the layer ripple, insert the key frame in frame 25th, put the watermark effect component rain drop ripple onto the stage, set its position to the lowest drop of raindrops, then extend the timeline to frame 70th, and finally insert a keyframe at frame 71st, Add Action:removemovieclip ("") to this frame; the timeline is shown in Figure 7;


Figure 7 Timeline
   8,Go back to the main scene and start laying out the main scene. Rename the original default layer in the scene to BG, and then use the Rectangle tool to draw a rectangular rectangle at the bottom of the stage, and then set the fill color in the mixer panel as shown in Figure 8 as the ground for raindrops to fall:


Figure 8 Setting the fill color

The RGB value for the left color block is (0,11,53), the RGB value of the middle color block is (18,44,71), the RGB value of the right color block is (23,55,104), and the rectangle is populated, as shown in Figure 9:


Fig. 9 Making ground

Also use the rectangular tool to draw a large rectangle on the ground, covering the rest of the stage as the night sky, and following the gradient in the settings shown in Figure 10:


Figure 10 Setting the fill color

The RGB value for the left color block is (60,70,90), the RGB value of the right color block is (0,0,0), and the rectangle is populated, as shown in Figure 11:


Figure 11 Setting the night sky

  9 . Create a new layer named Rain, drag the component rain drop onto the stage, set its instance name to Raindrop in the property panel, create a new layer on top border, and draw four extensions on the stage four weeks as the boundary line of the stage.

Finally create the new layer action and add the following action on frame 1th:

n = number (n) +1;//define and initialize variables
SetProperty ("Raindrop", _x, -30+math.random () *452);
SetProperty ("Raindrop", _y, -35+math.random () *33);/Set the coordinates of the object raindrop to a random number
Duplicatemovieclip ("Raindrop", "", n); Copy objects continuously Raindrop

Add Action:gotoandplay (1) to frame 2nd;

The final timeline as shown in Figure 12, such a beautiful night sky rain effect is done.


Figure 12 The last timeline    Click here to download the source file learning

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.