Summary:

Locked Doors in Flash

    ●  Create a Locked Door that can only be opened by collecting a key.

    ●  Then create a final scene rewarding the player for reaching the end.


Learn About:

ActionScript 3Movie Clips Scenes

  •   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 examples of work inspired by this tutorial.

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

Get Adobe Flash player

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

Get Adobe Flash player

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

Get Adobe Flash player

Step #1: Open your Project in Flash ~

Open your project from the last tutorial => 43_stop_scene_game_Fl.htm-


Step #2: Open your Background ~

Double-Click the back layer to open up the Movie Clip:

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

Get Adobe Flash player


Now you are working INSIDE the Movie Clip.

movie within a movie

Step #3: New Layer ~

Make a new layer on top of the Visuals called "Other"

Step #4: Oval Tool ~

Get the Oval Tool which is behind the Rectangle Tool or hit the keyboard shortcut letter (o) …


Step #5: Set your Stroke and Fill Colors ~

Go to: Window > Color or hit the keyboard shortcut letters: Cmd(⌘)+Shift(⇧)+F9

+ +

… set your Stroke and Fill Colors.


Step #6: Object Drawing and Snap to Objects ~

With the Oval Tool selected, un-click Object Drawing …

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

Get Adobe Flash player

… and click Snap to Objects.


Again, have Object Drawing un-clicked and Snap to Objects clicked:


Step #7: Draw an Oval ~

Draw a Circle:

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

Get Adobe Flash player


Step #8: Draw a Rectangle ~

Then get the Rectangle Tool or hit the keyboard shortcut letter (R) …

… and draw a box connecting the circle.

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

Get Adobe Flash player


Step #9: Delete the Line ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

selection tool

… and delete the line.

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

Get Adobe Flash player


See if you can make a keyhole in the middle of the door, too:


Step #10: Movie Clip ~

Make the door into a Movie Clip by double-clicking it to select both stroke and fill of all the shapes …

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

Get Adobe Flash player

… hit F8, name the Movie Clip lockedDoor

… and give it the Instance name of “lockedDoor


Step #11: Draw your Collected Object ~

Now find a good location for a key - or a cherry - a bannana - ANYTHING your character can colllect, and draw it somewhere away from the door.


Step #12: Another Movie Clip ~

Then convert your object into a Movie Clip symbol named doorKey

… and give it the instance name: “doorKey


Make sure to spell the names EXACTLY as indicated, capital letters and everything!


Step #13: New Scene ~

Now go to: Window > Other Panels > Scenes or hit the keyboard shortcut Shift+F2

… click add scene small to add a scene and change the name to Scene 3.

scene 2


Step #14: Happy Ending ~

Get the Text Tool or hit the keyboard shortcut letter (t) …

… and type some text!

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

Get Adobe Flash player


Step #15: Code ~

Click on your Actions keyframe and open it.

… copy this code …


var keyCollected:Boolean = false;
var doorOpen:Boolean = false;


… and paste it below the other var codes:

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

Get Adobe Flash player

 

 

 

 

It's a good idea to keep all similar types of code (like var codes) next to each other.

 

Step #16: if statements ~

Same thing with if statements - copy this code:


if(keyCollected == false){
		if(player.hitTestObject(back.doorKey)){
			back.doorKey.visible = false;
			keyCollected = true;
			trace("key collected");
		}
	}
	
	if(doorOpen == false){
		if(keyCollected == true){
			if(player.hitTestObject(back.lockedDoor)){
				gotoAndStop(1, "Scene 3");
				doorOpen = true;
				trace("door open");
			}
		}
	}

Scroll down and paste - but be careful where you paste it:

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

Get Adobe Flash player


Last Step: Save and View your work ~

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

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: https://as3gametuts.com/2012/03/27/platformer-7/