Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Create awesome Flash games in no time with StencylWorks – Selecting levels

Before we start, let me say one thing: I love StencylWorks. It’s an incredible tool which will allow you to save a lot of time, and you should definitively try it.

Now, let’s see how to make a level selection screen like the one I am making for my StencylWorks game called Kira the Witch. You will be able to create stuff like this:

And obviously clicking on the first cave will make you play level 1, clicking on the second cave you’ll be playing level 2, and so on.

First, you need to create a new actor which we’ll call “Level Icon”

Then, create a new scene called “Level select”…

… and fill it with as much “Level Icon” actors as you want

At this time, create a new behavior for the actor which will be bound to the “Level Icon” actor, and call it “Click to play level”

Create two attributes for this behavior called “scene to play” (type:Scene) and “level label” (type:Text), and don’t make them hidden.

Let’s place some “code” in the behavior:

The “when drawing” part just places the content of “level label” attribute horizontally centered as seen in this post, while the “always” part checks for the mouse, then switches with a transition to the content of “scene to play” attribute.

Now, where to define such attributes? Go back to Level Select scene, right click on a door actor and select “Customize Behavior”

Here you will be able to add the “Click to play level” behavior and edit the attributes you defined before. Place the right level label and the scene you want to play, and the game is done, you have your select level screen in less than five minutes.

Unfortunately I can’t show you the working example because it contains some behaviors related to the game I am making, but feel free to post questions if you don’t find it clear.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (15 votes, average: 4.13 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 12 comments

  1. SM

    on December 13, 2011 at 8:22 pm

    I prefer construct.

    You can make your own plugins, which I have!

    And its kinda similar to AS3. — I know that probably sounds odd. But the way you assign events…

  2. BNG

    on December 13, 2011 at 11:06 pm

    Amazing job as always. I was working on a level selector screen too, but your solution is much more easier and better.
    By the way, is there an easy method to lock levels on the level selector until the actor finish the previous stages?
    Thx for the tutorial and Stencyl.

  3. Faris

    on December 14, 2011 at 1:13 am

    Iam not saying stencyl isnt great… but the program run slowly … plus I can make a select level screen in flash in 5 minutes … again Iam not saying stencyl dont save U alot of time ^^

  4. Bitstream

    on December 14, 2011 at 9:26 am

    @BNG: Create a global variable (called “Game Attributes” in Stencyl) and on finishing a level set the variable to the level number if its not already greater.

    On the level selection screen in the “always” block check for game level <= global variable before the fade out block.

    You could also make an addidtional animation for the "Level Icon" with a closed door or chains as a visual indicator and set the corresponding animation in the "when created" block checking the global variable.

  5. Itoshigo

    on December 14, 2011 at 3:13 pm

    Wow! How topical, I was just constructing a level editor in Stencyl this morning. I’ve built mine in much the same way. Enjoying Stencyl so far. Thanks for sharing.

  6. Vector

    on December 14, 2011 at 7:21 pm

    I have always read this blog for the Actionscript 3 code tutorials but if it has to be anything else then Stencyl would probably the next best thing.

    In my opinion Stencyl is much better than the other game maker programs, you can also easily re-use your own custom AS3 code so it’s probably the next best thing to using Flixel with Flash Develop.

  7. BNG

    on December 15, 2011 at 9:40 pm

    @Bitstream: Your solution worked perfectly, thanks a lot. You made my day!

  8. Cool Stuff with the Flash Platform – 12/16/2011 | Android Developers

    on December 17, 2011 at 4:02 am

    [...] Emanuele Feronato continues his series on creating Flash games with StencylWorks, with this edition focused on creating a level selector. [...]

  9. dario.cavada

    on January 3, 2012 at 6:03 pm

    Thank you for this post I will try Stancyl at first for my new Flash MiniGame.

  10. vice

    on February 5, 2012 at 3:33 pm

    I’m new to Stencyl… i made your tutorial on Catapult Kit example… but it keeps playing level 1 and 2. How i make the level selection screen show first? Thanks!

  11. Bernard

    on June 7, 2012 at 7:55 am

    This method does not work. I have posted a Question on the Stencyl forum

    http://community.stencyl.com/index.php/topic,11335.msg68135.html#msg68135

    pointing to this tutorial. There is no Customize Behavior… menu option and the screen I posted in the link above, following this code shows how it looks. Have you left out some important parts?

    Your “When Drawing” code will produce the same number in all the boxes since there is no code used to change it.

  12. Azeem Shabaz

    on January 22, 2014 at 10:08 pm

    Hey, i could not fing behaviors to write the code??, Please help me !!

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×