webexpedition18

Using Adobe Flash CS4, we’ll create a cool Animated Background that we can use for intro.

Final Result Preview

Let’s take a look at what we’ll be working towards:

PART 1

We will explain how to create background for our animation.

Step 1

First of all we need background. It needs to look like some tiled wall. I won’t those tiles to be with strict dimension but to have some abstract look. We can make it in Photoshop. Create New psd file with transparent background and size : 960×960 px. Take a note that size can be adjusted to your needs as like as later applied effects.

Step 2

Use #0e2e52 color for foreground color. Apply Filter-Render-Clouds to fill layer.

Step 3

Apply Filter-Blur-Motion blur

And Filter-Distort-ZigZag

Step 4

In this step we create tiles. We will use these settings but you can try with different values to create more or less tiles.

Step 5

Now duplicate layer 1, set blending mode to overlay and apply Filter-Blur-Radial Blur. Set Opacity to 90 to layer 2.

Final result

Final background can look like this. Changing values in wave effect can produce more tiles.

in this part I explained how to create background for animation. In next part we will use Adobe Flash CS4 to add some drops and some transitions of light.

PART2

In this part we will create drops to slide down the tiles.

Step 6

Open New FlashFile(ActionScript 3.0) document. Set up work paper with Modify-Document use Dimensions 960×960 size also use 25 frames as rate.

Step 7

Insert prepared background to Library (File-Import-Import to Library). When you insert Flash will automatically create symbol-graphic. Give symbol name: “background” and on time line layer also give same name.

Insert symbol “background” on work paper with position x=0 y=0 on layer background. Lock layer.

Step 8

Next we need drops. So create layer drop 1 and paint one drop using Pen tool. Shape can be like this.

Fill shape with #F3F3F3 and convert it to Movie clip (press F8) give name drop_mc and select Movie clip. Use eraser and Brush tool with white color to give more realistic look. Also set APLHA to 80.

Step 9

On time line click on frame 100 on background layer and press F5 to insert key frame. Our show will last 4 sec. Repeat this for drop 1 layer. On drop 1 layer right click and insert symbol drop_mc. Now Insert-Motion Tween to create tween.

So basic rule is that motion is following line between two tiles and we need to adjust motion line for drop to get right path.

Set up on first frame position of drop X=106 Y= -33 (We don won’t to see drop right on start), setup blur on 10, gradient glow transparent to white. We want that our drop to be bigger at beginning and smaller at the end. On frame 100 set position of symbol drop_mc to X=109 Y= 1004. Also set in Motion Editor (Windows-Motion Editor) Scale X and Y to 60. Blur set to 5. Alpha amount 70. Lock layer.

Step 10

Next we will create more drops. Create new layer drop 2. Insert symbol drop_mc and adjust tween. On first frame set position X=237 Y= -22. On last frame X=245 Y= 985.Lock layer.

Create another layer with name drop 3 and insert symbol drop_mc. On first frame set position X=408 Y= -58. We need to set our drop to follow the line between tiles so adjust in Motion editor Skew X =13 degrees and Skew Y= 27 degrees. On frame 100 set position X=405 Y= 985. Lock layer.

Step 11

Create another layer with name drop 4 and insert symbol drop_mc. On first frame set position X=557 Y= -58. We need to set our drop to follow the line between tiles so adjust in Motion editor Skew X =-16 degrees and Skew Y= -24 degrees. On frame 100 set position X=592 Y= 1115. Also set drop to get trough tiles adjusting in Motion editor Skew X =-16 degrees and Skew Y= -24 degrees, Z=9 degrees. Lock layer.

Step 12

Create another layer with name drop 5 and insert symbol drop_mc. On first frame set position X=733 Y= -63. On frame 100 set position X=728 Y= 1117. Also set drop to get trough tiles adjusting in Motion editor. Lock layer.

Step 13

Create another layer with name drop 6 and insert symbol drop_mc. On first frame set position X=855 Y= -45. On frame 100 set position X=728 Y= 1117. Also set drop to get trough tiles adjusting in Motion editor. Lock layer.

Conclusion

This tutorial give some basic animation without actionscript code. Just patience and some time-line tweaking.