Summary:

Platform Game Background in Flash

    ●   Create a Platform with Levels for your Player to Jump Around on.

    ●  Then add Code to make the Game Playable.

Learn About:

Movie Clips Actions Layers Locked Layers

  •   This tutorial is part of the Run and Jump Platform Game Project.

  •   It is part of a series:

   •   81_player_Fl.htm   •   82_game_background_Fl.htm  •   83_game_visuals_Fl.htm   •   131_parallax_background_Fl.htm   •   43_stop_scene_game_Fl.htm   •   24_Star_Rotating_Fl.htm  •  65_locked_door_fl.htm

Other People's Work:

Here are some examples of work inspired by this tutorial.

 


Step #1: Open a New Blank Document in Flash ~

Open a New Blank Document in Flash: ActionScript 3

… select the document size in the Properties Menu (if you don't see Properties - go to: Window » Properties or hit Cmd (⌘) + F3) …

… make the size 800 x 600 pixels.


Step #2: Brush Tool ~

Select the Brush Tool or hit the keyboard shortcut letter (B) …

brush

… and lower the Brush size - Start small ~

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #3: Object Drawing UN-CLICKED! ~

Also, make sure Object Drawing mode is UN-CLICKED object drawing

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Again, have Object Drawing un-clicked - object drawing


Step #4: Color & Smoothing ~

Change the Fill Color to Black

… and raise the smoothing level to around 85.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Note: The higher the smoothing number, the smoother your lines will be, the lower, the rougher.

=>

TRY IT! With the Smoothing set both high, draw another line and compare:


Step #5: Draw you Player ~

Draw a head on the stage. Fill it with color if you wish.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Draw a body and arms & legs too.


Step #6: Create a Movie Clip ~

Select everything by hitting the keyboard shortcut: Cmd(⌘)+A and hit F8 (or Right-Click and select: ) …


… and make sure to set the Registration point to bottom center.


Step #7: Instance Name ~

With the Movie Clip of your player selected …

… name the instance "player".


Step #8: Make a New Layer ~

Make a New Layer below your player and call it "back"


… and make sure to Lock the Player layer.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #9: Zoom Out ~

Zoom out by getting the Zoom Tool or hit the keyboard shortcut letter (z) …

zoom

… hold down the Alt (⌥)/Option key alt option key and click a few times on the stage to zoom out.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #10: Get the Line Tool ~

Get the Line Tool or hit the keyboard shortcut letter (n) …

… and raise the Stroke size to 10 or 15 pixels.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #11: Start Drawing your Platforms ~

Use the Line Tool to draw some platforms for your player to jump on …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… you need boxes to stand on, platforms to jump from, Go Nuts!


Step #12: Stroke Width Clip ~

Select all the lines and raise the Stroke width in the Properties (Window > Properties) menu to 10 or 15 pixels approximately:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #13: Movie Clip ~

Hit Cmd(⌘)+A + to select all the platform object and hit F8


… and turn your platform into a Movie Clip.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #14: Name ~

Name the movie clip: back


Make sure the Registration point is set to the Upper-Left =>


Step #15: Instance Name ~

In the Properties menu (hit Cmd(⌘)+F3 if necessary - it may already be open), look for:

Name the Instance: back also.


Step #16: Lock and Un-Lock ~

Lock your back layer and Un-Lock the player layer:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #17: Actions Layer ~

Create a New Layer and call it "actions"

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Lock the layer and drag it to the top!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #18: Copy and Paste the Code ~

Click on your Actions keyframe

… and hit Alt (⌥) F9 - and open the Actions panel or go to: Window > Actions

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Copy this code:


var leftPressed:Boolean = false;
var rightPressed:Boolean = false;
var upPressed:Boolean = false;
var downPressed:Boolean = false;

var leftBumping:Boolean = false;
var rightBumping:Boolean = false;
var upBumping:Boolean = false;
var downBumping:Boolean = false;

var leftBumpPoint:Point = new Point(-30, -55);
var rightBumpPoint:Point = new Point(30, -55);
var upBumpPoint:Point = new Point(0, -120);
var downBumpPoint:Point = new Point(0, 0);

var scrollX:Number = 0;
var scrollY:Number = 500;

var xSpeed:Number = 0;
var ySpeed:Number = 0;

var speedConstant:Number = 4;
var frictionConstant:Number = 0.9;
var gravityConstant:Number = 1.8;
var jumpConstant:Number = -35;
var maxSpeedConstant:Number = 18;

var doubleJumpReady:Boolean = false;
var upReleasedInAir:Boolean = false;

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

stage.addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void{
	if(back.hitTestPoint(player.x + leftBumpPoint.x, player.y + leftBumpPoint.y, true)){
		leftBumping = true;
	} else {
		leftBumping = false;
	}
	
	if(back.hitTestPoint(player.x + rightBumpPoint.x, player.y + rightBumpPoint.y, true)){
		rightBumping = true;
	} else {
		rightBumping = false;
	}
	
	if(back.hitTestPoint(player.x + upBumpPoint.x, player.y + upBumpPoint.y, true)){
		upBumping = true;
	} else {
		upBumping = false;
	}
	
	if(back.hitTestPoint(player.x + downBumpPoint.x, player.y + downBumpPoint.y, true)){
		downBumping = true;
	} else {
		downBumping = false;
	}	
	

	if(leftPressed){
		xSpeed -= speedConstant;
		player.scaleX = -1;
		
	} else if(rightPressed){
		xSpeed += speedConstant;
		player.scaleX = 1;
	}

	if(leftBumping){
		if(xSpeed < 0){
			xSpeed *= -0.5;
		}
	}
	
	if(rightBumping){
		if(xSpeed > 0){
			xSpeed *= -0.5;
		}
	}
	
	if(upBumping){
		if(ySpeed < 0){
			ySpeed *= -0.5;
		}
	}
	
	if(downBumping){ //if we are touching the floor
		if(ySpeed > 0){ 
			ySpeed = 0; //set the y speed to zero
		}
		if(upPressed){ //and if the up arrow is pressed
			ySpeed = jumpConstant; //set the y speed to the jump constant
		}
		
		//DOUBLE JUMP
		upReleasedInAir = false; //upon landing, reset to false
		doubleJumpReady = true; //upon landing, reset to true
		
	} else { //if we are not touching the floor
		
		ySpeed += gravityConstant; //accelerate downwards
		
		//DOUBLE JUMP
		if(upPressed == false){ // if the player releases the up arrow key
			upReleasedInAir = true; // set the variable to true
			//trace("upReleasedInAir");
		}
		if(doubleJumpReady && upReleasedInAir){ // if both variables are true
			if(upPressed){ //and if the up arrow is pressed
				//trace("doubleJump!");
				ySpeed = jumpConstant; //set the y speed to the jump constant
				doubleJumpReady = false; //prevent additional double jumps
			}
		}
		
	}
	
	if(xSpeed > maxSpeedConstant){ //moving right
		xSpeed = maxSpeedConstant;
	} else if(xSpeed < (maxSpeedConstant * -1)){ //moving left
		xSpeed = (maxSpeedConstant * -1);
	}
	
	xSpeed *= frictionConstant;
	ySpeed *= frictionConstant;
	
	if(Math.abs(xSpeed) < 0.5){
		xSpeed = 0;
	}
	
	scrollX -= xSpeed;
	scrollY -= ySpeed;

	back.x = scrollX;
	back.y = scrollY;
	
}

function keyDownHandler(e:KeyboardEvent):void{
	if(e.keyCode == Keyboard.LEFT){
		leftPressed = true;
	
	} else if(e.keyCode == Keyboard.RIGHT){
		rightPressed = true;
	
	} else if(e.keyCode == Keyboard.UP){
		upPressed = true;
	
	} else if(e.keyCode == Keyboard.DOWN){
		downPressed = true;
	}	
}

function keyUpHandler(e:KeyboardEvent):void{
	if(e.keyCode == Keyboard.LEFT){
		leftPressed = false;
	
	} else if(e.keyCode == Keyboard.RIGHT){
		rightPressed = false;
	
	} else if(e.keyCode == Keyboard.UP){
		upPressed = false;
	
	} else if(e.keyCode == Keyboard.DOWN){
		downPressed = false;
	}	
}


Paste the code into the Actions panel:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #19: Test Your Game ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Last Step: Save and Name your work ~

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.


Other Resources: http://as3gametuts.com/2011/11/11/platformer-1/