Realistic Flowing Tap Water Swishmax 4 Tutorial

Example:

First Of All

You will need to download the graphics used in this tutorial Here this is the tap in *.emf Vector format and the water *.png format.Open swishmax 4 and apply the following settings to the movie properties window 430 x 404, 25 frame rate and #000000 (solid black) background, Swf Export = SWF 8 the colours of the shadows etc of the water can also be changed to suit the colour of the background from within the filter settings.

Step.1

Click on the Import vector Icon and import the tap *.emf file to your stage. see below.

once imported you cand scale the image down to your desire by selecting an anchor point and holding down the shift button whilst you drag your mouse, this will keep the shape uniform.

Step.2

Click on the Import Image icon and import the water *.png image to your stage.
again scale this down to fit the width of the taps spout.

we now need to edit the water image by adding transparency to the darker areas of the image in the image propertie, you can get the image propertie up by clicking on the water image then the paint bucket tool and then selecting the modify details of the selected image icon.

now make the following changes to the images settings, as shown in the image below.

Step.3

We need to add some animation to the water now, i have opted to do this with script. but first of all we need to make some movieclips with the images we have on stage.
so group the tap and the water shape together as a movieclip and name it tap now inside the tap movieclip group the water shape as a new movieclip and name it water see the outline panel image below.

inside the water movieclip we need to create a shape that we will use for the mask, so we only see what we want to see of the water shape, so using the Pen tool draw out an area under the taps spout were the water will show, the waters display area, see the image below for a visual idea.

now on the water movieclip check the box which says use bottom object as mask.

THE ANIMATION

inside the water movieclip and on the water shape add the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13

onSelfEvent (load) {
    speed = 30; // how fast the flow is
    ymax=388; // the ending _y position of the water
    ystart=0; // the starting _y position of the water
}
// do not edit below
function onEnterFrame(){
    if(this._y<ymax){
        this._y+=speed
    }else if(this._y>ymax){
        this._y=ystart
    }
}

you may have to play around with the _y values to make it work with your movie as the tap and water size may differ for everyone, once it has been scaled down.

when tested in player you want your movie to look like the one shown below.

Step.4

Add the followng filters to the water movieclip.

now when run in the player you should have something looking like the examp below.

to make it look like running hot water i have used the following file.
http://www.swish-designs.co.uk/blog/?p=1634

however you have just learnt how to make realistic running water with swishmax 4.

Buy Realistic Flowing Water Example Without The Steam Effect
Price £2.00
[paiddownloads id="65"]
Buy Realistic Flowing Water Example With The Steam Effect Included
Price £3.50
[paiddownloads id="66"]