Flash Pro tutorial: Create an anaglyphic 3D game in Flash

Step 7 We need to separate the left and right based on their vertical position (called ‘y’ after the axis), but first we need to know what parameters we’re working within. To find this, add this loop code between the two lines of draw code:

for (var i:String in scene) {trace(scene[i].y);}

Publish your project, and in the Output window there’ll be a list of all the cast members’ vertical positions. Make a note of the largest and smallest.

Step 8 Add in the largest and smallest vertical positions by replacing the lines from Step 7 with this:

for (var i:String in scene) {
var min:Number=-13;
var max:Number=200;

The following lines use each element’s vertical po sition in relation to the maximum and minimum values to give it a depth value, and take the depth value within the range we currently have – between 0 and 1 – scaling the value to be between how many pixels we want to offset it horizontally (between -5 to 5 pixels):

var depth:Number=(scene[i].y/(max-min));
var offset:Number=(depth-0.5)*10;

This code moves each element horizontally based on the offset value. The cyan part of the image is drawn after the update.


Finally, } can be added this at the end to complete the code structure. You now have a fully anaglyphic scene to publish.

Charles Maragna

Who: Charles Maragna is based on the south coast of England, where he works as a freelance Flash developer.
Contact: ni.ce.ly
Software: Adobe Flash Professional CS4 or later
Time to complete: 3 hours


The resources for this tutorial can be downloaded from here.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...