How to create a flash game

[Jakub]

The game that you create is a simple game that you will understand how to organize its layers, manage support keyboard (arrow keys), animating the MovieClip and manage a scoring system. In this tutorial you will come to know how to make a flash game in ActionScript, clone of Dance Dance Revolution. Attention, tutorial into two parts.

What you need to create a game in flash

Adobe Flash 8

To create a flash game, you must use Flash 8. Flash 8 is paying but Adobe offers a trial version (which includes all the features of the software) for 30 days. To do this you simply need to register on the Adobe website.

Files. Fla and. Swf

FLA file is a file that can be opened by Flash. This is the main source file, is used to create the file. Swf.

A SWF file is the file that you get when you compile a FLA file. SWF files are those that you can embed in a webpage.

Create a new Flash file (. Fla)

First, create a new Flash document (File> New ...> Flash Document). By default, the size of the arena is 550x400 pixels and frame rates of 12 fps.

For this example we'll use a scene size of 300x350 pixels and a rate of 30 frames / second for an impression of fluidity.
To change these settings, open the Properties panel will appear at the bottom (Window> Properties ...> Properties).

Import images into Flash

In your game, you will see graphic element. You can create these images with Flash, which has vector drawing tools or by using another program like Adobe Illustrator. To import images in the library of your Flash file, click File> Import> Import to Library.

Choose one or more images that will be immediately copied in the library of your Flash file. To open the library, click Window> Library. The library will contain all the elements of your scene. To leave an item in the library, just a drag on the scene. By doing this, you do not remove the element of the library (it is always present) but you create only one occurrence (i.e like a copy) of your MC on the scene.

You can create as many instances of an MC that you want. To identify each occurrence, Flash uses the names of occurrence.

When you import an image, check its compression settings. To do this, right click> properties on your image in the library. In the menu "Compression" select "lossless (PNG / GIF)".

It is strongly advised not to use these images directly on the stage, you must convert to symbol (MovieClip), otherwise Flash will create temporary images in the library named Interpolation XX. To avoid this, drag the image onto the scene and then choose Edit> Convert to Symbol (F8).
Select "Clip" and give it a name like "my_video" or "my_pics" for proper recognition. You can then delete the MovieClip from the stage, it now appears in your library. This MC and not the image that you will use and manipulate.

[Jakub]

Place images in Flash

Once you've created your MovieClip, create a layer that you call "background". Place your mc_fond with the X and Y coordinates to 0 (in the properties panel).
Lock the layer to avoid selecting the substance by mistake. Create a new layer and name the "arrows". Place the mc_fleche on stage but outside the working area of 300x350. The arrow will be positioned by the ActionScript code.

Management scenario of a Flash game

A flash game is not built as an animation in that not everything can be programmed in advance. On the main time line, everything will take place on a single image that will be played in a loop by the Flash player. To do this we will use the onEnterFrame Flash.

This feature allows you to execute a portion of code as soon as Flash draws an image, ie 30 times per second. To initialize variables, it simply puts the boots outside this block onEnterFrame.


Managing pressing the arrow keys


Create a layer that you call "ActionScript", which will contain all the code to run the game On the first frame, enter this ActionScript code:

  _root.onEnterFrame = function () ( 
	  if (Key.isDown (Key.UP)) ( 
		  trace ( "key is pressed UP"); 	
	  ) 
	  if (Key.isDown (Key.DOWN)) ( 
		  trace ( "key is pressed DOWN"); 	
	  ) 
	  if (Key.isDown (Key.LEFT)) ( 
		  trace ( "key is pressed LEFT"); 	
	  ) 	
	  if (Key.isDown (Key.RIGHT)) ( 
		  trace ( "RIGHT key is pressed"); 	
	  ) 
  )

This code will intercept supports the arrow keys on the keyboard. For now, only one support triggers several trace (), because the code is done 30 times per second.

[Jakub]

Placement of the movieclip in flash action script (_x and _y properties)

We will now code the moving arrows down in actionscript. To facilitate this, move on your scene, 4 occurrences of "my_video.
Turn each of the arrows that you have an arrow pointing upwards to the left, right and down through the tool "Free Transformation." In the Properties panel, give them a name corresponding occurrence.

To place the arrows fixed, we will play on the script action properties _x and _y of movie clips flash. We will all vertically (_y) to 290 pixels high and move horizontally (_x) to the right with the same spacing.

Also in the first image, copy and paste the code as follows (outside block onEnterFrame:

 fleche_gauche._y = fleche_bas._y = fleche_haut._y = fleche_droite._y = 290; 
  fleche_gauche._x = 60; 
  fleche_bas._x = 120; 
  fleche_haut._x = 180; 
  fleche_droite._x = 240;

The arrows will appear completely shifted since the point of rotation of movie clip "mc_fleche" is placed on the top left corner of the image. The rotation was therefore done in relation to this point and the coordinates are changed.

To change the rotation point, we will simply put the original movie clip aligned with the center of the arrow. We must therefore go off edition of the MC "mc_fleche" and move the arrow to the center of the MC (the cross).

If you do a preview of your animation flash (ctrl + enter), your arrows should be placed correctly. If this is not the case, make sure you've spelled the names of occurrence on the stage and in the code.

Creating the movie clip containing the arrows down

First, create a new MC with the arrow that goes down and call it "Fleche_move. These can be created simply with the vector drawing tools of Flash (in "locking" the final shape within a movieclip or import a new image file in the library as you did previously fixed for the arrows. In order not to confuse these arrows will be green (or choose the color of your choice).

[Zukario]

Thanks for sharing these useful tips Jakub.

[Lalhmahruaia]

Thanks for sharing ....................