Walldown : Portail d'assistance internet

transfert sécurisé des données de flash vers le serveur

Klaude Charlier — 2008-05-01T13:55:14Z

1- Une page charge le fichier flash
2- Lors de l'initialisation, le fichier flash va charger une page PHP qui va contenir des variables. Parmis celle ci, un identifiant unique qui identifiera "la session flash" et qui sera généré par php (avec un md5(time()) ou tout autre moyen que tu souhaite)
3- Lors de l'envoi du score, Flash renvoi cet identifiant dans la requete (ou bien crypte une donnée avec cette information, qui sert en sorte de "clé de cryptage"

La page PHP qui recoit le score peut maintenant faire les verifications suivantes parmi celles ci selon la technique employée :
4- La clé de cryptage existe (il faudra penser a la sauvegarder dans une base de données auparavent)
5- Si une clé de cryptage a été utilisée pour renvoyer un score, on peut supposer que c'est une tentative de piratage, donc annuler le score (voir annuler tout les scores du joueur si tu as un moyen de l'identifier ;o) : Cela suppose de changer de clé de cryptage a chaque "nouvelle partie", mais Flash peut tres bien en demander une a PHP n'importe quand, donc pas de probleme

Encore 2 pistes à explorer : * le fichier PHP qui genere la page HTML qui contient le flash peut lui passer des variables dans l'url : fichier.swf ?truc=machin. C'est pas sécurisé, mais ca peut aider. * Le fichier Flash a acces a quelques variables globales permettant de faire des verifications (par exemple tu peux verifier que l'url en cours correspond bien a ton domaine... ca evite le vol du fichier et surtout le test de solutions de piratage ailleurs que depuis ton domaine (donc tu complique la tache du gars) A noter que tout ca doit bien sur s'accompagner d'un cryptage du fichier flash avec un long mot de passe introuvable ;o)

Les filtres

Kevin — 2008-04-28T14:06:52Z

Tutorial source : yazo.net

Lorsque vous travaillez à travers l'interface de Flash, vous pouvez appliquer un filtre à une occurrence à l'aide de la palette éponyme située par défaut en bas à gauche de votre interface, à côté des palettes Propriétés et Paramètres. Nos entendons par filtres les ombres portées, lueurs et les autres effets de ce genre. Si vous souhaitez appliquer une ombre ou tout autre effet à une occurrence dynamiquement, à partir de lignes d'instructions, procédez ainsi :

1. Placez un clip sur la scène.
2. Nommez l'occurrence obtenue. Exemple : titre
3. Saisissez le script ci-dessous dans la fenêtre Actions.

import flash.filters.DropShadowFilter ;

var ombrePortee:DropShadowFilter = new DropShadowFilter() ;
var serieDeFiltres:Array = new Array() ;
serieDeFiltres.push(ombrePortee) ;

titre.filters=serieDeFiltres ;

Ligne 1 : Elle permet de préciser quel filtre va être travaillé.
Ligne 2 : Un filtre est concrètement créé.
Ligne 3 : Nous créons une liste vide.
Ligne 4 : Nous ajoutons à cette liste, le filtre que nous avons créé.
Ligne 5 : Nous attribuons un filtre à l'occurrence titre.

Si vous devez créer d'autres filtres, voici la liste de ceux que vous pouvez utiliser :

BevelFilter, BlurFilter, DropShadowFilter, GlowFilter, GradientBevelFilter, GradientGlowFilter

L'ensemble de ces filtres peuvent être modifiés avant qu'ils soient ajoutés à la liste serieDeFiltres en faisant référence aux propriétés distance, blurX, blurY, angle, strength, quality.

Voici un deuxième exemple :

import flash.filters.DropShadowFilter ;

var ombrePortee:DropShadowFilter = new DropShadowFilter() ;
ombrePortee.quality = BitmapFilterQuality.HIGH ;
ombrePortee.strength = 5 ;
ombrePortee.blurX = 5 ;
ombrePortee.blurY = 5 ;
ombrePortee.distance = 5 ;
ombrePortee.angle = 30 ;
ombrePortee.alpha=0.1 ;

var serieDeFiltres:Array = new Array() ;
serieDeFiltres.push(ombrePortee) ;

titre.filters=serieDeFiltres ;

Consultez l'aide de Flash pour découvrir l'ensemble des propriétés propres à chaque filtre et n'oubliez surtout pas de changer le nom de la classe sur la première ligne également.

Les encres

Pour celles et ceux qui connaissent Photoshop et qui ont l'habitude d'utiliser les modes de fusion des calques, les "encres" de Flash proposent le même résultat. A travers l'interface de Flash, lorsque vous sélectionnez une commande dans la menu déroulant qui figure en bas à droite de la palette Propriété (à droite du mot Fondu), vous appliquez une encre ou un mode de surrimpression à une occurrence. En ActionScript, la technique d'attribution d'une encre à une occurrence se fait très simplement car une seule ligne d'instruction suffit.

titre.blendMode = BlendMode.ADD ;

Remarque : Le premier "mot" blendMode de la ligne d'instruction ci-dessus est une propriété, au même titre que rotation, x, scaleX, etc. alors que le deuxième mot "BlendMode" est une classe accompagnée de la constante ADD.
Il existe 14 modes de fusion d'une occurrence, voici les différents termes que vous pouvez utilisez en remplacement de ADD de l'exemple ci-dessus.

Add, alpha, darken, difference, erase, hardlight, invert, layer, lighten, multiply, normal, overlay, screen, subtract.

Pour finir sur les encres abordons ce dernier exemple. Nous souhaiterions donner un effet à un bouton lors d'un clic, suivez donc cette procédure :

1. Placez un clip sur la scène
2. Nommez l'occurrence obtenue. Exemple : titre
3. Saisissez le script ci-dessous dans la fenêtre Actions.

titre.addEventListener(MouseEvent.MOUSE_DOWN,btEnfonce)
titre.addEventListener(MouseEvent.MOUSE_UP,btRelache)

function btEnfonce (evt:MouseEvent)
titre.blendMode = BlendMode.ADD ;

function btRelache (evt:MouseEvent)
titre.blendMode = BlendMode.NORMAL

Remarque : Sur la version du player 9.0.45, si ce code ne fonctionne pas, effectuez une modification de l'occurrence afin que l'encre soit visible dans la mesure où la fonction updateAfterEvent() n'a pas d'effet. Déplacez l'occurrence d'un pixel ou tournez la d'un degré.

Sinus et cosinus

Kevin — 2008-04-28T13:53:53Z

Tutorial source : yazo.net

Dans certains cas, vous aurez besoin de réaliser des interpolations de mouvements avec des trajectoires cycliques (ex. : circulaires, ondulantes, etc.). Il devient alors difficile de réaliser un tel mouvement sans passer par les interpolations accompagnées d'un guide de mouvement. Et pourtant, c'est réalisable grâce aux fonctions sinus et cosinus de la classe Math en ActionScript. Si la manipulation de formules de calculs faisant appel aux cosinus et sinus ne vous pose pas de problème, consultez alors directement les derniers exemples de cette ressource, dans le cas contraire, voici un développement pour vous expliquer le mode de calcul d'un sinus et d'un cosinus.

Remarque : Assurez-vous que la nombre d'images par seconde de votre animation est bien au moins à 30 ips.

A quoi servent les sinus et cosinus ?

Nous avons pour la plupart d'entre nous de mauvais souvenir de nos cours de Math de 3e car ils étaient pour le moins abstraits. En revanche si nous vous posons cette question…

2 + 3 ?

…la réponse vous vient automatiquement à l'esprit car le signe "+" vous parle depuis votre plus tendre enfance. La soustraction est "un peu plus compliquée" et la division, n'en parlons pas. Et pourtant, les quatre opérations de base, - + x et ÷ restent des calculs simples à comprendre avec des valeurs simples.

cos(3) ? ou sin(3) ?

Et voilà, vous vous bloquez ! Nous vous l'avons dit, nous allons vous expliquer les cosinus et sinus. Reprenons. Ne cherchez pas à calculer le résultat, seul le résultat nous intéresse, pas sa technique de calcul. Mais à quoi sert ce résultat ? Petit retour en arrière, à l'école, nous utilisions soit une calculette pour effectuer ce calcul, soit une "table" (un document plié en trois parties, couleur saumon) présentant un tableau des différents résultats de calculs de cosinus et sinus. Nous allons utiliser les fonctions Math.cos() et/ou Math.sin() pour obtenir le résultat.

Quelle que soit la valeur que vous préciserez entre les parenthèses, paramètre nécessaire pour ce calcul, vous obtiendrez toujours une valeur comprise entre -1 et 1. Et alors ? Et bien en faisant varier de façon régulière ce fameux paramètre nécessaire pour le calcul du cosinus ou du sinus, on peut obtenir d'autres valeurs. Quel est l'intérêt ? Obtenir des valeurs qui représenteront un intervalle régulier cyclique. Quelles sont les valeurs que vous obtenez entre -1 et 1. Non, il n'y a pas que le 0.

-1, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 0.9, 0.8
cos(0)...........................................................cos(1.7)...............................................cos(3.1) .........

Dans l'exemple ci-dessus, nous démontrons qu'avec l'augmentation régulière d'une valeur (0 -> 1.7 -> 3.14 -> etc...) à placer dans le calcul du cosinus, on obtient toujours les mêmes valeurs (1 -> 0 -> -1 -> 0 -> 1 -> 0 -> -1). Pour être plus précis et moins ambigu, nous allons augmenter une valeur avec un pas de 0,1 et non de 1,7 (Nous ne voulions pas saisir toutes les valeurs comprises entre 0 et 5 avec un pas de 0,1, c'est pourquoi nous en avons choisi de 2 (1,7 et 3,1)). Mais à quoi peuvent bien servir des valeurs comprises entre -1 et 1 ? Et bien si nous multiplions le résultat obtenu par 60 (par exemple), nous obtiendrons donc des valeurs comprises entre -60 à 60. Nous pourrions donc utiliser le résultat pour régler la position verticale d'une occurrence. C'est ce qui se passe dans l'exemple ci-dessous. Si vous regardez attentivement le script, vous observerez que la valeur 85 a été ajoutée à la principale ligne d'instruction d'instruction de notre code, c'est tout simplement pour définir l'axe horizontal à partir duquel on va retirer 60 ou ajouter 60 pixels.

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.1 ;
balle.y = 85+(Math.sin(coef)*60) ;

Avec une même valeur, (ex. 3), le calcul de cosinus et de sinus donnent 2 résultats différents. Regardons simplement la liste des valeurs ci-dessous présentées dans un tableau, elles sont croissantes et régulières. Parallèlement, les résultats des calculs de sinus et cosinus (qui utilisent ces valeurs) sont cycliques.

Valeurs

0

0,2

0,4

0,6

0,8

1

1,2

1,4

Cosinus

1

0,9801

0,9211

0,8253

0,6967

0,5403

0,3624

0,17

Sinus

0

0,1987

0,3894

0,5646

0,7174

0,8415

0,932

0,9854

Valeur

1,6

1,8

2

2,2

2,4

2,6

2,8

3

3,2

Cosinus

-0,0292

-0,2272

-0,4161

-0,5885

-0,7374

-0,8569

-0,9422

-0,99

-0,9983

Sinus

0,9996

0,9738

0,9093

0,8085

0,6755

0,5155

0,335

0,1411

-0,0584

Valeur

3,4

3,6

3,8

4

4,2

4,4

4,6

4,8

Cosinus

0,9668

-0,8968

-0,791

-0,6536

-0,4903

-0,3073

-0,1122

0,0875

Sinus

-0,2555

-0,4425

-0,6119

-0,7568

-0,8716

-0,9516

-0,9937

-0,9962

Faire tourner une occurrence autour d'un axe

Si nous combinons donc le calcul d'un sinus et celui d'un cosinus avec la même valeur, en les utilisant pour définir la position d'une occurrence sur la scène, nous obtenons des positions successives qui formeront un mouvement circulaire. N'oublions pas que nous multiplions le calcul des sinus et cosinus par un chiffre plus grand pour obtenir des valeurs plus grandes. C'est ce qu'on appelle le rayon (60 pixels dans l'exemple ci-dessous).

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.02 ;

balle.x = 180+(Math.cos(coef)*60) ;
balle.y = 85+(Math.sin(coef)*60) ;

balleX.x = 180+(Math.cos(coef)*60) ;
balleY.y = 85+(Math.sin(coef)*60) ;

traitVertical.x = balleX.x ;
traitHorizontal.y = balleY.y ;

Pour faire tourner uniquement la balle, il faut utiliser le script ci-dessous :

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.02 ;

balle.x = 180+(Math.cos(coef)*60) ;
balle.y = 85+(Math.sin(coef)*60) ;

Autres mouvements

Essayez à présent de faire varier les valeurs 60 des deux lignes d'instructions ci-dessus, essayez d'utiliser la fonction Math.abs() avec l'une ou l'autre (ou les deux) des lignes d'instructions ci-dessus et vous découvrirez des variantes interessantes dans le mouvement de votre occurrence !!!

Mouvement pendulaire

Nous rendons absolue la valeur qui sert au calcul du positionnement vertical de l'occurrence.

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.1 ;

balle.x = 180+(Math.cos(coef)*60) ;
balle.y = 85+Math.abs((Math.sin(coef)*60)) ;

Mouvement satellite

Pour effectuer ce type de mouvement, vous devez comprendre que nous cherchons à régler l'echelle horizontale et verticale de l'occurrence en mouvement à la valeur relative de sa position verticale.

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.1 ;

balle.x = 180+(Math.cos(coef)*80) ;
balle.y = 85+(Math.sin(coef)*30) ;

balle.scaleX = 0.1+(balle.y/100) ;
balle.scaleY = 0.1+(balle.y/100) ;

balle.alpha = 0.1+(balle.y/100)

Ellipse

Nous changeons simplement la valeur du rayon vertical ou horizontal.

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.1 ;

balle.x = 180+(Math.cos(coef)*120) ;
balle.y = 85+(Math.sin(coef)*60) ;

Rebond

Semblable au script qui permet d'obtenir un mouvement pendulaire, nous utilisons un rayon avec une valeur négative et nous la soustrayons à la position de l'axe horizontal.

var coef = 0 ;
balle.addEventListener(Event.ENTER_FRAME,bougerBalle) ;

function bougerBalle(evt:Event)
coef+=0.1 ;

balle.x = 180+(Math.cos(coef)*60) ;
balle.y = 85-Math.abs((Math.sin(coef))*-60) ;

Gérer la video

Kevin — 2008-04-28T13:34:32Z

Tutorial source : yazo.net

Dans cette ressource, nous allons découvrir la simplicité avec laquelle une vidéo peut-être diffusée sur Internet, mais nous n'allons pas nous limiter à une simple diffusion. En effet, tout l'interêt de passer par une animation Flash pour proposer à un internaute de consulter une vidéo est de pouvoir combiner les possibilités qu'offre l'ActionScript avec la lecture d'un flv (vidéo au format Flash).

Si vous n'avez pas besoin d'une réelle interactivité lors de la diffusion d'une vidéo dans un .swf, dans ce cas, vous n'êtes pas obligé de faire appel à l'ActionScript et seules les premières lignes de cette page vous seront utiles. Dans le cas contraire, vous allez découvrir qu'il existe de nombreuses possibilités d'interactions avec une vidéo !!!

Encoder une vidéo

Avant d'apprendre à intégrer ou importer dynamiquement une vidéo dans une animation Flash, vous devez apprendre à l'encoder, c'est-à-dire la "compresser" . Il est important de savoir que seuls les formats .flv et .mov en H264 sont compatibles à la lecture d'une vidéo dans une animation Flash. Attention, le codec H264 n'est reconnu qu'à partir du player Flash version 9,0,115,0, n'encodez donc vos vidéos en .mov avec le codec H264 uniquement si l'animation Flash vérifie le numéro de version du player (consultez la ressource intitulée "Informations utilisateur" pour savoir comment récuperer cette information). D'ici le premier trimestre 2009, cette vérification ne devrait plus être nécessaire.

Pour encoder une vidéo, il existe de nombreuses solutions logicielles, payantes et gratuites, mais si vous avez installé correctement Flash CS3, l'application Flash CS3 Video Encoder s'est installée également dans le dossier Adobe qui se trouve lui-même à la racine du dossier Applications de votre ordinateur. Vous pouvez également passer par le logiciel QuickTime Player en le lançant, vous retomberez de toutes les façons sur l'interface du Flash CS3 Video Encoder.

1. Lancez l'application Flash CS3 Video Encoder.
2. Faites glisser des fichiers de type vidéo que vous souhaitez encoder, dans la fenêtre principale de l'application.
3. Sélectionnez le ou les fichiers que vous souhaiter encoder avant de cliquer sur le bouton Paramètres. En cliquant sur ce dernier, vous vous aprêtez à spécifier les pramètres de compression des fichiers que vous avez séléctionné.

4. Réglez les paramètres de compression vidéo et audio, sans oublier de recadrer ou redimensionner l'image de votre séquence si vous en avez besoin.

Préréglages par défaut

Si vous ne voulez pas régler par vous même les différents paramètres que nous allons passer en revue, vous pouvez sélectionner dans le menu de la copie d'écran ci-dessous, le profil d'encodage qui effectue pour vous des réglages de compression audio et vidéo. Attention, choisissez toujours au minimum un profil Flash 8, c'est préférable si vous souhaiter obtenir une bonne qualité d'image et optezgalement au minimum pour une qualité moyenne. Dans le cas où la diffusion de votre vidéo se ferait off-line (pas sur Internet), sélectionnez le profil Flash 8 - Qualité élevée. Pour finir, si vous ne spéciez pas de nom de fichier de sortie, celui qui sera donné à chaque fichier encodé sera le nom actuel avec l'extension .flv.

Les réglages vidéos

Avant d'effectuer les premiers réglages de compression de votre vidéo, si vous en avez besoin, vous pouvez définir les points d'entrée et de sortie de votre séquence, elle sera alors au final plus courte que la durée actuelle, mais vous aurez au moins retiré les premières et dernières images de votre vidéo que vous ne voulez pas voir apparaitre dans votre vidéo encodée. Faites tout simplement glisser les deux taquets (représentés par des triangles, entourés par les carrés rouges de la copie d'écran ci-dessous)vers l'intérieur de la fenêtre, tout en vérifiant les images qui défilent dans le haut de la fenêtre.

1. Sélectionnez toujours le codec vidéo On2 VP6.
2. Ne spécifiez pas une qualité précise (basse, moyenne ou élevée), mais saisissez plutôt une valeur dans la case "Débit de données max. : ". Pour un format d'image de 300 à 500 pixels de largeur, indiquez une valeur comprise entre 350 et 450 kbits. Notons tout de même que plus vous spécifiez une valeur élevée, plus le débit de la bande passante de l'internaute doit être élevé. Le conseil le pus sage que nous serions vous donner est de faire vos propres tests de compression, mais ne perdez pas de vue qu'ils devront être fait en ligne.
3. Dans la mesure où vous ne pouvez pas connaître la composition précise d'un séquence vidéo, il est très difficile de faire un autre choix que de sélectionner "Automatique" pour l'intervalle des images-clés.
4. Concernant la cadence, conservez la valeur proposée par défaut , "Identique à la source". Si vous souhaitez réellement diminuer le nombre d'images par secondes (ips), optez alors pour une valeur correspondant à la moitié de celle en cours.
5. Pour finir, ne cochez la case Désentrelacer que dans le cas où vous devez encoder uen vidéo qui provient d'une source vidéo (ex. : un fichier .dv). Cochez la case "Coder le canal alpha" unqiuement si votre vidéo possède réellement une couche alpha, c'est-à-dire une couche qui définit des zones de transparence dans la vidéo.

Les réglages audios

Conservez le réglage par défaut qui offre une bonne qualité d'écoute. Décochez éventuellement la case "Coder les données audio" dans le cas où vous souhaiteriez obtenir une vidéo encodée sans piste audio.

Recadrer une vidéo

Commencez par recadrer votre vidéo avant de la redimensionner. Quel que soit l'ordre de vos réglages, observez attentivement les dimensions finales de votre vidéo qui figurent en bas à gauche de la fenêtre (720x404 dans l'exemple de la copie d'écran ci-dessous).

Voilà, vous savez à présent configurer les paramètres de compression d'une vidéo, il ne vous reste plus qu'à faire vos propres tests pour bien vous approprier cette technique qu'est l'encodage d'un fichier.

Placer manuellement une vidéo sur la scène

Pour placer une vidéo sur la scène, vous pouvez le faire de deux façons : Manuellement ou à partir de lignes d'instructions, détaillons tout de suite l'approche manuelle.

1.Via le menu Fenêtre sélectionnez la commande Composants.
2. Déroulé la liste des composants de type Video (clic sur le triangle (Mac) ou sur le carré contenant le signe plus dans un carré (Windows).
3. Faites glisser le composant de type FLVPlayback sur la scène.
4. Via le menu Fenêtre sélectionnez la commande Inspecteur de composant.

5. Cliquez deux fois à droite du mot Source.
6. Cliquez sur l'icône de répertoire située à droite de la fenêtre.
7. Localisez un fichier au format .flv.
8. Validez votre choix.
9. Cochez la case "Ajustez aux dimensions du FLV source" si elle ne l'est pas.
10. Fermez la fenêtre en cliquant sur le bouton "OK".

Voilà, si vous publiez votre animation, vous constaterez que la vidéo se lit correctement. Si vous avez réalisé cette manipulation sans difficulté, nous vous recommandons d'essayer d'intégrer une vidéo à partir de lignes d'instructions.

Par ailleurs, vous pouvez également intégrer une vidéo manuellement sur la scène (les étapes 1 à 3 de l'énumération ci-dessus) et spécifier le chemin à partir d'une ligne d'instruction. Dans ce dernier cas, vous devrez tout de même nommer votre occurrence de type FLVPlayback.

Remarque : Dans la fenêtre qui s'affiche lorsque vous indiquez la "source" d'une occurrence de type FLVPlayback à partir de la fenêtre Inspecteur de composant, il arrive parfois que le "chemin du contenu" soit une adresse absolue et non relative. Vous devez alors supprimer le début de l'adresse que Flash a saisi automatiquement pour vous. Ce bug démontre qu'il est vraiment préférable d'indiquer la source d'une occurrence de type FLVPlayback à partir de lignes d'instructions

Où placer un script ?

Klaude Charlier — 2005-07-10T22:00:00Z

Tutorial source : yazo.net

Dans cette ressource, nous n'allons pas vous apprendre à programmer en objet ou en mode séquentiel, nous allons simplement vous indiquer les deux procédures pour démarrer la programmation d'une animation. Si vous n'avez jamais programmé et/où n'avez pas un gros besoin d'interactivité dans vos animations, favorisez le mode de programmation séquentielle.

Mode de programmation séquentielle

1. Commencez par cliquez sur une image clé ou sur les côtés de la scène.
2. Cliquez dans la fenêtre Actions.
3. Rédigez votre script.

Voilà il ne vous reste plus qu'à saisir votre premier script, mais pour commencer, aidez vous de ce tableau pour savoir ce quoi doit contenir votre script. Nous distinguons les actions qui sont exécutées en continue et celles qui sont exécutées une seule fois, par ailleurs, nous faisons également la différence entre les actions déclenchées par l'utilisateur (Manuelle) et celles qui se font automatiquement par le programme.

Automatique

Manuelle

Une
seule fois

Script placé en dehors des écouteurs gérant les évènement MouseEvent et KeyboardEvent. Saisissez simplement votre ligne d'instruction sans gestionnaire d'évènement.

Exemple : La première ligne de l'exemple 1 ci-dessous.

Script placé dans un écouteur gérant les évènement MouseEvent et/ou KeyboardEvent.

Exemple : Voir l'exemple 1 ci-dessous.

En continue

Script placé dans un écouteur gérant l'évènement Event.ENTER_FRAME. Il est également possible d'utiliser la classe Timer().

Exemple : Voir l'exemple 2 ci-dessous.

Exemple 1 : Réalisez une interpolation de mouvement de l'image clé 1 à l'image clé 20 (faites défiler une occurrence de la gauche vers la droite de la scène). Créez un calque supplémentaire sur lequel vous placez un symbole de type clip. Nommez l'occurrence obtenue, ex. : boutonLancement. Placez le script ci-dessous sur l'une des deux images clé de l'image 1.

stop() ;
boutonLancement.addEventListener(MouseEvent.MOUSE_DOWN,relancerTeteLecture) ;

function relancerTeteLecture(evt:MouseEvent)
play() ;

Exemple 2 : Dans un nouveau document, placez un symbole sur la scène qui représente un rectangle. Nommez l'occurrence obtenue, ex. : planche.

planche.addEventListener(Event.ENTER_FRAME,tournerPlanche) ;

function tournerPlanche(evt:Event)
planche.rotation = planche.rotation+3

Consultez à présent les ressources qui traient des Ecouteurs, des Propriétés et de l'Incrémentation de la valeur d'une propriété afin de pouvoir faire vos premiers essais de programmation en AS3.

Mode de programmation orientée objet

Vous connaissez déjà la programmation orientée objet et vous aimeriez developper en AS3.

1. Créez une nouvelle animation que vous enregistrez au format .fla.
2. Dans la palette Propriétés, spécifiez le nom de la classe du document. Ex. Main.

3. Créez un document ActionScript que vous nommez bien évidement Main.as.

4. Lorsque vous exécutez le raccoruci clavier CTRL-Entrée (PC) ou Commande-Entrée (Mac), vous obtiendrez une prévisualisation, aussi bien à partir du fichier .as que .fla.

Créer un composant avec Flash MX

Klaude Charlier — 2004-11-11T13:49:23Z

http://www.flash-france.com/section...

Les composants Flash MX annoncent l'arrivée d'un nouvel outil performant pour le développeur Flash, qui augmente la portée des applications des smartclips de Flash 5. Ce (long) tutoriel vous accompagnera tout au long de la création de simples composants de triangles isocèles.

Ce tutoriel est tiré du livre Flash for Interactive Simulation", de Jonathan Kaye and David Castillo, à paraître en novembre 2002. et traduit par l'équipe de Flash-France

Il vous montrera comment :

mettre en application les nouvelles instructions Action Script, comme #initclip et registerClass, créer un composant simple avec un icône personnalisé, aussi bien qu'à utiliser de nouvelles méthodes comme "addProperty" pour protéger mieux votre code et "_targetInstanceName", toucher aux mécanismes qui autorisent l'héritage des composants fabriquer une interface personnalisée pour le panneau de propriétés créer un aperçu rapide du composant Bien qu'il soit possible de terminer ce tutoriel en utilisant le mode normal du panneau d'action, nous recommandons fortement d'utiliser le mode expert pour entrer les actions.

Qu'est-ce qu'un composant ? Les fonctions ont des paramètres qui permettent de personnaliser les actions qu'elle va exécuter. De la même manière les clips peuvent être paramétrés pour personnaliser les animations, en définissant des variables (ou des propriétés) qu'ils contiennent à partir de l'extérieur du clip avant ou pendant l'exécution de l'animation, comme les valeurs minimales ou maximales d'un cadran. Par conséquent un clip peut-être conçu comme une animation paramétrable.

Flash 5 a introduit les SmartClips comme moyen de créer des animations paramétrables. Les composants Fash MX représentent la génération suivante des smartClips. Les SmartClips permettent directement la création de bouts d'animations réutilisables et qui fonctionnent de manière efficace. Les limitations des smartClips toutefois, étaient qu'ils ne permettaient pas de rentrer dans la structure orientée objet du programme ActionScript. L'amélioration principale des composants Fash MX est d'intégrer le concept du smartClip dans cette structure.

Afin d'améliorer les capacités des smartClips à définir une interface personnalisée (dans "l'inspecteur de propriété") pour les paramètres, les Composants permettent maintenant un aperçu rapide, une option créée par le développeur qui permet à l'utilisateur de voir dans l'environnement de travail ce à quoi va ressembler le composant lorsqu'il sera actif.

Pour montrer comment créer un composant personnalisé, nous allons construire un composant simple de triangle isocèle qui aura les propriétés suivantes : base, hauteur, couleur, et un indicateur booléen qui autorisera ou non le remplissage. Il aura également des méthodes permettant d'extraire ou de définir ces propriétés aussi bien que l'aire.

Vue d'ensemble Un composant commence avec un clip. Nous allons tout d'abord définir un triangle à l'intérieur de ce clip, puis écrire l'ActionScript à l'intérieur de ce clip pour la Classe "triangle", ses propriétés et ses méthodes. Il faut alors associer le clip avec cette classe. Quand le composant est placé dans l'animation, le constructeur de la classe est appelé. Le triangle est très simple, nous n'avons donc pas besoin d'animation visuelle complexe. Le triangle a une base, une hauteur, et une couleur (propriété) une valeur booléenne qui définit si oui ou non la teinte est appliquée de même que des méthodes qui permettent de lire ou de définir ces valeurs. Les méthodes accèdent aux propriétés pour manipuler les objets graphiques.

Étape 1. Création du MC (movie Clip) triangle Sélectionner le triangle, ouvrir le panneau "Aligner", sélectionner "vers la scène" et aligner le triangle avec le centre (horizontalement) et le bas (verticalement). Nous l'alignons sur le centre de la base ainsi quand nous placerons le composant sur la scène, nous savons que la base restera en position quand nous modifierons la taille de la base et sa hauteur. Votre écran devrait ressembler à cela :

Etape 2. Définition de la classe Triangle Maintenant, nous allons créer la classe triangle. A l'intérieur du clip, ajouter un nouveau calque et appelez le "définitions". Ouvrez le panneau d'action à la première image clé et entrez le code suivant :

#initclip function TriangleClass () this.cobj = new Color(this) ; this.update() ;

// permettre à la classe triangle d'hériter des propriétés des clips TriangleClass.prototype = new MovieClip() ;

// Mettre à jour le dessin du triangle pour les propriétés de taille et et les valeur de couleur. TriangleClass.prototype.update = function () if (this.appliquerTeinte) this.cobj.setRGB(this.tcouleur) ; this._xscale = 10 * this.tbase ; this._yscale = 10 * this.thauteur ;

// Lier la classe avec le nom du paramètre d'exportation du movie clip Object.registerClass("FTriangle", TriangleClass) ; #endinitclip

Vous venez juste de définir la classe du composant ! Prenons le temps de jeter un coup d'oeil aux instructions que nous venons d'utiliser pour cela.

#initclip Avancé

Quelques malicieux parmi vous pourrait se demander ce qui se produirait si vous mettiez quelque chose d'autre qu'une méthode, un constructeur, ou un registerClass dans des pragmas #initclip. La réponse est qu'elle sera évaluée au niveau _ root, et " this" se rapportera alors au _root.

Cela signifie que vous pouvez vous référer au composant seulement par des définitions de méthode, ainsi vous devez éviter la tentation d'utiliser un rapport comme " this.myProp = 5 ; " pour essayer de placer une propriété à l'extérieur du constructeur ou d'une méthode.

Vous devez introduire ce rapport dans le constructeur ou dans une Méthode.. Cela va aussi bien pour les gestionnaires définissants les événement, tels que « onEnterFrame » ou « onPress ». Si vous voulez définir ces événements pour votre composant, ils doivent être définis comme cela :

myComponentClass.prototype.onEnterFrame = function () ...

ou bien à l'intérieur du constructeur ou des méthodes :

function myComponentClass () ... this.onEnterFrame = function () ... ...

Quoique les approches soient fonctionnellement équivalentes, le premier est plus efficace si vous voulez qu'il s'applique à la classe entière parce qu'il définit la méthode une fois pour la classe, tandis que le dernier définit la méthode pour chaque instance de myComponentClass.

#initclip et #endinitclip FlashMX a deux nouvelles instructions ('pragmas'),#initclip et #endinitclip qui sont utilisées pour définir des composants. Quand vous fabriquez un composant, vous définissez un constructeur pour la classe, definissez toutesles méthodes, et ensuite enregistrez la classe avec un clip.

Les règles de compilation #initclip et #endinitclip sont utilisées pour marquer un bloc de code lors de sa définition et de son enregistrement. Le code à l'intérieur de ses "pragmas" est exécuté seulement une fois pendant le déroulement de l'animation et cela indépendamment du nombre d'instance du composant utilisé dans l'animation. le code à l'intérieur des "pragmas" est utilisé avant tous les codes utilisés à l'intérieur du clip. Cela vous permet de vous référer aux méthodes de la classe immédiatement quand le clip est placé, faisant tombé une limitation de flash 5 qui nécessitait d'attendre au moins une image avant que les méthodes deviennent disponibles.

Note :les pragmas #initclip/#endinitclip sont réellement uniquement utile pour définir des composants. À première vue, ils peuvent sembler construits comme s'ils devaient travailler pour évaluer un bloc de code sur n'importe quelle ligne de temps (timeline), mais ce n'est pas ce qu'ils font.

Le constructeur de la classe triangle function TriangleClass ()

Cela définit le constructor du composant triangle. Quand Flash crée le composant, il appelle le constructor et exécute les actions. Les propriétés (tbase et thauteur) sont automatiquement définies par défaut (nous verrons comment plus tard).

Définir un héritage des propriétés et des méthodes des Clip. TriangleClass.prototype = new MovieClip() ;

Quand vous publiez une instruction pour connecter la définition de classe au clip, Flash réassigne le type clip au type de la classe que nous avons défini. Toutefois, nous voulons toujours que le clip se comporte comme un clip, donc nous avons à définir notre nouvelle classe pour qu'elle hérite des méthodes et propriétés des clips. Par conséquent, les instructions ci-dessus autorisent l'héritage et ainsi nous pouvons utiliser toutes les méthodes et propriétés des clips avec notre composant.

Il est impératif que ces instructions suivent immédiatement après le constructeur et avant toute méthode définie pour la classe.

Sous-programme de mise à jour du triangle. TriangleClass.prototype.update = function ()

Cette méthode trace le triangle aux valeurs actuelles de base et de taille. Il contrôle d'abord pour voir si nous sommes censés appliquer la teinte au triangle, et, si oui, lui applique la teinte. La propriété "applyTint " est une valeur vraie ou fausse qui nous indique si oui ou non on doit appliquer la teinte. Cependant, une fois qu'une teinte a été appliquée, elle ne peut pas être retirée, seulement modifiée avec une autre couleur. C'est une limitation de notre stratégie de programmation, qui a été gardée aussi simple que possible pour des raisons didactiques. Dans cet exemple, nous multiplions par 10 plutôt que 100 parce que nous plaçons initialement le triangle à une largeur et à une taille de 10.

Lions la classe avec le clip : Object.registerClass("FTriangle", TriangleClass) ;

C'est l'instruction essentielle qui joint la classe (TriangleClass) avec le movie clip identifié par l'identifiant de liaison "FTriangle". Dans l'étape 6, nous nommerons ce composant avec cet identifiant de liaison.

Etape 3. Définition des méthodes de lecture et d'écriture des propriétés de la classe Triangle C'est le moment de définir les autres méthodes dont nous avons besoin pour ce composant, pour les nommer : celles qui gèrent la définition et l'accès au valeur de : base, hauteur et teinte. Nous allons aussi ajouter une méthode qui calcul l'aire d'un triangle. Pour les routines d'attributions de valeurs ( setProperty ) nous devons redessiner le triangle une fois les valeurs passées. Pour la lecture des valeurs nous renverrons simplement la valeur voulue. Ajouter les méthodes suivantes avec le même bloc : #initclip / #endinitclip ( où vous vouler après l'instruction d'héritage de l'objet MovieClip ) :

TriangleClass.prototype.setBase = function (b) this.tbase = b ; this.update() ;

TriangleClass.prototype.getBase = function () return (this.tbase) ;

TriangleClass.prototype.setHauteur = function (h) this.thauteur = h ; this.update() ;

TriangleClass.prototype.getHauteur = function () return (this.thauteur) ;

TriangleClass.prototype.setTeinte = function (c) this.tcouleur = c ; this.update() ;

TriangleClass.prototype.activerTeinte = function () this.appliquerTeinte = true ; this.update() ;

TriangleClass.prototype.getAire = function () return (0.5 * this.tbase * this.thauteur) ;

Etape 4. Définition des propriétés du composant Triangle Il est maintenant temps de définir les paramètres du composant dans la fenêtre de définition des composants. Ouvrez la librairie et cherchez-y le Clip Composant Triangle.. Ouvrez la fenêtre de définition de Composant ( click droit sur PC , CTRL+click sous MAC ) et choisissez "Définition du Composant...".

Dans cette fenêtre vous allez entrer les paramètres de votre composant. Le + et le - en haut de cet écran vous permettent d'ajouter ou d'enlever des propriétés. Par défaut, les propriétés ajoutées ont la valeur "defaultValue" et sont de type String. Flash MX vous permet de définir des propriétés de types : Default, Array, Object, List, String, Number, Boolean, Font Name et Color. Il y a 4 colonnes dans ce tableau : la première, Nom, est le texte que vous souhaitez voir dans l'inspecteur de propriété des composants. Le nom peut contenir des espaces, des charactères alpahnumérique et de la ponctuation. Il est important de définir un titre décrivant bien le paramètre dans cette colonne.

La deuxième colonne, Variable, est le nom de la propriété utilisée dans le script du composant. Ce nom de variable ne peut pas avoir de ponctuations ou d'espace ( sauf des _ ). Avoir à la fois un nom et une variable vous permet d'avoir : 1 nom bien descriptif pour les utilisateurs du script, et un nom court pour utiliser dans vos scripts.

Note : Si vous remplissez la colonne Variable mais pas la Colonne nom, Flash met le Nom de variable dans l'inspecteur de propriété. Si vous faites l'inverse vous devrez alors utiliser ce que vous avez mis dans votre colonne Nom comme nom de variable dans vos scripts.

La troisème colonne, Valeur, est la valeur par défaut de la propriété. La dernière colonne est le type du paramètre, vous pourrez choisir cela en cliquant sur la liste déroulante :

Nom Variable Valeur Type Longuer de la Base tbase 10 Number Hauteur thauteur 10 Number Teinte tcouleur 0 Color Appliquer Teinte appliquerTeinte false Boolean

Comme nous n'avons pas encore d'Interface Utilisateur ou de Prévisualitation définit pour le composant laisser ces 2 lignes vide. Si vous voulez tapper une description pour aider les utilisateurs à comprendre la fonction de votre composant, appuyez sur le bouton Définir à droite de la boite Description. Dans la fenêtre Description, choisissez "Décription Textuelle" et entrez la description dans la zone de saisie. L'autre option est de créer une description formattée pour la panneau Référence ( " La description fait partie du panneau Référence ). Pour cela, regardez la documentation Flash ou le site : Flash MX developper pour avoir des informations sur comment créer une description de composant présente dans la panneau Référence.

Choisissez un icône pour votre composant en cliquant ( et en gardant enfoncer le bouton ) sur l'icone placé en-dessous du labal Description. Dans une prochaine étape nous allons vous montrer comment définir un icône personnel.

Sous cette zone se trouve deux options : Bloquer ou non les valeurs de paramètres dans les instances ( ce qui veut dire qu'un utilisateur peut ou ne peut pas ajouter des paramètres quand le composant a été placé sur la scène ), et Afficher ou non le composant dans le panneaux Composants. Note : Si vous cocher "Afficher dans la panneau Composant", le composant ne s'ajoutera pas automatiquement dans la panneau composant. Nous verrons cela par la suite. Cliquer sur OK pour continuer.

Etape 5. Définir un icone personnalisé Flash MX vous permet de définir votre propre icone pour réprésenter votre composant, et qui le représentera dans la librairie, l'explorateur d'animation et le panneau composant, vous pouvez aussi définir l'icône par défaut...

Dans un programme d'édition d'image comme photoshop ou fireworks, créé une image de 24x20 ( en GIF JPEG ou PNG ) pour réprésenter votre composant. Importer le graphique dans la librairie ( Fichier > Importer dans la librairie ). Flash liera alors l'icône avec le composant si vous donnez le même nom à votre icône qu'à votre composant, et que vous le placez dans le dossier de la librairie appellé FCustomIcons ( créez ce dossier dans votre librairie si vous ne l'avez pas déjà ).

Si vous fermez et rouvrez la librairie vous verrez l'icône à gauche du nom de votre Composant.

Etape 6. Définir les propriétés du Symbole Si vous ne l'avez pas encore fait, fermez le Clip et retournez sur la scène principale. Le Clip restera dans votre librairie ;). Vous allez maintenant réaliser le Lien en faisant bouton droit ( win ) ou Pomme+Click ( mac ) sur le composant Triangle dans la librairie, et choisissez "Propriété".

Si l'écran qui s'ouvre n'est composé que du haut de la capture d'écran ci-dessus alors cliquez sur le bouton "Avancé". Dans l'espace marqué Identifiant ( sous Liaison ), entrez l'identifiant que nous avons défini pour le composant triangle : FTriangle pour "Flash Triangle". Cocher Exporter pour ActionScript et laissez vide les autres. Cela dit à Flash d'empaqueter le composant par défaut dans tous les films utilisant le composant. Comme vous n'avez pas coché "Exporter sur la première image" Flash chargera le composant juste avant de l'utiliser. Si vous cochez Exporter sur... Flash le chargera directement sur la première image de l'animation. La raison pour laquelle nous ne chargeons pas cela sur la première frame est que cela pause des problèmes d'utilisation sur internet ( pas pratique d'attendre le chargement de tous les composants avant de voir un film Flash ). De plus, votre composant serait chargé avant votre preloader ce qui n'est tout de même pas très pratique ;). Les 2 autres options se réfèrent à la création de composants pouvant être partagés durant l'éxécution. Vous pourrez en apprendre plus à ce sujet en lisant la documentation Flash.

Etape 7. Tester le Triangle Nous sommes maintenant prêt à tester le nouveau composant. Ouvrez la librairie et placez une instance sur votre scène. Si vous tester le film ( Control > Tester Animation ) , vous verrez un triangle avec une base et une hauteur de 10. Sortez de la fenêtre de test et nous allons voir comment on peut modifier ces propriétés.

Vous pouvez examiner et changer les propriétés du composant en passant par la fenêtre des propriétés ( comme nous l'avons fait tout à l'heure ). Vous pouvez changer les valeurs en cliquant sur la colonne Valeur et en tapant la nouvelle valeur que vous voulez. Quand vous l 'aurez fait, retester l'animation et vous verrez que le triangle a bien les nouvelles propriétés.

Etape 8. Tester le Composant, Installer dans le panneau composant Avant d'installer le composant, nous vous recommandons de placer le clip du composant dans un nouveau dossier de votre librairie qui aura le nom de votre composant ainsi que tous les autres éléments de bibliothèque utilisés par votre composant. Cela permettra aux gens qui utiliseront votre composant d'avoir après l'ajout un répertoire et un seul s'ajoutant dans leur librairie.

L'endroit ou votre composant sera stocké dépend de votre Système d'exploitation. Les composants sont en effet stockés dans un dossier personnel de l'utilisateur de la machine. Voici quelques exemples : Windows 2000 et XP C:Documents and SettingsUserApplication DataMacromediaFlash MXConfigurationComponents Windows 98 et ME C:WindowsApplication DataMacromediaFlash MXConfigurationComponents Windows NT C:WinNTProfilesUserApplication DataMacromediaFlash MXConfiguration MAC OS X Hard Drive:Users:Library:Application Support:Macromedia:FlashMX:Configuration:Components Mac OS 9.x (multi-utilisateur) Hard Drive:Users:User:Documents:Macromedia :FlashMX:Configuration:Components :

Vous serez certainement plus à l'aise en mettant votre composant dans le pannel Composant et en le glisssant simplement sur la scène plutôt que d'utiliser une librarie. La meilleure installation consiste à utiliser l'Extension Manager ( de Macromedia ), mais pour le moment tout ce dont vous avez besoin est de placer le .fla de votre composant dans le répertoire de vos composants ( voir les exemples ci-dessus .... ), Flash installera alors votre composant automatiquement à chaque démarrage.

Voici quelques trucs à vérifier si vous ne voyez pas votre composant dans le pannel Composant ( accessible par Windows > Composants ). Le pannel Composant est appellé dans Flash par défaut : Flash UI Composants. A coté de ce titre il y a une liste déroulante, cliquez dessus, et regardez si le nom de fichier que vous avez sauvez apparait ici. Si oui, choisissez-le et votre composant apparaitra dans la boite. Si votre composant est dans la liste mais qu'il ne veut pas apparaître dans le pannel vous avez probablement oublié de cocher la case "Afficher le composant dans le pannel" dans la fenêtre de définition du composant ( Etape 4 ). Si le nom de fichier n'est pas dans la liste c'est que vous n'avez pas mis votre .fla dans le bon dossier. Si vous avez à changer le code mieux vaut enlever le fichier existant des dossiers spéciaux et travailler sur une copie séparée avant de remettre le .fla dans le dossier des composants.

Etape 9. Améliorer l'implémentation avec Object.addPropertyInsulating Nous avons créé le composant triangle en essayant de coder proprement, nous avons défini des méthodes setBase, getBase etc... pour accéder aux variables internes de l'objet depuis l'extérieur. De cette façon si nous changeons l'organisation interne du composant nous aurons à changer seulement getBase et setBase et nous ne casserons pas le code de tous les gens ayant développé des animations avec l'ancienne version. Cependant, Flash n'as pas la possibilité de déclarer des variables publiques ( public ) et privée ( private ) comme en C++ ou en JAVA par exemple ... Malheureusement celà veut dire que les développeurs peuvent accéder et modifier des variables internes aux instances qu'ils ne sont pas censés toucher ( principe fondamental de POO ).

La nouvelle méthode addProperty vous permet de définir une propriété qui, quand on y accède appelle une méthode pour calculer la valeur plutôt que de garder une variable réelle en mémoire. Par exemple, nous pouvons définir une propriété appelée"base" qui utilise setBase et getBase pour gérer ses écritures ( changement de valeur ) et lecture ( récupération de la valeur ). Quand à l'extérieur du composant on veut accéder à base ou à hauteur nous savons que nous pouvons utiliser les fonctions que nous avons developpées à cet effet. Mais, si nous changeons l'implémentation interne ( avec addProperty ) nous aurons seulement à modifier les fonctions d'accès et tous les codes construis avec le composant continueront de fonctionner !

Voici le code à ajouter entre #initclip/#endinitclip (après getBase et setBase ) :

TriangleClass.prototype.addProperty("base", TriangleClass.prototype.getBase, TriangleClass.prototype.setBase) ;

La méthode addPRoperty prend trois arguments : le nom ( entre " " ) de la nouvelle propriété, la méthode à utiliser pour accéder à la valeur de la propriété, la méthode pour mettre une nouvelle valeur dans la propriété. La fonction get... doit retourner la valeur, la fonction set doit accepter un argument qui est la nouvelle valeur. Les fonctions font tous les calculs nécessaires pour produire la valeur de la propriété. Par exemple la propriété "Aire" :

TriangleClass.prototype.addProperty("aire", TriangleClass.prototype.getAire, null) ;

Comme vous pouvez le voir dans ce code, nous ne stoquons pas réellement l'aire du triangle, à la place nous calculons l'aire quand on veut accéder à la propriété aire. Depuis l'utilisateur, cela ne change rien si la propriété aire est une vrai variable ou une valeur calculée.

Pour finir, nous définissons aussi la propriété hauteur :

TriangleClass.prototype.addProperty("hauteur", TriangleClass.prototype.getHauteur, TriangleClass.prototype.setHauteur) ; Supposez qu'un développer créé une instance de votre composant triangle appellé "tri0". Le développeur sait maintenant que les propriétés sont aire, base, hauteur et nous n'avons plus à nous soucier de problèmes causés par des changements futurs de notre code....

Etape 10. Introduire par programmation un triangle dans une animation La voie la plus directe pour instancier un composant triangle est de le faire glisser sur la scène à partir du panneau Composant ou, si vous avez déjà une instance sur la scène , à partir de la librairie. Cependant, vous pourriez vouloir créer dynamiquement des triangles au cours de l'animation , et vous préfèreriez ne pas avoir à créer toutes les instances possibles du début. Ceci est facilement réalisé en utilisant les méthodes soit attachMovie soit duplicateMovieClip.

Vous précisez simplement l' "ID de lien " (Linkage ID) et Flash prend en charge le reste , par exemple :

attachMovie("FTriangle", "tri0", 10) ;

Le premier argument est l' "ID de lien " (Linkage ID), le second est le nom du nouveau composant sur la ligne de temps ( timeline ) courante, et le troisième est la profondeur ( l'ordre ). Cette déclaration prend le composant triangle "FTriangle" de la Bibliothèque, nomme le clip "tri0", le place sur la scène aux coordonnées _x = 0, _y = 0 et met sa profondeur à 10 et appelle le constructeur TriangleClass. Les clips placés sur des profondeurs de valeur plus haute apparaissent au-dessus des clips placés sur des profondeurs inférieures.

Avant que vous ne sortiez à toute vitesse pour essayer cela, nous devons résoudre le problème qui consiste à obtenir les valeurs de paramètre dans le composant au moment de l'appel du constructeur. Si nous avons fait quelque chose comme ceci :

attachMovie("FTriangle", "tri0", 10) ; tri0.tbase = 5 ;

Il est trop tard pour que la variable tbase soit utilisée dans le constructeur. Dans notre cas, cela ne fera pas de différence , mais dans la plupart des cas ça va avoir un impact. Flash MX ne vous laisse pas douter. Il existe un paramètre final optionnel (un Objet) à attachMovie et duplicateMovieClip, que vous pouvez utiliser comme dans l'exemple suivant :

attachMovie("FTriangle", "tri0", 10, tbase : 5, thauteur : 10, tcouleur : 0x000000, appliquerTeinte : false) ;

Ce code crée un objet ( en utilisant les ) et le remplit avec tase, thauteur, tcouleur et la propriété appliquerTeinte. Flash copie toutes les propriétés provenant de cet Objet dans l'instance du composant qui est créée, avant d'appeler le constructeur du composant. De cette façon, les propriétés sont disponibles pour le constructeur au bon moment.

Terminé pour le moment ! Si vous avez suivi le tutoriel jusqu'ici, vous devriez avoir un composant triangle qui marche.

Il y a évidemment beaucoup plus de choses que vous pouvez faire avec les composants que ce que l'espace nous permet d'écrire ici, y compris l'héritage des composants (comme le composant Flash UI ), la gestion d'apparence, etc. Le meilleur moyen pour trouver plus de détails est d'examiner le code source contenu dans les Composants UI, que vous trouverez facilement dans le secteur de stockage de données indiqué à l'étape 8.

Les étapes suivantes sont :

La création d'une interface utilisateur personalisée La création d'une animation de prévisualisation temps réel Avant de commencer à créer l'interface utilisateur personnalisée et la prévisualisation temps réel, nous allons présenter une nouvelle fonction de Flash MX , _targetInstanceName, qui permet à vos composants de modifier les éléments de la scène sur lesquels le composant est placé. Nous allons également voir brièvement l'héritage de composant.

_targetInstanceName : Création de Composants qui Changent le Comportement d'Autres Éléments de la scène

Nous vous avons appris comment créer un composant indépendant, mais une des plus existante fonction introduite par les composants Flash MX est la possibilité de créer un composant qui modifie le comporatement d'autres éléments de la scène sur lesquels ils est placé. Pour ceux d'entre vous qui sont familiers avec Director, vous les connaîtrez déjà comme "comportement".

Avec cette fonction, vous pouvez faire glisser le composent sur d'autres éléments de la scène (par exemple un Clip ou un champ de texte) et faire en sorte que le composant modifie les propriétés de ces éléments. Par exemple, le composant de barre de défilement de texte que Macromedia fourni se place et se redimensionne lui-même sur tout champ de texte sur lequel il est placé, et fourni automatiquement les fonctionnalités de la barre de défilement à ce champ de texte. La propriété _targetInstanceName donne au composant le nom ( chaîne ) de l'élément de la scène sur lequel il a été placé. Pour accéder aux propriétés et méthodes de l'objet cible, vous pouvez utiliser la syntaxe suivante à partir d'une méthode d'un composant : this._parent[_targetInstanceName]. Par exemple, pour obtenir la longueur de l'object cible, vous pourriez écrire :

this._parent.[_targetInstanceName]._width

Pour rendre cette propriété disponible, vous l'incluez dans la liste des paramètres de votre composant (voir figure au-dessus). Vous allez également avoir une surprise : votre composant va "s'émanter" sur place. Quand vous glissez votre composant sur un autre élément de la scène, votre composant va s'aligner tout seul sur le coin haut-gauche de l'élément cible de la scène. C'est également un moyen commode de vérifier visuellement que le composant a été connecté avec l'objet cible. Alternativement, vous pouvez tapper le nom de l'objet cible dans l'inspecteur de propriétés. Si le composant n'est pas glissé sur un un élément de la scène, la propriété _targetInstanceName prend la valeur par défaut que vous lui avez donné quand vous avez ajouté la propriété dans la liste des propriétés du composant.

Installation de l'héritage pour composant Maintenant que vous pouvez sous-classer des Clips facilement avec des Composants et les lier à des classes définies par l'utilisateur, vous pouvez créer des hiérarchies d'animation qui partagent des éléments fondamentaux.

L'idée essentielle est que vous faites votre héritage de la classe fondamentale à partir du clip, comme nous l'avons fait avec les triangles, et ensuite les sous-classe héritent de la classe fondamentale (ou d'autres sous-classes ). Puisque vous devez définir la classe fondamentale en premier, vous devez utiliser un numéro d'ordre dans la définition de la classe fondamentale :

#initclip 0

Dans votre sous-classe, vous utilisez des numéros d'ordre plus grand que ceux de la classe parent, comme #initclip 1.Cela assure que la classe d'élément fondamentale est définie avant la sous-classe. Pour établir l'héritage, en place d'héritage de Clip, vous pouvez utiliser une déclaration comme :

MySubClass.prototype = new FoundationClass() ;

Maintenant votre sous-classe (MySubClass) aura les propriétés et les méthodes de la fondamentale (FoundationClass).

Les composants d'interface utilisateur de Macromedia, qui incluent les éléments comme la liste déroulante, les menu déroulants, la case à cocher, et bien d'autres, sont de bons exemples d'utilisation de la hiérarchie des composants. Chaque élément a des propriétés et méthodes uniques pour implémenter des comportement particuliers, mais ils partagent tous des styles fondamentaux de propriétés et méthodes comme l'état activé/désactivé, les tailles et fonts. Les designers peuvent modifier la feuille de style globale (GlobalStyleFormat) et tous les composants qu'ils dessinent à partir des éléments globaux vont changer. Vous pouvez aussi créer votre propre composant en héritant de n'importe laquelle de ces classes.

Quand vous créez le Clip pour la sous-classe, vous pouvez aussi placer le composant parent avec le clip ou introduire le composant parent par programmation avec attachMovie ou duplicateMovieClip.

Etape 11. Création de l'interface utilisateur (IU) personnalisée pour un composant Flash MX Jusqu'ici, nous avons vu comment créer un composant Flash MX personnalisé pou un triangle isocèle. Dans ce tutoriel, nous allons étendre la discussion pour montrer comment créer une interface utilisateur personnalisée.

Une interface utilisateur personnalisée est une animation Flash spéciale que vous feriez pour permettre aux utilisateurs de votre composant d'entrer les valeurs des propriétés par un moyen plus commode que le panneau de propriétés de composant par défaut, comme illustré ci-dessous :

Motivation Travaillant sur les obstacles majeurs que pourraient réprésenter la création de composants, vous vous réchauferez dans le rougeoiement des visages excités de vos designers et développeurs désirant exploiter la magie de votre composant triangle. Un groupe dont les visages ne seront bizarrement pas rougeoyant est celui des agents d''Assurance Qualité" qui diront que maintenant que vous avez créé si facilement vos triangles isocèles pour des animation Flash les gens vont les utiliser incorrectement. En fait , ils vous diront que si la base et la hauteur sont en-dehors d'une certaine proportion, le triangle n'est plus facile à utiliser.

Le chef de l'Assurance qualité vous dira que vous devez ajouter un système de mesure "facile à utiliser" dans le composant pour prévenir les développeurs quand les triangles deviennent dangeureusement "hors-normes". Pour vous aider, elle vous donne le quotient norme-utilisateur pour les triangles isocèles :

fuqu = (base * 4.211) / height

La valeur idéale de fuqu est 4.211, et plus elle s'éloigne (à la fois plus grande ou plus petite ) de cette valeur, plus le triangle devient hors-normes. La création de triangles avec une valeur de fuqu en-dessous de 2.211 ou au-dessus de 6.211 serait même une raison de licensiement de votre société.

Votre côté altruiste vous dicte que vous devez alerter les utilisateurs de votre compoosant avant qu'ils ne fassent une erreur fatale. Vous allez créer une interface utilisateur personnalisée (IU) pour le composant triangle qui va avertir l'utilisateur si le triangle viole la politique d'entreprise, basé sur la base et la hauteur qu'ils tappent. Ca n'aidera pas les programmeurs qui vont coder le composant dynamiquement, mais ils sont déjà au-delà de cet espoir.

Création de l'interface utilisateur (IU) personnalisée Pour créer l'IU personnalisée , vous créez une nouvelle animation Flash. La nouvelle animation Flash va démarer avec l'inspecteur de propriétés régulier (les dimensions sont environ 406 x 72 pixels) ou dans le panneau de propriétés de composant ( utilisant si vous avez besoin un espace plus grand que ce qui irait dans l'inspecteur de propriété).

Vous allez devoir créer un moyen dans cette animation de retrouver les valeurs des propriétés du composant que va définir l'utilisateur , à savoir tbase, thauteur, tcouleur, et appliquerTeinte. Pour créez l'index de fuqu, vous allez ajouter un indicateur de sa valeur, avec un avertissement quand elle s'éloigne des paramètres idéaux, et une alerte quand elle s'éloigne grossièrement de ceux-ci.

L'élément clé dont vous avez besoin pour votre interface utilisateur personnalisée (IU) est une instance de clip que vous créez appelé "xch". Vous passez les valeurs à votre composant en écrivant les valeurs des propriétés de xch par l'IU personnalisée, comme xch.tabse = 20 ;

L'IU personnalisée autorisera les utilisateurs à entrer de nouvelles valeurs. Dans notre cas, l'interface va également motrer les avertissements sur la valeur de fuqu, lorsque nécessaire. Quand l'animation avec le composant triangle est testée ou publiée, Flash copie les propriétés et valeurs sur xch vers le composant qui est donc prés à s'initialiser lui-même avec les valeurs que l'utilisateur a entré.

Notez les étapes suivantes pour créer une IU personnalisée :

1. Créer une nouvelle animation et changez ses dimensions pour avoir 406 x 72.

2. Créez un clip vide en utilisant Insérer > Nouveau symbole et appelez-le "exchange". Faites-le glisser sur la scène et donnez-lui le nom d'instance "xch".

3. Créez des textes statiques pour "base","hauteur","rouge","vert","bleu","fuqu =","rapport" et "0-255", et placez-les comme dans l'illustration.

4. Maintenant, définissez les champ de texte que vous utilisez pour récupérer les valeurs des propriétés tbase et hauteur. Créez un champ de texte "base" et un champ "hauteur" (type : texte de saisie), placez-les au-dessus des textes statiques correspondants, et donnez-leur les noms d'instance "bs" et "ht" , respectivement.

5. Ensuite, définissez les textes de saisie que nous utilisons pour récupérer les couleurs de teinte. Créez 3 champs de saisie supplémentaires nommés "rc","gc" et "bc" (pour la couleur rouge, la couleur verte, et la couleur bleu), et placez-les au-dessus des textes statiques correspondants. L'utilisateur va entrer un entier entre 0 et 255 pour représenter le taux d'une couleur particulière. Les nombres en-dessous de 0 seront définis à 0 et les nombres au-dessus de 255 seront définis à 255.

6. Donc pour que l'utilisateur puissent prévisualiser la couleur, nous fesons un cadre qui montre le paramétrage actuel de la teinte. Utilisez l'outil de dessin pour créer un carré. Convertissez ce carré en Clip, et nommez l'instance "tintSq".

7. Nous pouvons utiliser un composant pré-défini de Flash, FCheckBox, pour définir lorsque l'utilisateur veut appliquer la couleur de teinte. Ouvrez le panneau de Composants et faites glisser une case à cocher à sa place sur la scène. Dans la fenêtre de propriétés, définissez le texte par "appliquez teinte ?" et sa valeur par défaut sur "false". Sous la propriété "Change Handler", entrez "tintApply".

8. Maintenant nous créons l'indicateur pour aider l'utilisateur à faire des triangles "dans les normes". Pour tenir informé l'utilisateur de la valeur de fuqu pour le nouveau triangle, créez un champ de texte dynamique, nommez-le "fuquTF", et placez-le en longueur sur le côté du texte statique "fuqu = ".

9. Ensuite, créez l'indicateur du rapport fuqu, qui dit à l'utilisateur si la valeur de fuqu est PARFAITE (4.211), ACCEPTABLE (entre 2.211 et 6.211, mais pas 4.211), MAUVAISE. Créez un nouveau clip appelé " fuqu text" avec 3 images clés. Sur l'image 1, placez un texte Statique "PARFAIT",à l'image 2 placez le texte statique "ACCEPTABLE", et à la l'image 3, placez-le texte statique "MAUVAIS !". Assurez-vous que ces textes soient alignés sur la gauche en respectant le placement des uns par rapport aux autres. A l'image 1 d'un nouveau calque (avec le nom "actions") ouvrez l'éditeur d'Actions pour l'image clé et entrez l'instruction "stop ;". Pour finir, fermer le Clip et nommez l'instance "fuquEval".

Prêt ou non , ici nous codons 10. La dernière étape est d'écrire le code pour l'IU personnalisée. Sur un nouveau calque, entrez le code suivat sur l'image 1 :

fscommand("allowscale", "false") ; // définition des valeurs par defaut des propriétés xch.tbase = 10 ; xch.thauteur = 10 ; xch.tcouleur = 0x000000 ; xch.appliquerTeinte = false ; // Initialise les champs de texte base et height bs.text = 10 ; ht.text = 10 ; compute_fuqu(10, 10) ; // Initialise le cadre de teinte et les champs de texte de couleur tsc = new Color(tintSq) ; rc.text = gc.text = bc.text = "0" ; setTintSq(0, 0, 0) ;

// Etant donné une valeur de base et de hauteur, calcule la valeur de fuqu et défini // l'indicateur de fuqu basé sur la valeur calculée function compute_fuqu (b, h) var fuqu ;

if (isNaN(b)) b = 0 ; if (isNaN(h)) h = 0 ;

fuqu = b/h * 4.211 ;

if (fuqu == 4.211) fuquEval.gotoAndStop(1) ; else if (fuqu >= 2.211 && fuqu <= 6.211) fuquEval.gotoAndStop(2) ; else fuquEval.gotoAndStop(3) ; // Défini le champ de texte qui montre la valeur de fuqu fuquTF.text = Math.round(fuqu * 1000) / 1000 ;

// Etant donné une valeur pour les couleurs rouge, vert et bleu, crée une valeur composée, // défini la teinte du cadre, et retourne la valeur de la couleur composée. function setTintSq(r, g, b) var col = r << 16 | g << 8 | b ; tsc.setRGB(col) ; return col ;

//Quand les champ de texte base et height changent, calcule à nouveau fuqu // et défini la propriété appropriée dans xch bs.onChanged = function () xch.tbase = this.text ; compute_fuqu(ParseFloat(this.text), ParseFloat(xch.thauteur)) ; ht.onChanged = function () xch.thauteur = this.text ; compute_fuqu(ParseFloat(xch.tbase), ParseFloat(this.text)) ;

// Etant donné un entier c, borne-le entre 0 et 255 function boundColor (c) if (isNaN(c)) return 0 ; if (c < 0) c = 0 ; else if (c > 255) c = 255 ; return c ;

// Quand le champ de texte de couleur change, change la couleur de teinte // et défini la propriété appropriée dans xch rc.onChanged = function () xch.tcouleur = setTintSq(boundColor(this.text), ParseInt(gc.text), ParseInt(bc.text)) ; gc.onChanged = function () xch.tcouleur = setTintSq(ParseInt(rc.text), boundColor(this.text), ParseInt(bc.text)) ; bc.onChanged = function () xch.tcouleur = setTintSq(ParseInt(rc.text), ParseInt(bc.text), boundColor(this.text)) ;

// La case à cocher (c) appèle la fonction quand l'utilisateur coche ou décoche // la case. Défini la propriété appliquerTeinte de xch convenablement. function tintApply (c) xch.appliquerTeinte = c.getValue() ;

A peu près terminé ! 11. Enregistrez l'animation sur votre disque dur , ensuite testez-la (Contrôle > tester l'animation). Ceci va créer le swf au même emplacement que votre fichier sauvegardé.

12. La dernière étapes consiste à intégrer l'IU personnalisée avec l'animation du triangle. Revenez à votre animation du triangle, ouvrez la librairie, et sélectionnez le Composant Triangle. Ouvrez la fenêtre de définition du composant, et sur la droite de l"IU personnalisée", pressez le bouton "Définir".

13. A côté de "Type" , sélectionnez "IU personnalisée avec un fichier swf inclut dans le fichier fla". L'autre option "IU personnalisée avec un fichier swf externe" vous permet de garder l'IU en dehors du triangle, ce qui est bon pour tester plutôt que pour le déployement. Avec ce paramètre, vous devez non seulement donner un chemin absolu vers le fichier, ce qui signifie que le composant sur une autre plate-forme devra ajuster ceci, mais également vous devez fournir les 2 fichiers.

14. Ensuite pour afficher, sélectionnez "Afficher dans l'inspecteur de propriété."

15. Sous "IU personnalisée fichier .swf ", pressez Parcourir pour localiser le fichier swf, ou Mise A Jour si vous avez déjà fait ça et que vous voulez recharger votre IU personnalisée.

16. Pour finir , pressez OK et quand vous sélectionnez le triangle sur la scène et que la fenêtre de propriétés est ouverte, vous allez voir votre IU personnalisée.

Faîtes attention à ça ! Quand vous éditez les propriétés d'un composant, vous devez voir l'IU personnalisée apparaître et marcher.

La dernière étape consiste à créer une prévisualisation temps réel pour le triangle.

Etape 12. Créer une prévisualisation temps réel pour un composant Flash MX Dans la dernière étape, nous allons expliquer comment créer une prévisualisatiuon temps réel, laquelle permet à l'utilisateur du composant de voir dans l'environnement de création à quoi va ressembler le composant lorsque l'animation est publiée. Tandis que le designer change des paramètres, ces changements sont transmis à un swf personnalisé exécuté dans l'environnement de création, et nous faisons ressembler le swf au composant et obéir à la définition des paramètres.

C'est une excellente fonctionnalité qui va rendre plus facile le placement des composants et la création des animations.

Motivation Il serait plus pratique que les utilisateurs puissent voir approximativement à quoi le triangle ressemblerait sur la scène pendant qu'ils définissent les propriétés du triangle. Cela les aidera à concevoir plus efficacement parce qu'ils ne gaspilleront plus de temps dans un cycle d'ajustement des valeurs, de test de l'animation, ajustement des valeurs , test de l'animation , etc.

Flash MX possède la particularité de prévisualisation temps réel, qui fait exactement cela. Essentiellement, vous créez un swf séparé (comme l'interface utilisateur - IU ou UI en anglais - personnalisée), et vous dîtes à Flash de l'utiliser pour afficher votre composant quand il est placé sur la scène (pendant la création). Vous feriez typiquement apparaître le swf exactement comme le composant, en fonction des valeurs des propriétés.

Le triangle sur la scène est une prévisualisation temps réel que nous avons faite.

Vue d'ensemble Avec l'interface utilisateur personnalisé, vous pouvez définir les valeurs à l'intérieur de l'objet xch pour les transférer au composant. Avec la prévisualisation, vous lisez les valeurs depuis l'objet xch. Contrairement à une interface personnalisée, vous n'avez pas à créer d'objet xch pour réaliser une prévisualisation. Toutes les fois que l'utilisateur a modifié une propriété du composant, Flash appelle une fonction que vous définissez dans la prévisualisation appelée " onUpdate ". De cette façon vous savez quand il est nécessaire de mettre à jour la prévisualisation que vous affichez. Le film de prévisualisation est conçu pour visionner préalablement des caractéristiques de base du composant, telles que la couleur et la taille, plutôt que de visionner l'animation préalablement, puisque le film fonctionne seulement à une (1) image par seconde. Ceci est conçu pour ne pas ralentir l'éxécution de FlashMX.

Donc, nous ne pouvons pas employer le même code pour la teinte que nous avons fait pour le composant réel. A la place nous fesons deux triangles, un pour la vue non teintée et un pour la vue teintée. Quand les designers veulent voir la teinte, nous appliquons la teinte, montrons le triangle teinté et cachons le triangle non-teinté. Faisons maintenant un film de prévisualisation pour le composant Triangle. Avant que nous commencions, cependant, nous devons considérer en quoi la prévisualisation sera différente du composant réel. Dans la plupart des cas, ils ne seront pas différents, et il est parfaitement acceptable d'utiliser et de contrôler une instance de votre composant dans un film de prévisualisation. Dans notre situation, quand nous utilisons le vrai composant, l'activation de la teinte ne peut pas être annulé par la suite. Dans la phase de conception, cependant, nous pouvons avoir besoin de voir à quoi le triangle quand il est teinté et quand il n'est pas teinté. Par conséquent, nous ne pouvons pas utiliser le code de teinte que nous avons fait pour le vrai composant. Au lieu de cela, nous faisons deux triangles, un pour voir le triangle non-teinté et un pour voir le triangle teinté. Quand l'utilisateur veut voir le triangle teinté, nous affichons le triangle teinté, et cachons le triangle non-teinté. Et inversement.

Le processus Suivre les étapes suivantes pour créer le film.

1 - Créez une nouvelle animation (fichier). Ajuster les dimensions de cette animation de façon à ce qu'elle soit identique à celle du composant " TRIANGLE " à savoir contenu dans un carré de 10 pixels de côté.

2 - Renommez le calque en " TRIANGLE PLEIN " et dessinez sur ce calque un triangle ayant un aspect identique au composant " TRIANGLE " ( à savoir aligné sur le bas du calque et de dimensions 10 pixels de base et 10 pixels de hauteur). Transformez alors ce dessin en clip, en lui donnant comme nom " TRIANGLE GRAPHIQUE " et donnez comme nom à son occurrence " tc ". Ce triangle va nous servir de triangle non-teinté.

3 - Créez un 2ème calque au dessus du calque " TRIANGLE PLEIN " et nommez le " TRIANGLE TEINTE ", puis copiez " tc " sur ce calque et enfin changez le nom d'occurrence de " tc " en " tctint ".

Créez un 3ème calque et renommez-le " ACTIONS ". Nous y placerons notre fonction de mise à jour " update " qui va lire les propriétés du triangle et le déformer et gérer l'effet de teinte. Placez pour cela le code suivant dans l'image 1 du calque :

// // Routine appelée lorsque les propriétés du composant changent // Le triangle est redessiné sur la base des nouvelles valeurs. Si la teinte s/b est appliquée // choix du triangle tctint sinon choix de tc. function onUpdate() var ac = _root.xch.appliquerTeinte, b = _root.xch.tbase, h = _root.xch.thauteur ;

tc._xscale = 10 * b ; tc._yscale = 10 * h ; tctint._xscale = tc._xscale ; tctint._yscale = tc._yscale ;

if (ac) tc_color.setRGB(_root.xch.tcouleur) ;

tctint._visible = ac ; tc._visible = !ac ;

// Nous conservons 2 copies du triangle, tc, pour la visualization de triangle non teinté, // et tctint, pour visualisation du triangle teinté. Par défaut le triangle teinté est caché. tctint._visible = false ; // Appliquons la couleur. tc_color = new Color(tctint) ;

5 - Arrivé à ce point il serait bon de vérifier que l'option Visualisation est bien activée. Cliquez sur le menu " Contrôle " et cochez l'option " visualisation " en bas du menu si celle-ci ne l'était pas .

6 - Enregistrez votre animation et testez-la (Contrôle + Test de l'animation). Ceci va avoir pour effet de créer un fichier swf que vous pourrez utiliser pour votre composant TRIANGLE.

7 - Il nous faut maintenant établir la liaison entre le composant TRIANGLE et l'animation visualisée. Ouvrez l'animation dans laquelle vous avez défini votre composant TRIANGLE, et ouvrez sa librairie (CTRL-L). Sélectionnez votre composant TRIANGLE, et choisissez Paramètres en cliquant sur le bouton droit de la souris (Windows) ou bien CTRL-CLICK sur MAC.

8 - Trouvez la ligne ou il est écrit " VISUALISATION en TEMPS REEL " et cochez la case située à droite. Sélectionnez la ligne " animation en temps réel avec swf intégrée au fichier ". Cette opération va établir le lien entre animation en temps réel et le composant de définition .fla. Vous pouvez cependant choisir de ne pas intégrer le swf à l' animation en temps réel. Ceci entraîne qu'il vous faudra repréciser le chemin absolue du fichier et donc réajuster ce chemin si vous utilisez des plate formes différentes sans compter qu'il faudra également distribuer les 2 fichiers.

9 - Cliquez sur OK dans la fenêtre de définition de composant. C'est terminé, tout est prêt, vous pouvez maintenant contempler votre animation avec son composant.

La fin... Ou un commencement ? Les composants sont une des nouveautés les plus intéressantes de FLASH MX. Nous espérons que ces quelques lignes vous aurons ouvert l'appétit et vous permettrons de créer les composants de vos rêves. Bonne chance dans vos travaux.

Jonathan and David

Vous pouvez télécharger les sources en cliquant ici.

Traduction Française : équipe Flash-France.

Les messages d'erreurs FLASH expliqués

Klaude Charlier — 2003-04-01T11:53:28Z

Message d'erreur

Description

La propriété n'existe pas

Une propriété inexistante a été rencontrée. Par exemple, x = _green n'est pas valide, car la propriété _green n'existe pas.

L'opérateur doit être suivi par un opérande

Un opérateur sans opérande a été rencontré. Par exemple, x = 1 + requiert un opérande après l'opérateur +.

Erreur de syntaxe

Ce message est émis à chaque fois que le système détecte une erreur de syntaxe non spécifique.

Un nom de champ est attendu après l'opérateur '.'.

Vous devez spécifier un nom de champ valide avec la syntaxe objet.champ.

attendu

Un symbole non valide ou inattendu a été rencontré. Par exemple, dans la syntaxe ci-dessous, le symbole truc n'est pas valide. Le symbole attendu est while.

do {

trace (i)

} truc (i < 100)

La liste d'initialisateur doit être terminée par

Le crochet ou l'accolade de fermeture n'apparaît pas dans une liste d'initialiseurs d'objet ou de tableau.

Identifiant attendu

Un symbole inattendu a été rencontré à la place d'un identificateur. Dans l'exemple ci-dessous, 3 n'est pas un identificateur valide.

var 3 = 4;

L'élément JavaScript '' n'est pas accepté

Une construction JavaScript non supportée par ActionScript a été rencontrée. Ce message apparaît si l'une des constructions JavaScript suivantes est utilisée : void, try, catch ou throw.

++++

La partie gauche de l'opérateur d'affectation doit être une variable ou une propriété

Un opérateur d'affectation a été utilisé, mais la variable ou la propriété située à sa gauche n'était pas valide.

Le bloc d'instruction doit être terminé par ''

Un groupe d'instructions a été déclaré entre accolades, mais l'accolade de fermeture est absente.

Evénement attendu

Un gestionnaire on(MouseEvent) a été déclaré, mais aucun événement n'a été spécifié ou le système a détecté un symbole inattendu à la place d'un événement.

Evénement souris spécifié non valide

Le script contient un événement de souris non valide dans un gestionnaire. Vous trouverez une liste d'événements de souris et de clip valides dans l'entrée On(MouseEvent) du dictionnaire ActionScript.

Identifiant de code-clé attendu

Vous devez spécifier un code de touche. L'annexe B contient une liste des codes de touches.

Code virtuel de touche non valide

Le code de touche spécifié n'existe pas.

Caractères de fin non valides

Le script ou l'expression a été analysé correctement, mais les caractères de fin supplémentaires n'ont pas pu être analysés

Nom de fonction attendu

Le nom spécifié pour cette fonction n'est pas un nom de fonction valide.

Nom de paramètre attendu

Un nom de paramètre (argument) était attendu dans une déclaration de fonction, mais un symbole inattendu a été rencontré.

'else' rencontré sans 'if' correspondant

Une instruction else a été rencontrée, mais sans l'instruction if qui doit la précéder. Vous ne pouvez utiliser l'instruction else qu'avec une instruction if.

Le nom de séquence doit être une chaîne entre guillemets

L'argument de séquence d'une action gotoAndPlay, gotoAndStop ou ifFrameLoaded était de type erroné. L'argument de séquence doit être une constante de chaîne.

Erreur interne

Une erreur interne s'est produite dans le compilateur ActionScript. Veuillez envoyer le fichier FLA qui a produit cette erreur à Macromedia, avec des instructions détaillées permettant de reproduire le message.

Des chiffres en hexadécimal sont attendus après 0x

La séquence 0x a été rencontrée, mais n'était pas suivie de chiffres hexadécimaux valides.

Erreur à l'ouverture du fichier inclus 'fichier' : fichier introuvable

Une erreur s'est produite lors de l'ouverture d'un fichier inclus dans la directive include. Le fichier était absent.

Directive #include mal formulée

Une directive include n'a pas été correctement rédigée. Une directive include doit avoir la syntaxe suivante :

#include "unFichier.as"

Le commentaire multiligne n'est pas terminé

Un commentaire multilignes commençant par /* n'a pas de balise */ de fermeture.

La chaîne littérale n'est pas correctement terminée

Un littéral de chaîne commence par un guillemet droit ouvrant (simple ou double), mais le guillemet de fermeture est absent.

Nombre de paramètres incorrect. nécessite un nombre de paramètres compris entre et

Une fonction a été appelée, mais un nombre inattendu de paramètres a été rencontré.

Nom de propriété attendu dans GetProperty

La fonction getProperty a été appelée, mais le deuxième paramètre n'était pas le nom d'une propriété de clip.

Le paramètre ne peut pas être déclaré plusieurs fois

Un nom de paramètre est apparu plusieurs fois dans la liste des paramètres d'une déclaration de fonction. Tous les noms de paramètres doivent être uniques.

La variable ne peut pas être déclarée plusieurs fois

Un nom de variable est apparu plusieurs fois dans une instruction var. Tous les noms de variables dans une seule instruction var doivent être uniques.

Les gestionnaires 'on' ne peuvent pas être imbriqués dans d'autres gestionnaires 'on'

Un gestionnaire on a été déclaré à l'intérieur d'un autre gestionnaire on. Tous les gestionnaires on doivent apparaître dans le niveau supérieur d'une liste d'actions.

Les gestionnaires 'onClipEvent' ne peuvent pas être imbriqués dans d'autres gestionnaires 'onClipEvent'

Un gestionnaire onClipEvent a été déclaré à l'intérieur d'un autre gestionnaire onClipEvent. Tous les gestionnaires onClipEvent doivent apparaître dans le niveau supérieur d'une liste d'actions.

L'instruction doit apparaître dans le gestionnaire 'on'

(le message apparaît pour le format Flash 5)

Dans les actions d'occurrences de bouton, une instruction a été déclarée sans être encadrée par un bloc on. Toutes les actions d'occurrences de bouton doivent apparaître à l'intérieur d'un bloc on.

L'instruction doit apparaître dans le gestionnaire 'onClipEvent' (le message apparaît pour le format Flash 5)

Dans les actions d'occurrences de clip, une instruction a été déclarée sans être encadrée par un bloc onClipEvent. Toutes les actions d'occurrences de clip doivent apparaître à l'intérieur d'un bloc onClipEvent.

L'instruction doit apparaître dans le gestionnaire 'on' ou 'onClipEvent'

(le message apparaît pour le format Flash MX)

Dans les actions d'occurrences de clip, une instruction a été déclarée sans être encadrée par un bloc on ou onClipEvent. Toutes les actions d'occurrences de clip doivent apparaître à l'intérieur d'un bloc on ou onClipEvent.

Les événements souris ne sont autorisés que pour les occurrences bouton (le message apparaît pour le format Flash 5)

Un gestionnaire d'événement de bouton a été déclaré dans une liste d'actions d'image ou une liste d'actions d'occurrence de clip. Les événements de bouton ne sont autorisés que dans les listes d'actions des occurrences de bouton.

Les événements de clip ne sont autorisés que pour les occurrences de clip

Un gestionnaire d'événement de clip a été déclaré dans une liste d'actions d'image ou une liste d'actions d'occurrence de bouton. Les événements de clip ne sont autorisés que dans les listes d'actions des occurrences de clip.

Déclaration de fonction interdite ici

Il est impossible d'utiliser une fonction nommée lors de sa déclaration dans une affectation.

Dupliqué dans la liste d'événement

Un gestionnaire on a été spécifié avec un événement en doublon.

Evénement de clip spécifié invalide

Un gestionnaire onClipEvent ne peut accepter que des événements load, enterForm, unload, mouseMove, mouseDown, mouseUp, keyDown, keyUp ou data.

L'identifiant non-sensible à la hauteur de casse va masquer l'objet intégré

Les instructions ActionScript devant être spécifiées en faisant attention à la hauteur de casse, un identifiant ne respectant pas la hauteur de casse obscurcirait un objet intégré.

Les instructions 'case' ne peuvent être utilisées que dans une instruction 'switch'

Les instructions conditionnelles doivent être utilisées dans des instructions switch.

Les instructions 'case' doivent se terminer par un ' :'

Chaque instruction conditionnelle d'une instruction switch doit se terminer par une virgule.

Afficher la date, l'heure et faire tourner les aiguilles d'une HORLOGE

Klaude Charlier — 2002-06-05T13:23:09Z

- etape 1 : Les variables

Création des champs textes dynamiques et attribution des noms de variables
datetextfield contiendra la chaine de caractere déterminant la date
heureflash, minuteflash et secondeflash contiendront les h, m et s. ces 3 variables seront utilisées pour calculer la rotation des aiguilles.

- Etape 2 : les clips

Il faut créer trois clips pour les aiguilles et leur donner des noms d'occurence(heure, minute et seconde) qui vont être réutilisés dans le script servant à les faire tourner.

- Etape 3 : le script

Voici le script à placer sur la première frame. ils se compose de deux parties bien distinctes.

// Creation de l'objet date et en tirer les différentes valeurs à attribuer à nos variables

myDate = new Date(); dateTextField = (mydate.getMonth()+"/"+myDate.getDate()+"/"+mydate.getFullYear()); heureflash = (mydate.getHours()); minuteflash = (myDate.getMinutes()); secondeflash = (mydate.getSeconds()); RotaH = heureflash;

// cette seconde partie fait tourner les aiguilles

RotaM = Minuteflash; RotaS = Secondeflash; setProperty ("/Heure", _rotation, Number(RotaH)+Number((RotaM/12))); setProperty ("/Minute", _rotation, RotaM*6); setProperty ("/Seconde", _rotation, RotaS*6); gotoAndPlay (1);

cliquez ci-dessous pour télécharger le FLA et le SWF

.

url encoded format

Klaude Charlier — 2002-03-30T13:15:45Z

Pour que votre fichier texte passe correctement les variables et que le contenu s'affiche correctement dans flash, vous pouvez utiliser le convertisseur "ENCODE" ci-dessous.

1144 273

LE CHIPENDALE HINDOU

Ou vous pouvez le fabriquer vous même avec ce petit actionscript :

placez un champs dynamique variable= entree à gauche placez un champs dynamique variable= sortie à droite

puis placez l'AS suivant sur une frame

sortie=escape( entree);

votre texte sera converti en url encoded format

FLASH auto-detection

Klaude Charlier — 2002-03-26T22:26:19Z

Inutile de vous dire combien je suis passionné par le logiciel FLASH.

Certains pensent que flash est lourd (un flash mal construit est lourd oui !) D'autres trouvent les intros gratuites et chiantes (celles qui nécessitent un "skip intro" oui ! voir le site du même nom) D'autres encore pensent qu'ils ne seront pas vu par la majorité... Essayez d'exporter en FLASH 4, voir 3 si les action scripts utilisés le permettent

Et si ce n'est pas suffisant pour convaincre votre client, faites une version HTML du site et sur la home page placez ces VB et javascripts qui dirigeront automatiquement les internautes vers la version FLASH si ils ont le plugin. Ne leur donnez pas le choix entre les 2 versions, certains sont capables de croire que la version html sera mieux... alors qu'ils ont le plugin. Voici le code à placer dans le header de votre page d'autodetection

Attention : à la fin du script, les lignes : window.location = "http://www.page avec flash window.location = "http://www.version html.htm doivent contenir les url des versions correspondantes

Valeurs	0	0,2	0,4	0,6	0,8	1	1,2	1,4
Cosinus	1	0,9801	0,9211	0,8253	0,6967	0,5403	0,3624	0,17
Sinus	0	0,1987	0,3894	0,5646	0,7174	0,8415	0,932	0,9854

Valeur	1,6	1,8	2	2,2	2,4	2,6	2,8	3	3,2
Cosinus	-0,0292	-0,2272	-0,4161	-0,5885	-0,7374	-0,8569	-0,9422	-0,99	-0,9983
Sinus	0,9996	0,9738	0,9093	0,8085	0,6755	0,5155	0,335	0,1411	-0,0584

Valeur	3,4	3,6	3,8	4	4,2	4,4	4,6	4,8
Cosinus	0,9668	-0,8968	-0,791	-0,6536	-0,4903	-0,3073	-0,1122	0,0875
Sinus	-0,2555	-0,4425	-0,6119	-0,7568	-0,8716	-0,9516	-0,9937	-0,9962

Message d'erreur	Description
La propriété n'existe pas	Une propriété inexistante a été rencontrée. Par exemple, `x = _green` n'est pas valide, car la propriété `_green` n'existe pas.
L'opérateur doit être suivi par un opérande	Un opérateur sans opérande a été rencontré. Par exemple, `x = 1 +` requiert un opérande après l'opérateur `+`.
Erreur de syntaxe	Ce message est émis à chaque fois que le système détecte une erreur de syntaxe non spécifique.
Un nom de champ est attendu après l'opérateur '.'.	Vous devez spécifier un nom de champ valide avec la syntaxe `objet.champ`.
attendu	Un symbole non valide ou inattendu a été rencontré. Par exemple, dans la syntaxe ci-dessous, le symbole `truc` n'est pas valide. Le symbole attendu est `while`. `do {` `trace (i)` `} truc (i < 100)`
La liste d'initialisateur doit être terminée par	Le crochet ou l'accolade de fermeture n'apparaît pas dans une liste d'initialiseurs d'objet ou de tableau.
Identifiant attendu	Un symbole inattendu a été rencontré à la place d'un identificateur. Dans l'exemple ci-dessous, 3 n'est pas un identificateur valide. `var 3 = 4;`
L'élément JavaScript '' n'est pas accepté	Une construction JavaScript non supportée par ActionScript a été rencontrée. Ce message apparaît si l'une des constructions JavaScript suivantes est utilisée : `void`, `try`, `catch` ou `throw`.

La partie gauche de l'opérateur d'affectation doit être une variable ou une propriété	Un opérateur d'affectation a été utilisé, mais la variable ou la propriété située à sa gauche n'était pas valide.
Le bloc d'instruction doit être terminé par ''	Un groupe d'instructions a été déclaré entre accolades, mais l'accolade de fermeture est absente.
Evénement attendu	Un gestionnaire `on(MouseEvent)` a été déclaré, mais aucun événement n'a été spécifié ou le système a détecté un symbole inattendu à la place d'un événement.
Evénement souris spécifié non valide	Le script contient un événement de souris non valide dans un gestionnaire. Vous trouverez une liste d'événements de souris et de clip valides dans l'entrée `On(MouseEvent)` du dictionnaire ActionScript.
Identifiant de code-clé attendu	Vous devez spécifier un code de touche. L'annexe B contient une liste des codes de touches.
Code virtuel de touche non valide	Le code de touche spécifié n'existe pas.
Caractères de fin non valides	Le script ou l'expression a été analysé correctement, mais les caractères de fin supplémentaires n'ont pas pu être analysés
Nom de fonction attendu	Le nom spécifié pour cette fonction n'est pas un nom de fonction valide.
Nom de paramètre attendu	Un nom de paramètre (argument) était attendu dans une déclaration de fonction, mais un symbole inattendu a été rencontré.
'else' rencontré sans 'if' correspondant	Une instruction `else` a été rencontrée, mais sans l'instruction `if` qui doit la précéder. Vous ne pouvez utiliser l'instruction `else` qu'avec une instruction `if`.
Le nom de séquence doit être une chaîne entre guillemets	L'argument de séquence d'une action `gotoAndPlay`, `gotoAndStop` ou `ifFrameLoaded` était de type erroné. L'argument de séquence doit être une constante de chaîne.
Erreur interne	Une erreur interne s'est produite dans le compilateur ActionScript. Veuillez envoyer le fichier FLA qui a produit cette erreur à Macromedia, avec des instructions détaillées permettant de reproduire le message.
Des chiffres en hexadécimal sont attendus après 0x	La séquence `0x` a été rencontrée, mais n'était pas suivie de chiffres hexadécimaux valides.
Erreur à l'ouverture du fichier inclus 'fichier' : fichier introuvable	Une erreur s'est produite lors de l'ouverture d'un fichier inclus dans la directive `include`. Le fichier était absent.
Directive #include mal formulée	Une directive `include` n'a pas été correctement rédigée. Une directive `include` doit avoir la syntaxe suivante : `#include "unFichier.as"`
Le commentaire multiligne n'est pas terminé	Un commentaire multilignes commençant par `/` n'a pas de balise `/` de fermeture.
La chaîne littérale n'est pas correctement terminée	Un littéral de chaîne commence par un guillemet droit ouvrant (simple ou double), mais le guillemet de fermeture est absent.
Nombre de paramètres incorrect. nécessite un nombre de paramètres compris entre et	Une fonction a été appelée, mais un nombre inattendu de paramètres a été rencontré.
Nom de propriété attendu dans GetProperty	La fonction `getProperty` a été appelée, mais le deuxième paramètre n'était pas le nom d'une propriété de clip.
Le paramètre ne peut pas être déclaré plusieurs fois	Un nom de paramètre est apparu plusieurs fois dans la liste des paramètres d'une déclaration de fonction. Tous les noms de paramètres doivent être uniques.
La variable ne peut pas être déclarée plusieurs fois	Un nom de variable est apparu plusieurs fois dans une instruction `var`. Tous les noms de variables dans une seule instruction `var` doivent être uniques.
Les gestionnaires 'on' ne peuvent pas être imbriqués dans d'autres gestionnaires 'on'	Un gestionnaire `on` a été déclaré à l'intérieur d'un autre gestionnaire `on`. Tous les gestionnaires `on` doivent apparaître dans le niveau supérieur d'une liste d'actions.
Les gestionnaires 'onClipEvent' ne peuvent pas être imbriqués dans d'autres gestionnaires 'onClipEvent'	Un gestionnaire `onClipEvent` a été déclaré à l'intérieur d'un autre gestionnaire `onClipEvent`. Tous les gestionnaires `onClipEvent` doivent apparaître dans le niveau supérieur d'une liste d'actions.
L'instruction doit apparaître dans le gestionnaire 'on' (le message apparaît pour le format Flash 5)	Dans les actions d'occurrences de bouton, une instruction a été déclarée sans être encadrée par un bloc `on`. Toutes les actions d'occurrences de bouton doivent apparaître à l'intérieur d'un bloc `on`.
L'instruction doit apparaître dans le gestionnaire 'onClipEvent' (le message apparaît pour le format Flash 5)	Dans les actions d'occurrences de clip, une instruction a été déclarée sans être encadrée par un bloc `onClipEvent`. Toutes les actions d'occurrences de clip doivent apparaître à l'intérieur d'un bloc `onClipEvent`.
L'instruction doit apparaître dans le gestionnaire 'on' ou 'onClipEvent' (le message apparaît pour le format Flash MX)	Dans les actions d'occurrences de clip, une instruction a été déclarée sans être encadrée par un bloc `on` ou `onClipEvent`. Toutes les actions d'occurrences de clip doivent apparaître à l'intérieur d'un bloc `on` ou `onClipEvent`.
Les événements souris ne sont autorisés que pour les occurrences bouton (le message apparaît pour le format Flash 5)	Un gestionnaire d'événement de bouton a été déclaré dans une liste d'actions d'image ou une liste d'actions d'occurrence de clip. Les événements de bouton ne sont autorisés que dans les listes d'actions des occurrences de bouton.
Les événements de clip ne sont autorisés que pour les occurrences de clip	Un gestionnaire d'événement de clip a été déclaré dans une liste d'actions d'image ou une liste d'actions d'occurrence de bouton. Les événements de clip ne sont autorisés que dans les listes d'actions des occurrences de clip.
Déclaration de fonction interdite ici	Il est impossible d'utiliser une fonction nommée lors de sa déclaration dans une affectation.
Dupliqué dans la liste d'événement	Un gestionnaire `on` a été spécifié avec un événement en doublon.
Evénement de clip spécifié invalide	Un gestionnaire `onClipEvent` ne peut accepter que des événements `load`, `enterForm`, `unload`, `mouseMove`, `mouseDown`, `mouseUp`, `keyDown`, `keyUp` ou `data`.
L'identifiant non-sensible à la hauteur de casse va masquer l'objet intégré	Les instructions ActionScript devant être spécifiées en faisant attention à la hauteur de casse, un identifiant ne respectant pas la hauteur de casse obscurcirait un objet intégré.
Les instructions 'case' ne peuvent être utilisées que dans une instruction 'switch'	Les instructions conditionnelles doivent être utilisées dans des instructions `switch`.
Les instructions 'case' doivent se terminer par un ' :'	Chaque instruction conditionnelle d'une instruction `switch` doit se terminer par une virgule.

Walldown : Portail d'assistance internet

transfert sécurisé des données de flash vers le serveur

Les filtres

Sinus et cosinus

Gérer la video

Où placer un script ?

Automatique

Manuelle

Une seule fois

En continue

Créer un composant avec Flash MX

Les messages d'erreurs FLASH expliqués

Afficher la date, l'heure et faire tourner les aiguilles d'une HORLOGE

url encoded format

FLASH auto-detection

Une
seule fois