Create real water effects with Flash CS4 & ActionScript 3.0

In this Flash CS4 tutorial you will learn a advanced technique called perlinNoise to create a realistic water effect into any image. We will show you how to apply it in two different situations, one in a river, creating the water effect in whole image, and the other one in a waterfall using a more complex process as it will reproduce the effect in a specific area.

Final Result:

Before Start:

This example will use some advanced action script elements like displacementMapFilter, perlinNoise and bitmapData from Action Script.

The perlinNoise filter is one of the most versatile filters, normally used to give some realism to animation but also one of the more complicated to work with, i will not explain how-to work with him, for that you have the very good documentation following the links:

Requirements

Pre-Requesites

Understand some of the basic concepts of working with bitmaps and bitmap data. Read the links written in “Before Start“.

Some imagination to produce your water effects.

Step 0 – Create a new Flash Project

Open Flash CS4 and create a new Flash (Action Script 3) project.

Step 1 – Creating first example

Import the image “water.jpg” into the stage.

Goto menu File->Import->Import into stage and select our water.jpg image (distributed in images.zip file) The image is automatically placed into the stage, just center it on your screen, like the bellow example.

Name the actual layer to image. To do this, double click on the Layer 1 name, and change it.

Next, we need to transform our image to a movieclip to receive the filter/water effect, just click on the image on stage, and then right click on it; select Convert to symbol, name it backImg. Without doing anything, go to the panel properties, and write the instance name to backImg1

:

Step 2 – Create a layer for actions

Click on the new layer button (like the following image, on yellow) and name it actions.

You should now have two separated layers:

Step 3 – Lets write some code

This is where the tutorial can become a bit complicated to understand, but i will explain line by line. For now select the layer actions, and click F9 key on keyboard, actions panel will now open, just write this code on it:

Are the base points to be used to move the perlinNoise effect, these are defining the perlinOffset

We now add the EventListner to repeat the position of filter and provide us a real time animation, because the application speed is 25 frames per second (default, you can change this on main stage properties) we have to ‘replace’ the perlinNoise and displacement filter with a new one with some minor changes to the perlinNoise offset, that will result in a soft animation of the perlinNoise map.

Here, in every enter frame event we adjust the position (offset) of our perlinNoise, this will produce a smooth and cool move animation.:

perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;

Play with these values to change direction of the map movement

We now rebuilt the perlinNoise of our bitmapData:

bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset)

On perlinNoise we have some parameters, just play with them but take care with the third parameter (number of octaves) these are the number of perlinNoise “copies”, they are re samples and re sized parts of the perlinNoise effect, useful to improve the realistic effect. Bigger the value, bigger the memory use. Can see full PerlinNoise parameters here.

And finally we re-apply he filter:

backImg1.filters=[disp];

Well… that’s it! Run the project!

Step 5 – Creating a waterfall example

In the following steps we will create a waterfall effect, grab my waterfall image by saving bellow image.

The unique thing that we need to apply in the perlinNoise filter is the “falling water” right? (if we apply to all image, will get a mess up!) Well we need to create a copy only of the water (not very precise, to do that open for example the photoshop and with lasso tool create a second layer only with the water falling, i will not covering it as it is not the aim of this article), just grab my already separated elements:

back.png

and fall2.png

Step 5.1. – Place both images on place

Create two layers (as shown previously) between the image and actions layers. Move our previous water image to the top of stage and put on the new bottom layer the back.png and on the top new layer put the fall2.png, put them at the same position so they became only one image. The waterfall needs to be the top of the other at the correct position, avoid this:

incorrect

correct

Convert them to movie clips, one called back and the other waterfall, name both instances (parameters window) with respective waterfall and back names (Very important), then we just need to repeat the same actions but with the water movie clip, as shown on the following code.

Mário Santos, Portuguese and actually working in Luxembourg on Internet/Intranet Development (some time as free-lancer), is an Adobe Flex 3 with AIR Certified Expert. Works with Flex daily for the past 2 years and with php for almost 8. As a Flex 3 addicted, he have already published for free on his blog 2 e-books about Flex and Action Script 3 written on his native language (PT_pt). Last 8 months started to work also with advertising and design for print. You can follow him on his twitter, facebook or linkedin.

Ever wondered if you could visualize your website in 3D? Well, here’s one such Firefox extension that allows you to do so. Tilt is a Firefox add-on that lets you visualize any web page DOM and provides the relationship between various parts of a website in 3D.

User Interface Design in C# Windows Form Application From Scratch In this C Sharp tutorial you will learn user interface design in C# application. This step-by-step tutorial will help you deeply understand…

In this second part article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

In this article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

Today we start a 9 part tutorial series on creating a Shoot’em’Up game. We will cover all the necessary topics to create it from scratch, which will help you to understand and apply these guidelines to other projects. Ath this first part. we look at getting the Away3D engine up and running by creating a UIComponent that will contain and initialize the necessary Away3D components.

Flash it’s a powerful application and can be really complex, but even beginners can create a cool menu for demonstration or for use in a personal site. The menu that we will create is simple, but the swirl animation is something that you don’t see everywhere, for that I’ve decided to explain one way to make an animation of growing swirls without any Action Script code.You will also learn how to import artwork from illustrator where I’ve pre-made the graphics, the work is very simple and the result will be very cool.

Possibly the hottest thing to hit the Flash community since the advent of several excellent 3D engines is the recent debut of 3D physics engines. Here we’ll examine a way of using one of the more popular 3D engines, JiglibFlash, in conjunction with the prominent 3D engine Papervision3D to create a bowling game.

Comments (39)

Yes, is true, you can reduce the amount of cpu usage by reducing the number of octaves in the perlinNoise parameters, but yes, when using more than one effect (like this example) flash will “burn” your cpu and memory usage! :/

This is great works wonderfully thank you. I was just wondering, have you ever tried applying a preloader to this type of animation? For some reason, she won’t run if we export everything at frame 2. I bet it has something to do with the images… Any ideas?

One question. How can we make it so it scales 100% at the browser window? What I want to achieve is making an image with a calm sea to have a small movement like waves. And this image will be scaled to 100% according to each user’s resolution…

Hello. Beautiful effect. To reduce CPU usage you may try to reduce flash movie’s frame rate. In my situation, originally my movie was 30 frames/sec and CPU usage was 100%. I reduce it to 10 frames/sec and CPU usage had reduced to 45 %.

This is a very intriguing post, I was looking for this knowledge. Just so you know I discovered your blog page when I was doing research for blogs like mine, so please check out my site sometime and leave me a comment to let me know what you think.

Really nice effect. In it’s current form it cripples even fast CPUs though. The best way to use it is to change the eventlistener to a timer. That way you can set it to run as fast or as slow as you like. I would recommend 5 or 10 fps (200 or 100 in timer with main timeline at 30fps).

Hi, I LOVE this tutorial is the best of the best and im VERY thankfull. I have one question. Lets say I have a layer.. starts with a classic motion tweet from alpha cero to 100,this keyframe ends and teh very next one is the one that contains the effect code and works perfect. now this was my intro for the image. now the very next keyframe starts from alpha 100 to cero with a classic motion tween… my problem is that the water effect will not stop in my “outro” …

can anyone tell me how to maintain thsi water effect lets say for 3 seconds and then stop?