Dans ce tuto de près de deux heures, nous allons créer un jeu de tir sous Flash, en ActionScript 3, avec gestion du comptage des points, mais aussi des niveaux (en fonction des points gagnés). Ce n'est pas tout, pour que ce jeu soit un peu plus fun, nous allons ajouter un effet d'explosion sur les objets touchés par la cible, cette explosion sera entièrement créée via les interpolations de mouvements et l'ajout de quelques filtres (pas de code pour cette étape)

Les fonctionnalités du jeu de tir :

  • Gestion de l'affichage des points
  • Gestion de la difficulté (niveau évolutif en fonction des points gagnés)
  • Animation pour le game-over et la perte de points
  • Bombe explosives sans la moindre ligne de code
  • Page de démarrage
  • Codage en procédural (dans le fichier .fla)

Voici l'ensemble des étapes de ce tutoriel:


I) Mise en place des éléments graphiques
  • Création du background
  • Mise en place du bouton de démarrage (rollOver et rollOut)
  • Mise en place des textes dynamiques (nb erreurs et score)
  • Création du clip des erreurs (normal,erreur,game-over)
  • Création de la cible (technique de découpage)
  • Création de la bombe: mise en place des éléments de l'explosion, animation et mise en place des filtres pour les différents effets.
II)Le codage:
  • Instanciation de l'ensemble des variables liés à l'application
  • Initialisation (masquage curseur, création de la bombe,ajout d'écouteurs)
  • Création de la fonction aléatoire (renvoie d'une valeur entre min et max)
  • Animation de la bombe : gestion des points, suppression de l'objet en sortie, positionnement aléatoire
  • Fonction lié au curseur (remplace la cible par le curseur par défaut)
  • Fonction lié à l'action 'tirer': HitTest entre la cible et la bombe, implémentation des points (hitTest == true), explosion de la bombe, utilisation du setTimeout
  • Fonction lié au passage de niveau: gestion de la vitesse en fonction des points, gestion du gameOver (animation)
III)Les fichiers sources

Jetez un oeil à ces autres tuto Flash CS4, ActionScript 3

Gérer un modèle 3D dans Flash CS4Gérer un modèle 3D dans…
Dans ce tuto Flash CS4 et ActionScript 3 vous apprendrez à…

Jeu Merlin FLash 3DJeu Merlin FLash 3D
Ce tuto ActionScript 3 en vidéo, d'un niveau intermédiaire,…

Champ de vidéos 3DChamp de vidéos 3D
Dans ce tuto Actionscript 3 en vidéo, vous allez apprendre…

Répertoire téléphonique avec Flash, xml et PHPRépertoire téléphonique…
Dans ce tuto Flash en vidéo, vous allez apprendre à développer…

Créez un site flash de type PortfolioCréez un site flash de type…
Apprenez dans cette formation à réaliser un site complet en…

 Website xml avec utilisation de SWFAddress et SWFObjectWebsite xml avec utilisation…
Dans ce tutoriel, nous allons créer un website dynamique qui…

Créer un website avec gestion xml en as3Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…

Débutez facilement avec Flash CS4Débutez facilement avec Flash…
Cette vidéo de découverte va vous permettre de découvrir…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Flash CS4, ActionScript 3 de 1 heure 52 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

artkabis , formateur certifié

Passionné par le webdesign, j'aime acquérir de nouvelles connaissances en ratissant la toile. Au fil du temps j'ai su mettre à profit mes compétences de webdesigner pour mélanger interactivité, design et animation. Curieux, j'aime être au courant des dernières nouveautés en matière d'applications internet riches (RIA). Autodidacte, je sais m'adapter aux différents outils de création web. J'utilise au quotidien une multitude de logiciels pour parfaire ma soif de création.

En savoir plus sur artkabis


Témoignage des clients de artkabis

Merci pour tous tes tutoriels. Ils sont super agréables et bien conçus. Grâce à toi j'ai appris de nouvelles choses.

Très bien permet d'apprendre flash rapidement et efficacement

En un mot...stupéfiant ! Merci beaucoup :)

Supers tuto, plein de bonnes astuces, merci :)

Artkabis, vraiment toi tu déchires grave... J'aime vraiment tes tuto et on voit de suite ta passion pour le flash, j'aimerai vraiment avoir 5% de tes connaissances... Bonne continuation à toi...

Lire les autres témoignages

 

D'autres tuto de artkabis

Galerie Slider xml (gestion vitesse de défilement )Galerie Slider xml (gestion vitesse de défilement )
 Dans ce tuto, nous allons créer une galerie défilante (ou slider) avec gestion…

