AS3 Escape Room Tutorial

For this tutorial, I will demonstrate how to design one room for a virtual escape puzzle. The aim of the game is to find the hidden key to open the room you are currently locked in.
The finished product:






Tutorial Guide: Step 1: Starting Frame Step 2: Movie Clips Step 3: Drag and Drop Step 4: Tablecloth Step 5: Light switch + Safe Step 6: Masking Step 7: Safe Close-up Step 8: Finish Download the Files Difficulties Faced Why an Escape Puzzle? Proposed Improvements

Step 1: Starting Frame  [Frame 1]

• Open a new ActionScript 3.0 file in Flash Professional CC.

• Choose the colour of your stage (I chose black), drag a dynamic text field on to the stage and write a pre-puzzle message.

• Make a new layer on the timeline (call it "PlayButton")

• Create a button object on the first frame of this layer (Draw a rectangle, choose colours, insert text above it, highlight the whole button, press F8 and convert it to a Button) 

Fig 1. Convert to Button type with F8

• Create an Actions layer on the timeline (this layer is going to hold all of the AS3 code for this file).

• Using Code snippets, insert a "gotoAndStop()" method on the first frame, that will be called when the Play button is clicked.

• gotoAndStop() allows you to put in the frame number of where you want the user to be brought to, or a frame name (you can give a frame a name by choosing the desirable frame on the timeline, pressing F6 to insert a keyframe, and giving this frame a label in the Properties section on the right). I gave frame 5 the label "room".

Fig 2. Code from frame 1 of the actions layer

Step 2: Movie Clips   ["room" Frame]

• Next, draw an image of a basic room using Paint.

Fig 3. Background 1

• Import the image on stage (onto a new layer).  Due to the nature of this game, there are going to be many background images, therefore keep them all on separate layers.

• On another new layer, draw a photoframe on the stage using the rectangle tool. Similar to the Play button above, highlight the photoframe image, press F8, but this time convert the photoframe to a Movie Clip.

• The photoframe symbol is now added to your Library. Drag out two more photoframe symbols to the stage (on the photoframe layer)

• Draw a tablecloth on the table (on a separate layer) and convert it to a Movie Clip also. At the moment, it is inactive but it will become clickable in a different frame.

Fig 4. Added photoframe and tablecloth Movie Clips

 Step 3: Drag and Drop   ["room" Frame]

• To fully understand the drag and drop technique, I completed the following tutorial:  Kid's Firetruck Puzzle Tutorial

• The Kid's Firetruck Puzzle Tutorial explained how to set an object's start and end coordinates, and then fix the object in place if the user drags the object close enough to the end position.

• I manipulated this tutorial to make the photoframes lock into place on the hooks on the wall.

• Here is the drag and drop code for one of the frames, which can be easily adapted to the other two frames:

Fig 5. Coordinates + Event Listeners for Frame 1

Fig 6. Start and Stop Dragging functions

• Every time that a photoframe is snapped correctly into it's end position, it calls a checkIfAll() method. This method allows the user to move on to the next frame (labelled "table") once all three frames are locked into their end destination (on the wall). 

Fig 7. checkIfAll() method

Step 4: Tablecloth    ["table" Frame]

• When the user is brought to the "table" frame, this means that the tablecloth will now become active.

• The photoframe objects on the wall no longer exist as Movie Clips. Instead, you need to draw a new background which includes the three photoframes in their end position.

Fig 8. The photoframes are now apart of the background image, but the tablecloth is still a Movie Clip

• Change the tablecloth's Button Mode to true, which means that the mouse turns into a hand when it rolls over the tablecloth object (telling the player that it is now clickable)

• When it is clicked, it looks like the tablecloth disappears, but really it just brings the user to a new frame (labelled "light")

Fig 9. Code from "table" frame of the actions layer

Step 5: Light switch + Safe    ["light" Frame]

• On the "light" frame you need to implement two new objects

• Draw a light switch object (trace over the one on the background image), and convert the light switch to a Movie Clip.

• Next, draw an electronic safe (attached to the underside of the table), and also convert this object to a Movie Clip.

• Add event listeners to the two new Movie Clips; when the user clicks the light switch, they are brought to a new frame (labelled "torch"), and when they click the electronic safe, they are brought to another new frame (labelled "safe").

Fig 10. Added light switch and safe Movie Clips

Fig 11. Code from "light" frame of the actions layer

Step 6: Masking   ["torch" Frame]

• To fully understand the Masking technique, I completed the following tutorial:   Masking Tutorial

• The Masking tutorial explained how to layer two Movie Clips in such a way that you can only see a cut-out of the layer underneath. It also showed how to drag and drop the mask object, and how to blur the edges of the masking object. I manipulated the masking tutorial to make a torch-light effect when the light switch is clicked.

• First, you need to draw a new background [make all the features darker than the normal background, draw the ceiling light as if it is off, and draw the encrypted green lines on the wall]

Fig 12. Lights off background with "UV" symbols [only image, no extra Movie Clips]

• Next, on a separate layer draw a circle and convert it to a Movie Clip. This is going to be the mask object. Add a blur effect/filter to the circle in the Properties section and implement the following code in the actions layer:

Fig 13. Masking code from "torch" frame of the actions layer

Fig 14. Example of what the user sees when they are playing 

