Tutorial details:
Written by: Supuneet Bismil
Difficulty Level: Intermediate
Requirements: FlashMX
Written by: Supuneet Bismil
Difficulty Level: Intermediate
Requirements: FlashMX
OBJECT ORIENTED PROGRAMMING IN FLASH
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 ActionScript. The coding is done in such a way that new puzzles can be created using the same file, with very little effort.
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.
3. Now for the project. Open the file ‘puzzle.fla’ on the CD-ROM.
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.
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.
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.
3. Now for the project. Open the file ‘puzzle.fla’ on the CD-ROM.
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.
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.
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.
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’.
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.
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’.
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’.
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:
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’.
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.
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’.
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’.
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; }
on(release) { for(i=1;i<=n;i++) { this.joined_mc["p"+i]._visible = false; } }
Basically this code just makes ‘joined_mc’ disappear.
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:
#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:
on(press) { if(this.hitTest(_root._xmouse,_root._ymouse)) { this.startDrag(); } } on(release) { stopDrag(); 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(); snd.attachSound("snd_ok"); snd.start(); _parent.success++; if (_parent.success == _parent.n) { _root.puzzle._visible = false; _root.anim._visible = true; music = new Sound(anim); music.attachSound("jingle"); music.start(); _root.anim.play(); } } else { this._x = Math.random()*180; this._y = Math.random()*200; snd = new Sound(); snd.attachSound("snd_fault"); snd.start(); } }
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.
No comments:
Post a Comment