Vos contenus adaptés pour l'international (detection auto)Vos contenus adaptés pour l'international (detection auto)
 Bonjour à tous, aujourd'hui je vous propose un tutoriel sur la création d'une…

Un curseur personnalisé comme preloader  Un curseur personnalisé comme preloader
 Dans ce tutoriel, nous allons créer un preloader qui fera office  de curseur…

Lecteur de news dynamiqueLecteur de news dynamique
 Dans ce tutoriel d'à peu prêt 2 heures, nous allons créer un lecteur de news…

voir tous les tuto de artkabis

Notes attribuées par les utilisateurs (2 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (8)

par bonzai972à voté :
(a acheté ce tuto - 02 novembre 2011)

" Génial le tuto "

par artkabis
(auteur de ce tuto - 30 juin 2010)

" Et bien là tu as toutes les infos pour ajouter autant de bombe que tu le souhaites et ceci aussi bien sur l'axe verticale qu'horizontal. Tout est dans le code que je tes fournis, il suffit de répéter les étapes précédemment passés en revues.

Cordialement, Artkabis. "

par bobbyla
(a acheté ce tuto - 30 juin 2010)

" Merci beaucoup!!!

Il aurait fallut que je rajoute 1 autre bombe horizontal et 1 autre vertical mais cela me va !!!!! "

par artkabis
(auteur de ce tuto - 24 juin 2010)

" Salut bobbyla,
Alors je viens de terminer les modifs de cette amélioration et tout fonctionne correctement. Donc pour t'expliquer :

1°)Commences par créer un nouvel objet "bombe" et modifier la bombe existante par bombeV:
var bombeV:Bombe = new Bombe();
var bombeH:Bombe = new Bombe();

2°)on créait un nous randomY: var randomY:Number;

3°)on instancie notre nouvelle bombe:
addChild(bombeH);
bombeH.x=0;
bombeH.y=stage.stageHeight/2;

4°)Supprimes le bombeV devant l'écouteur du enterFrame, puis dans la fonction lié (animBombe) : mais en place le randomY sa valeur représente l'inverse du calcul du randomH.

5°)Attribues la vitesse à bombeH : bombeH.x+= vitesse;

6°)Recopies la condition suivante et reformate là pour que tous les élément lié à bombeV soient remplacés par bombeH

7°)Dans la fonction tirer, modifies la seconde condition par celle-ci :
if (cible.hitTestObject(bombeV) || cible.hitTestObject(bombeH)){
Il faut ensuite que tu sépares les éléments en fonction de la bombe vers la cible:
if(cible.hitTestObject(bombeV))
{
bombeV.gotoAndPlay('exploz');
setTimeout(function(){
bombeV.x = randomX;
bombeV.y = 0;
vitesse=_vitesse;
activTir=true
},1000);
}
if(cible.hitTestObject(bombeH))
{
bombeH.gotoAndPlay('exploz');
setTimeout(function(){
bombeH.x = 0;
bombeV.y = randomY;
vitesse=_vitesse;
activTir=true},1000);
}

8°) Pour finir, dans la fonction "point", tu devras modifier le contenu de la condition par ceci:
if(erreur===maxErreur){
perdu.gotoAndPlay('gameOver');
removeEventListener('enterFrame',animBombe);
removeChild(bombeV);
removeChild(bombeH);
}

Voilà, avec ceci le jeux comptera deux bombes, l'une géré en horizontal, l'autre en verticale.
"

par bobbyla
(a acheté ce tuto - 24 juin 2010)

" Salut,

Super tuto, cela ne m'a pas pris énormément de temps mais j'aurais voulu savoir comment rajouter des bombes, verticales et horizontales pour accroitre un peu la difficultée sans trop modifier le code.

Merci d'avance. "

par romudu10
(a acheté ce tuto - 22 décembre 2009)

" merci mais je viens de trouver le problème j'avais mal écrit le nom de l'occurrence.

mais merci quand même. "

par artkabis
(auteur de ce tuto - 22 décembre 2009)

" Salut, alors je veux bien regarder ton fichier, tu peux me l'envoyer via http://dl.free.fr

Poste le lien de ton fichier et j'essayerais de trouver le problème. "

par romudu10
(a acheté ce tuto - 22 décembre 2009)

" Salut, très bon tuto
mais quand je refais le tuto
le score et les erreurs n'apparaissent pas, je ne vois pas où est l'erreur.

merci
j'attends ta réponse avec impatience "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Flash CS4, ActionScript 3 d’une durée de 1 heure 52 minutes a été acheté 68 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 13 septembre 2009 par artkabis, formateur certifié par Tuto.com, ayant reçu une note moyenne de 3,9/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Flash Jeu.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !