I'm Puzzled, Beginner - Beginner/Intermediate Rating Options

[the_iceman]

After doing some flash work on a Picture Puzzle I thought there might be some who might like to know how they can create their own.

I trimmed my puzzler way down to make it as 'simplistic' as possible. This puzzler tutorial should give a good base for you to be able to create your own puzzles and even enhance what I'm providing to include other features (click count, timer, etc).

This Tutorial also does not cover how to verify the 'successful completion' of the puzzle. It only shows the basics of moving sprites around when clicked.

Click Here To See the Results Of This Flash Tutorial

We will be creating a little puzzle that has a 'grid' of 4 pieces wide by 4 pieces tall. A total of 16 images. (actually we will only use 15 pieces because we need to keep out the last piece so pieces can move into that empty space).

For this tutorial I will be using a 200x200 resized image.

01) Using Your graphic software of choice, take an image and resize/crop it to a 200x200 image



02) Create a Little Thumbnail of that image as well dimensioned at 50x50 pixels.



03) Create 'slices' of your 200x200 image in 50x50 pixel dimensions



05) Save Your Images as Image1 through Image16 (again we will not need Image16 for this tutorial, however you may want the last small piece for enhancements you might want to make.

06) Open Up SWiSHmax and create a movie dimensioned as: 200x270. The FPS doesn't really matter for this tutorial. You can set it as low as you want.



07) Set the grid to 10x10.



08) Display The Grid and 'snap to grid'



09) Go to your Content Panel and import all of your 50x50 images (including your little thumbnail image created in step 2).



09) Create 15 Sprites (named Sprite1 through Sprite 15) in your Outline Panel



10) Select Sprite1 in your Outline Panel so it is selected

11) Drag Image1 from your Content Panel into the Layout Area (positioning isn't so important right now as we will deal with the placement next).

12) Repeat Steps 10 & 11 until All Sprites have a small image contained within it.

13) Randomly Arrange your Sprites in the Layout Window. Place the Images from Left To Right and Top To Bottom. Make them nice and random looking.



14) Create a Sprite (above all other sprites) called spButtonArea. Position this sprite at top/left 0x0. Under the SPRITE OPTIONS ensure you select the option that states "Use Bottom Object As Mask".

15) Create a RECTANGLE object (200x200 pixels), SOLID FILL, RED and position the rectangle object at top/left position of 0x0. Rename the rectangle object to MASK.

16) Create A sprite inside of the spButtonArea and rename the sprite to be spButtons.

17) Create 4 Buttons (called btnUp, btnDown, btnLeft and btnRight) inside of the spButtons sprite. These buttons should be sized at 50x50. See the images below on how these buttons should look and be layed out in the layout panel.



18) Create a little WHITE OUTLINE rectangle (#5 in the above 2 images) in the middle of the buttons. This will make things look a little nicer.

19) Collapse the spButtons Sprite and move it to Top/Left Position 100x100.

20) Expand the spButtons Sprite and insert the below mentioned code into their appropriate buttons:

btnLeft:

CODE

on(Release) {
    fn_MoveLeft();
}

btnRight:

CODE

on(Release) {
    fn_MoveRight();
}

btnUp:

CODE

on(Release) {
    fn_MoveUp();
}

btnDown:

CODE

on(Release) {
    fn_MoveDown();
}

21) Select all 4 buttons in the Outline Panel (btnLeft, btnRight, btnUp, btnDown) and then select the TINT tab on the right of your screen. Change the ALPHA from "UNCHANGED" to "TRANSPARENT" for all 4 buttons. This way they now become 'invisible'.

22) Here is the Code to put in to the spButtons Sprite (the sprite which directly contains the buttons themselves):

CODE

