This is the first lesson of our tutorial about the use of FlashMX to make worlds/games, using isometric perspective.

First of all: look to our sample. Click in the figure to activate.Use the arrow keys to walk. Try to go across the walls... If "you" stops, use the key of the inverse direction.

The first game using isometric perpective was Marble Madness from Atari (1982). But until today we have many games using it: The Sims, is an example.

To begin, we need to create the main character of the world, someone that can walk when the player uses the arrow keys.

Our "flashy man" will have only 4 directions. So: we need to create 4 movie-clips, each one having many frames to simulate the "basic step".

A "good" step needs to have more than 20 frames but we will make our using only 3 frames.

IMPORTANT: All the "characters" need to have equivalent central position.

The directions: left and down are similar. And right and up also.

So: we have 4 movie-clips. We will put then in the Scene with another movie-clip: a simple square - we will call it: base.

After some preliminary frames, our film stops at some frame and we have a program glued to the frame defining some flags:

stop(); 
crash = 0;
stopd = 0; 
stopu = 0; 
stopr = 0: 
stopl = 0; 

We need to define a movie-clip: a "shadow-for-collision" under the walls:

This movie-clip will have a program:

onClipEvent(load){
 this._visible=false;
}
onClipEvent(enterFrame){
 if(hitTest(_root.base._x, _root.base._y, true)){
  _root.crash=1;
 }
 else{
  _root.crash=0;
 }
} 

Each movie-clip of the step of the character has a similar program. Look to the program glued to that of the "up" movement - down, left and right are the name of the 3 other movie-clips:

onClipEvent(load){
 this._visible = false;
}

onClipEvent(enterFrame){
 if(Key.isDown(Key.UP)){
  _root.stopd = 0; 

 if(_root.stopd == 0 &&
    _root.stopu == 0 &&
    _root.stopr == 0  &&
    _root.stopl == 0){  

   stop();
   if(Key.isDown(Key.UP)){
     
    this._visible = true;
    _root.down._visible = false;
    _root.right._visible = false; 
    _root.left._visible = false;
	
     
    if( _root.crash == 1){
      
     this._y = this._y + 2;
     this._x = this._x + 4;
     _root.base._y  = _root.base._y + 2; 
     _root.base._x  = _root.base._x + 4;  
     _root.down._y  = _root.down._y + 2; 
     _root.down._x  = _root.down._x + 4; 
     _root.right._y  = _root.right._y + 2; 
     _root.right._x  = _root.right._x + 4; 
     _root.left._y  = _root.left._y + 2; 
     _root.left._x  = _root.left._x  +4;

    
     gotoAndStop(1);  
    _root.stopu=1; 
                    
    
   }
    
   else{
    play();
     
    this._y = this._y - 2;
    this._x = this._x - 4;
    _root.base._y  = _root.base._y - 2; 
    _root.base._x  = _root.base._x - 4; 
    _root.down._y  = _root.down._y - 2; 
    _root.down._x  = _root.down._x - 4; 
    _root.right._y  = _root.right._y - 2; 
    _root.right._x  = _root.right._x - 4; 
    _root.left._y  = _root.left._y - 2
    _root.left._x  = _root.left._x - 4;
   }
  }
 }
}

All the 3 other movie-clips have similar programs.

To undersatnd better what we did, look an schematic sample. The character here has 6 frames - a better walk.

Click to activate and use the arrow keys.

            NEXT  LESSON              
T. CONTENTS           HOMEPAGE