Activity 10: 2.5D effect

Intent:

X,Y and Z: Cartesian Coordinates. XYZ axes. This animation shows how Cartesian coordinates can describe a point along a line, in a plane, or in a space. The video begins with a square sheet of paper that develops a grid pattern of fine blue lines. A central red point (origin) appears. Then X and Y axes emerge (positive are brass coloured, negative are dark red). The positions +10 and -10 are indicated along the number lines. A point (purple) moves to position 7 along the X axis, and then to position 5 on the Y axis. These coordinates are written as (7,5). Then a blue point moves to position -5 on the X axis, and then to -9 on the Y axis, so its coordinates are (-5,-9). Up until now, everything has happened in the plane of the sheet of paper. In fact, you can do all of this with a real piece of paper on a desk. Then the purple point moves upwards, above of the piece of paper, and the vertical (Z) axis emerges. The point stops at 8 units above the paper (position 8 on the Z axis), giving the purple point coordinates of (7,5,8). Shadows of the purple point are cast on each of the three perpendicular planes. This explains how the three coordinates (x,y,z) can specify a point anywhere in three dimensional space. All sorts of useful mathematical operations can be done using these coordinates.

2D Coordinates:  The classic Cartesian coordinate system (used in mathematics and geometry) consists of the origin point (0, 0) from which the x values spread in horizontal direction and the y values in vertical direction. The x values are positive to the right of the origin point and negative to the left. The y values are positive above the origin point and negative below it.

On the other hand, Flash has a different coordinate system. The origin point of the stage (the main timeline) is always in its upper left corner. The main difference in regard to the classic system is that Flash has an inverted Y axis. So in Flash, the negative Y values are above the origin point and the positive ones below it.

Why is the Y axis inverted? In my opinion, this is because of the direction in which all web pages scroll. When you load a web page in your browser, the only possible direction of vertical scrolling is down. Once you begin scrolling downwards, you can go back up again, but not any more once that you arrive on top of the page. So it makes sense that the downward direction of scrolling is the positive sense of direction, where all Y values are positive. And this applies to Flash documents.

source:  http://flashexplained.com/basics/understanding-how-the-coordinate-system-in-flash-works/

3D

x,y and z

 

Task:

  • Create an activity 10 subfolder in your ADV Animation Unit folder,

Step 1:  Create a basic face (similar to the one below).  Have four layers (eye, eye, mouth and face) with frames from 1 through 30.

Animation Unit, 2.5D Activity part 2 from Digital Voices on Vimeo.

Now set up a Vertical and horizontal guide .  Enable guide snapping by selecting, Edit > Snapping > Snap to Guides.  Guides are used to simplify object placement on the stage. For instance, you may want to define a 50 pixel gutter at the edges of the movie with no content. The guides are added, then the content is placed within the guides.  Guides are visible in the design phase and disappear once the movie is rendered.

  • With a Flash document open, choose View > Rulers to display the rulers.
  • Place your cursor over one of the rulers and drag a guide onto the stage.
  • Guides can be added from either the vertical or horizontal ruler.
  • To temporarily show or hide guides, choose View > Guides > Show Guides.

Animation Unit, 2.5D Activity part 1 from Digital Voices on Vimeo.

Step 2:  Insert keyframes on frame 15 across all layers.  You should now have keyframes on 1, 15 and 30.  On Keyframe 15, skew the face.  This should create an illusion of the head turning.  Now move the left eye (keyframe 15) closer to the left edge  of the face.  Distort the eye, make it slightly skinnier.

 

Step 3:  On frame 15 of the right eye layer, shift the right eye close to the vertical guide.  Now shift the mouth to the left edge, but aligned to the right of the left eye.  See images below.  Distort the right eye to make it more circular.  Transform horizontal length of  the mouth.

Step 4:  Tweening Time!  Activate the onion skin tool, set to 15 frames behind the play-head.  Apply a motion tween on all four layers between frames 1 and 15.  Now repeat steps 1 through 4, but this time between frames 15 to 30.  THe eyes and mouth should move to the right edges.

Animation Unit, 2.5D Activity part 3 from Digital Voices on Vimeo.

  • Export as: firstname_activity 8.swf
  • As a challenge, try adding an additional 15 frames and have the face go back to the original location, like this: