This chapter is from the book
This chapter is from the book
This chapter is from the book
Task: Simulated 3D Scaling
Although Flash is not capable of real 3D graphics, the kind seen in popular computer games, you can create the illusion of 3D by using scaling.
Scaling an object is a great way to give your movie depth. After all, when an object is far away, it should look smaller. When it is closer, it should look bigger.
Figure 7.5 shows the same movie clip in two different locations on the screen. This is the same movie clip, except that the one in the lower-left corner is scaled higher than the one in the upper-right. This makes the first one appear closer.
){kind=link}
Figure 7.5 One airplane appears closer simply because it is larger.
You can further strengthen this illusion with movement. Let's create a movie that makes the airplane travel from one corner of the screen to another, growing in scale at the same time:
-
Start with a new Flash movie.
-
Make a movie clip out of a drawing of an airplane or other object. You can use the airplane in the 07airplane.fla example movie if you want. You can place the movie clip anywhere on the screen.
-
Attach this code to the movie clip:
onClipEvent(load) {
scaleAmt = 10;
x = 525;
y = 25;
}
onClipEvent(enterFrame) {
scaleAmt++;
x -= 5;
y += 5;
this._xscale = scaleAmt;
this._yscale = scaleAmt;
this._x = x;
this._y = y;
}
The code starts by setting three variables to their initial values. The variable scaleAmt holds the scale value for the movie clip. The variables x and y are the location of the movie clip.
For each frame that passes, all these values will change. The scaleAmt variable increases by 1. The x variable decreases by 5, sending the movie clip to the left. The y variable increases by 5, sending the movie clip down.
TIP
How did I get the values 1, 5, and 5 for the variable changes? Simple: trial and error. I could have tried to calculate the best values to use, but it was easier to just try different values until I found ones that worked. This technique is usually the best way to create simple effects like this one.
Both the _xscale and _yscale properties of the movie clip are set to scaleAmt. The _x and _y are set appropriately.
The result of this movie is that the airplane appears to fly from the upper-right corner to the lower-left corner, getting closer to the user in the meantime. The illusion created makes it appear as if you are viewing the plane from above. If you draw the airplane in the right perspective, you can make it approach or move away in any direction you want.
To give you an example of how programming styles can differ, here is the same program condensed into fewer lines. It is useful to see variations like this because it gives you an idea of the artistic freedom that programmers have when writing their scripts.
onClipEvent(load) {
this._x = 525;
this._y = 25;
}
onClipEvent(enterFrame) {
this._xscale++;
this._yscale++;
this._x -= 5;
this._y += 5;
}