Sujets sur : Pixlib
Afterburner : jeux Flash avec Pixlib et Starling Framework partie 2

Et voici la suite du 1er tutoriel flash sur la création d’un jeu flash avec les Framework Pixlib et Starling !
Le thème de ce Cours ActionScript 3 aborde la création d’un jeu flash en utilisant l’API Starling combiner à la puissance du Framework Pixlib 😉
La 2ème partie de ce tutoriel flash est consacré à l’implémentation des différentes fonctionnalités de Starling Framework.
Voici ce que vous allez apprendre dans ce tutoriel flash :
- Comment mettre en pratique les fonctionnalités principales de Pixlib 3.0.
- Plusieurs techniques pour optimisation les performance d’un jeu flash avec stage3D via Starling Framework.
- Une solution détaillée pour une détection précise des collisions avec Starling Framework.
- Comment mettre en place les différentes vues Starling et utiliser la puissance de stage3D.
- Les explications pratiques pour la création du défilement du décor, des nuages…
- La gestion des données avec 3 Modèles différents : chargement des éléments, lecture des sons MP3, le moteur de détection des collisions.
- La méthode pour utiliser des animations (les vaisseaux ennemis, les explosions, les tirs…) avec Starling.
- L’utilisation des polices embed « bitmap font » au sein du jeu flash (à partir d’images png) !
- La création des différentes classes Manager : les ennemis, les rockets / lazers, les explosions…
- Des astuces pour conserver une fréquence de 60 FPS.
Cette formation vous permettra d’utiliser plusieurs fonctionnalités clés du Framework Pixlib et de le coupler avec Starling Framework !
Jeu Flash avec Pixlib et Starling Framework
Version démonstration
Ci-dessous un lien vers le jeu flash créé : Afterburner.
Essayez de battre le record !
Télécharger le code source du cours AS3
Et voici le code source de l’application créée avec Pixlib et Starling Framework.
Télécharger “Afterburner avec Pixbib et Starling” src-afterburner-pixlib-starling.zip – Téléchargé 1942 fois – 4,48 MoNote : les graphismes et l’idée proviennent de Waste Invaders. J’ai entièrement recréé le moteur du jeu (le code AS3).
Le fichier zip contient également le code source complet du Framework Pixlib avec les différentes extensions utilisées (PixQuick, PixService, PixLogger…)
L’extension PixLogger est modifiée pour prendre en charge la dernière version de Monster Debugger.
Présentation de Starling Framework par Thibault Imbert.
Télécharger la dernière version de Starling Framework directement depuis le site officiel.
Télécharger le code source de Pixlib 3.0 directement depuis le site officiel.
Consultez des tutoriels supplémentaires sur le Starling Framework.
Avez-vous déjà développé des jeux flash ou Adobe AIR avec Starling Framework ?
Partagez vos réalisations dans les commentaires ci-dessous.
Dites-nous les gains de performances que vous avez réussi à obtenir.
Afterburner : jeux Flash avec Pixlib et Starling Framework partie 1

