Le logiciel Flash avant tout...
Titre du blog :
Le logiciel Flash avant tout...
Auteur: flashcbil
Description:
Présentation et informations diverses de ce superbe logiciel.
Créé le: 04-03-2005
Flux RSSVefblog.net
VEF Blog accueilposté le 06-08-2005 à 23:12:32
Deplacer un personnage : Partie 2
Dans la partie 2 de ce tuto, nous allons creer le mouvement du smiley.........ce n'est que du code ! Alors ouvrez bien les yeux !
D'abord je vous propose de prendre la source de la partie 1 ICI
Commençons !
Etape 1
_root.pas=10;
EXPLICATION :
Etape 2
Le code suivant est a mettre sur le clip "Perso". cliquez-donc une fois sur ce clip, puis dans le champ action entrez le code suivant :
onClipEvent(keyDown) //si une touche est pressé
{
EXPLICATION :
Testez l'animation !
Normalement, votre smiley devrait bouger lorsque vous appuyez sur les touches directionnelles.
Voila, c fini pour la partie 2 !
D'abord je vous propose de prendre la source de la partie 1 ICI
Commençons !
Etape 1
Sur l'animation principal, creer un nouveau calque que l'on nommera "Actions".
Cliquez une fois sur l'image 1 de ce calque dans le scenario.
Puis entrez le code suivant.
Cliquez une fois sur l'image 1 de ce calque dans le scenario.
Puis entrez le code suivant.
_root.pas=10;
EXPLICATION :
on créé une variable qui s'appelle "pas". cette variable prend pour valeur 10. _root signifie que c'est une variable de premier niveau (on pourrais l'appelé variable globale)....ici on pourrais ommettre le _root puisque nous ecrivons deja ce code au premier niveau : dans l'animation principale.
Lorsque nous voudrons changer la vitesse, il nous suffira de changer la valeur de la variable _root.pas.
Lorsque nous voudrons changer la vitesse, il nous suffira de changer la valeur de la variable _root.pas.
Etape 2
Le code suivant est a mettre sur le clip "Perso". cliquez-donc une fois sur ce clip, puis dans le champ action entrez le code suivant :
onClipEvent(keyDown) //si une touche est pressé
{
switch(Key.getCode()) //on recupere la valeur de la derniere touche pressé
{
case Key.RIGHT: //si c la touche "Fleche DROITE"
this._x+=_root.pas; //on augmente la position horizontale
this.gotoAndStop(2); //on affiche l'image 2 du clip "Perso" (image position droite) et de nom d'occurence "smiley"
break; //on sort du switch
case Key.LEFT: //si c la touche "Fleche GAUCHE"
this._x-=_root.pas; //on diminue la position horizontale
this.gotoAndStop(3); //on affiche l'image 3 du clip "Perso" et de nom d'occurence "smiley"
break; //on sort du switch
case Key.UP: //si c la touche "Fleche HAUT"
this._y-=_root.pas; //on diminue la position verticale
this.gotoAndStop(4); //on affiche l'image 4 du clip "Perso" et de nom d'occurence "smiley"
break; //on sort du switch
case Key.DOWN: //si c la touche "Fleche BAS"
this._y+=_root.pas; //on augmente la position verticale
this.gotoAndStop(1); //on affiche l'image 1 du clip "Perso" et de nom d'occurence "smiley"
break; //on sort du switch
default: //si ce n'est pas une de ces touches qui est pressé
//on ne fait rien !
}//fin du switch
}EXPLICATION :
// indique que ce sont des commentaires, donc qu'il ne sera pas interpreté comme un code (pour mettre des commentaires sur plusieurs lignes :
/* --------Commentaire -------*/ comme en langage C/C++)
onClipEvent() sert a declenché des actions lorsque l'evenement entre parenthese du clip est realisé. (pour les boutons, le "declencheur" est 'on')
KeyDown signale l'evenement d'une touche pressée.
Il faut donc ensuite verifier quel touche a été préssé....c le code Key.getCode() qui nous le dit.
Le "switch" regarde la valeur du Key.getCode() et la compare a la valeur qui est a coté d'un "case". si les deux valeurs sont egales, les actions apres le case sont executées, sinon ce sont les actions apres "default". (bien sur il compare avec tous les case avant !). Le break signale qu'il faut sortir du switch sinon il continuerai d'executé les actions des case qui suivent meme si ils ne sont pas egaux a Key.getCode().
Key.RIGHT donne la valeur de la touche Fleche Droite........pareil pour les autres (.......LEFT, .......UP,.......DOWN). Ce qui rend possible la comparaison avec Key.getCode().
this signale que c'est le clip sur lequel on a mis le code (donc le smiley).
Pour le code this._x+=_root.pas, on ajoute 10 (car on a mis 10 a la variable _root.pas dans l'etape 1) au coordonnee x (donc horizontale) du smiley. Il se deplace donc de 10 pixel vers la droite. (vers la gauche il aurait fallu soustraire 10). Si l'on avait ecrit le code ailleurs, il aurait fallu ecrire smiley._x+=_root.pas, smiley etant le nom d'occurrence de notre clip.
Pourquoi on ajoute 10 pour aller vers la droit et pas l'inverse ? tout simplement parce que notre repere est comme sur l'image ci-dessous : l'origine est au coin superieur gauche de l'animation.
/* --------Commentaire -------*/ comme en langage C/C++)
onClipEvent() sert a declenché des actions lorsque l'evenement entre parenthese du clip est realisé. (pour les boutons, le "declencheur" est 'on')
KeyDown signale l'evenement d'une touche pressée.
Il faut donc ensuite verifier quel touche a été préssé....c le code Key.getCode() qui nous le dit.
Le "switch" regarde la valeur du Key.getCode() et la compare a la valeur qui est a coté d'un "case". si les deux valeurs sont egales, les actions apres le case sont executées, sinon ce sont les actions apres "default". (bien sur il compare avec tous les case avant !). Le break signale qu'il faut sortir du switch sinon il continuerai d'executé les actions des case qui suivent meme si ils ne sont pas egaux a Key.getCode().
Key.RIGHT donne la valeur de la touche Fleche Droite........pareil pour les autres (.......LEFT, .......UP,.......DOWN). Ce qui rend possible la comparaison avec Key.getCode().
this signale que c'est le clip sur lequel on a mis le code (donc le smiley).
Pour le code this._x+=_root.pas, on ajoute 10 (car on a mis 10 a la variable _root.pas dans l'etape 1) au coordonnee x (donc horizontale) du smiley. Il se deplace donc de 10 pixel vers la droite. (vers la gauche il aurait fallu soustraire 10). Si l'on avait ecrit le code ailleurs, il aurait fallu ecrire smiley._x+=_root.pas, smiley etant le nom d'occurrence de notre clip.
Pourquoi on ajoute 10 pour aller vers la droit et pas l'inverse ? tout simplement parce que notre repere est comme sur l'image ci-dessous : l'origine est au coin superieur gauche de l'animation.
this.gotoAndStop(2) indique que l'on va et que l'on s'arrete a l'image 2du scenario du clip de nom d'occurrence "smiley". L'image 2 est celle qui comporte le dessin du smiley lorsque l'on avance vers la droite.
Testez l'animation !
Normalement, votre smiley devrait bouger lorsque vous appuyez sur les touches directionnelles.
Voila, c fini pour la partie 2 !
posté le 06-08-2005 à 21:45:34
Deplacer un personnage : Partie 1
Eh ben commencons l'animation....
Dans cette partie, nous allons preparer notre personnage, un smiley.
Le principe : notre smiley sera un clip contenant 4 images (vu normal, vue de derriere, les vues de coté)
Allons-y !!
Etape 1
Dessinez les 3 images ci-dessous. Pour cela, faites un rond jaune puis faites copier-coller.........comme ca on sera sur que les dimensions seront les memes.
Pour les yeux, deux cercles noir : avant de le creer, choisissez l'outil cercle, cliquez une fois sur la couleur du trait puis sur le carre barré rouge pour desactiver ainsi le contour du cercle. (on n' en a pas besoin)
Pour la bouche, deux trait droit que vous arrondissez et rassemblez apres.
Pour la bouche vu de coté, g tout simplement pris la moitié d'une bouche vue normal.
Dans cette partie, nous allons preparer notre personnage, un smiley.
Le principe : notre smiley sera un clip contenant 4 images (vu normal, vue de derriere, les vues de coté)
Allons-y !!
Etape 1
Dessinez les 3 images ci-dessous. Pour cela, faites un rond jaune puis faites copier-coller.........comme ca on sera sur que les dimensions seront les memes.
Pour les yeux, deux cercles noir : avant de le creer, choisissez l'outil cercle, cliquez une fois sur la couleur du trait puis sur le carre barré rouge pour desactiver ainsi le contour du cercle. (on n' en a pas besoin)
Pour la bouche, deux trait droit que vous arrondissez et rassemblez apres.
Pour la bouche vu de coté, g tout simplement pris la moitié d'une bouche vue normal.
Ne creez pas la deuxieme vue de coté, vous verrez pourquoi apres !
Etape 2
Selectionnez le premier dessin du smiley, puis faites F8 pour le convertir en clip, vous le nommerez par ex "vueFace". Faites de meme pour les deux autres : "vueCote" et "vueDerriere".
Ensuite, ouvrez la bibliotheque (CTRL+L) puis glisser dans l'animation, un clip "vueCote" pour la deuxieme vue de coté. Cliquez une fois dessus pour le selectionnez, puis allez dans "Modification->Transformer->Renverser Horizontalement".
Voila, nous avons nos quatres vues du smiley.
Etape 3
Selectionnez ensemble les quatre clips, puis faites F8 pour convertir le tout en clip. Vous nommerez ce clip "Perso", c'est notre personnage.
Double-cliquez sur ce nouveau clip pour l'ouvrir.
A present, repartissez chaque clip a une image du scenario :
Image 1 : Vue de face
Image 2 : Vue vers la droite
Image 3 : Vue vers la gauche
Image 4 : Vue de derriere
Etape 4
A present, il faut que les differents clips des vues soit a la meme position/
Pour cela, cliquez sur un clip, puis dans les propriétés en bas, mettez les coordonnees a zero. Faites de meme pour les trois autres clip.
Etape 5
Ajoutez un calque pour mettre une action stop a l'image 1 du clip "Perso".
Etape 6
Revenez a l'animation principal pour cliquez une fois sur le clip "Perso".
Nous allons donner un nom d'occurrence a ce clip et le redimensionner pour qu'il ne soit pas trop grand ou trop petit.........faites comme sur l'image en dessous, nom : "smiley", taille : 30
Et voila, la premiere partie est fini.
Etape 2
Selectionnez le premier dessin du smiley, puis faites F8 pour le convertir en clip, vous le nommerez par ex "vueFace". Faites de meme pour les deux autres : "vueCote" et "vueDerriere".
Ensuite, ouvrez la bibliotheque (CTRL+L) puis glisser dans l'animation, un clip "vueCote" pour la deuxieme vue de coté. Cliquez une fois dessus pour le selectionnez, puis allez dans "Modification->Transformer->Renverser Horizontalement".
Voila, nous avons nos quatres vues du smiley.
Etape 3
Selectionnez ensemble les quatre clips, puis faites F8 pour convertir le tout en clip. Vous nommerez ce clip "Perso", c'est notre personnage.
Double-cliquez sur ce nouveau clip pour l'ouvrir.
A present, repartissez chaque clip a une image du scenario :
Image 1 : Vue de face
Image 2 : Vue vers la droite
Image 3 : Vue vers la gauche
Image 4 : Vue de derriere
Etape 4
A present, il faut que les differents clips des vues soit a la meme position/
Pour cela, cliquez sur un clip, puis dans les propriétés en bas, mettez les coordonnees a zero. Faites de meme pour les trois autres clip.
Etape 5
Ajoutez un calque pour mettre une action stop a l'image 1 du clip "Perso".
Etape 6
Revenez a l'animation principal pour cliquez une fois sur le clip "Perso".
Nous allons donner un nom d'occurrence a ce clip et le redimensionner pour qu'il ne soit pas trop grand ou trop petit.........faites comme sur l'image en dessous, nom : "smiley", taille : 30
Et voila, la premiere partie est fini.
posté le 06-08-2005 à 19:40:54
Deplacer un personnage : Partie 0
Voila, presentation de ce long tutoriaux....nous allons apprendre a
deplacer un personnage (en changeant egalement la vue du personnage en
fonction de son mouvement)...a partir de la partie 2, il y a pas mal
d'actionscript mais n'ayez pas peur je vais faire de mon mieux pour le
commenter.
Ah aussi, comme personnage j'ai pris simple, un smiley, ca evite de creer les mouvement des jambes, bras....ce n'est pas le but de ce tuto. (enfin pour l'instant)
En attendant, cette partie 0, c'est le petit sommaire du tutorial :
Partie 0 : Presentation
Partie 1 : Preparation du personnage
Partie 2 : Déplacement du personnage
Partie 3 : Limitation de la zone de déplacement
Partie 4 : Creation d'un obstacle
Je pense ajouter des parties.
Voila ce que ca donne pour l'instant, cliquez une fois sur l'anim puis testez : (deplacement avec les touches directionnelles)
Ah aussi, comme personnage j'ai pris simple, un smiley, ca evite de creer les mouvement des jambes, bras....ce n'est pas le but de ce tuto. (enfin pour l'instant)
En attendant, cette partie 0, c'est le petit sommaire du tutorial :
Partie 0 : Presentation
Partie 1 : Preparation du personnage
Partie 2 : Déplacement du personnage
Partie 3 : Limitation de la zone de déplacement
Partie 4 : Creation d'un obstacle
Je pense ajouter des parties.
Voila ce que ca donne pour l'instant, cliquez une fois sur l'anim puis testez : (deplacement avec les touches directionnelles)
posté le 06-08-2005 à 15:10:47
Nom de clip et Nom d'occurence de clip
Bonjour tout le monde ! J'avais prevu de faire un gros tuto en plusieurs partie mais avant cela, j'ai trouvé plus judicieux de vous faire bien comprendre la difference entre un nom d'occurrence d'un clip et un nom de clip....c'est une notion indispensable pour manipuler des clips (ou bouton :) ) en action script.
Ce petit tuto vous permettra de mieux assimiler cette difference...et de comprendre son utilité.
Etape 1
Creez un nouveau symbole Clip que vous nommerez "Boule" puis dessinez a l'interieur une boule.
Ce petit tuto vous permettra de mieux assimiler cette difference...et de comprendre son utilité.
Etape 1
Creez un nouveau symbole Clip que vous nommerez "Boule" puis dessinez a l'interieur une boule.
Etape 2
Afficher la bibliotheque (CTRL+L ou dans l'onglet Fenetre en haut). Verifiez que vous avez bien votre clip nommé "Boule" (le nom n'est pas important).
Placez-en deux dans la page.
Afficher la bibliotheque (CTRL+L ou dans l'onglet Fenetre en haut). Verifiez que vous avez bien votre clip nommé "Boule" (le nom n'est pas important).
Placez-en deux dans la page.
Etape 3
Cliquez sur un des deux clips, puis dans les propriétés en bas choisissez "teinte" puis la couleur rouge. A droite mettez le nom d'Occurrence "BouleRouge".
Remarquez deja que votre Occurrence se nomme "BouleRouge" et que c'est l'occurrence du clip "Boule" (Occurence de : Boule) ....vous commencez a voir la difference ? non, bah continuez le tuto alors :) !
Etape 4
Faites de meme avec l'autre clip mais en bleu (vous nommerez donc "BouleBleu".).
Etape 5
Creez deux boutons. Vous devriez avoir une page un peu comme celle-ci :
Voila, c fini. Sachez que les nom d'occurrence ne s'applique pas seulement aux clip mais peuvent s'appliquez aussi aux textes, boutons, sons, videos..
a+
Cliquez sur un des deux clips, puis dans les propriétés en bas choisissez "teinte" puis la couleur rouge. A droite mettez le nom d'Occurrence "BouleRouge".
Remarquez deja que votre Occurrence se nomme "BouleRouge" et que c'est l'occurrence du clip "Boule" (Occurence de : Boule) ....vous commencez a voir la difference ? non, bah continuez le tuto alors :) !
Etape 4
Faites de meme avec l'autre clip mais en bleu (vous nommerez donc "BouleBleu".).
Etape 5
Creez deux boutons. Vous devriez avoir une page un peu comme celle-ci :
Etape 6
Cliquez une fois sur un bouton (celui pour la boule rouge) puis dans le fenetre "actions - image" en bas ecrivez le code ci-dessous :
on(release)
{
BouleRouge._y+=10;
}
Sur l'autre bouton, mettez :
on(release)
{
BouleBleu._y+=10;
}
Testez l'animation.
Remarques :
- Comme vous vous en doutez, le nom d'occurrence permet de differencier plusieurs meme clip placé dans une animation.
- Dans un code action script, si vous avez besoin de mettre un code modifiant un clip, il faut toujours mettre le nom d'occurrence et non celui du clip......ici si vous mettez Boule._y+=10; ca marchera pas, testez vous verrez bien !!
- on(release) : apres relachement du clic, vous pouvez mettre a la place on(press)
- BouleRouge._x+=10; equivaute à BouleRouge._x=BouleRouge._x+10; (on ajoute 10 aux coordonnees x)
Etape 7
Testez d'autres codes si vous le voulez !
on(release)
{
BouleRouge._xscale+=10;
}
on(release)
{
BouleBleu._xscale+=10;
BouleBleu._yscale+=10;
}
--------------------
on(release)
{
BouleRouge._visible=false;
}
on(release)
{
BouleRouge._visible=true;
}
--------------------
on(release)
{
BouleRouge._alpha-=10;
}
on(release)
{
BouleRouge._alpha+=10;
}
Cliquez une fois sur un bouton (celui pour la boule rouge) puis dans le fenetre "actions - image" en bas ecrivez le code ci-dessous :
on(release)
{
BouleRouge._y+=10;
}
Sur l'autre bouton, mettez :
on(release)
{
BouleBleu._y+=10;
}
Testez l'animation.
Remarques :
- Comme vous vous en doutez, le nom d'occurrence permet de differencier plusieurs meme clip placé dans une animation.
- Dans un code action script, si vous avez besoin de mettre un code modifiant un clip, il faut toujours mettre le nom d'occurrence et non celui du clip......ici si vous mettez Boule._y+=10; ca marchera pas, testez vous verrez bien !!
- on(release) : apres relachement du clic, vous pouvez mettre a la place on(press)
- BouleRouge._x+=10; equivaute à BouleRouge._x=BouleRouge._x+10; (on ajoute 10 aux coordonnees x)
Etape 7
Testez d'autres codes si vous le voulez !
on(release)
{
BouleRouge._xscale+=10;
}
on(release)
{
BouleBleu._xscale+=10;
BouleBleu._yscale+=10;
}
--------------------
on(release)
{
BouleRouge._visible=false;
}
on(release)
{
BouleRouge._visible=true;
}
--------------------
on(release)
{
BouleRouge._alpha-=10;
}
on(release)
{
BouleRouge._alpha+=10;
}
Voila, c fini. Sachez que les nom d'occurrence ne s'applique pas seulement aux clip mais peuvent s'appliquez aussi aux textes, boutons, sons, videos..
a+
posté le 05-08-2005 à 01:57:23
Dessins ASCII
Un site plutot pas mal je trouve....une serie de dessins ascii
''~``
( o o )
+------------------.oooO--(_)--Oooo.------------------+
| www.chris.com/ascii/ |
| .oooO |
| ( ) Oooo. |
+---------------------\ (----( )--------------------+
\_) ) /
(_/
Ca ne sert pas a grand chose si ce n'est à decorer vos bloc-note ou divers messages.
Commentaires
Marielle le 05-08-2005 à 10:16:51 #
C'est amusant l'ASCII Art, j'avais fait reproduire des dessins de ce type aux CM2 lorsque je m'occupais des TICE (informatique) à l'école primaire l'an dernier. Quand ils avaient eu fini, ils étaient tout contents d'aller montrer ça à leur institutrice !
Rappel article
Commentaires