web design template web design template web design template

Page : 1 2 3 4

Dear Friend,

Hello & welcome back to Firewire, your friendly guide to the exciting world of web-design & web-solutions!

In this newsletter, we are going to create a flash game (Balloon Shooter). It is a shooting game where player / user have to shoot the flying balloons and gain the points. There are orange colored balloons, which gives player / user extra bonus points. Player / user get 1-minute time to play this game, within this period he / she need to shoot as many as balloons he / she can. For every missed balloon, separate score is maintained.

Click here to download free flash MX template / source file (.fla) to match the steps given in this tutorial.

 

1. Create a new movie with dimensions of 300px. X 400px. and fps = 24 with white color as Background Color




1. Select frame 1 on Layer 1

2. With the help of 'Text' tool type 'Balloon Shooter' as a game title as shown in the image



3. Here we have used 'President' font for the text. You can use any other font of your choice

4. Rename the layer as 'Balloon Shooter'

5. Below the game title type the text as shown in the image



6. Create two different balloon graphics and place them as shown in the image


7. Choose Insert > Layer to insert a new layer above the Balloon Shooter layer

8. Rename the layer as 'Click to Play'

9. With the help of 'Text' tool type text as 'Click to Play' below the existing text

10. Select the text and choose Insert > Convert to Symbol. Convert it into a Button with the center Registration point selected and name it as 'play'

11. Double click the play button to go inside it

12. Select frame 2 at Over stage and choose Insert > Keyframe

13. With the help of 'Fill Color' option in the 'Tools' panel change the text color to 'Red'

14. Select frame 4 at Hit stage and choose Insert > Frame

15. Rename the layer as 'Play Button'

16. Insert a new layer above Play Button layer and drag it downward so that it appears below Play Button

17. Select frame at Hit stage and choose Insert > Keyframe

18. Draw a rectangle patch as a 'hit area' of the button


19. Come back into Scene 1

20. Select the Play button and choose Window > Actions

21. In the Actions panel type the following action

on (release) {
gotoAndStop(2);
}


22. Insert a new layer above Click to Play layer and name it as 'Actions'

23. Select frame 1 on the Actions layer and in the Actions panel type the following action

fscommand("showmenu",false);
stop();


1. Select the Click to Play layer and insert a new layer above it

2. Rename the layer as 'Score Panel'



3. Select frame 2 on the Score Panel layer and choose Insert > Keyframe

4. Create a gradient panel with dimensions as 300px. X 35px. and place it at the bottom of the stage.



5. Insert a new layer above Score Panel layer and name it as 'Scores'

6. Select frame 2 on the Scores layer and choose Insert > Keyframe

7. With the help of 'Text' tool create a Dynamic text field to display the score. In the Properties panel keep the settings as shown in the image.

In the Variable field type the variable name as 'score'



8. Similarly create another text field and place it on the other hand. In the Variable field type the variable name as 'missed'

9. To understand what these two scores are showing type text 'hits' and 'miss' as shown in the image


10. Select frame 2 on Actions layer and type the following action.

stop();





Image Online  2001-2003