Create 3D Dioramas in Flash

13 And a kind of z

Flash doesn’t have a built-in property for a z value as it has for x and y. We will create our own z value for each MC, so we know how far in the fish tank each one is. On line 61, start by setting the value 40 on ‘fish04’, which is furthest away. Then line 30 on ‘coral04’, which is a bit closer, etc.

14 Movie Clip events

Disable the corals for any mouse events on line 70, or else you’ll have a hard time triggering the fish that may be partly overlapped by the corals. On line 75, we are adding mouse rollover/roll-out Event Listeners to all the fish Movie Clips, which we use to trigger functions on line 87 and 90.

15 Glowing fishes

On line 88 in the fish Movie Clip rollover method, we are adding a White Glow filter with 100 per cent Alpha and 20px Blur to the Movie Clip, which quickly fades in on 0.1sec. And on line 91, the rollout triggers a Tween that fades the Glow back to zero per cent Alpha in 0.4sec.

16 Mouse movement

Keep track of mouse movement by adding a MouseEvent Listener to the stage on line 84. This triggers a function that moves the MCs around depending on where you move the mouse. Just position the different Movie Clips’ x and y values in relation to the mouse x and y values.

17 Reposition clips

On line 94, calculate how many pixels the pointer is from the centre on both the x and y axis to get the new position of the Movie Clips. Chuck each Movie Clip’s original x and y properties and the new z value in the TweenMax method to Tween them to their new positions in 1.2sec.

18 Finish off

Now we’re ready to test. Save all files and publish for HTML and you are done! Now you can play around and tweak it in your own way. Maybe add motion blur to the reposition Tweens? Have a look around at http://blog.greensock.com/tweenmaxas3 for a complete description.

Pages: 1 2 3 4