Introduction à l'ActionScript

Par SuprazZz Mise à jour : 08/07/2010 Difficulté : Facile 4 613 visites depuis 7 jours, classé 39/786

Note de l'équipe de validation :

L'auteur de ce tutoriel n'est plus présent sur le site du zéro depuis un certain temps, et ne peut donc pas remettre en ligne les sources et autres fichiers qu'il propose tout au long de ce tutoriel. Merci de ne pas signaler les liens morts via le système d'alerte, nous sommes au courant mais ne pouvons malheureusement rien y faire tant que l'auteur ne revient pas.

Merci de votre compréhension,
Coyote.

Bonjour futurs flasheurs .

Depuis plusieurs années, vous pouvez voir fleurir sur les sites de la galaxie Web des petites animations colorées et interactives. Que ce soit des petits jeux, des radios, ou encore simplement de la publicité : Flash est maintenant omniprésent !

Dans Flash, on trouve deux parties distinctes : le graphisme et le scripting. Ce que ce tuto vous propose de faire c'est d'apprendre l'ActionScript, c'est-à-dire toute la partie dynamique d'une animation Flash !

Je vous souhaite bonne chance, et j'espère que vous prendrez autant de plaisir dans la lecture de ce tutoriel que moi pour l'écrire .

Petite recommandation avant de partir. Au début de chaque grand chapitre, j'indique le niveau prérequis pour une bonne compréhension du contenu des tutoriels. A chaque nouveau chapitre, nous ferons appel à des connaissances extérieures, comme le HTML, le PHP... Et cela toujours à des niveaux plus élevés. N'hésitez donc pas à commencer l'apprentissage de ces autres langages de façon simultanée !

