« ActionScript/Première Application » : différence entre les versions

Une page de Wikiversité, la communauté pédagogique libre.
Contenu supprimé Contenu ajouté
m Bot : Remplacement de texte automatisé (-\. A +. À )
B-nux (discussion | contributions)
Aucun résumé des modifications
Ligne 8 : Ligne 8 :
|suivant=[[Actionscript/Syntaxe 1|Syntaxe : variables]]}}
|suivant=[[Actionscript/Syntaxe 1|Syntaxe : variables]]}}


== Avec l'IDE d'Adobe : Flash ==
== Le traditionnel "Hello World" ==
=== Première Application, sans rien comprendre !===
=== Première Application, sans rien comprendre !===
Au démarrage du logiciel, vous trouverez, au centre de votre écran la page d'accueil de flash. Dans celle-ci, sélectionnez ''Fichier Flash (AS 3.0)''.
Au démarrage de Flash, vous trouverez, au centre de votre écran la page d'accueil de flash. Dans celle-ci, sélectionnez ''Fichier Flash (AS 3.0)''.
Normelement, il est apparu<s>, devant vos yeux ébahis,</s>différents panneaux supplémentaires :
Normalement, il est apparu, <s>devant vos yeux ébahis</s>,différents panneaux :
* En haut le panneau ''Scénario''
* En haut le panneau ''Scénario''
* En bas le panneau ''Propriétés'' s'est dégrisé.
* En bas le panneau ''Propriétés'' s'est dégrisé.


Le but de ce cours n'étant pas de vous présenter l'IDE Flash dans ses moindres détails je vous présente l'essentiel, dont on se resservira en Actionscript.
Le but de ce cours n'étant pas de vous présenter l'IDE Flash dans ses moindres détails je vous présenterai l'essentiel, dont on se resservira en Actionscript.
Vous verrez aussi un rectangle blanc au milieu, pour votre culture générale, sachez qu'on nomme ceci ''la scène''.<br/> Et que c'est là-dedans que se déroulera toute votre animation, alors prenez-en grand soin !
Vous verrez aussi un rectangle blanc au milieu, pour votre culture générale, sachez qu'on nomme ceci ''la scène''.<br/>
Et que c'est là-dedans que se déroulera votre animation, alors prenez-en grand soin !


Bon je parle, je parle mais vous n'avez rien fait encore alors tous à vos claviers et ''Let's go!'' :
Bon je parle, je parle mais vous n'avez rien fait encore alors tous à vos claviers et ''Let's go!'' :


# Dans le panneau ''propriétés'' en bas de votre écran, vous devriez voir un champ ''Classe du document'', remplissez le avec un nom du genre ''mapage'' ou ''test'' ou bien encore ''essai'' enfin bref comme vous voulez !. Normalement une boîte de dialogue s'affiche vous indiquant que Flash ne trouve pas la définition de classe et qu'il en générera une à la compilation. Nous arrangerons ça dans quelques instants vous verrez...
# Dans le panneau ''propriétés'' en bas de votre écran, vous devriez voir un champ ''Classe du document'', remplissez le et mettez un ''test'', il s'agit en fait du nom de cla classe qui sera appellée à la compilation. Normalement une boîte de dialogue s'affiche vous indiquant que Flash ne trouve pas la définition de classe et qu'il en générera une à la compilation. Nous arrangerons ça dans quelques instants vous verrez...
# Allez dans ''fichier'' puis ''nouveau''
# Allez dans ''fichier'' puis ''nouveau''
# Dans la boîte de dialogue s'affichant, sélectionnez ''Fichier ActionScript''
# Dans la boîte de dialogue s'affichant, sélectionnez ''Fichier ActionScript''
Ligne 31 : Ligne 32 :
import flash.display.MovieClip;
import flash.display.MovieClip;


