Bonjour,
Dans ce premier tutoriel, nous réaliserons ensemble un petit jeu de voiture simple en mode solo. La voiture sera manipulée par les touches du clavier . Nous utiliserons Flash 8 et de l'Actionscript 2

- Créez trois calques circuit, forme et actions.
- Dessinez deux formes , une première forme qui représente la voiture et une deuxième qui représente un obstacle que vous placerez dans le calque forme, après avoir importé une image de votre choix (fichier –> importer) dans le calque circuit.
- afin de créer vos Clip, transformer les formes déjà créées (la voiture et l'obstacle) en movie clip.
- Selectionnez la forme voiture puis cliquer sur F8 pour créer un premier clip que vous nommerez voiture
- Dans la boîte de dialogue qui apparaît, indiquez le nom voiture et cochez le bouton radio Movie clip puis cliquez sur le bouton OK, comme le montre l'image ci-dessous.

Procédez de même pour créer le deuxième clip obstacle. Donc :
- Selectionnez la forme obstacle puis cliquer sur F8 pour créer un deuxième clip que vous nommerez obstacle
- Dans la boîte de dialogue qui apparaît, indiquez le nom obstacle et cochez le bouton radio Movie clip puis cliquez sur le bouton OK.

Sélectionnez le movie clip obstacle et dans l'onglet Propriété, donnez un nom d'instance pour le movie clip obstacle par exemple obstacle_mc. Ce nom vous permettra d'intervenir sur le clip obstacle en ActionScript, de n'importe où dans l'application.

Procédez de même pour nommer l'instance du Clip voiture par voiture_mc:
Sélectionnez le movie clip voiture et dans l'onglet Propriété, donnez un nom d'instance pour le movie clip voiture par exemple voiture_mc.

Sélectionnez le calque actions puis tapez F9, Ecrivez ceci dans la fenêtre qui s'affiche c'est de l'actionscript, ce n'est pas sorcier

voiture_mc.onLoad = function() {
	voiture_mc.x = 0;
	voiture_mc.y = 0;
	voiture_mc.vitesse = 0;
};

Ainsi lors du chargement du clip voiture, les variables x, y et vitesse propre à l'instance voiture_mc seront initialisés à 0, par défaut elles le sont .
Mais ce n'est pas toujours le cas pour flash 2004 et d'autres.

Sous le même morceau de code prècedant :

 onClipEvent(load) { }

placez ceci:

voiture_mc.onEnterFrame = function() {
	//acceleration en avant 
	if (Key.isDown(Key.UP)) {
		//si le bouton directionnelle haut est enfoncé 
		voiture_mc.vitesse += 0.7;
	}
	//acceleration en arrière           
	if (Key.isDown(Key.DOWN)) {
		voiture_mc.vitesse -= 0.4;
	}
	//_rotation à gauche de la voiture             
	if (Key.isDown(Key.LEFT)) {
		voiture_mc._rotation -= 8;
	}
	//_rotation à droite de la voiture             
	if (Key.isDown(Key.RIGHT)) {
		voiture_mc._rotation += 8;
	}
	// limite l'acceleration sinon notre petite voiture se transformera en fusée      
	if (Math.abs(voiture_mc.vitesse)>1) {
		voiture_mc.vitesse *= 0.9;
	}
};

Jusqu'à présent seule la rotation est fonctionnelle puisque c'est une propriété propre aux movie clip
tandis que les variables vitesse , x et y ne le sont pas.
Le code est assez simple ainsi les commentaires dans ce dernier sont assez explicites.

Dans le second chapitre on verra le déplacement de la voiture en avant et en arrière.

Voici le nouveau code qui gère le déplacement en avant et en arrière de la voiture , vous l'aurez remarqué on a simplement ajouté quatre autres lignes :

voiture_mc.onEnterFrame = function() {
	//acceleration en avant 
	if (Key.isDown(Key.UP)) {
		//si le bouton directionnelle haut est enfoncé 
		voiture_mc.vitesse += 0.7;
	}
	//acceleration en arrière           
	if (Key.isDown(Key.DOWN)) {
		voiture_mc.vitesse -= 0.4;
	}
	//_rotation à gauche de la voiture             
	if (Key.isDown(Key.LEFT)) {
		voiture_mc._rotation -= 8;
	}
	//_rotation à droite de la voiture             
	if (Key.isDown(Key.RIGHT)) {
		voiture_mc._rotation += 8;
	}
	// limite l'acceleration sinon notre petite voiture se transformera en fusé      
	if (Math.abs(voiture_mc.vitesse)>1) {
		voiture_mc.vitesse *= 0.9;
	}
	// determine la position x en fonction de la vitesse    
	voiture_mc.x = Math.cos(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;
	// determine la position y en fonction de la vitesse    
	voiture_mc.y = Math.sin(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;
	//_x est une coordonnée de la voiture 
	voiture_mc._x += voiture_mc.x;
	//_x est une coordonnée de la voiture 
	voiture_mc._y += voiture_mc.y;
};

Pour déplacer la voiture il suffit de changer ses valeurs _x et _y qui représentent respectivement l'abscisse et l'ordonnée de son centre. Ce déplacement est réalisé en fonction de la rotation et de la vitesse donc la voiture avancera dans le direction déterminée par l'angle de rotation.

Le schéma ci-dessus d'un cercle de rayon de 1 et dont les angles sont en radians donc la _rotation de la voiture en degrés est angle = _rotation * PI/180 car 180 degrés = PI en radians

Le point de jonction de la ligne pointillée en rouge(avec y = sin(angle) et x=cos(angle)) et du cercle sur le schéma détermine la prochaine position .

Le -1=<cos=<1 et -1=<sin =<1 donc la voiture n'avancera pas très vite, la variable vitesse est utile afin de multiplier cette dernière avec les résultats obtenues ainsi augmenter la vitesse du mouvement.

Bref nous avons :

// determine la position x en fonction de la vitesse    
voiture_mc.x = Math.cos(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;
// determine la position y en fonction de la vitesse    
voiture_mc.y = Math.sin(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;

L'origine du repère est le centre du Clip voiture, donc un mouvement = nouvelle valeur + position précédente

//_x est une coordonnée de la voiture en rouge
voiture_mc._x += voiture_mc.x;
//_x est une coordonnée de la voiture en rouge
voiture_mc._y += voiture_mc.y;

Voici le nouveau code qui gère les collisions avec l'obstacle , on a ajouté un simple petit test :

voiture_mc.onEnterFrame = function() {
	//acceleration en avant 
	if (Key.isDown(Key.UP)) {
		//si le bouton directionnelle haut est enfoncé 
		voiture_mc.vitesse += 0.7;
	}
	//acceleration en arrière            
	if (Key.isDown(Key.DOWN)) {
		voiture_mc.vitesse -= 0.4;
	}
	//_rotation à gauche de la voiture              
	if (Key.isDown(Key.LEFT)) {
		voiture_mc._rotation -= 8;
	}
	//_rotation à droite de la voiture              
	if (Key.isDown(Key.RIGHT)) {
		voiture_mc._rotation += 8;
	}
	// limite l'acceleration sinon notre petite voiture se transformera en fusé       
	if (Math.abs(voiture_mc.vitesse)>1) {
		voiture_mc.vitesse *= 0.9;
	}
	// determine la position x en fonction de la vitesse     
	voiture_mc.x = Math.cos(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;
	// determine la position y en fonction de la vitesse    
	voiture_mc.y = Math.sin(voiture_mc._rotation*(Math.PI/180))*voiture_mc.vitesse;
	if (_root.obstacle_mc.hitTest(voiture_mc._x+voiture_mc.x, voiture_mc._y+voiture_mc.y, true)) {
		// collision avec l'obstacle
		voiture_mc.vitesse *= -0.5;
	} else {
		//_x est une coordonnée de la voiture rouge 
		voiture_mc._x += voiture_mc.x;
		//_x est une coordonnée de la voiture rouge
		voiture_mc._y += voiture_mc.y;
	}
	// rebond de la voiture après collision, 
};

Vous vous rappelez bien de notre clip obstacle avec comme instance obstacle_mc.
la fonction hitTest permet de détecter une collision entre deux movie clip

La méthode hitTest(cible) permet de détecter une collision entre deux movieclips ainsi MovieClip.hitTest(x, y, typeForme) permet de détecter une collision entre un point et le movieclip.

avec :
- cible, nom d'occurrence du movieclip.
- x, position x du point par rapport à l'axe global de l'animation.
- y, position y du point par rapport à l'axe global de l'animation.
- typeForme, valeur boolean. true, test sur toute la forme du movieclip. false, test sur le cadre de la forme du movieclip.

_root.obstacle_mc.hitTest(voiture_mc._x+voiture_mc.x, voiture_mc._y+voiture_mc.y, true)

renvoie true s'il y a bien une collision entre l'obstacle et la voiture, sinon elle renvoie false.
S'il y a collision on inverse le mouvement de la voiture afin de simuler le rebond

voiture_mc.vitesse *= -0.5;

sinon ça roule !!!

Tout fonctionne comme prévu , n'empêche que vous pouvez ajouter d'autre fonctionnalités au jeu.