A lire impérativement :
Je reçois beaucoup de messages personnels concernant ce tutoriel, dans beaucoup de messages on me dit que le code que je propose, même les exemples les plus simples, ne fonctionnent pas. En fait, ce tutoriel est rédigé pour les apprentis programmeurs en AS 2.0, alors que la version 3.0 d'ActionScript est sortie depuis quelques temps maintenant. Si la version 2.0 n'est pas obsolète pour autant, il faut bien faire attention quand on créé une nouvelle application Flash à la compiler en AS 2.0 (allez voir dans les propriétés de l'animation pour modifier ce paramètre) !
Merci aussi de ne pas m'envoyer de messages privés, je n'aurai pas le temps d'y répondre, mais le forum est là pour ça

• Présentation de Flash
• Les bases de l'actionscript
• Actionscript avancé
• Communication client-serveur
• Techniques complexes
• Annexes
• Commentaires et appréciations

• Retour en haut

  Partie 1 : Présentation de Flash

  Flash est un outil très puissant sur le web, car il autorise une interaction avec l'utilisateur que d'autres technologies comme le Javascript auraient du mal à fournir.
  Mais il est indispensable de savoir utiliser Flash avec parcimonie.
  
  Nous allons donc faire un petit tour d'horizon : ce qu'est Flash, ce qu'on peut en faire, et pour finir un schéma fonctionnel du Fil Rouge de fin de chapitre que nous réaliserons !
  
  

  Prérequis : aucun.

  
  

  But : Première approche de l'interface

  • Chapitre 1

    ---

    Flash bien / pas bien

    • Flash sous toutes ses coutures
    • Flash c'est pas bien
    • Flash c'est bien
  • Chapitre 2

    ---

    Deux architectures classiques

    • L'Architecture Flashocentriste
    • L'architecture Flashoponctuelle
  • Chapitre 3

    ---

    L'IDE de macromedia

    • Se familiariser avec l'interface
    • Le Scénario
    • Formes et Symboles
  • Chapitre 4

    ---

    Où je le mets ce fichu code ?

    • Notion de "clip"
    • Créer un clip
    • Les zones de texte
    • La solution pratique
    • Q.C.M.
  • Chapitre 5

    ---

    Ma première animation !

    • Un nouveau document
    • Dessine moi une balle
    • Interpolation de mouvement
    • Un soupçon d'ActionScript
  • Chapitre 6

    ---

    Fil rouge

    • Cahier des charges
    • Architecture globale

  
  Dans ce chapitre, nous avons donc délimité les champs d'application de Flash, et nous avons vu d'un point de vue très théorique ce qu'allait être notre travail tout au long de notre Fil Rouge
• Retour en haut

  Partie 2 : Les bases de l'actionscript

  Actionscript est le langage de script de Flash. C'est grâce à lui qu'une bête animation Flash gagne toute son interactivité.
  Macromedia s'est inspiré du standard ECMAscript (nom standard du javascript) pour créer son langage, vous retrouverez donc de fortes similitudes avec ce langage pour les chanceux qui le connaissent déjà.
  
  Nous allons nous intéresser à la structure du code et au positionnement de ce dernier, Flash possédant un système de "clip" sûr et dans chacun desquels du code peut être placé. Ce qui crée une complexité artificielle dans la conception d'application.
  
  

  Prérequis : vous devez avoir bien compris le maniement de l'IDE de Flash. Vous devez surtout savoir comment créer un clip.

  
  

  But :
  - Assimiler la structure de l'ActionScript
  - Comprendre le système d'événements
  => Logo animé de ZoZor !

  • Chapitre 1

    ---

    Variables et fonction trace()

    • Structure et commentaires
    • Fonction trace()
    • Les numériques : int et Number
    • Les chaines de caractères : String
    • Les tableaux : Vector
    • Q.C.M.
  • Chapitre 2

    ---

    MovieClip

    • _root , this et _parent
    • Positionnement
    • Taille absolue
    • Agrandissement
    • Rotation
    • Transparence
    • Visibilité
    • Q.C.M.
  • Chapitre 3

    ---

    Les Conditions

    • Un nouveau type : Boolean
    • Opérateurs de test
    • Opérations sur les booléens
    • La structure conditionnelle
    • Récapitulatif
    • Q.C.M.
  • Chapitre 4

    ---

    Les Boucles

    • Qu'est-ce qu'une boucle
    • Boucle while
    • Boucle for
    • Petits exercices de style
    • Q.C.M.
  • Chapitre 5

    ---

    Les Fonctions

    • Déclarer une fonction
    • Des arguments
    • Retour de valeur
    • Méthodes et fonctions
  • Chapitre 6

    ---

    Les Evénements

    • Vous avez dit "événement" ?
    • Evénements souris localisés
    • Evénements souris globaux
    • Evénements à tout faire !
    • Récapitulatif
    • Q.C.M.
  • Chapitre 7

    ---

    Fil rouge - le logo animé

    • Point de départ
    • Bonnet de noël
    • Rotation des yeux
    • Contenu de la bulle
    • Récapitulatif

  
  Cette partie vous a autorisé une première approche du langage ActionScript, et vous a permis de réaliser un petit logo animé sympa.
  Vous avez appris l'essentiel et sûrement la plus grosse partie de ce qu'il y a à savoir, les prochains chapitres relèveront plus de l'application de ces connaissances.
• Retour en haut

  Partie 3 : Actionscript avancé

  Nous avons vu les bases de l'Actionscript. Et c'était déjà un gros morceau.
  Vous allez voir que Flash en garde encore sous le pied, et que la programmation avancée c'est rigolo.
  Et comme dans toute animation Flash, vous avez intérêt à avoir un crayon et du papier à petits carreaux sous la main , car cela aide à comprendre le positionnement des objets, et permet de faire de petits calculs mathématiques chiants à faire de tête (règles de 3, ...).
  
  

  Prérequis :
  - Maîtriser l'IDE de Flash (créer des clips, savoir où placer le code)
  - Maîtriser les bases de l'ActionScript
  - Connaître les bases de l'HTML (langage de balises).

  
  
  

  But :
  - Maîtriser la notion de Clips
  - Connaître l'API de dessin
  - Savoir utiliser les écouteurs claviers
  - Détecter les collisions
  => Jeu de voiture !
  

  • Chapitre 1

    ---

    Créer et enlever des Clips

    • Clips dynamiques, statiques et profondeur
    • Créer un clip vide
    • Dupliquer un clip de la scène
    • Attacher un clip à la scène
    • Supprimer un clip
    • Une astuce en profondeur
    • La variable dans la variable
    • Q.C.M.
  • Chapitre 2

    ---

    Publication et variables

    • Paramètres de publication Html
    • Le code Html expliqué
    • Envoie des variables
    • Réception des variables
    • Les caractères spéciaux
    • Q.C.M.
  • Chapitre 3

    ---

    Dessiner avec Actionscript

    • Couleurs d'un clip
    • Dessinons sur des clips
    • Gribouillons un peu
    • Un peu de coloriage !
    • Gommez moi tout ça !
    • Q.C.M.
  • Chapitre 4

    ---

    Utiliser le clavier

    • Les écouteurs
    • La touche enfoncée
    • Les raccourcis des touches
    • Une condition bien pratique !
    • Trichons avec les écouteurs
  • Chapitre 5

    ---

    Les collisions

    • Approche des collisions
    • Collision rectangulaire
    • Collision circulaire
    • Collision ponctuelle
    • Collision bourrine
  • Chapitre 6

    ---

    Fil rouge - On The Road Again

    • Point de départ
    • Faire mumuse avec la voiture
    • Les goals
    • Collisions inside
    • Fignolages
    • Des améliorations

  
  A la fin de ce chapitre, vous avez toutes les connaissances requises pour faire ce que vous voulez avec Flash. Cependant, Flash seul ne suffit plus, il va falloir le coupler avec une technologie côté serveur.
• Retour en haut

  Partie 4 : Communication client-serveur

  Voilà un chapitre qui fera appel à toutes vos connaissances !
  Si vous ne connaissez pas le PHP, allez lire ce tuto sur le sujet et revenez plus tard.
  
  Si vous êtes débutant en PHP, ne vous inquiétez pas, on ira doucement... pour l'instant !
  
  

  Prérequis :
  - maîtriser l'IDE de Flash (créer des clips, savoir où placer le code)
  - maîtriser les bases et les fonctions avancées de l'ActionScript
  - connaître le fonctionnement d'un site Web (Requêtes HTTP, HTML ...)
  - connaître les bases du PHP.

  
  

  But :
  - comprendre le système de sécurité du lecteur Flash
  - charger des variables
  - charger du contenu multimédia (photos, vidéos, animations Flash).
  => Radio-Blog !
  

  • Chapitre 1

    ---

    Sécurité et Flash

    • crossdomain.xml
    • Structure de crossdomain.xml
    • Nouveautés de FlashPlayer 8
    • Contourner la protection
  • Chapitre 2

    ---

    Images et Animations

    • Dans un clip ou un niveau
    • Un chargeur
    • Redimensionner l'image
    • Particularité du chargement des animations
  • Chapitre 3

    ---

    Transfert de variables

    • La vieille technique
    • Chargement avec LoadVars
    • Envoyer des variables
    • Exercice : Zozor dynamique
    • Q.C.M.
  • Chapitre 4

    ---

    Musique !

    • Préparation du terrain
    • Lecture
    • Curseur de lecture
    • Chargement dynamique
    • Q.C.M.
  • Chapitre 5

    ---

    Vidéos

    • Riva FLV Encoder
    • Un nouvel objet
    • Trois classes pour le prix d'une
    • Contrôle du flux
  • Chapitre 6

    ---

    Fil Rouge - Radio-Blog

    • Du côté de PHP
    • Chargement de la Playlist
    • Gestion de la musique
    • Le volume - startDrag() notre ami
    • L'ascenceur

  
  Maintenant vous savez tout ! Les chapitres suivants seront plus pointus et dévoileront des fonctions propres aux dernières versions de Flash.
• Retour en haut

  Partie 5 : Techniques complexes

  Si vous avez tenu jusque là, vous connaissez à peu près tout ce qui est possible de faire avec les anciennes versions de Flash. Mais Flash a toujours été avant-gardiste, et intègre donc des technologies en pleine expansion, comme le XML ou l'upload de fichiers contrôlé.
  
  Bref, tout ce qui est nécessaire pour créer un projet Flash complexe !
  
  

  Prérequis :
  - maîtriser très bien le logiciel (interface et Actionscript vu jusque là)
  - connaître suffisamment le PHP.

  
  

  But :
  - utilisation du XML avec Flash
  - envoi de fichiers.
  => Galerie Photo !
  

  • Chapitre 1

    ---

    Gestion du XML

    • Rappel sur le XML
    • Chargement
    • Une grande famille !
    • Types et attributs
    • XML tabulaire
• Retour en haut

  Partie 6 : Annexes

  Cette annexe comportera quelques astuces ou morceaux de code choisis.
  Je ferais en sorte d'accumuler ici les astuces en suivant l'ordre du cours.

  • Chapitre 1

    ---

    Rotation d'un clip vers la souris

    • Création du clip
    • Explication géométrique
    • Le code

L'auteur du tutoriel étant en prépa maths, il ne pourra pas reprendre la rédaction de ce tutoriel avant d'avoir intégrer une (grande ) école : souhaitez lui bonne chance

Réponse de l'auteur: j'ai fini ma prépa l'année dernière mais du fait de l'emploi du temps de mon école je n'ai pas vraiment eu le temps de revenir par ici Je verrai dans les prochaines semaines si j'ai le temps de faire évoluer ce tuto vers l'AS 3...

Partager

Retour en haut

45 commentaires pour "Introduction à l'ActionScript"

Note moyenne : 3.24 / 4 (137 votes)

Pseudo	Commentaire
Saiyajin	# Posté le 30/09/2011 à 23:31:30
Time Of Your Life... Ville : Renes Pays : Suisse Études : ERACOM Lausanne	L'animateur ne reviendra jamais :s ? ActionScript/JavaScript En pleine étude du language HaXe.
loulou85	# Posté le 09/10/2011 à 22:15:31
	Je suis en train de suivre ce tuto également pour apprendre un peu le flashet je dois avoué que c'est très dommage que l'auteur n'est plus le temps de le continuer car ilest vraiment bien et c'est le seul que j'ai trouver comme ça. Le mini jeu de la fin avait l'air excellent :s. C'est dommage aussi que son site ne fonctionne plus car tout c'est lien ne fonctionne plus non plus et on peut pas voir les démos.. j'espère trop que l'auteur vas revenir En tout cas très bon travail pour ce que j'en ai vue donc j'espère que le tuto vas poursuivre mais j'y crois pas trop vue la date... loulou Ma vidéo de Space-painting ! Mon TP sur le php pour mettre en pratique les cours de matéo : c'est ici !
Saiyajin	# Posté le 19/10/2011 à 11:33:39
Time Of Your Life... Ville : Renes Pays : Suisse Études : ERACOM Lausanne	Sympas mais sa aurait génial en PDF Sinon ,sa aurait été super q'une personne la fasse en AS3 ActionScript/JavaScript En pleine étude du language HaXe.
Saiyajin	# Posté le 25/10/2011 à 13:58:54
Time Of Your Life... Ville : Renes Pays : Suisse Études : ERACOM Lausanne	Personne pourrait faire un tuto similaire en AS3 ? Ce serait dommage les zeors qui souhaient l'apprendre.. ActionScript/JavaScript En pleine étude du language HaXe.
Bob-le-zéro	# Posté le 18/02/2012 à 18:15:45
Euh... Hein ? Blog Twitter close	Si l'auteur n'a pas le temps de le finir, il ne pourrais pas au moins l'indiquer "en attente d'un repreneur" ? Ça serait dommage de laisser tout ça à l'abandon . Tutoriel en ligne : Initiation à la création d'un design extensible Les bons reflex à avoir (X)HTML/CSS PHP MySQL Validation (X)HTML Validation CSS Fonctions PHP php.net/fonction mysql.fr Documentation

Voir tous les commentaires