public class le_nom_que_vous_avez_mis_dans_le_champ_:_Classe_du_document extends MovieClip
public class test extends MovieClip
{
{
public function le_nom_que_vous_avez_mis_dans_le_champ_:_Classe_du_document ():void
public function test ():void
{
{
trace('Hello World!'); // le traditionnel !
trace('Hello World!'); // le traditionnel !
Ligne 41 : Ligne 42 :
</source>
</source>


Enregistrez ce fichier et votre scène dans le même dossier mettez le nom que vous voulez pour votre scène par contre pour votre fichier Actionscript (.as) mettez comme nom celui que vous avez mis dans le champ ''Classe du document :'' de votre scène. Bon, c'est presque terminer il reste juste à spécifier à Flash que vous voulez récupérer des classes dans le dossier dans lequel vous avez enregistrez vos deux fichiers !Vous vous rappellez en 1 je vous avez dit que Flash ne trouvait pas votre classe et bien c'est maintenant que l'on va lui dire où la chercher ! Attention, tous à vos claviers !
Enregistrez ce fichier et votre scène dans le même dossier mettez le nom que vous voulez pour votre scène par contre votre fichier actionscript, votre (.as) enregistrez le sous ''test.as'' Bon, c'est presque terminé il reste juste à spécifier à Flash que vous voulez récupérer des classes dans le dossier dans lequel vous avez enregistrez vos deux fichiers !Vous vous rappellez en 1 je vous avez dit que Flash ne trouvait pas votre classe et qu'il en générerait une à la compilation ?<br/>
Et bien c'est maintenant que l'on va lui dire où la chercher ! Attention, tous à vos claviers !, enfin surtout à vos souris :p !
# allez dans le menu ''Modifier'' puis ''Préferences'', une boîte de dialogue s'affiche.
# Allez dans le menu ''Modifier'' puis ''Préferences'', une boîte de dialogue s'affiche.
# Dans cette boîte de dialogue, il ya une liste de différents 'onglets' à gauche, sélectionnez ''ActionScript'', la page change
# Dans cette boîte de dialogue, il y a une liste de différents 'onglets' à gauche, sélectionnez ''ActionScript'', la page change
# Tout en bas de la nouvelle page, sélectionnez ''Paramètres d'ActionScript 3.0...'', une boîte de dialogue s'affiche.
# Tout en bas de la nouvelle page, sélectionnez ''Paramètres d'ActionScript 3.0...'', une boîte de dialogue s'affiche.
# Appuyez sur le '''+''' puis sur la cible, sélectionnez alors le répertoire dans lequel vous avez enregistré vos deux fichiers (la ''scène'' et votre ''.as'')
# Appuyez sur le '''+''' puis sur la '''cible''', sélectionnez alors le répertoire dans lequel vous avez enregistré vos deux fichiers (la ''scène''(.fla) et votre fichier ''test.as'')


Une fois cela fait, vous pouvez tout fermer, en cliquant sur les ''Ok'' successifs (deux noramlement) !
Une fois cela fait, vous pouvez tout fermer, en cliquant sur les ''Ok'' successifs (deux noramlement) !
Vous êtes pret?
Vous êtes pret?
Maintenant allez dans le Menu ''Contrôle'' puis ''Tester l'animation''.
Maintenant allez dans le Menu ''Contrôle'' puis ''Tester l'animation''. (Pour les adeptes du clavier vous pouvez aussi appuyer sur els touches ctrl+entrée )
Noramlement vous voyez apparaître votre scène blanche, mais surprise, le panneau d'en bas a changé, vous vous êtes retrouvé dans le panneau ''sortie'' qui noramlement vous affiche ''Hello World''
Noramlement vous voyez apparaître votre scène blanche, mais surprise, le panneau d'en bas a affiché quelque chose : 'Hello World!'. Il s'agit en fait du panneau ''sortie'' ce sera votre débuggeur !


Et voilà vous venez de réaliser votre première application en ActionScript 3.0, si c'est pas mimi ça ?
Et voilà vous venez de réaliser votre première application en ActionScript 3.0, si c'est pas mimi ça ?
Ligne 56 : Ligne 58 :
=== Quelques Explications ===
=== Quelques Explications ===


Ici, je vais vous expliquer un peu le code présent dans votre fichier ''.as''<br/>
Ici, je vais vous expliquer un peu le code présent dans votre fichier ''test.as''<br/>
<source lang="actionscript">
<source lang="actionscript">
package
package
Ligne 67 : Ligne 69 :
* Enregistrez toutes vos classes présentes dans un package dans un même dossier portant le nom du package comme nom
* Enregistrez toutes vos classes présentes dans un package dans un même dossier portant le nom du package comme nom


Si vous ne comprennez pas tout, rassurez-vous ça viendra avec le temps et puis, la vie est longue vous avez le temps !
Si vous ne comprennez pas tout, rassurez-vous ça viendra avec le temps !
Bon prêt pour un nouveau bout de code ?
Bon prêt pour un nouveau bout de code ?
<source lang="actionscript">
<source lang="actionscript">
Ligne 88 : Ligne 90 :
import flash.dsplay.MovieClip
import flash.dsplay.MovieClip
public class le_nom_de_votre_classe extends MovieClip
public class test extends MovieClip
{
{
...
...
Ligne 113 : Ligne 115 :
import flash.display.MovieClip;
import flash.display.MovieClip;


public class le_nom_que_vous_avez_mis_dans_le_champ_:_Classe_du_document extends MovieClip
public class test extends MovieClip
{
{
public function le_nom_que_vous_avez_mis_dans_le_champ_:_Classe_du_document ():void
public function test ():void
{
{
trace('Hello World!'); // le traditionnel !
trace('Hello World!'); // le traditionnel !
Ligne 124 : Ligne 126 :
La fonction ''trace()'' dit juste au compilatue d'écrire dans le panneau ''sortie'' le contenu qui lui est envoyé, nous nous avons envoyé ''Hello World'' à la fonction ''trace()'' Donc le compilateur écrit ''Hello World'' dans le panneau sortie !
La fonction ''trace()'' dit juste au compilatue d'écrire dans le panneau ''sortie'' le contenu qui lui est envoyé, nous nous avons envoyé ''Hello World'' à la fonction ''trace()'' Donc le compilateur écrit ''Hello World'' dans le panneau sortie !


Bon, je croie que vous êtes prêt pour rentrer plus profondément dans Actionscript, source inépuisable de problèmes, de casse-tête et de pleins de trucs bien complexes ! (Nan, nan vous découragez pas !, je disais ça pour vous faire <s>pleurer</s> rire !)
Bon, je crois que vous êtes prêt pour rentrer plus profondément dans Actionscript, source inépuisable de problèmes, de casse-tête et de pleins de trucs bien complexes ! (Nan, nan vous découragez pas !, je disais ça pour vous faire flipper !)
{{Bas de page|idfaculté=informatique|leçon=[[Actionscript]]|précédent=[[Actionscript/Introduction|Introduction]]|suivant=[[Actionscript/Syntaxe 1|Syntaxe : variables]]}}
{{Bas de page|idfaculté=informatique|leçon=[[Actionscript]]|précédent=[[Actionscript/Introduction|Introduction]]|suivant=[[Actionscript/Syntaxe 1|Syntaxe : variables]]}}



Version du 5 septembre 2007 à 19:37

Début de la boite de navigation du chapitre
Votre première application
Icône de la faculté
Chapitre no {{{numéro}}}
Leçon : Actionscript
Chap. préc. :Introduction
Chap. suiv. :Syntaxe : variables
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « ActionScript : Votre première application
ActionScript/Première Application
 », n'a pu être restituée correctement ci-dessus.

Le traditionnel "Hello World"

Première Application, sans rien comprendre !

Au démarrage de Flash, vous trouverez, au centre de votre écran la page d'accueil de flash. Dans celle-ci, sélectionnez Fichier Flash (AS 3.0). Normalement, il est apparu, devant vos yeux ébahis,différents panneaux :

  • En haut le panneau Scénario
  • En bas le panneau Propriétés s'est dégrisé.

Le but de ce cours n'étant pas de vous présenter l'IDE Flash dans ses moindres détails je vous présenterai l'essentiel, dont on se resservira en Actionscript. Vous verrez aussi un rectangle blanc au milieu, pour votre culture générale, sachez qu'on nomme ceci la scène.
Et que c'est là-dedans que se déroulera votre animation, alors prenez-en grand soin !

Bon je parle, je parle mais vous n'avez rien fait encore alors tous à vos claviers et Let's go! :

  1. Dans le panneau propriétés en bas de votre écran, vous devriez voir un champ Classe du document, remplissez le et mettez un test, il s'agit en fait du nom de cla classe qui sera appellée à la compilation. Normalement une boîte de dialogue s'affiche vous indiquant que Flash ne trouve pas la définition de classe et qu'il en générera une à la compilation. Nous arrangerons ça dans quelques instants vous verrez...
  2. Allez dans fichier puis nouveau
  3. Dans la boîte de dialogue s'affichant, sélectionnez Fichier ActionScript
  4. Et là c'est le drame, votre scène que vous chérissiez disparait (malheur de malheur tu nous avait pourtant dit d'en prendre soin!). Rassurez-vous tout est normal et sous contrôle. À la place vous voyez aussi un truc blanc mais qui prend toutes la place ! avec une bande bleue à gauche vous voici arriver dans l'éditeur de texte de Flash ! (l'endroit où vous passerez certainement le plus de temps donc chérissez-le aussi !)
  5. et maintenant vous allez gentiment faire un copié-collé de ceci :
package
{
    import flash.display.MovieClip;

    public class test extends MovieClip
    {
        public function test ():void
        {
            trace('Hello World!'); // le traditionnel !
        }
    }
}

Enregistrez ce fichier et votre scène dans le même dossier mettez le nom que vous voulez pour votre scène par contre votre fichier actionscript, votre (.as) enregistrez le sous test.as Bon, c'est presque terminé il reste juste à spécifier à Flash que vous voulez récupérer des classes dans le dossier dans lequel vous avez enregistrez vos deux fichiers !Vous vous rappellez en 1 je vous avez dit que Flash ne trouvait pas votre classe et qu'il en générerait une à la compilation ?
Et bien c'est maintenant que l'on va lui dire où la chercher ! Attention, tous à vos claviers !, enfin surtout à vos souris :p !

  1. Allez dans le menu Modifier puis Préferences, une boîte de dialogue s'affiche.
  2. Dans cette boîte de dialogue, il y a une liste de différents 'onglets' à gauche, sélectionnez ActionScript, la page change
  3. Tout en bas de la nouvelle page, sélectionnez Paramètres d'ActionScript 3.0..., une boîte de dialogue s'affiche.
  4. Appuyez sur le + puis sur la cible, sélectionnez alors le répertoire dans lequel vous avez enregistré vos deux fichiers (la scène(.fla) et votre fichier test.as)

Une fois cela fait, vous pouvez tout fermer, en cliquant sur les Ok successifs (deux noramlement) ! Vous êtes pret? Maintenant allez dans le Menu Contrôle puis Tester l'animation. (Pour les adeptes du clavier vous pouvez aussi appuyer sur els touches ctrl+entrée ) Noramlement vous voyez apparaître votre scène blanche, mais surprise, le panneau d'en bas a affiché quelque chose : 'Hello World!'. Il s'agit en fait du panneau sortie ce sera votre débuggeur !

Et voilà vous venez de réaliser votre première application en ActionScript 3.0, si c'est pas mimi ça ?

Quelques Explications

Ici, je vais vous expliquer un peu le code présent dans votre fichier test.as

package
{
   ...
}

L'instruction package est en quelques sortes un grand sac où vous mettrez vos classes, celles-ci devront être seules par fichier et si vous donnez un nom à votre package, vous devrez faire deux choses :

  • Appellez votre classe nom_du_package.nom_de_la_classe au lieu du simple nom_de_la_classe
  • Enregistrez toutes vos classes présentes dans un package dans un même dossier portant le nom du package comme nom

Si vous ne comprennez pas tout, rassurez-vous ça viendra avec le temps ! Bon prêt pour un nouveau bout de code ?

package
{
   import flash.display.MovieClip;
   ...
}

Là c'est tout simple, nous importons la classe qui nous interesse, vous pouvez d'ailleurs remarquer ici un embriquement depackage et de classes :

  • En premier, vous avez le package flash
  • En second, le package display contenu dans le package flash
  • En dernier le nom de votre classe MovieClip, contenue dans le package display lui-même contenu dans le package flash

Mais vous vous demandez surement pourquoi nous-interesse telle tant cette classe MovieClip ?
Et bien sachez qu'il va pour le savoir que vous lisiez la suite (olala, le suspens, ous inquietez pas c'est sur les 5-6 lignes suivantes que vous trouverez la solution !)

package
{
   import flash.dsplay.MovieClip
   
   public class test extends MovieClip
   {
      ...
   }
}

Alors là, c'est ma mogne la plus complexe, nous allons donc la décomposer ! <soure lang="actionscript"> public </source> Ceci est un petit mot signifiant que notre classe est accessible de partout du moment qu'on la importée !.

class le_nom_de_votre_classe

Là on utilise le mot-clé class pour dire au compilateur de nous créer une nouvelle classe, si vous ne connaissez rien au langage Orienté Objet, je vous conseille fortement de vous y familiarier avant de continuer ce cours.

extends MovieClip

Et ça, ça veut tout simplement dire que notre classe aura les même propriétés et méthodes que la classe MovieClip qu'on a importée tout à l'heure. Techniquement parlant, on appelle cela l'héritage : notre classe hérite de la classe MovieClip toutes ses propriétés et méthodes ! (ce qui fait beaucoup pour notre petite classe d'ailleurs :^) ) il ne reste plus qu'une instruction :

package
{
    import flash.display.MovieClip;

    public class test extends MovieClip
    {
        public function test ():void
        {
            trace('Hello World!'); // le traditionnel !
        }
    }
}

La fonction trace() dit juste au compilatue d'écrire dans le panneau sortie le contenu qui lui est envoyé, nous nous avons envoyé Hello World à la fonction trace() Donc le compilateur écrit Hello World dans le panneau sortie !

Bon, je crois que vous êtes prêt pour rentrer plus profondément dans Actionscript, source inépuisable de problèmes, de casse-tête et de pleins de trucs bien complexes ! (Nan, nan vous découragez pas !, je disais ça pour vous faire flipper !)