function fn_MoveLeft() {
    PieceMoved = "N";
    TMP_COUNTER = 1;
    while (PieceMoved == "N") {
       if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnLeft._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnLeft._y + this._y)) {
            ("_parent._parent.Sprite"+TMP_COUNTER)._x += 50;
            PieceMoved = "Y";
            this._x -= 50;
        }else {
            TMP_COUNTER += 1;

        }
    }
}
function fn_MoveRight() {
    PieceMoved = "N";
    TMP_COUNTER = 1;
    while (PieceMoved == "N") {
       if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnRight._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnRight._y + this._y)) {
            ("_parent._parent.Sprite"+TMP_COUNTER)._x -= 50;
            PieceMoved = "Y";
            this._x += 50;
        }else {
            TMP_COUNTER += 1;
        }
    }
}
function fn_MoveUp() {
    PieceMoved = "N";
    TMP_COUNTER = 1;
    while (PieceMoved == "N") {
       if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnUp._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnUp._y + this._y)) {
            ("_parent._parent.Sprite"+TMP_COUNTER)._y += 50;
            PieceMoved = "Y";
            this._y -= 50;
        }else {
            TMP_COUNTER += 1;
        }
    }
}
function fn_MoveDown() {
    PieceMoved = "N";
    TMP_COUNTER = 1;
    while (PieceMoved == "N") {
       if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnDown._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnDown._y + this._y)) {
            ("_parent._parent.Sprite"+TMP_COUNTER)._y -= 50;
            PieceMoved = "Y";
            this._y += 50;
        }else {
            TMP_COUNTER += 1;
        }
    }
}

The above code is very similar for each type of button. The difference between the functions is how it moves the pieces and the buttons.

PieceMoved = "N";
TMP_COUNTER = 1;

This sets initial values for 2 variables. One is a counter and one is to see if it has actually moved a piece of the puzzle.

Next comes a while-loop. This loop will loop until such time as it sees that it has moved a piece of the puzzle.

Inside the while loop is a big IF statement. It is basically checking the x/y coordinates of the button that is pressed against Sprite1-15's x/y coordinates to find which Image Sprite is below the 'invisible' button that was pressed. It will then move the image below the invisible button to the 'empty-spot' and move the buttons as well.

23) Create a 200x70 Rectangle with whatever 'fill' you desire and place it at top/left position 0x200

24) Drag the Thumbnail Image from the Content Area into the stage and position the small thumbnail image in the same area as the Rectangle you just created in step 23. This is so the people doing the puzzle can have a little 'thumbnail' of the image to look at so they can determine what pieces need to go where.

25) Last But Not Least .... Create a Rectangle Object (200x270 pixels) and position the object at top/left postion of 0x0. Image should have NO fill but a border of 2px and WHITE in color. This will give just a little 'frame' around the whole movie. (totally optional)

26) Save and export. Test it in the player to see how it all works.

Attached is the completed .swi for this tutorial so you can easily see what I did.

Hope y'all like this simple puzzle.

You can use this as a base and do so much with it for creating puzzles. You can save high-sores (or least amount of clicks), time the person if you want to put in a timer... and more.


 SmallPuzzle.swi ( 107.52K ) Number of downloads: 2744



Jeff Frankus

*edited* For some reason the .swi attachment I placed is no longer working. I uploaded a new attachment.

This post has been edited by the_iceman: Jan 3 2006, 10:04 AM

[*D*]

Creating looks easy, I need a cheat sheet to show me how to work the puzzle out lol

Another great tutorial Jeff, thankyou.

[cybernetix]

nice tutorial, thanks for sharing.

[the_iceman]

Thank you for the positive comments.

I did take it a little step further. The 'small' version I created can be difficult to tell what move you did. So what I did was implement a tiny 'mover' so you can see the pieces moving instead of just 'instaneously' in different positions.

CLICK HERE TO SEE IT IN ACTION!

Here is the updated .swi for it as well.

 SmallPuzzle_Animate.swi ( 107.87K ) Number of downloads: 20



Jeff

[RedDragon]

Wow now this is an impressive tutorial! Very detailed and with a great result:

THX!!!!

[Gabe]

Very nice tut the_iceman

[Log Sandwich]

I'm new to the site and to Swish, I'm going to try this tutorial today (while at work) and I'll let you all know how it goes. This site rock's by the way.

Is there any tutorials for exploding letters or Images?

The tutorial look very will done.

Thanks.

[the_iceman]

there are some pre-canned effects in swish that do explodes. You can also take your 'text' and convert it to shapes.

Once you convert your text to shapes you can 'break' the shapes into many little pieces which gives you the ability to show even better exploding effects.



Glad you like the tutorial!

[taghaboy]

nice tut, good idea.
thanks for all

[krypton]

very good tutorial to play with images ! ! !