Sujets sur : button
Cours ActionScript 3 ‘button’
La technique en 3 lignes de codes pour changer la couleur d’un Display Object en 30 secondes
Certaines applications utilisent plusieurs fois le même élément graphique avec seulement une différence : la couleur !
A travers ce tutoriel flash, vous apprenez une technique pour changer aléatoirement la couleur d’un Display Object.
De plus, vous allez découvrir les astuces ci-dessous :
- Comment définir la couleur de fond (ou le background) de votre swf en pure ActionScript ou avec la balise embed de flash.
- La solution pour créer un rectangle de couleur en pure ActionScript.
- Les outils à utiliser pour debugger une application flash en ligne.
- Les stratégies pour optimiser l’utilisation des classes Button et UITextField du Framework AS3 Facile.
- Comment affecter une couleur aléatoire à un Display Object avec la classe Color.
Cette formation flash vous apprend à modifier rapidement la couleur d’un Display Object.
La classe Color et les Display Object
Version démonstration
Voici la version de l’application « Couleur aléatoire ».
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2013/02/random-color.swf |
Télécharger le code source couleur aléatoire
Vous trouvez ci-dessous le code source complet pour affecter une couleur à un Display Object.
L’archive contient également le fichier fl_package.swc avec la classe Color.
Télécharger “Couleur aléatoire” couleur-aleatoire.zip – Téléchargé 740 fois – 421,03 KoQuelles techniques utilisez-vous pour modifier la couleur d’un Display Object ?
Il existe plusieurs techniques pour modifier la couleur d’un Display Object comme ColorTransform, ColorMatrix, et bien d’autres…
Rendez-vous dans le prochain tutoriel pour découvrir les autres techniques.
Partagez votre technique de modification de couleur dans les commentaires ci-dessous.
Utiliser des polices « embed » avec Starling Framework – des polices à partir d’une image png !
Starling Framework est une libraire ActionScript qui fournit un saut de performances considérable, continuons la découverte des différentes fonctionnalités.
Le thème de ce Cours ActionScript 3 est axé sur l’utilisation de polices embarquées avec Starling Framework. Nous allons également apprendre à écrire du texte à partir d’une police contenu dans une simple image png (rappelez-vous le cours sur l’animation de personnages) !
Pour une présentation de Starling Framework, je vous invite à consulter le Cours AS3 dédié.
Vous pouvez également étudier les cours précédents sur Starling Framework.
Dans ce Cours AS3, vous allez utiliser des polices embarquées optimisés avec Stage 3D.
Voici ce que vous allez apprendre dans ce Cours ActionScript :
- Comment utiliser une partie des classes Starling, proches de celles natives en Flash (Sprite, MovieClip…).
- La technique pour utiliser des polices embarquées avec Starling Framework.
- Et comment implémenter les classes Starling dans votre code ActionScript.
- Comment utiliser des fichiers ttf, contenant votre police de caractères, avec Starling Framework.
- Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.
- Comment utiliser une police contenu dans une image png.
Cette formation vous permettra d’ajouter à vos jeux flash des polices de caractères originales.
Polices embed avec Starling Framework
Version démonstration
Ci-dessous plusieurs exemples d’utilisations des polices embarquées avec Starling Framework dans flash !
- Cliquez ici pour voir la version de démonstration N°1.
- Cliquez ici pour voir la version de démonstration N°2.
- Cliquez ici pour voir la version de démonstration N°3.
Télécharger le code source du cours AS3
Et voici le code source des exemples avec Starling Framework.
Le fichier zip contient également la version 11 de playerglobal v.11.swc pour la compilation de votre application flash.
Télécharger “Exemple Starling Framework polices embed” ex-starling4-police-embed.zip – Téléchargé 1325 fois – 1,03 MoTélécharger Bitmap Font Generator (gratuit) pour créer une image png à partir d’une police de caractères.
Présentation de Starling Framework par Thibault Imbert.
Télécharger la dernière version de Starling Framework.
Consulter le code source directement sur GitHub.
Le Site Officiel de Starling Framework.
La documentation de l’API Starling Framework.
Le Forum officiel consacré à Starling Framwework.
Télécharger le livre « Introduction à Starling Framework » de Thibault Imbert (rédigé en anglais).
Télécharger “Livre Starling Framework” Introducing_Starling-rev_1.0.pdf – Téléchargé 13892 fois – 8,90 MoAvez-vous développé vos premières applications flash avec Starling Framework ?
Si oui, postez un lien vers votre application dans les commentaires ci-dessous.
Si non, pourquoi ? Utilisez-vous une autre technique pour profiter de l’API Stage 3D ?
Utiliser Starling Framework pour créer des Buttons et un 1 Menu de Jeu Flash
Commentaires fermés sur Utiliser Starling Framework pour créer des Buttons et un 1 Menu de Jeu Flash
Starling Framework étant une libraire ActionScript qui fournit un saut de performances considérable, continuons la découverte des différentes fonctionnalités.
Le thème de ce Cours ActionScript 3 est axé sur la création de boutons pour un Menu de jeu flash !
Pour une présentation de Starling Framework, je vous invite à consulter le Cours AS3 dédié.
Vous pouvez également étudier les cours précédents sur Starling Framework.
Dans ce Cours AS3, nous allons apprendre à créer plusieurs boutons optimisés avec Stage 3D.
Voici ce que vous allez apprendre dans ce Cours ActionScript :
- Comment utiliser une partie des classes Starling, proches de celles natives en Flash (Sprite, MovieClip…).
- La technique pour créer un menu composé de plusieurs boutons.
- Et comment implémenter les classes Starling dans votre code ActionScript.
- Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.
- Le code complet pour créer votre interface d’accueil de votre jeu flash optimisé par Starling Framework.
Cette formation vous permettra de créer un menu avec plusieurs boutons et un paysage défilant pour une application flash en 2D.
Ensuite, il vous reste à implémenter les actions spécifiques à chaque bouton.
Création de Buttons avec Starling Framework
[spoiler]
Bonjour et bienvenue sur actionscript-facile.com
Dans cette série de cours consacré au Framework starling, nous continuons à apprendre à utiliser les fonctionnalités qu’il recèle.
Le thème de ce cours est consacré à la création des boutons d’un menu avec starling, dans une application flash AS3.
Pour ceux qui savent pas ce que c’est starling, une présentation rapide :
c’est une librairie en pure AS3.
Starling reproduit l’architecture de flash et display list, Sprite, movieclip.
L’avantage, c’est que tout votre rendu d’une application flash normale, donc pas en 2D, est directement calculée par le GPU.
Cela permet d’avoir des performances très intéressantes.
Pour une présentation un peu plus détaillée, je vous renvoie à la vidéo, au cours vidéo numéro 01 qui présente starling dans le détail.
On va passer tout de suite aux exemples pratiques de ce cours.
C’est-à-dire la création d’un menu avec starling Framework.
Je le répète vite fait : pensez à mettre Wmode = direct pour activer stage3D et l’accélération du CPU avec le flash Player 11.
De toute façon, ce sera dans le fichier de code source.
Ensuite, pensez à vos paramètres de compilation. Je les ai mis ici à rajoutez -SWF-version=13 pour activer l’api stage3D du flash Player 11.
Et également, pensez, il y a trois choses à reprendre le Player global version 11 .SWC qui sera également en téléchargement sous cette vidéo.
On part de notre classe main classique qui étend Sprite mais le Sprite de flash player 10. Sprite et on utilise starling en créant une instance de l’objet.
Starling l’anti crénelage, multitouche, si on est sur un Smartphone.
Et on démarre.
Ce qui nous intéresse, c’est de créer un menu.
On a nos éléments de boutons que je vais vous montrer.
Les assets, ici nous avons donc le bouton état normal et le bouton état cliqué donc c’est des images PNG tout simplement rien de bien méchant.
On définit un tableau vector avec les noms de chacun de nos boutons du menu :
jouer, options, se connecter.
On importe les deux boutons directement dans notre SWF.
L’état bas est à cliqué, du bouton est l’état normal, je vous explique.
Après, on créé des bitmaps de nos boutons que nous avons ici.
A des constantes à modifier, on en créé des bitmaps. Ils ont créé les textures de nos boutons.
Nous, on va créer un menu pour le fond.
Je vous expliquerais après et ont créé un bouton pour notre menu.
En fait, ça va contenir tout nos boutons.
Et puis là, on a notre tableau.
On boucle et on créé nos boutons.
Alors pour créer un bouton, on lui donne la texture pour l’état haut, le nom, le contenu texte, la texture pour l’état bas.
On met le texte en gras, sa taille et là c’est un effet, un scale donc de 0,9 au lieu de 1 sur le bouton.
Lorsque le bouton sera cliqué, il qui sera réduit.
On le positionne et on l’ajoute dans notre container.
On écoute l’événement triggered c’est à dire triggered sera envoyé à chaque fois que le bouton est cliqué par l’utilisateur.
Et quand il est cliqué qu’est ce qu’on fait ?
On fait un petit trace dans monster debuguer.
Ensuite on écoute le stage sur chaque image. Cela simule l’événement onEnterFrame.
Finalement, on centre notre menu sur la scène et on l’affiche.
J’ai rajouté autre chose, je précise que ces exemples provienne du livre en anglais de Thibault Imbert.
J’apprends à les utiliser et et je vous explique un petit peu ce que j’en ai compris.
On va mettre une image de fond.
Tout simplement une image de fond dans assets, rien de bien méchant.
Un container qui va contenir nos deux images. C’est une image qui va défiler.
Il y aura notre menu et le fond qui défile.
En fait, il y a 2 images pour simuler le défilement du fond. Ce sera les mêmes sauf qu’elles seront collées l’une à côté de l’autre.
On crée un bitmap de notre image, une texture. Vous commencez à bien connaître, c’est le troisième exemple que nous voyons.
Création texture, notre container et on créé nos deux images.
C’est les même donc à partir de la même texture, et on les positionnent.
Elles sont toutes les deux les unes à la suite des autres. On les ajoute sur la scène.
Enfin sur notre container, nos deux images sur le container et le container sur la scène.
Et là, vous voyez que le menu sera affiché par-dessus le background.
Donc le container d’un backround et donc là on fait scroller l’image à chaque onEnterFrame tout simplement.
Cela permet d’utiliser des boutons.
Je vous remontre une bitmap texture pour chaque bouton et on a la classe bouton qui contient pas mal d’appel ici.
Et pour enable l’état bas on peut changer en live.
On a un getter setter sur la texture pour l’état bas du bouton, pareil pour l’état normal.
Ici ça, ça permet de positionner le texte dans le bouton.
Par défaut le texte est centré dans l’image du bouton, mais on peut le positionner beaucoup plus précisément.
Si vous êtes curieux, vous regarderez la classe un peu plus en détail.
Je lance la compilation et ensuite je vais ouvrir mon navigateur Firefox pour vous montrer le résultat.
Voilà le résultat, camtasia enregistre, donc moi ça rame. Comme vous le savez, j’ai un PC plutôt moyen. Donc en fait, on a le fond qui défile.
Sur votre PC, en tant qu’exemple, il défilera à 40 images/secondes.
Donc le fond défile et nous avons donc la création de nos boutons.
Si je clic sur un bouton, voyez l’état bas du bouton et si on regarde le debugger, on voit que le bouton option a été cliqué.
Ensuite, je clique sur le bouton jouer et le bouton se déconnecter.
Donc ça pourra être très utile ce style de menu. Par exemple, pour vos jeux flash, cela utilisera également entre le scrolling, vos boutons, la puissance du flash Player 11 et surtout stage 3D.
Donc on regarde dans le debugger, on a appuyé sur jouer et se connecter.
Je fais un clear traces et puis je vais ré-appuyer sur le bouton règles tout simplement.
Il se réduit après on peut faire des enable / disable derrière et on constate l’appui sur le bouton.
C’est un exemple qui reste assez basique de l’utilisation des éléments embarqués et vecteurs, des textures.
Une image qu’on met dans un Sprite, la classe image que nous avons déjà vu plusieurs fois et qui contient pas mal de choses très intéressantes.
Je vous laisserais découvrir smothing etc.
Maintenant on a vu la classe bouton.
Dans le prochain cours, on verra les polices embarquées.
Comme pour les animations, c’était tout intégré dans une image PNG, nos polices embarquées seront également intégrés dans une image PNG.
Et on refera notre menu avec des polices embarquées à partir d’une image PNG.
Comme d’habitude, vous trouverez le code source de starling framework sous cette vidéo.
Et vous avez également le livre PDF complet de Thibault Imbert en anglais sous cette vidéo si vous voulez apprendre plus rapidement à maîtriser et à utiliser starling framework.
Si jamais vous avez commencé à créer des premières applications qui utilisent la puissance du flash Player 11 et stage 3D n’hésitez pas à poster sous cette vidéo dans les commentaires.
Je vous dis à très bientôt sur actionsript-facile.com
[/spoiler]
Version démonstration
Ci-dessous un exemple de création de Menu avec Starling Framework dans flash !
Cliquez ici pour voir la version de démonstration N°1.
Télécharger le code source du cours AS3
Et voici le code source de l’application créée avec Starling Framework.
Le fichier zip contient également la version 11 de playerglobal v.11.swc pour la compilation de votre application flash.
Télécharger “Exemple Starling Framework Button Menu” ex-starling3-button-menu.zip – Téléchargé 1691 fois – 656,64 KoPrésentation de Starling Framework par Thibault Imbert.
Télécharger la dernière version de Starling Framework.
Consulter le code source directement sur GitHub.
Le Site Officiel de Starling Framework.
La documentation de l’API Starling Framework.
Le Forum officiel consacré à Starling Framwework.
Télécharger le livre « Introduction à Starling Framework » de Thibault Imbert (rédigé en anglais).
Télécharger “Livre Starling Framework” Introducing_Starling-rev_1.0.pdf – Téléchargé 13892 fois – 8,90 MoAvez-vous développé vos premières applications flash avec Starling Framework ?
Si oui, postez un lien vers votre application dans les commentaires ci-dessous.
Si non, pourquoi ? Utilisez-vous une autre technique pour profiter de l’API Stage 3D ?
Comment créer un jeu – Ticket à Gratter – en Actionscript 3 ?
Ca y est, vous connaissez les bases essentielles en Actionscript 3. Vous arrivez à créer vos premières applications flash.
Mais vous peinez pour concevoir des jeux flash. Vous ne savez pas comment vous y prendre, vous êtes un peu perdu.
J’étais comme vous, Actionscript 3 possède une multitude de fonctions et de possibilités !
Pour créer des jeux flash, 80% des développeurs débutant se lancent tête baissée, en copiant des codes AS3, à droite, à gauche. Et cela ne fonctionne pas !
Les jeux flash ont des bugguent incompréhensibles et difficilement identifiables pour les corriger.
En appliquant la méthode AS3 Formation, je vous propose, pendant plusieurs cours, de vous montrer en vidéo, la conception de jeu flash de A à Z 😉
C’est parti, pour la programmation d’un jeu très simple…
Ticket à gratter
Un cours vidéo à visionner attentivement.
Version démonstration
Ci-dessous, le résultat dans un swf.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/ticket_gratter.swf |
Téléchargez le code source du Ticket à gratter
Vous trouverez l’ensemble du code source commenté pour vous aider dans la création de votre premier jeu flash.
Télécharger “Ticket à gratter” jeu-flash-ticket-a-gratter.zip – Téléchargé 1776 fois – 254,78 KoVous pouvez aussi télécharger le code source complet et commenté (avec plusieurs exemples pratiques) du Framework AS3 Facile.
Et vous, quel est le premier jeu flash que vous avez programmé ?
Pour ma part, mon premier jeu flash est un ticket à gratter, en AS2 à l’époque !
Comment avez-vous programmé votre ticket à gratter ? Quelles fonctionnalités avez-vous rajouté ?
Livre Pratique d’ActionScript 3 partie 2
Phrase résumé du livre : l’arrivée d’ActionScript 3 avec Flash 9 apporte des nouveautés et des performances extrêmement intéressantes. Avec une complémentarité des spécialisations Graphistes / Programmeurs, les applications Flash deviennent de plus en plus attractives et intuitives. Flash 10 enfonce le clou avec la gestion 3D, c’est l’avènement des jeuxvidéos et des applications où (presque) tout devient possible avec de l’imagination!
De Thibault Imbert 1096 pages (édition pdf), 1080 pages (édition livre broché).
Note : Ce livre étant extrêmement complet et intéressant (difficile à résumer 🙂 ), je le publie en plusieurs parties. En voici la deuxième , les suivantes viendront plus tard.
Lire la première partie de cette chronique : Livre Pratique d’ActionScript 3 Partie 1.
Chronique et résumé du livre
Suite à vos demandes, la chronique de ce livre vous permettra d’avoir une vue d’ensemble de la programmation ActionScript 3. Et également de posséder un ouvrage de référence pour apprendre les bases et beaucoup plus.
Voici la 2ème partie de la chronique du livre Pratique d’ActionScript 3 – Août 2008 – v 0.1. Vous pouvez lire la 1ère partie ici.
Chapitre 7 – Interactivité
L’interactivité est la grande force du Flash. Très rapidement, il est possible de réaliser une interface simple qui interagit avec un utilisateur.
Interactivité avec un SimpleButton
L’objet SimpleButton est un bouton constitué de 4 DisplayObject :
- SimpleButton.upState : définit l’état haut.
- SimpleButton.overState : définit l’état dessus.
- SimpleButton.downState : définit l’état abaissé.
- SimpleButton.hitTestState : définit l’état cliqué.
Il est possible de personnaliser chaque état du bouton. Je vous invite à lire ce tutoriel : Comment créer un Composant Bouton en AS3 ?
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf |
Créer un menu dynamique
Toute application Flash intègre souvent (voir systématiquement) une interface de navigation permettant à l’utilisateur de consulter l’ensemble du contenu.
Le menu est des classiques du genre que nous avons tous développés au moins une fois.
Le plus efficace est de générer votre menu, dynamiquement, à partir de données externes provenant soit :
- d’un tableau local
- d’un fichier XML local
- ou de données provenant d’un serveur : avec PHP et une base de données MySQL par exemple.
Ci-dessous, un exemple de menu très simple :
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/12/swfaddress_exemple.swf |
Lisez cet article pour comprendre sa conception et consulter son code source : Utiliser l’historique du navigateur dans Flash avec les boutons précédent / suivant.
Si vous avez des questions ou besoin d’information supplémentaires, posez les dans les commentaires ci-dessous.
Mouvement programmatique
Pour ajouter des effets à notre menu, nous pouvons utiliser la classe Tween intégrée à Flash ou des librairies open-source comme TweenLite.
La librairie TweenLite est très intéressante et facile d’utilisation. La page TweenLite vous monter un exemple d’utilisation en ActionScript 3
Si vous avez des questions ou besoin d’un tutoriel spécifique, demandez le dans les commentaires ci-dessous.
Afin de donner du mouvement à un objet graphique dans Flash, nous pouvons utiliser les événements Event.ENTER_FRAME ou TimerEvent.TIMER.
La classe Tween (de Flash) utilise en interne un événement Event.ENTER_FRAME afin de modifier la propriété de l’objet.
Plusieurs types de mouvements sont disponibles :
- cinétique
- élastique
- rebond
- ou constant.
Les différentes méthodes et propriétés de la classe Tween permettent de gérer le mouvement. Il est possible d’ajouter des effets à partir des propriétés suivantes : les axes x et y, l’alpha…
Pour utiliser les Tween de Flash, pensez à les importer dans votre code ActionScript 3.
[codesyntax lang= »actionscript3″ title= »Tween.as » bookmarkname= »Tween.as »]
1 2 3 | // import des classes Tween et Elastic pour le type de mouvement import fl.transitions.Tween; import fl.transitions.easing.Elastic; |
[/codesyntax]
Il est possible d’activer le comportement bouton sur des objets autres que SimpleButton. Pour cela, il suffit d’activer la propriété buttonMode.
La propriété buttonMode affecte un comportement bouton aux objets MovieClip et Sprite.
Pour que seul le DisplayObject principal reçoive les évènements de la souris, nous passons la valeur false à la propriété mouseChildren.
désactive les évènements souris des enfants
[codesyntax lang= »actionscript3″ title= »buttonMode » bookmarkname= »buttonMode »]
1 2 3 | // activation du comportement bouton monBouton.buttonMode = true; mouseChildren = false; // désactive les évènements souris des enfants |
[/codesyntax]
Gestion du focus
2 nouveaux événements existent en ActionScript 3 pour gérer le focus (sur un objet Button par exemple):
- Event.ACTIVATE : événement diffusé lorsque l’objet écouté gagne le focus.
- Event.DEACTIVATE : événement diffusé lorsque l’objet écouté perd le focus.
Ces deux événements sont diffusés par tout DisplayObject présent ou non au sein de la liste d’affichage.
Grâce à ces événements, il est possible de fermer le menu lorsque l’animation perdra le focus et à l’inverse de le rouvrir.
Espace de coordonnées
Pour toutes les entrées souris, les objets graphiques (DisplayObject) diffusent des objets événementiels de type flash.events.MouseEvent.
Cette classe possède de nombreuses propriétés :
- MouseEvent.altKey : indique si la touche ALT est enfoncée au moment du clic.
- MouseEvent.buttonDown : indique si le bouton principal de la souris est enfoncé au moment du clic.
- MouseEvent.delta : indique le nombre de lignes qui doivent défiler chaque fois que l’utilisateur fait tourner la molette de sa souris d’un cran.
- MouseEvent.localX : indique les coordonnées X de la souris par rapport à l’espace de coordonnées de l’objet cliqué.
- MouseEvent.localY : indique les coordonnées Y de la souris par rapport à l’espace de coordonnées de l’objet cliqué.
- MouseEvent.relatedObject : indique l’objet sur lequel la souris pointe lors de l’événement MouseEvent.MOUSE_OUT.
- MouseEvent.shiftKey : indique si la touche SHIFT est enfoncée au moment du clic.
- MouseEvent.stageX : indique les coordonnées X de la souris par rapport à l’espace de coordonnées de l’objet Stage.
- MouseEvent.stageY : indique les coordonnées Y de la souris par rapport à l’espace de coordonnées de l’objet Stage.
Les propriétés localX et localY renvoient les coordonnées de la souris par rapport aux coordonnées locale de l’objet cliqué.
Les propriétés stageX et stageY renvoient les coordonnées de la souris par rapport au scénario principal.
Évènement global
L’objet Stage permet d’écouter la souris de manière globale. En écoutant les évènements MouseEvent.MOUSE_MOVE et / ou MouseEvent.MOUSE_UP, vous pouvez déclencher des actions différentes sur votre application Flash.
En utilisant la méthode updateAfterEvent, vous forcez le rafraichissement de votre interface. De plus, cela permet une optimisation des performances de votre application Flash, l’appel de la méthode updateAfterEvent est indépendante du framerate (nombre d’image par seconde).
Gestion du clavier
Par défaut, l’objet Stage gère les entrées clavier.
Deux événements sont liés à l’écoute du clavier :
- KeyboardEvent.KEY_DOWN : diffusé lorsqu’une touche du clavier est enfoncée.
- KeyboardEvent.KEY_UP : diffusé lorsqu’une touche du clavier est relâchée.
Dès qu’un objet événementiel de type KeyboardEvent est diffusé, celle-ci possède de nombreuses propriétés :
- KeyboardEvent.altKey : indique si la touche ALT est enfoncée.
- KeyboardEvent.charCode : contient le code caractère Unicode correspondant à la touche du clavier.
- KeyboardEvent.ctrlKey : indique si la touche CTRL du clavier est enfoncée.
- KeyboardEvent.keyCode : valeur de code correspondant à la touche enfoncée ou relâchée.
- KeyboardEvent.keyLocation : indique l’emplacement de la touche sur le clavier.
- KeyboardEvent.shiftKey : indique si la touche SHIFT du clavier est enfoncée.
La propriété charCode permet de déterminer la touche enfoncée. Grâce à la méthode String.fromCharCode, nous évaluons le code Unicode. Puis, récupérons le caractère correspondant.
[codesyntax lang= »actionscript3″ title= »charCode » bookmarkname= »charCode »]
1 2 3 4 5 6 7 8 | // souscription auprès de l'objet stage pour l'événement KEY_DOWN stage.addEventListener ( KeyboardEvent.KEY_DOWN, ecouteClavier ); function ecouteClavier ( pEvt:KeyboardEvent ):void { // affiche : d,f,g, etc... trace( String.fromCharCode( pEvt.charCode ) ); } |
[/codesyntax]
Les codes de touche les plus courants sont stockés dans des propriétés statiques de la classe Keyboard.
Par exemple : Keyboard.SPACE, Keyboard.SHIFT, Keyboard.CONTROL… Consultez la liste des propriétés statiques sur l’aide en ligne d’Adobe.
Avec les propriétés (altKey, ctrlKey et shiftKey) de la classe MouseEvent, il est possible de détecter la combinaison de touches.
Il n’existe pas d’équivalent à la méthode isDown de la classe Key en ActionScript 3. Par contre, il est facile de simuler un comportement équivalent grâce à un objet de mémorisation.
[codesyntax lang= »actionscript3″ title= »Key.isDown » bookmarkname= »Key.isDown »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | stage.addEventListener ( KeyboardEvent.KEY_DOWN, toucheEnfoncee ); stage.addEventListener ( KeyboardEvent.KEY_UP, toucheRelachee ); // objet de mémorisation de l'état des touches var touches:Object = new Object(); function toucheEnfoncee ( pEvt:KeyboardEvent ):void { // marque la touche en cours comme enfoncée touches [ pEvt.keyCode ] = true; } function toucheRelachee ( pEvt:KeyboardEvent ):void { // marque la touche en cours comme relachée touches [ pEvt.keyCode ] = false; } monPersonnage.addEventListener ( Event.ENTER_FRAME, deplace ); var etat:Number = personnage_mc.scaleX; var vitesse:Number = 15; function deplace ( pEvt:Event ):void { // si la touche Keyboard.RIGHT est enfoncée if ( touches [ Keyboard.RIGHT ] ) { pEvt.target.x += vitesse; pEvt.target.scaleX = etat; } // si la touche Keyboard.LEFT est enfoncée else if ( touches [ Keyboard.LEFT ] ) { pEvt.target.x -= vitesse; pEvt.target.scaleX = -etat; } } |
[/codesyntax]
Lorsqu’une animation est redimensionnée un événement Event.RESIZE est diffusé par l’objet Stage.
Grace à cet événement, nous pouvons ensuite gérer le positionnement des éléments graphiques, par rapport aux nouvelles dimensions de l’animation.
Par exemple, il est possible de conserver un logo centré, quelque soit le redimensionnement de l’application Flash.
Chapitre 8 – Programmation orienté objet
L’intérêt de la programmation orientée objet réside dans la séparation des tâches, l’organisation et la réutilisation du code. C’est à dire : à chaque type d’objet une tâche spécifique.
Dans le cas d’une galerie photo :
- un objet peut gérer la connexion au serveur afin de récupérer les données.
- un autre s’occupe de l’affichage.
- et un dernier objet traite les entrées souris et clavier de l’utilisateur.
En connectant ces objets entre eux, nous donnons vie à une application.
Ci-dessous, un exemple de galerie photo composée de trois objets principaux.
Pour créer un nouveau type d’objet en ActionScript 3, nous devons créer une classe. Une classe est comme un moule permettant de créer des objets de même type.
Caractéristiques d’un langage objet :
- Chaque objet est associé à une tâche spécifique.
- Les méthodes définissent les capacités d’un objet.
- Les propriétés définissent ses caractéristiques.
- Une instance de classe est un objet créé à partir d’une classe.
- Pour instancier un objet à partir d’une classe, nous utilisons le mot clé new. A partir d’une classe nous pouvons créer autant d’instances de cette classe que nous voulons.
En ActionScript 3, une classe doit être contenue dans un conteneur de classes appelé paquetage. Les paquetages (packages en anglais) permettent d’organiser les classes dans des répertoires.
Nous pouvons imaginer une application dynamique dans laquelle : une classe Connector serait placée dans un répertoire serveur et une autre classe PNGEncoder serait dans le répertoire encodage.
Le compilateur trouvera la classe selon le chemin renseigné par le paquetage. Pour définir un paquetage nous utilisons le mot clé package.
En ActionScript 3, il existe 5 type d’attributs pour les propriétés pour une classe :
- internal : Par défaut, le membre est accessible uniquement depuis le paquetage en cours.
- public : Accessible depuis n’importe quelle partie du code.
- private : Le membre n’est accessible que depuis la même classe. Les sous-classes n’ont pas accès au membre.
- protected : Le membre est accessible depuis la même classe, et les sous-classes.
- static : Le membre est accessible uniquement depuis la classe, non depuis les instances.
Il y a également 4 attributs pour une classe :
- dynamic : La classe accepte l’ajout de propriétés ou méthodes à l’exécution.
- final : La classe ne peut pas être étendue.
- internal (par défaut) : La classe n’est accessible que depuis les classes appartenant au même paquetage.
- public : La classe est accessible depuis n’importe quel emplacement.
Le constructeur d’une classe permet d’initialiser l’objet créé. Le constructeur possède le même nom que la classe.
Il est possible d’avoir une référence à l’objet courant en utilisant le mot clé this. Toutes les méthodes d’une classe ont accès aux propriétés définies au sein cette classe.
L’encapsulation
L’encapsulation détermine la manière dont nous exposons les propriétés d’un objet envers le monde extérieur. Un objet bien pensé s’utilise sans montrer les détails de son implémentation.
Pour cela, il faut tout d’abord séparer les personnes utilisant les classes en deux catégories :
- Le ou les auteurs de la classe.
- Les personnes l’utilisant.
Deux groupes de méthodes d’accès aux propriétés d’une classe existent :
- Les méthodes récupérant la valeur d’une propriété, appelées méthodes de récupération (getAge, getVille).
- Les méthodes affectant une valeur à une propriété, appelées méthodes d’affectation (setAge, setVille).
Les méthodes de lecture et d’écriture : getter / setter sont ‘une simplification’ des méthodes d’accès. Elles permettent au développeur d’appeler de manière transparente ces méthodes comme si ce dernier ciblait une propriété.
Dans la majorité des cas, les propriétés d’un objet possède l’attribut private.
Un code encapsulé par des méthodes de récupération / d’affectation rend la classe évolutive et solide.
L’héritage
La notion d’héritage est un concept clé de la programmation orientée objet tiré directement du monde qui nous entoure. Tout élément du monde réel hérite d’un autre en le spécialisant. Ainsi en tant qu’être humain nous héritons de toutes les caractéristiques d’un mammifère, au même titre qu’une pomme hérite des caractéristiques du fruit.
L’héritage permet de réutiliser facilement les fonctionnalités d’une classe existante. La classe mère est appelée super-classe (super-type), la classe fille est appelée sous-classe (sous-type). Afin d’hériter d’une classe, nous utilisons le mot clé extends.
Avec l’héritage, une classe peut avoir plusieurs types. Partout où une classe mère est attendue nous pouvons utiliser une classe fille. C’est ce que nous appelons le polymorphisme.
Le transtypage
Le transtypageLe transtypage est un processus très simple qui consiste à faire passer un objet pour un autre auprès du compilateur : Type ( monObjet).
Surcharge
Le concept de surcharge (override) intervient lorsque nous avons besoin de modifier certaines fonctionnalités héritées. Si une méthode héritée n’est pas assez complète, nous pouvons surcharger celle-ci dans la sous-classe afin d’intégrer notre nouvelle version.
Chapitre 9 – Étendre les classes natives
La grande puissance de flash réside dans sa capacité à lier graphisme et programmation.
L’héritage ne se limite pas aux classes personnalisées et peut être appliquée à n’importe quelle classe de l’API du lecteur Flash. Il est possible d’étendre la classe native MovieClip, en définissant de nouvelles méthodes afin d’obtenir un MovieClip amélioré. D’autres classes natives peuvent aussi être étendues afin d’augmenter leurs capacités. C’est le cas de la classe Array, dont les différentes méthodes ne sont quelquefois pas suffisantes.
Toutes les classes natives ne sont pas sous-classables. La composition peut être utilisée afin d’augmenter les capacités d’une classe qui n’est pas sous-classable.
Étendre une classe native est un moyen élégant d’étendre les capacités d’ActionScript 3 ou du lecteur Flash.
Étendre les classes graphiques
Il est possible de lier un symbole existant à une sous-classe graphique définie manuellement. Le symbole hérite de toutes les fonctionnalités de la sous-classe.
Par exemple le clip Stylo (le graphisme) qui étend la classe MovieClip. Ainsi, Stylo possède toutes les propriétés, méthodes de MovieClip, plus les siennes propres.
Étendre les classes graphiques natives de Flash permet de créer des objets interactifs puissants et réutilisables. Au sein d’une sous-classe graphique, l’utilisation du mot clé this, fait directement référence au scénario du symbole.
Ci-dessous, un exemple des possibilités de flash en étendant les classes graphiques.
Chapitre 10 – Diffusion d’évènements personnalisés
Un évènement personnalisé est un événement qui n’existe pas au sein du lecteur Flash. Nous l’ajoutons afin de gérer les différentes interactions entre nos objets.
En ActionScript 3, pour diffuser un événement nous devons créer un objet événementiel. Celui-ci est représenté par une instance de la classe flash.events.Event.
Le modèle événementiel ActionScript 3 repose sur la classe EventDispatcher. Toutes les classes issues du paquetage flash peuvent diffuser des événements natifs ou personnalisés.
Afin de diffuser un événement, nous utilisons la méthode dispatchEvent. La méthode dispatchEvent accepte comme paramètre une instance de la classe Event.
[codesyntax lang= »actionscript3″ title= »Event.as » bookmarkname= »Event.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // création d'un sprite var monSprite:Sprite = new Sprite(); // écoute de l'événement monEvent monSprite.addEventListener ( "monEvenement", ecouteur ); // fonction écouteur function ecouteur (pEvt:Event):void { // affiche [Event type="monEvenement" bubbles=false cancelable=false eventPhase=2] trace( pEvt ); } // création de l'objet événementiel var objetEvenementiel:Event = new Event (“monEvenement”, bubbles, cancelable); // nous diffusons l'événement monEvenement monSprite.dispatchEvent (objetEvenementiel); |
[/codesyntax]
Le constructeur de la classe Event accepte trois paramètres :
- type : le nom de l’événement à diffuser.
- bubbles : indique si l’événement participe à la phase de remontée.
- cancelable : indique si l’événement peut être annulé.
Dans la plupart des cas, nous n’utilisons que le premier paramètre type de la classe Event.
Un événement doit porter un nom simple et intuitif. Afin de stocker le nom d’un événement nous utilisons toujours une propriété constante de classe.
Lorsque nous ne pouvons pas étendre la classe EventDispatcher. Nous stockons une instance de celle-ci. Puis nous déléguons les fonctionnalités en utilisant le principe de la composition.
L’interface IeventDispatcher permet une implémentation obligatoire des différentes méthodes nécessaires à la diffusion d’événements.
Pour transmettre des informations lors de la diffusion d’un événement, nous devons étendre la classe Event. Le but est de créer un objet événementiel spécifique à l’événement diffusé. Cet objet contient, au sein de ses propriétés, toutes les informations que nous souhaitons affecter à l’évènement diffusé.
Chapitre 11 – Classe du document
Par défaut le scénario d’un SWF est représenté par la classe MainTimeline.
Pour affecter une classe du document, nous utilisons le champ Classe du document de l’inspecteur de propriétés. L’instanciation de classe du document est transparente, le lecteur s’en charge automatiquement. L’instance de la classe du document devient le scénario principal.
L’utilisation d’une sous classe de Sprite comme classe du document est généralement déconseillée. Nous préférons utiliser une sous-classe de MovieClip. La puissance réside dans l’interaction entre les actions d’images et les fonctionnalités de la classe du document.
Ci-dessous, un exemple d’initialisation d’une application.
[codesyntax lang= »actionscript3″ title= »Exemple.as » bookmarkname= »Exemple.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | package org.bytearray.document { import flash.display.MovieClip; import flash.events.Event; public class Application extends MovieClip { // propriété permettant l’exécution de la fonction de rappel private var rappel:Function; public function Application () { // création du symbole Personnage var autrePersonnage:Personnage = new Personnage(); // ajout à la liste d'affichage addChild ( autrePersonnage ); // l'occurrence est centrée autrePersonnage.x = (stage.stageWidth - autrePersonnage.width)/2; autrePersonnage.y = (stage.stageHeight - autrePersonnage.height)/2; } // méthode de déplacement de la tête de lecture personnalisé public function myGotoAndStop ( pImage:int, pFonction:Function ):void { // écoute de l'événement Event.RENDER addEventListener ( Event.RENDER, miseAJour ); // déplacement de la tête de lecture gotoAndStop ( pImage ); // retourne un objet permettant rappel = pFonction; // force la diffusion de l'événement Event.RENDER stage.invalidate(); } private function miseAJour ( pEvt:Event ):void { // nous tentons d'appeler la fonction de rappel try { rappel(); // si cela échoue, nous affichons un message d'erreur } catch ( pErreur:Error ) { trace("Erreur : La méthode de rappel n'a pas été définie"); // dans tout les cas, nous supprimons // l'écoute de l'événement Event.RENDER } finally { removeEventListener ( Event.RENDER, miseAJour ); } } } } |
[/codesyntax]
En attendant la suite de la chronique « Pratique d’ActionScript 3 »
Je vous invite à découvrir le site sur « Pratique d’ActionScript 3 » et également le site de l’auteur Thibault Imbert (ByteArray.org).
Achetez l’Édition Brochée du Livre Pratique d’ActionScript 3
Téléchargez l’Édition pdf du Livre Pratique d’ActionScript 3 : Télécharger “Pratique ActionScript 3” Pratique-d-ActionScript-3-version_0.1.4.zip – Téléchargé 1957 fois – 27,89 Mo
Échanger des données entre PHP / MySQL et Flash / AS3
Dans cet article, nous allons apprendre Comment échanger des données entre Flash (AS3) et Php / MySQL.
Il y a plusieurs méthodes, la plus simple et efficace consiste à utiliser le Flash Remoting.
Qu’est ce que le Flash Remoting ?
Le Flash Remoting permet des échanges entre un client (flash) et un serveur (php). De plus, il possède un format de données propre : l’AMF pour Action Message Format.
Le format AMF (format binaire) permet, entre autre, d’échanger des variables typées et optimisées. Effectivement, les informations sont sérialisées puis envoyées au serveur (Php).
Pour simplifier : Flash encode les données en AMF et les transmet au serveur. Pour décoder le paquet reçu, le serveur a besoin d’une passerelle remoting.
Installation d’une passerelle Remoting
Dans notre tutoriel nous utiliserons AmfPhp pour dialoguer entre Flash et Php. Téléchargez la dernière version : amfphp 1.9.zip.
Dézippez le contenu sur votre serveur web, dans le dossier ‘www’ par exemple.
Il y a 2 dossiers et 1 fichier important :
- browser : permet de tester vos services Php.
- services : contient les Services Php ou classes de communication avec une base de données MySQL.
- gateway.php : la passerelle à configurer dans votre fichier ActionScript pour lancer la communication de Flash avec Php.
Ensuite, tapez l’url d’accès la passerelle gateway.php, par exemple : http://www.votre-domaine.com/include/remoting/gateway.php
Un message vous indique que l’installation d’Amfphp est réussie.
Puis vous avez la possibilité de :
- consulter la documentation sur le site Amfphp.
- lancer le Browser pour tester vos services Php.
Création de la connection entre Flash et Php
Dans votre classe AS3, il suffit de renseigner l’url de la passerelle php (gateway.php). Très simple 🙂
[codesyntax lang= »actionscript3″ title= »addRemoting » bookmarkname= »addRemoting »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /** * Création de la passerelle de communication avec php */ private function addRemoting() : void { // création d'une connection à un service oConnection = new NetConnection (); // Connection avec la passerelle pour communiquer avec AMFPHP // (avec php et une base de données MySQL par exemple) oConnection.connect("http://www.votre-domaine.com/include/remoting/gateway.php"); /** * Création de l'objet qui permet de communiquer avec votre Service AMFPHP * * @param : fonction appelée en cas de succès de connection à la passerelle AMFPHP * @param : fonction appelée en cas d'échec de connection à la passerelle AMFPHP */ oRetourPhp = new Responder(succesServeurPhp,echecServeur); oRetourMySQL = new Responder(succesServeurMysql,echecServeur); } |
[/codesyntax]
Les classes AS3 suivantes sont utilisées :
- import flash.net.NetConnection; Permet d’établir la connection de Flash avec PhP.
- import flash.net.Responder; Permet de renseigner à Flash, les méthodes AS3 à appeler dès la réception de la réponse de Php.
Échange de données entre Flash et Php
Le fonctionnement est le suivant : le Flash (en AS3) appelle un Service Php (une classe).
Création du Service Php
Sur votre serveur php, dans le répertoire services, créez un fichier php. Dans notre tutoriel, nous l’appellerons FlashRemoting.php.
Dans le constructeur de la classe php FlashRemonting, renseignez le nom des méthodes accessibles depuis flash.
[codesyntax lang= »php » title= »FlashRemonting.php » bookmarkname= »FlashRemoting.php »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * @brief Constructeur de la classe. Initialise les proprietes. * */ public function __construct() { // permet de recuperer le contenu d'une page du flash en fonction du bouton du menu choisi $this->methodTable = array ( "getDate" => array ( "description" => "", "access" => "remote", "arguments" => "array", "returns" => "array" ) ); } |
[/codesyntax]
Ensuite, il reste à implémenter votre script php dans la méthode getDate().
getDate() interroge le serveur php pour récupérer sa date tout simplement.
[codesyntax lang= »php » title= »FlashRemoting.php getDate() » bookmarkname= »FlashRemoting.php getDate() »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * @param - * @return - */ public function getDate($oMsg) { $nTimestamp = time(); //Affiche le nombre de secondes écoulées depuis le 1er janvier 1970 $date = date("d-m-Y"); $heure = date("H:i:s"); $sDateFr = $date." ".$heure; $aResult = array(); $aResult["timestamp_php"] = $nTimestamp; $aResult["date"] = $sDateFr; $aResult["message"] = $oMsg; return $aResult; } |
[/codesyntax]
Dans la méthode getDate(), vous remarquerez l’ajout d’un paramètre en entrée.
C’est un objet envoyé par Flash, puis Php le retourne à Flash. C’est un exemple pour vous montrer cette possibilité : le contenu de cet objet peut être ajouté dans une base de données par exemple…
Test du service avec le browser
Une fois votre service Php crée, vous pouvez le tester avec le browser d’Amfphp.
Tapez l’url d’accès la passerelle gateway.php, par exemple : http://www.votre-domaine.com/include/remoting/gateway.php
Et cliquez sur Load the service browser.
amfphp browser
Cette interface en Flash vous permet :
- de détecter les erreurs de syntaxe PhP.
- d’appeler les méthodes de votre service Php.
- d’effectuer des tests de performances de votre serveur Php.
Appel de PhP à partir de Flash
En AS3, vous utilisez l’instance de la classe NetConnection pour appeler votre passerelle Php.
[codesyntax lang= »actionscript3″ title= »appelPhp() » bookmarkname= »appelPhp »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | private function appelPhp(e:MouseEvent) : void { // création de l'objet transmit en paramètre à php var oInfo:Object = new Object(); oInfo.nom = "ActionScript-Facile.com"; oInfo.numero = Math.floor( Math.random()*69 ); oInfo.timestamp_flash = Math.floor(new Date().getTime()/1000); m_textField.htmlText = "Communication avec PHP en cours :)"; /** * Appel d'une méthode de notre classe PHP. * Localisée dans le fichier services\flashremoting\FlashRemoting.php * * @param : chemin complet d'appel de la méthode php * @param : l'objet qui récupère les réponses de php * @param : paramètre à transmettre à la méthode php */ oConnection.call("flashremoting.FlashRemoting.getDate", oRetourPhp, oInfo); // si tous ce passe bien le serveur répond (succesServeurMysql) sinon appel de la méthode echecServeur... } |
[/codesyntax]
L’instance de la classe Responder indique à Flash les méthodes à appeler en cas de connection réussie ou d’échec.
Vous remarquerez l’ajout du Logger pour afficher du Debug dans Firefox (très pratique)!
La méthode succesServeurPhp reçoit l’objet directement envoyé par la méthode getDate() de la classe Php FlashRemoting.
[codesyntax lang= »actionscript3″ title= »succesServeurPhp() » bookmarkname= »succesServeurPhp() »]
1 2 3 4 5 6 7 8 9 10 11 12 | private function succesServeurPhp(oResult:Object):void { // affiche des messages de debug dans firefox Logger.debug("Connection à la passerelle AMFPHP réussie!"); Logger.debug("timestamp_flash : " + oResult.message.timestamp_flash); Logger.debug("Date reçue de php : " + oResult.date); Logger.debug("timestamp_php : " + oResult.timestamp_php); m_textField.htmlText = "Sur le serveur php N°<b>"+oResult.message.numero+" - " + oResult.message.nom+ "</b>, nous sommes le " + oResult.date + ".\nLe temps écoulé est de " + oResult.timestamp_php +"."; } |
[/codesyntax]
Echanger des données entre flash
et une base de données MySQL
Sur le même principe, Flash peut communiquer avec une base de données, de type MySQL par exemple.
Dans votre service Php, vous implémentez vos requêtes MySQL, c’est aussi simple que cela!
J’ai ajouté à ce tutoriel la classe Mysql.php. Elle possède quelques fonctionnalités bien sympathiques. Je vous laisse les découvrir par vous même.
La classe Mysql.php est commentée, et avec des exemples d’utilisation.
Création d’un compteur de visite en Flash
Nous allons créer un compteur de visites en Flash.
Le Flash va interroger la base de données Mysql via Php pour mettre à jour et afficher le nombre de visiteurs de l’application.
Tout d’abord, renseignez les données de connection à votre base dans la classe Mysql.php
[codesyntax lang= »php » title= »Mysql.php » bookmarkname= »Mysql.php »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /** * @brief * @param - */ public function __construct() { $this->aConnect = array(); $this->aConnect['ip'] = "nom_serveur"; // le serveur $this->aConnect['login']= "login"; // le login $this->aConnect['password'] = "mot_passe"; // mot de passe $this->aConnect['database'] = "nom_base"; // nom de la base de donnee $this->aConnect['port'] = "3306"; } |
[/codesyntax]
Puis exécutez ces requêtes sql sur votre base de données (via phpmyadmin).
[codesyntax lang= »sql » title= »compteur visite » bookmarkname= »compteur visite »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | -- -- Table structure for table <code>compteur_visite -- CREATE TABLE <code>compteur_visite</code> ( compteur</code> double NOT NULL default '0', date</code> date NOT NULL default '0000-00-00', time</code> int(9) NOT NULL default '0', duree</code> int(9) NOT NULL default '0', ip</code> varchar(50) NOT NULL default '0', PRIMARY KEY (<code>ip</code>), KEY <code>compteur</code> (<code>compteur</code>,<code>date</code>), KEY <code>date</code> (<code>date</code>), KEY <code>duree</code> (<code>duree</code>), KEY <code>time</code> (<code>time</code>) ) ENGINE=MyISAM; INSERT INTO <code>compteur_visite</code> ( compteur</code> , date</code> , time</code> , duree</code> , ip ) VALUES ( '0', '0000-00-00', '0', '24', 'compteur' ); |
[/codesyntax]
Ensuite, ajoutez un nouvel accès dans le constructeur de votre service php. Ainsi que la création de la connection à la base de données.
[codesyntax lang= »php » title= »FlashRemoting.php » bookmarkname= »FlashRemoting.php »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | /** * @brief Constructeur de la classe. Initialise les proprietes. * */ public function __construct() { // permet de recuperer le contenu d'une page du flash en fonction du bouton du menu choisi $this->methodTable = array ( "getDate" => array ( "description" => "", "access" => "remote", "arguments" => "array", "returns" => "array" ), "getVisitCount" => array ( "description" => "", "access" => "remote", "arguments" => "array", "returns" => "array" ) ); // ajout des classes php require_once("Mysql.php"); // connection à la base de données mysql $this->oSqlConnection = new Mysql(); } |
[/codesyntax]
Ensuite, vous implémentez les différentes requêtes sql nécessaires dans votre service Php.
[codesyntax lang= »php » title= »getVisitCount() » bookmarkname= »getVisitCount() »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | /** * @brief Récupère le nombre de visiteur sur le site actuellement, met à jour le compteur également. * @param - * @return - */ public function getVisitCount() { /* init des variables */ $n_nbVisiteur = 0; $n_nbVisiteurToday = 0; $n_nbVisiteurNow = 0; //on recupere l adresse ip du visiteur if($_SERVER) { if($_SERVER['HTTP_X_FORWARDED_FOR']) $sIpAdress = $_SERVER['HTTP_X_FORWARDED_FOR']; elseif($_SERVER['HTTP_CLIENT_IP']) $sIpAdress = $_SERVER['HTTP_CLIENT_IP']; else $sIpAdress = $_SERVER['REMOTE_ADDR']; } else { if(getenv('HTTP_X_FORWARDED_FOR')) $sIpAdress = getenv('HTTP_X_FORWARDED_FOR'); elseif(getenv('HTTP_CLIENT_IP')) $sIpAdress = getenv('HTTP_CLIENT_IP'); else $sIpAdress = getenv('REMOTE_ADDR'); } $sDate = date("Y-m-d"); //on convertit l heure courante en minute d une journee $sTime = (date("H") * 60) + date("i"); $s_sqlSelect = "SELECT compteur, date, time, duree FROM compteur_visite WHERE ip = 'compteur' LIMIT 1"; $o_sqlResult = $this->oSqlConnection->query($s_sqlSelect); $o_result = $this->oSqlConnection->getObject($o_sqlResult); $n_nbVisiteur = $o_result->compteur; $iTimeConnexionRef = $o_result->time; //temps de connexion de reference $iDurationRef = $o_result->duree; //duree de renouvellement de reference $sDateBDD = $o_result->date; //on test si on a changé de jour if ( $sDate!=$sDateBDD ) { $s_sqlDelete = "DELETE FROM compteur_visite WHERE ip!='compteur'";//on vide toutes les addresses ip enregistrées dans la table lors du changement de jour $o_sqlResult = $this->oSqlConnection->query($s_sqlDelete); $s_sqlUpdate = "UPDATE compteur_visite SET date='$sDate'";//on met a jour la nouvelle date dans la table $o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate); } //on verifie l adresse ip du visiteur et aussi son heure de passage $s_sqlSelect = "SELECT compteur, date, time, duree FROM compteur_visite WHERE ip='$sIpAdress' LIMIT 1"; // excecute la requete sql $o_sqlResult = $this->oSqlConnection->query($s_sqlSelect); // recupere le resultat renvoyee par la requete $o_result = $this->oSqlConnection->getObject($o_sqlResult); if( $o_result->compteur == NULL) { //on enregistre l adresse ip si elle est inconnu et on incremente le compteur $s_sqlInsert = "INSERT INTO compteur_visite (ip,time,duree) VALUES ('$sIpAdress','$sTime','$sTime')"; $o_sqlResult = $this->oSqlConnection->query($s_sqlInsert); $n_nbVisiteur +=1; $s_sqlUpdate = "UPDATE compteur_visite SET compteur=$n_nbVisiteur WHERE ip='compteur' LIMIT 1"; $o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate); } else { // si l'adresse ip est connu alors verifie si sa connexion precedente est superieur a la durée // de renouvellement et si son heure de passage precedente incremente ou pas les connectés $sTimeVisit = $o_result->time;//on recupere l'heure de sa precedente connexion de notre connecté $sDurationVisit = $o_result->duree;//on recupere l'heure de sa precedente connexion de notre connecté // on verifie si sa derniere connexion ne date pas de plus que la duree de reference if( $iDurationRef*60 < ( $sTime - ($sDurationVisit) ) ) { //si la duree de reference est depassé alors notre connecté est comptablisé //comme nouvelle visite et on met a jour sa nouvelle heure de passage $s_sqlUpdate = "UPDATE compteur_visite SET time=$sTime, duree=$sTime WHERE ip='$sIpAdress' LIMIT 1"; $o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate); //on cree une ligne fictive pour pouvoir le comptabiliser dans les connectés de jour $sIpAdressV = $sIpAdress.".".$n_nbVisiteur; //echo"sIpAdressV : ".$sIpAdressV; $s_sqlInsert ="INSERT INTO compteur_visite (ip,time,duree) VALUES ('$sIpAdressV','$sTime','$sTime')"; $o_sqlResult = $this->oSqlConnection->query($s_sqlInsert); //et on increment le compteur de visite $n_nbVisiteur +=1; $s_sqlUpdate = "UPDATE compteur_visite SET compteur=$n_nbVisiteur WHERE ip='compteur' LIMIT 1"; $o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate); } else { //on met a jour son heure de passage si elle est superieure a t if ( $sTime > ( ($sTimeVisit)-$iTimeConnexionRef ) ) { $s_sqlUpdate="UPDATE compteur_visite SET time=$sTime WHERE ip='$sIpAdress' LIMIT 1"; $o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate); } } } // on compte le nb de connecté de la journée $s_sqlSelect = "SELECT ip FROM compteur_visite WHERE ip!='compteur'"; // recupere le resultat de la requete SELECT $o_sqlResult = $this->oSqlConnection->query($s_sqlSelect); // retourne le nombre d'enregistrement renvoyee par la requete SELECT $n_nbVisiteurToday = $this->oSqlConnection->getNumRows(); // on compte le nb de connecté $sTimeToday = $sTime - $iTimeConnexionRef; $s_sqlSelect = "SELECT ip FROM compteur_visite WHERE time >= $sTimeToday AND ip!='compteur' "; // recupere le resultat de la requete SELECT $o_sqlResult = $this->oSqlConnection->query($s_sqlSelect); // retourne le nombre d'enregistrement renvoyee par la requete SELECT $n_nbVisiteurNow = $this->oSqlConnection->getNumRows(); $aResult = array(); $aResult["total"] = $n_nbVisiteur; $aResult["today"] = $n_nbVisiteurToday; $aResult["now"] = $n_nbVisiteurNow; return $aResult; } |
[/codesyntax]
Voici le code AS3 pour demander à Mysql les informations du compteur de visites.
[codesyntax lang= »actionscript3″ title= »appelMysql() » bookmarkname= »appelMysql() »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | private function appelMysql(e:MouseEvent) : void { // création de l'objet transmit en paramètre à php var oInfo:Object = new Object(); oInfo.nom = "ActionScript-Facile.com"; oInfo.numero = Math.floor( Math.random()*69 ); oInfo.timestamp_flash = Math.floor(new Date().getTime()/1000); m_textField.htmlText = "Communication avec MySQL en cours :)"; /** * Appel d'une méthode de notre classe PHP. * Localisée dans le fichier services\flashremoting\FlashRemoting.php * * @param : chemin complet d'appel de la méthode php * @param : l'objet qui récupère les réponses de php * @param : paramètre à transmettre à la méthode php */ oConnection.call("flashremoting.FlashRemoting.getVisitCount", oRetourMySQL, oInfo); // si tous ce passe bien le serveur répond (succesServeurMysql) sinon appel de la méthode echecServeur... } |
[/codesyntax]
Et pour terminer, la méthode AS3 appelée par le Php. Nous utilisons les informations de la base de données, à travers un objet envoyé par Php.
[codesyntax lang= »actionscript3″ title= »succesServeurMysql() » bookmarkname= »succesServeurMysql() »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /** * Appelée dans le cas d'une communication réussie avec mysql */ private function succesServeurMysql(oResult:Object):void { // affiche des messages de debug dans firefox Logger.debug("Connection à la passerelle AMFPHP réussie!"); Logger.debug("Total des visites : <b>"+oResult.now); Logger.debug("Nombre de visiteur aujourd'hui : " + oResult.today); Logger.debug("Nombre de connectés : " + oResult.now); m_textField.htmlText = "Total des visites : <b>"+oResult.total+"</b>\n" + "Nombre de visiteur aujourd'hui : <b>" + oResult.today + "</b>\nNombre de connectés : <b>" + oResult.now +"</b>."; } |
[/codesyntax]
Conclusion
Et voici le résultat avec les Composants Button du Framework AS3 Facile.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/remoting_exemple.swf |
Sources Commentées
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.
Le fichier zip contient également le logiciel AMFPHP en version 1.9 😉
Vous pouvez télécharger le fichier zip : Télécharger “Flash Remoting AS3 / Php / MySQL (AMFPHP 1.9 inclus)” flash_remoting_as3_facile.zip – Téléchargé 1592 fois – 532,83 Ko
Quelle technique préférez-vous utiliser pour échanger des données entre Php et Flash ?
Partagez-les ci-dessous avec l’ensemble des Développeurs ActionScript. Il y a des solutions plus rapides à mettre en place avec les classes AS3 :
- URLVariables.
- URLRequest.
- URLLoader.
Comment créer un Composant Bouton en AS3 ?
Enfin nous allons attaquer les choses sérieuses avec la conception du 1er composant de notre « Bibliothèque AS3 de Composants Graphiques« .
Dans ce tutoriel, nous allons concevoir un composant de type Button. Et avec la possibilité de le personnaliser graphiquement!
I – Cahier Des Charges Fonctionnel d’un Bouton
Nous allons commencer par un bref descriptif des fonctionnalités de base d’un bouton avec le fameux Cahier Des Charges Fonctionnel.
Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d’une apparence personnalisable pour chacun de ses états.
Comme vous pouvez le constater, il est facile de définir un composant bouton.
Le composant en lui-même reste simple à réaliser. Les prochains seront plus compliqués!
Commençons donc par lister tous les états que nous désirons obtenir sur notre bouton :
- Normal : Le composant est « au repos », il n’est ni survolé, ni cliqué.
- Survol : L’utilisateur passe et laisse sa souris au dessus du bouton sans toutefois cliquer dessus.
- Cliqué ou clic maintenu : L’utilisateur réalise un clic gauche et laisse le bouton de sa souris maintenu.
Nous possédons à présent un CDCF (Cahier Des Charges Fonctionnel) court et précis.
Le CDCF nous donne la marche à suivre pour la mise en place du CDCT (Cahier Des Charges Technique).
II – Cahier Des Charges Techniques d’un Bouton
Pour rédiger le Cahier Des Charges Technique, nous procédons comme pour la classe de base UIComponent (lisez le Chapitre 3 : Les fonctionnalités de base d’une Bibliothèque de Composants AS3 ).
C’est à dire que nous reprenons le CDCF et nous nous chargeons de le “traduire” en langage technique. Nous apportons également plusieurs précisions utiles.
Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d’une apparence personnalisable pour chacun de ses états.
Voici la liste des états d’un bouton (déterminé dans le CDFC) : Normal, Survol, Cliqué.
Contraintes techniques
A partir des différents états d’un bouton, nous définissons les contraintes techniques suivantes :
Écouter les évènements de type :
- MouseEvent.MOUSE_DOWN : état Cliqué.
- MouseEvent.MOUSE_UP : état Survol.
- MouseEvent.ROLL_OVER : état Survol.
- MouseEvent.ROLL_OUT : état Normal.
- Actualiser l’état graphique du bouton en fonction des évènements reçus.
- Overrider la fonction (c’est à dire redéfinir son comportement) du composant de base UIComponent afin de mettre à jour chacun des états graphiques du Button.
Nous ajoutons également la contrainte technique suivante :
Ajout d’un champ texte qui se nommera “label” au sein du bouton et donner la possibilité d’y accéder depuis l’extérieur.
Pour cela, nous coderons deux getters et un setter :
- Un getter labelField qui retournera directement le champ texte
- Un getter label qui retournera le texte du champ texte.
- Un setter label qui permettra de définir le texte du champ texte.
Notre champ texte sera de type UITextfield, cette classe est définie dans le package com.actionscriptfacile.ui.text. Nous reviendrons sur son implémentation lors du chapitre dédié au composant UITextfield.
Conclusion
Nous disposons maintenant d’un bel objet de type Button. Celui-ci nous sera utile pour les développements de nos futurs composants.
Le composant Button peut être cliqué, survolé et un état graphique nous permet de visualiser une réelle interaction.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf |
Évolutions des fonctionnalités
Pour améliorer notre Composant AS3 Button, voici quelques exemples de fonctionnalités supplémentaires à implémenter.
N’hésitez pas à poster vos exemples dans les commentaires.
A vous de jouer !
Lock Button
Vous pouvez créer une classe permettant de gérer un groupe de plusieurs boutons. En fonction du bouton cliqué, des actions différentes sont lancées. Le bouton cliqué ne peut pas être de nouveau activé. Un peu comme la gestion d’un menu de « Lock Button ».
Skin
Implémentez la possibilité de mettre à jour en direct l’apparence de vos boutons. Par exemple en cliquant sur l’un de vos « Lock Button », l’apparence du bouton est modifiée.
Sources commentées
- com.actionscriptfacile.button.Button.as
- ButtonExample.as
- com.as3facileexemple.skin.classic.DefaultButtonSkin.as
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.
Vous pouvez télécharger le fichier zip : Télécharger “Composant Button du Framework AS3 Facile” component_button_framework_actionscript-facile.zip – Téléchargé 1086 fois –
Et vous : Comment concevez vous vos Boutons en Actionscript 3 ?
Proposez vos exemples de codes AS3 dans les commentaires juste en dessous.
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.button.Button.as » bookmarkname= »com.actionscriptfacile.ui.button.Button.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 | package com.actionscriptfacile.ui.button { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.UIComponent; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.MouseEvent; import com.actionscriptfacile.ui.text.UITextField; /** * Un objet de type Button est un objet * @author Matthieu */ public class Button extends UIComponent { /** * Constantes qui vont nous servir à définir des styles dans les objets de skin par défaut @see com.as3facileexemple.skin.classic.DefaultButtonSkin */ static public const BUTTON_UP_SKIN:String = "BUTTON_UP_SKIN"; static public const BUTTON_DOWN_SKIN:String = "BUTTON_DOWN_SKIN"; static public const BUTTON_OVER_SKIN:String = "BUTTON_OVER_SKIN"; /** * Constantes qui vont nous servir à changer l'état du bouton par le biais d'un appel à la méthode setState */ static protected const UP_STATE:String = "UP_STATE"; static protected const DOWN_STATE:String = "DOWN_STATE"; static protected const OVER_STATE:String = "OVER_STATE"; protected var m_overStyle:DisplayObject; // objet graphique représentant l'état OVER protected var m_upStyle:DisplayObject; // objet graphique représentant l'état UP protected var m_downStyle:DisplayObject; // objet graphique représentant l'état DOWN protected var m_label:UITextField; // objet de type UITextField qui est en fait un champ texte un peu amélioré public function Button() { /* * ajout d'une méthode init pour gagner des ressources, en effet en AS3 tout ce qui se trouve dans le constructeur n'est * pas optimisé à la compilation, on met donc toutes nos instructions dans une méthode privée init * */ init(); } /** * Détruit proprement un objet de type Button */ override public function destroy():void { /** * On s'extrait de la display list de notre parent, on détruit notre composant m_label de type UITextField ainsi * que nos objets graphiques qui représentent les différents états et on appelle la méthode * destroy() parente @see com.actionscriptfacile.ui.UIComponent */ if ( parent && parent.contains( this ) ) parent.removeChild( this ); m_label.destroy(); m_label = null; m_upStyle = m_downStyle = m_overStyle = null; super.destroy(); } /** * Initialise proprement les différents éléments du composant */ private function init():void { /** * Création d'un objet de type UITextField que l'on assigne à la variable membre m_label. * On aligne son texte par défaut en justifié et on indente le texte de 2 pixels. * Ensuite nous mettons des valeurs totalement arbitraires pour les propriétés width, maxwidth, height * et maxheight que l'on pourra changer par la suite. */ m_label = addChild( new UITextField() ) as UITextField; m_label.alignJustify(); m_label.changeFormat( 'indent', 2 ); m_label.maxHeight = m_label.height = 30; m_label.maxWidth = m_label.width = 80; /** * nos objets graphiques de style sont des sprites vides par défaut */ m_overStyle = addChild( new Sprite() ); m_upStyle = addChild( new Sprite() ); m_downStyle = addChild( new Sprite() ); setState( UP_STATE ); mouseChildren = false; } /** * Quand on sort de la display list du stage on tue tout les events listeners ce qui économise des ressources */ override public function onRemovedFromStage():void { removeEventListener( MouseEvent.MOUSE_UP, overHandler, false ); removeEventListener( MouseEvent.ROLL_OUT, upStateHandler, false ); removeEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false ); removeEventListener( MouseEvent.ROLL_OVER, overHandler, false ); } /** * On initialise les events listeners uniquement lorsque le composant est ajouté à la displaylist du stage. * En procédant de la sorte, on utilise les ressources uniquement lorsque cela s'avère nécessaire. */ override public function onAddedToStage():void { addEventListener( MouseEvent.MOUSE_UP, overHandler, false ); addEventListener( MouseEvent.ROLL_OUT, upStateHandler, false ); addEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false ); addEventListener( MouseEvent.ROLL_OVER, overHandler, false ); } /** * @see com.actionscriptfacile.ui.UIComponent */ override public function resize( p_width:Number, p_height:Number ):void { /* * on redéfinit les maxWidth et maxHeight de notre m_label et on les définit à la taille de notre composant button. * Ensuite on rédéfinit la taille de nos composants m_overStyle, m_downStyle, m_upStyle. * */ m_label.maxWidth = p_width; m_label.maxHeight = p_height; m_overStyle.width = m_label.width = m_downStyle.width = m_upStyle.width = p_width; m_overStyle.height = m_label.height = m_downStyle.height = m_upStyle.height = p_height; } /** * Au survol on affiche l'état OVER par le biais de la méthode setState * @param e Evenement de type MouseEvent */ private function overHandler(e:MouseEvent):void { setState( OVER_STATE ); } /** * Au survol on affiche l'état DOWN par le biais de la méthode setState * @param e Evenement de type MouseEvent */ private function downStateHandler(e:MouseEvent):void { setState ( DOWN_STATE ); } /** * Au survol on affiche l'état UP par le biais de la méthode setState * @param e Evenement de type MouseEvent */ private function upStateHandler(e:MouseEvent):void { setState( UP_STATE ); } /** * Définit le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField */ public function set label( p_label:String ):void { m_label.text = p_label; } /** * Retourne le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField */ public function get label():String { return m_label.text; } /** * Retourne le composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField */ public function get labelField():UITextField { return m_label; } /** * * Cette méthode applique la skin définit en paramètre au composant. * * @param p_skin Objet implémentant l'interface ISkin */ override public function applySkin(p_skin:ISkin):void { // on définit une variable de type Class qui servira à réceptionner toutes les définitions de notre objet skin var definition:Class; // on cherche la définition au sein de la skin qui répond au nom : BUTTON_OVER_SKIN definition = p_skin.getSkin( BUTTON_OVER_SKIN ) as Class; // si cette définition existe alors on en crées une nouvelle instance et on l'assigne à l'élément m_overStyle if ( definition != null ) m_overStyle = new definition(); /* * On applique le même procédé pour tous les autres éléments du bouton * */ definition = p_skin.getSkin( BUTTON_DOWN_SKIN ) as Class; if ( definition != null ) m_downStyle = new definition(); definition = p_skin.getSkin( BUTTON_UP_SKIN ) as Class; if ( definition != null ) m_upStyle = new definition(); // on ajoute nos styles à la display list addChild( m_upStyle ); addChild( m_downStyle ); addChild( m_overStyle ); // on affiche l'état par défaut. setState ( UP_STATE ); // Et on redimensionne proprement nos nouveaux objets graphiques / états resize( width, height ); } /** * * Change l'état graphique du bouton en fonction du paramètre p_state qui répresente l'id de l'état à afficher. * Si l'état n'est pas valide l'état par défaut est l'état UP_STATE. * * @param id de l'état à afficher */ protected function setState( p_state:String ):void { // on enlève tout les enfants de la display list while ( numChildren > 0 ) removeChildAt( 0 ); // puis on ajoute celui qui représente notre état. switch ( p_state ) { case OVER_STATE: addChild( m_overStyle ); break; case DOWN_STATE: addChild( m_downStyle ); break; default: addChild( m_upStyle ); break; } addChild( m_label ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »ButtonExample.as » bookmarkname= »ButtonExample.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | package { import com.actionscriptfacile.ui.button.Button; import com.as3facileexemple.skin.classic.DefaultButtonSkin;// import du skin du boutton import flash.display.Sprite; /** * Exemple d'utilisation du composant Button. * @author Matthieu */ public class ButtonExample extends Sprite { public function ButtonExample():void { // création un objet de type Button var button:Button = new Button(); // définission du texte button.label = 'Button Component'; // Application de la skin par défaut // [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ] button.applySkin( new DefaultButtonSkin() ); // ajout à la displaylsit addChild( button ); // définition de sa taille en 150 * 30 pixels button.resize( 150, 30 ); // définition de la position du button sur la scène button.x = 60; button.y = 60; // acccès au composant de type UITextField (labelField) button.labelField.alignCenter(); // centre le texte button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte button.labelField.changeFormat("font", "Arial");// changement de la police du texte } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | package com.as3facileexemple.skin.classic { // Import des classes gérant la partie graphique du composant dans le fla (movieclip) // Provient de ui.swc (créé avec la compilation de UI.fla) import com.as3facile.skin.button.ButtonDownSkin; import com.as3facile.skin.button.ButtonOverSkin; import com.as3facile.skin.button.ButtonUpSkin; import com.actionscriptfacile.skin.Skin; import com.actionscriptfacile.ui.button.Button; /** * Définition du skin utilisé pour un composant Button * * @author Matthieu */ public class DefaultButtonSkin extends Skin { public function DefaultButtonSkin() { // Affectation de chaque élément du bouton à un skin setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin );// élément du bouton, classe graphique (movieclip) associée setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin ); setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin ); } } } |
[/codesyntax]
Développement Facile