Learning English Online, Free English Lessons For Everyone
___ ______

How to create a Noel Tree Game in Flash CS 3 PDF  | Print |
Thursday, 15 September 2011 18:02

How to create a Noel Tree Game  in Flash CS 3

1. Introduction:

This is a simple tutorial for youto create a Noel Tree by using drag and drop game . It is useful for you to decorate your blog or website when the Noel is coming .

2. How to create?

Step 1. The aim of the project is to demonstrate the object oriented capabilities of Flash. I have created a simple four piece jigsaw puzzle, programmed with Action Script. The coding is done in such a way that new puzzles can be created using the same file, with very little effort.

Step 2. To view the final product of this project, open the puzzle.fla file in Flash MX, and then go to File – Publish Settings and check the Windows projector box (if you are using Mac check the Mac Projector box). Then click on the publish button. Open the folder where you published the file and view the puzzle.exe file.

Step 3.. Now for the project. Open the file ‘puzzle.fla’ on the CD-ROM.

Step 4.. Now open the library (Window-Library or Ctrl+L). I have arranged all the graphics elements, buttons and sounds required for the project in folders.

Step 5.. If you look at the timeline, you’ll notice only two layers on the main timeline:
a) puzzle: this layer contains an instance of the movieclip symbol ‘container’.
b) anim: this layer contains an instance of the movieclip symbol ‘xmastree_anim’. I have added an action to this movieclip to make it invisible initially.

Step 6. Go to the library, open the movie_clips folder and double click the ‘container’ movieclip. This opens the ‘container’ movieclip on the stage. I have organized the timeline layers into three folders and two separate layers.

Step 7. Open the ‘static’ folder and you’ll see that it contains layers for the text elements, start button, a frame for the puzzle and also a layer for holding the movieclip ‘complete_puzzle’. I have given the ‘complete_puzzle’ the instance name ‘joined_mc’.

Step 8. The ‘pieces’ folder contains layers one each for the pieces in the puzzle. The pieces are just dropped anywhere on the stage. I have given them instance names of p1 through p4.

Step 9. For the ‘inv_pieces’ folder, I just copied the pieces from the ‘complete_puzzle’ movieclip and pasted them directly onto the ‘container’ movieclip stage and aligned them with ‘joined_mc’.

Step 10. The ‘off-stage’ layer contains a text-box placed at a position so that it will be off stage and therefore invisible when the puzzle is played. I have made it into a dynamic text type box with the instance name of ‘no_of_pieces’.

Step 11. The ‘axns’ layer contains some but not all the action! Two variables ‘n’ and ‘success’ have been initialized on this layer. The variable ‘n’ takes its value from the ‘no_of_pieces’ text-box. I have assigned random positions to the p1, p2, p3 and p4. The code is as follows:

n = parseInt(no_of_pieces.text);
success = 0;
for(i=1;i<= n;i++)
        this["p"+i]._x = Math.random()*180;
        this["p"+i]._y = Math.random()*200;
        this["p"+i]._xscale = 50;
        this["p"+i]._yscale = 50;

Step 12. Click on the start button and go to the actions panel. The code attached is as follows:

                this.joined_mc["p"+i]._visible = false;

Basically this code just makes ‘joined_mc’ disappear.

Step 13. Click on p1 through p4 and you’ll notice that all of them have just on line of code
#include "ascript.as"

14. Now go to the project folder and open the ascript.as.txt file. In this file, I have stored all the code for handling the puzzle pieces. It looks a bit lengthy but the jist of the code is this:
a) When the user clicks on a piece, start dragging the piece.
b) When the user releases the mouse, stop dragging.
c) Check the target of the dropped piece. If it is the corresponding invisible piece, then make the corresponding piece of the joined_mc visible and increment the value of the variable ‘success’.
d) Else send the piece back to a random position.
e) If the value of success equals the value of variable n, make the ‘puzzle’ movieclip invisible and play the animation.
f) The ActionScript for the above pseudocode is as follows:


        name = this._name;
        int_name = name.substring(1);
        int_name = parseInt(int_name);
        if(eval(this._droptarget) == _parent["inv_p"+int_name] )
                _parent.joined_mc["p"+ int_name]._visible = true;
                this._visible = false;
                snd = new Sound();
                if (_parent.success == _parent.n)
                        _root.puzzle._visible = false;
                        _root.anim._visible = true;
                        music = new Sound(anim);
                this._x = Math.random()*180;
                this._y = Math.random()*200;
                snd = new Sound();

That’s it. The puzzle is ready. To change the puzzle you just have to swap the instances of all movieclips in the container movieclip with the new instances, put the #include action on each puzzle piece, type the value into the ‘no_of_pieces’ text box and swap the anim movieclip on the main timeline with the new one.

3. This is a result

4. This is a file to download for this lesson

>>>> How to create a Noel Tree Game  inn Flash CS 3

___________________________________________Source: actionscript.org________

Last Updated on Thursday, 15 September 2011 18:31

We have 25 guests online

If you don't see anything in the middle of this page, you may need the latest Flash plug-in.
It only takes a few moments to
Download it FREE at Adobe.com. get adobe Flash player

Teaching English For Kids In Primary School

Stydying English Online For Everyone

Game for Kids

Home || Misterduncan|| Flash Cards || Songs For Kids|| Free Games || Learn English with GOGO|| Teaching English For Childern|| ESL/EFL Kids Course ||
Designed by Learning English Online. Designed by: Free Joomla Theme, mysql. Valid XHTML and CSS.