Comme vous le savez surement, la nouvelle API Stage 3D, sortie avec le Player Flash 11, apporte un gain de performances considérables !
Par défaut, vos applications Flash (en 2D) ne bénéficie pas de cette nouvelle technologie…
Sauf que le Framework Starling permet, grâce à des classes proches de celles natives de Flash, d’utiliser la puissance du GPU dans vos applications flash classiques en 2D.
Le thème de ce Cours ActionScript 3 aborde la création d’un jeu flash en utilisant l’API Starling combiner à la puissance du Framework Pixlib 😉
Dans la 1ère partie de ce tutoriel flash, nous allons démarrer tranquillement la création de notre jeu avec Pixlib 3.0.
Voici ce que vous allez apprendre dans ce Cours ActionScript :
- Comment mettre en pratique les fonctionnalités principales de Pixlib 3.0.
- Les techniques pour optimisation les performance d’un jeu flash avec stage3D via Starling Framework.
- Et surtout comment architecturer votre jeu flash autour de Pixlib combiné à Starling Framework.
- Différentes solutions pour obtenir une taille du swf inférieure à 150 Ko.
- Comment mettre en place le chargement dynamique de toutes les ressources : images, xml, sons mp3, polices de caractères…
- Des astuces pour conserver une fréquence de 60 FPS.
- Tout ce qu’il faut pour utiliser le flash remoting via l’extension PixService et AMPHP 2.0.1.
- La création de la structure MVC, l’organisation des Vues, les différents Modèles…
- La gestion des évènements et des commandes dans Pixlib avec l’extension PixQuick.
Cette formation vous permettra d’utiliser plusieurs fonctionnalités clés du Framework Pixlib et de le coupler avec Starling Framework !
Jeu Flash avec Pixlib et Starling Framework
Version démonstration
Ci-dessous un lien vers le jeu flash créé : Afterburner.
Essayez de battre le record !
Télécharger le code source du cours AS3
Et voici le code source de l’application créée avec Pixlib et Starling Framework.
Télécharger “Afterburner avec Pixbib et Starling” src-afterburner-pixlib-starling.zip – Téléchargé 1942 fois – 4,48 MoNote : les graphismes et l’idée proviennent de Waste Invaders. J’ai entièrement recréé le moteur du jeu (le code AS3).
Le fichier zip contient également le code source complet du Framework Pixlib avec les différentes extensions utilisées (PixQuick, PixService, PixLogger…)
L’extension PixLogger est modifiée pour prendre en charge la dernière version de Monster Debugger.
Présentation de Starling Framework par Thibault Imbert.
Télécharger la dernière version de Starling Framework directement depuis le site officiel.
Télécharger le code source de Pixlib 3.0 directement depuis le site officiel.
Consultez des tutoriels supplémentaires sur le Starling Framework.
Avez-vous déjà développé des jeux flash ou AIR avec Starling Framework ?
Partagez vos réalisations dans les commentaires ci-dessous. Dites-nous les gains de performances que vous avez réussi à obtenir.
Comment utiliser les informations Facebook dans une application Flash ? (API Facebook)
Commentaires fermés sur Comment utiliser les informations Facebook dans une application Flash ? (API Facebook)

Facebook a un succès mondial… et c’est peu de le dire !!!
Il y a un potentiel énorme pour les développeurs… flash / actionscript évidemment 😉
Savez-vous que l’API Facebook vous donne accès à une multitude de fonctionnalités Facebook ?
Toutes prêtes à être mises en œuvre dans une application flash !
Elle est pas belle la vie 😉
L’API Facebook est donc le thème du cours AS3 de cette semaine.
Voici ce que vous allez apprendre :
- Comment ajouter dans une application flash et l’utiliser l’API Facebook.
- La méthode pour configurer votre fichier html avec l’appel de votre swf, une méthode indispensable…
- Comment tout savoir sur les données de l’utilisateur Facebook, et surtout comment les utiliser dans votre application flash.
- Quelles sont les fonctionnalités disponibles, comme l’envoie de photos, afficher les albums photos, favoris, récupération des amis, de leurs informations… et comment mettre en œuvre ces fonctionnalités directement dans votre swf.
- Et encore plein d’autres possibilités… l’API Facebook est ultra complète pour le Flash 😉
Cette formation vous permettra d’être capable d’utiliser l’API Facebook et d’implémenter les fonctionnalités dont vous avez besoin directement dans votre jeu flash (ou application).
L’API Facebook
Version démonstration
Cliquez sur le lien ci-dessous pour la démonstration d’une application flash, directement dans Facebook !
Application Flash avec API Facebook.
Voici un autre exemple d’application qui utilise facebook.
Une webcam est nécessaire pour s’amuser avec cette application. Webcam Facebook a été développé avec le framework Pixlib.
Un cours complet avec le code source est disponible pour les membres AS3 Formation.
Note : un compte facebook est nécessaire pour utiliser cette application de démonstration.
Télécharger le code source du cours AS3
Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation de l’API Facebook dans vos applications flash.
Télécharger “Application API Facebook” ex-facebook-api.zip – Téléchargé 1163 fois – 132,53 KoPour créer votre application sur Facebook, enregistrez-la sur : http://www.facebook.com/developers/
Notez l’Id de l’application et la clé secrète pour l’utiliser dans votre application flash.
Consultez des exemples de l’utilisation l’API Facebook (en anglais).
Consultez la documentation complète de l’API Facebook (en anglais).
Et vous, utilisez-vous l’API Facebook dans une application flash ?
Dans quelles types d’applications ? Des jeux flash ?
Postez votre lien d’application implémentant l’API Facebook dans les commentaires ci-dessous.
Compatibilité Pixlib 3.0 et Monster Debugger 3