• Due to some technical difficulties that I faced with the masking technique (see explanation below), I had to implement a timer on the "torch" frame. To put it simply, once the user clicks the light switch they are brought to the "torch" frame for 8 seconds, and then they are automatically brought back to the previous ("light") frame. 

Fig 15. Timer code from "torch" frame of the actions layer

Step 7: Safe Close-up   ["safe" Frame]

• When the user clicks the electronic safe object on the "light" frame, they are brought to a close-up image of the safe (i.e. the "safe" frame)

• Draw a new image in Paint, and this time it needs to be an electronic safe with 9 white buttons, a green button and a red button (see Fig 16. below) Import the image on Stage (on new layer)

• Next comes the tedious part; you need to make button objects for all of the clickable parts of the frame. On a new layer, individually trace the outline of all the buttons, put its corresponding number in it and convert them all separately to Button symbols.

•  Do the same for the green submit button, the red cancel button and a grey arrow button (arrow button simply brings the player back to the "light" frame) 

• I added an Over state on all the buttons, so they change colour when you hover over them (double click the button object on stage, see the new timeline generated, put keyframe [F6] in the "Over" frame, and in this frame change the button however you want to [i.e. change the colour])

• Drag a dynamic text box to the output section of the electronic safe

Fig 16. New background for "safe" frame

Fig 17. "safe" frame with all buttons implemented

• When a numeric button is clicked, that numeric value gets added to a variable called result. 

• Result is then outputted to the textbox.

• I implemented a unique function that checks how many characters are in the result variable. If the result variable is three characters long, the user is unable to add any more numbers.

•  If the user clicks the red cancel button, the result variable gets reset to being an empty string (likewise if they submit a wrong answer). It is only when the user submits "532" that they can be brought to the next frame (labelled "open")

Fig 18. Implement button 1, submit and cancel button from "safe" frame on actions layer

Fig 19. checkResult() function from "safe" frame on actions layer

Step 8: Finish    ["open", "escape" and "end" Frames]

• On the "open" frame, draw ANOTHER new background and import to stage. This time you just need to make it look like the safe is open, and a lock should appear on the door (see Fig 20)

• On a new layer, draw a key, convert it to a Movie Clip and place it in the now open safe. 

• In a similar way to the photoframes in the "room" frame, implement code so that the user can drag the key to a target destination (the lock), and when it is clicked into place, the player is brought to the next frame (labelled "escape")

Fig 20. The user has cracked the code, and unlocked the safe

Fig 21. Code from "open" frame on the actions layer

• For the "escape" frame, draw a new background that shows the main door opened. 

• Next implement a grey arrow button, so that when it is clicked it brings the user to the last frame (labelled "end")

Fig 22. Background for the "escape" frame with grey arrow button

• Finally, the user is out of the room and is on the "end" frame. Here there is a message to congratulate the user and a button giving the player the option to escape the room again.

Download the Files

Download the .swf from here
Download the .fla from here

Difficulties Faced

-I had quite a lot of issues with the masking technique: 

• The mask can only deal with one Movie Clip, therefore the whole room had to be drawn as just one image/symbol. 
• Since no other Movie Clip could be on stage (apart from the background image and the mask object itself), there was nowhere obvious that the user could click to turn the torch effect off. I went about implementing a timer for the torch, which lasts 8 seconds and the user is then brought back to the previous "light" frame. I got the timer working using a combination of the Adobe Flash API and Stackoverflow
• I wanted to have the torch light automatically follow the mouse cursor using event.ENTER_FRAME (see Masking Tutorial above) but this caused an issue with moving on to the next frame. To overcome this I had to write the code in such a way that the user must click on the mask first and then the torch automatically follows the mouse.

-Although I faced these challenges with the masking technique, I feel that I benefitted highly from solving the issues instead of scrapping the technique altogether. As well as getting a further understanding of manipulating the Drag + Drop and Masking techniques, I learnt how to work with a timer (which was not my original plan).   

Why an Escape Puzzle?

- Online logic puzzles have been reasonably popular for many years, yet there has been an increase in interest with real-life logic games among groups of adults (friends or colleagues) and families. Companies such as Escape Live Dublin, Adventure Rooms and most recently GoQuest are letting their customers experience a real-life escape game by locking them in a room and making them race against the clock to solve all the puzzles. 

-Although the escape rooms are highly addictive to an audience that thrives on problem-solving (i.e. once you do one, you are eager to try another), customers may hesitate to experience their first escape room. From a personal experience, I questioned myself a lot before booking my first escape room: am I capable enough to solve the problems? can I handle the pressure? what kind of puzzles will they be giving me?

-I propose that this short flash game could be the start of an advertising campaign for one of the above companies. By providing potential customers a “practice run” on their website, they would boost their clients’ confidence to book the real-life escape game experience. Once the customer tries their first real-life escape room, they will shortly be back to try escape from any other rooms the company has to offer.

Proposed Improvements

• Better graphics/images and sound effects would add to the user experience; submersing the player completely in the game.
• A visible timer in one of the corners and a time limit to add pressure to the player and make the game more challenging.
• More rooms to escape from, or having to escape multiple rooms to finish one game.
• A customized start and end page that is tailored to the company advertising the escape rooms (company colours, logo, contact info, links to booking form etc.)