Pour la création d’une application avec le Framework Pixlib 3.0, j’ai ajouté une petite modification concernant le debug.
Pour l’instant Pixlib est compatible uniquement avec la version 2 de Monster Debugger.
Du coup, ce n’est pas très pratique pour votre debug dans Flash !
Si comme moi, vous utilisez la version 3 de Monster Debugger, vous apprécierez surement de profiter de ces nouvelles fonctionnalités de debug avancées.
Pour cela, j’ai juste modifié 2 lignes de code dans la classe PXDeMonsterDebuggerLayout.as et le tour est joué 😉
Pixlib 3 envoie ses traces dans la console Monster Debugger 3.01 😉
Ci-dessous le code complet du Framework Pixlib 3.0 avec l’extension PixLogger modifiée.
Les 2 lignes de codes modifiées :
[codesyntax lang= »actionscript3″ title= »PXDeMonsterDebuggerLayout.as » bookmarkname= »PXDeMonsterDebuggerLayout.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /** * Default De MonsterDebugger client root target. * * @default null Use the PXbApplication.getInstance().root if * defined. * * @langversion 3.0 * @playerversion Flash 10 */ public static var ROOT : Object = PXApplication.getInstance().root; // -------------------------------------------------------------------- // Private implementation // -------------------------------------------------------------------- /** * @private */ function PXDeMonsterDebuggerLayout() { CLIENT["initialize"](ROOT); initColorMap(); if (AUTO_CLEAR) onClear(); } |
[/codesyntax]
La classe PXDeMonsterDebuggerLayout.as complète :
[codesyntax lang= »actionscript3″ title= »PXDeMonsterDebuggerLayout.as » bookmarkname= »PXDeMonsterDebuggerLayout.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 258 259 260 | /* * Copyright the original author or authors. * * Licensed under the MOZILLA PUBLIC LICENSE, Version 1.1 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.mozilla.org/MPL/MPL-1.1.html * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package net.pixlib.log.layout { import net.pixlib.core.PXApplication; import com.demonsters.debugger.MonsterDebugger; import net.pixlib.log.PXStringifier; import net.pixlib.collections.PXHashMap; import net.pixlib.log.PXLogEvent; import net.pixlib.log.PXLogLevel; import net.pixlib.log.PXLogListener; import flash.events.Event; /** * The PXDeMonsterDebuggerLayout class provides a convenient way * to output messages through <strong>De MonsterDebugger</strong> AIR application. * * @example Basic example * <listing> * * PXDeMonsterDebuggerLayout.CLIENT = MonsterDebugger; * PXLogManager.getInstance().addLogListener(PXDeMonsterDebuggerLayout.getInstance()); * </listing> * * @example Customize De MonsterDebugger client class * <listing> * * PXDeMonsterDebuggerLayout.CLIENT = MyDeMonsterClient; * PXDeMonsterDebuggerLayout.AUTO_CLEAR = false; * * PXLogManager.getInstance().addLogListener(PXDeMonsterDebuggerLayout.getInstance()); * </listing> * * @see #CLIENT Customize De MonsterDebugger client class * @see PIXLIB_DOC/net/pixlib/log/PXLogManager.html net.pixlib.log.PXLogManager * @see PIXLIB_DOC/net/pixlib/log/PXLogListener net.pixlib.log.PXLogListener * @see PIXLIB_DOC/net/pixlib/log/PXLogLevel net.pixlib.log.PXLogLevel * @see http://www.demonsterdebugger.com De MonsterDebugger site * * @langversion 3.0 * @playerversion Flash 10 * * @author Romain Ecarnot */ final public class PXDeMonsterDebuggerLayout implements PXLogListener { // -------------------------------------------------------------------- // Private properties // -------------------------------------------------------------------- /** * @private */ private static var _oI : PXDeMonsterDebuggerLayout ; // -------------------------------------------------------------------- // Protected properties // -------------------------------------------------------------------- /** * @private * * @langversion 3.0 * @playerversion Flash 10 */ protected var mColorLevel : PXHashMap; // -------------------------------------------------------------------- // Public properties // -------------------------------------------------------------------- /** * The De MonsterDebugger client class to user. * * @default net.pixlib.log.layout.MonsterDebugger class * * @langversion 3.0 * @playerversion Flash 10 */ public static var CLIENT : Class = MonsterDebugger; /** * Default De MonsterDebugger client root target. * * @default null Use the PXbApplication.getInstance().root if * defined. * * @langversion 3.0 * @playerversion Flash 10 */ public static var ROOT : Object = PXApplication.getInstance().root; /** * Indicates if console must be cleared on connection. * * @default true * * @langversion 3.0 * @playerversion Flash 10 */ public static var AUTO_CLEAR : Boolean = true; /** * Method name in DeMonsterDebugger to trace ouput message. * * @default "trace" * * @langversion 3.0 * @playerversion Flash 10 */ public static var DEBUG_METHOD : String = "trace"; /** * Method name in DeMonsterDebugger to clear ouput messages. * * @default "clearTraces" * * @langversion 3.0 * @playerversion Flash 10 */ public static var CLEAR_METHOD : String = "clearTraces"; /** * The depth of the trace. * * @default 4 * * @langversion 3.0 * @playerversion Flash 10 */ public static var DEPTH : uint = 4; /** * Display the public methods of a Class in the output panel. * * @default false * * @langversion 3.0 * @playerversion Flash 10 */ public static var FUNCTIONS : Boolean = false; // -------------------------------------------------------------------- // Public API // -------------------------------------------------------------------- /** * Returns uniqe instance of PXDeMonsterDebuggerLayout class. * * @return Unique instance of PXDeMonsterDebuggerLayout class. * * @langversion 3.0 * @playerversion Flash 10 */ public static function getInstance() : PXDeMonsterDebuggerLayout { if (!_oI) _oI = new PXDeMonsterDebuggerLayout(); return _oI; } /** * Releases instance. * * @langversion 3.0 * @playerversion Flash 10 */ public static function release() : void { if ( PXDeMonsterDebuggerLayout._oI is PXDeMonsterDebuggerLayout ) PXDeMonsterDebuggerLayout._oI = null; } /** * Triggered when a log message has to be sent.(from the PXLogManager) * * @param event The vent containing information about the message * to log. * * @langversion 3.0 * @playerversion Flash 10 */ public function onLog(event : PXLogEvent) : void { if ( CLIENT.hasOwnProperty(DEBUG_METHOD) ) { CLIENT[ DEBUG_METHOD ](event.logTarget, event.message, mColorLevel.get(event.level), FUNCTIONS, DEPTH); } } /** * Clears console. * * @langversion 3.0 * @playerversion Flash 10 */ public function onClear(event : Event = null) : void { if ( CLIENT.hasOwnProperty(CLEAR_METHOD) ) { CLIENT[ CLEAR_METHOD ](); } } /** * Returns string representation of instance. * * @return The string representation of instance. * * @langversion 3.0 * @playerversion Flash 10 */ public function toString() : String { return PXStringifier.process(this); } // -------------------------------------------------------------------- // Protected methods // -------------------------------------------------------------------- /** * @private * * @langversion 3.0 * @playerversion Flash 10 */ protected function initColorMap() : void { mColorLevel = new PXHashMap(); mColorLevel.put(PXLogLevel.ALL, 0x666666); mColorLevel.put(PXLogLevel.DEBUG, 0x0086B3); mColorLevel.put(PXLogLevel.INFO, 0x00B32D); mColorLevel.put(PXLogLevel.WARN, 0xB38600); mColorLevel.put(PXLogLevel.ERROR, 0xB32D00); mColorLevel.put(PXLogLevel.FATAL, 0xB3002D); } // -------------------------------------------------------------------- // Private implementation // -------------------------------------------------------------------- /** * @private */ function PXDeMonsterDebuggerLayout() { CLIENT["initialize"](ROOT); initColorMap(); if (AUTO_CLEAR) onClear(); } } } |
[/codesyntax]
Téléchargement Pixlib 3.0 avec Extension PixLogger
Pour vous faciliter encore plus la tâche, ci-dessous l’archive zip complète de Pixlib 3.0 avec l’extension PixLogger compatible Monster Debugger 3.01.
Télécharger “Pixlib 3.0 avec extension PixLogger pour De Monster Debugger 3” Pixlib_3.0-extension_PixLogger-De_Monster_Debugger.zip – Téléchargé 881 fois – 673,71 KoCharger dynamiquement les graphismes du Player Audio AS3 Formation [partie 3]
Commentaires fermés sur Charger dynamiquement les graphismes du Player Audio AS3 Formation [partie 3]
Dans la troisième partie de ce tutoriel vidéo, vous allez apprendre à charger dynamiquement les graphismes du Player AS3 Formation, sans recompiler le swf !
De plus, je vais vous expliquer l’implémentation des différentes fonctionnalités de cette version.
Et vous saurez pourquoi l’évènement Event.ENTER_FRAME n’est pas toujours l’idéal pour lancer des calculs sur l’affichage de vos interfaces. Et surtout comment le remplacer par une fonction moins gourmandes en ressources processeurs !
Et voici le résultat dans un swf :
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf |
Téléchargez le code source du Player AS3 Formation
Renseignez votre email pour télécharger le code source complet du Player AS3 Formation.
Les classes sont commentées pour vous aider au maximum.
Découvrir les Artistes de l’Album écouté
L’album que vous écoutez provient du site jamendo.fr.
Écoutez et téléchargez l’album Saturnine Song
Dites-moi : quels tutoriels souhaitez-vous à propos du Framework Pixlib ?
Voulez-vous que j’aborde des fonctionnalités particulières de Pixlib ?
Avez-vous des questions sur ce cours ?
Posez-les dans les commentaires ci-dessous.
Je rédigerais les prochains tutoriels pour répondre à toutes vos questions.
Découvrez Pixlib Flash Plateform Framework.
Développer un player audio Flash avec Pixlib [partie 2]
Commentaires fermés sur Développer un player audio Flash avec Pixlib [partie 2]

Dans la deuxième partie de ce tutoriel vidéo, vous allez découvrir les classes importantes de Pixlib.
Cet exemple de Player Audio basé sur Pixlib regroupe quelques unes des fonctionnalités utilisées les plus souvent.
Et voici le résultat dans un swf :
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf |
Téléchargez le code source complet de l’exemple
Renseignez votre email pour télécharger le code source complet de l’exemple.
Les classes sont commentées pour vous aider au maximum.
Découvrir les Artistes de l’Album écouté
L’album que vous écoutez provient du site jamendo.fr.
Écoutez et téléchargez l’album Saturnine Song
Avez-vous besoin d’informations supplémentaires sur Pixlib 3 ?
Si vous avez d’autres questions sur Pixlib, posez-les dans les commentaires ci-dessous.
Je rédigerais un nouveau tutoriel pour répondre à toutes vos questions.
Découvrez Pixlib Flash Plateform Framework.
Je tiens à remercier Michael Barbero pour toutes ses explications et ses conseils avisés. Visitez son site : http://www.deja-vue.net/blog/
Développer un player audio Flash avec Pixlib [partie 1]

Dans ce tutoriel vidéo, vous allez apprendre à développer votre première application avec Pixlib.
Cet exemple de Player Audio basé sur Pixlib regroupe quelques unes des fonctionnalités utilisées les plus souvent.
Et voici le résultat dans un swf :
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf |
Téléchargez le code source complet de l’exemple
Renseignez votre email pour télécharger le code source complet de l’exemple.
Les classes sont commentées pour vous aider au maximum.
Découvrir les Artistes de l’Album écouté
L’album que vous écoutez provient du site jamendo.fr.
Écoutez et téléchargez l’album Saturnine Song
Et vous, avez-vous des exemples Pixlib en AS3 ?
Postez votre code AS3 dans les commentaires, je suis curieux de le découvrir !
Le tutoriel vidéo sur Pixlib étant très court, posez-vos questions s’il reste des fonctionnalités incomprises.
Découvrez Pixlib Flash Plateform Framework.
Je tiens à remercier Michael Barbero pour toutes ses explications et ses conseils avisés. Visitez son site : http://www.deja-vue.net/blog/
Rendez-vous la semaine prochaine pour la suite de ce tutoriel video Pixlib.
Pixlib 3.0 Flash Platform Framework

Qu’est ce donc Pixlib 3.0 ?
Présentation du Framework Pixlib 3.0
C’est un framework ActionScript 3 pour Flash Player 10 très très performant. Pixlib permet de concevoir des applications flash avec des outils très pratiques.
Etant un fervent utilisateur de Pixlib pour AS2, je vous conseille fortement d’apprendre à utiliser Pixlib 3.0.
Cette version dispose d’une nouvelle architecture / noyau. Elle fonctionne avec un système d’extensions.
Et elle est plus rapide et robuste ainsi que complètement documentée !
Romain Ecarnot a repris les rênes du projet Pixlib pour vous proposer cette nouvelle version.
Sur le site officiel, vous pourrez télécharger :
- le framework complet et des extensiosns.
- son code source.
- accéder à la Team Pixlib pour un support.
- des tutoriels.
- et consulter la documentation.
Fonctionnalités du Framework Pixlib 3.0
- MVC+FC, PixLib est basée sur le pattern Model View Controler avec un FrontController.
- Logging, Les logs / debug de vos projets pourront s’interfacer avec la plupart des sytèmes de logging (avec l’extensiob PixLogger).
- Abstraction et couplage faible permettant d’avoir une base générique et d’implémenter par la suite des comportements très concrets (par exemple pour le remoting avec le package net.pixlib.services et son extension PixService).
- L’utilisation de Command, soit au sein d’un MVC, soit dans un cadre plus générique, avec des séquenceurs ou autres managers.
- Une Loading API permettant de charger tout type d’élément avec une abstraction totale.
- La gestion du pattern IOC avec l’extension PixIOC.
Conclusion
La Team Pixlib propose des services de consulting, formations et développement.
De mon côté, je m’attaque à la programmation AS3 en utilisant ce fabuleux Framework Pixlib 3.0.
Dans quelques temps, je vous présenterais mes applications conçues avec Pixlib. Et également accompagnées de tutoriels vidéos.
Et vous, que pensez-vous de Pixlib 3.0?
Est ce que vous l’utilisez pour la création de vos projets flash ?
Ou utilisez vous un autre framework ? Lequel ?
Sinon, le votre, fait maison ?