Sujets sur : optimisation

Résumé du livre : Développez facilement des Applications et des Jeux Flash pour les smartphones Android grâces à vos compétences en ActionScript 3 !

Par Véronique Brossier, 1ère édition, Octobre 2011, 352 pages.

Présentation et utilisation de la technologie Adobe AIR

La 1ère partie de ce livre est consacrée à la présentation de la technologie Adobe AIR. L’Auteure aborde l’installation des outils de développement Adobe comme Adobe Flash CS5.5 et Flash Builder 4.5

Vous apprendrez également comment installer le runtime AIR sur un smartphone Android. Puis, le livre nous explique la signification du Kit de développement AIR. Avec, notamment, les  outils en ligne de commande ADT (Air Developer Tool) et ADL (AIR Debug Launcher).

Ensuite, l’Auteur aborde la création de votre première application : passer un appel, envoyer un sms.

Vous apprendrez comment préparer le smartphone, la création d’un projet, le code à utiliser, sous Adobe Flash CS5.5 et Flash Builder. Et bien, l’Auteur nous montre comment créer le fichier de l’application au format APK pour ensuite l’installer sur un smartphone Android.

Le développement pour Android

La 2ème partie de ce livre aborde toute la partie développement pour Android. C’est à dire, l’installation du kit de développement Android (le SDK), l’installation de ADB (Android Debug Bridge) et la détection du smarpthone.

L’Auteure poursuit avec la gestion des certificats Android : les autorisations, la création.

Tout est expliqué en détails comment par exemple : l’ajout d’une icône à votre application, le choix des différents paramètres, la définition des autorisations de l’application, la signature de l’application avec un certificat et la gestion des versions.

Vous aurez également une multitude d’informations pour vous inscrire en tant que développeur Android et publier des applications sur Google Play.

Vous apprendre même à monétiser vos applications avec les applications payantes et la publicités.

Un chapitre est consacré à la gestion des smartphones et de leur possibilités techniques. C’est à dire : l’évaluation des possibilités du smartphone avec le matériel, les ressources mémoires, le stockage, l’affichage en fonction de la résolution (dimensionnement et positionnement)…

L’auteur nous fournit aussi, plusieurs stratégies de déploiement en fonction du périphérique et du type d’application.

Les fonctionnalités des smartphones Android avec Adobe AIR

Le livre « Applications Android avec Adobe AIR » aborde en détail les fonctionnalités spécifiques aux smartphones.

Avec des exemples précis, l’Auteure nous apprend à utiliser chaque technologie du smartphone.

Le stockage des données

Tout commence avec le stockage des données d’une application sur la carte mémoire. Vous pouvez écrire des informations dans un fichier, le lire ou encore l’effacer.

Vous avez également la possibilité d’utiliser des Local SharedObject : un sorte de cookie en flash.

Puis l’Auteure nous explique comment mettre en oeuvre les bases de données SQLite avec Adobe AIR sous Android.

C’est réellement puissant pour stocker toutes les informations de votre application ou jeu. Vous pouvez lire ses informations plus tard ou alors synchroniser ces informations avec une base de données sur internet (partager des scores, lancer des défis…).

La technologie multitouch

Puis le livre « Applications Android avec Adobe AIR » détaille la technologie multitouch de fond en comble. Comme la mise en pratique du glissé-déposé, du click, des mouvements de rotation, de zoom, panoramique, d’appui et d’appui bref, le mouvement de double appui…

Vous saurez pour gérer la technologie multitouch sur Android avec Adobe AIR.

Vient ensuite l’accéléromètre, pour déplacer des éléments de votre application en fonction de la position du smartphone. A travers la création d’une application, vous apprendrez à améliorer les possibilités de l’accéléromètre en utilisant des filtres passe-haut et passe-bas.

L’appareil photo natif du smartphone

Puis l’Auteur passe à l’utilisation de l’appareil photo natif du smartphone. Non seulement vous saurez prendre des photos, les retravailler, visualiser les photos du smartphone mais aussi les envoyer sur votre site internet ou encore utiliser les données EXIF (comme les coordonnées GPS et le lieu de prise de la photo).

Le GPS du smartphone, combiné à la géolocalisation

Vous découvrirez l’activation du GPS du smartphone, combiné à la géolocalisation. Le livre vous donne des exemples pour afficher l’adresse précise du smartphone sur une carte comme Google Maps, Yahoo Maps. Vous aurez le choix entre l’utilisation de cartes statiques ou dynamiques (chargement à la volée) ainsi que plusieurs propriétés propres à la géolocalisation.

Vous apprendrez également comment utiliser le réseau 3G, le réseau Wifi, le géocodage inversé (obtenir une adresse à partir de la longitude et la latitude du GPS)…

La gestion de l’audio

L’Auteure donne un cours précis sur la gestion de l’audio avec un smartphone Android. Vous apprendrez l’utilisation du microphone pour enregistrer des sons, la voie de l’utilisateur. Ou encore lire des fichiers audio, des enregistrements, utiliser des fichiers externes.

Ce n’est pas tout, ce chapitre complet sur l’audio vous fournit des ressources sur les paramètres et les différents codecs audio, travailler avec les sons. Vous découvrirez la création d’un player audio avec l’affichage de la progression, la lecture, pause et l’arrêt d’un son, le contrôle du volume, la balance, le spectre sonore, l’utilisation des balises ID3…

La gestion de la vidéo

Un chapitre entier est aussi consacré à la vidéo sous Android avec Adobe AIR. C’est à dire, comment préparer vos vidéos avec les codecs, le codage et décodage, l’accélération matérielle, le débit, la cadence des images, la résolution et les performances.

L’Auteure explique la lecture des vidéos avec des vidéos intégrées, des vidéos externes et des vidéos progressives.

Ce chapitre aborde également comment contrôler une vidéo (lecture, stop, pause, mémoire tampon) ainsi que la lecture des vidéos provenant de YouTube.

Et pour terminer, le livre « Applications Android avec Adobe AIR » met en pratique, travers des exemples, la capture de la vidéo, avec en plus, des liens vers de la documentation et de nombreux tutoriels.

La fonctionnalité StageWebView

L’Auteure passe ensuite à la fonctionnalité StageWebView, qui permet d’afficher et d’interagir avec du contenu HTML riche. Et cela directement depuis votre application Android avec Adobe AIR.

Le livre « Applications Android avec Adobe AIR » passe en revue l’insertion de publicités de type « AdMob », en utilisant le javascript. Il y aussi des détails sur les réseaux sociaux et l’authentification sur Facebook, Twitter via StageWebView.

L’accélération matérielle

Et pour terminer sur les fonctionnalités spécifiques aux smartphones, il y a un chapitre dédié à l’accélération matérielle.

Plusieurs définitions et informations sont données sur le rendu des éléments sur l’écran, les calculs, le rendu avec le GPU sous Android et l’utilisation de certaines propriétés pour améliorer les performances de vos applications.

Des exemples sont fournis pour optimiser votre liste d’affichage, la consommation mémoire, une structure en arbre, la relation entre les noeuds, le Stage3D, les MovieClip, l’Interactivité. L’Auteure détaille différentes techniques pour le rendu, la mémoire des textures et leurs tailles sur l’iPad et l’iPhone, les Objets 2.5D avec l’utilisation des matrices.

La Programmation Avancée avec la création d’une application complète

RTMFP, le P2P

A travers plusieurs chapitres, l’Auteure passe en détails des sujets beaucoup plus avancés comme RTMFP, le P2P sur un réseau local, le P2P sur un réseau distant avec une messagerie instantanée simple, la multidiffusion en continu, le flux continu…

Arduino et physical computing

L’Auteure aborde, pour les connaisseurs, le sujet Arduino et physical computing : l’interaction d’Adobe AIR avec une plateforme électronique, des capteurs… Cet environnement établit un lien entre des ordinateurs (via Adobe AIR) et le monde physique (via des capteurs, un microcontrôleur).

Architecture et création d’une application de navigation

Un chapitre est consacrée à l’architecture et la création d’une application de la navigation. Vous apprendrez à utiliser des vues, les masquer, les afficher, en fonction des interfaces de votre application, ajouter également un fil d’ariane…

Développement pas à pas d’une application complète

A travers une méthode étape par étape, l’Auteure explique le développement d’un projet « Album Photo » composé de 2 applications.

La majorité des fonctionnalités détaillées précédemment sont mises en pratiques dans ce projet.

C’est à dire, que vous allez utiliser une architecture solide avec une conception optimisée, comment gérer les différents flux d’informations dans vos applications, la création des vues, les différentes autorisations à fournir (internet, camera, audio,…).

Vous aurez accès au code source complet et commenté pour vous aider à comprendre la création et l’implémentation des différentes technologies propres à Adobe AIR.

Ce projet implémente des fonctionnalités de navigation et de défilement, la prise et l’envoie de photos, l’ajout de commentaires audio, la géolocalisation inversée, l’utilisation d’une base SQLite…

Ces applications couvrent plusieurs technologies disponibles sur Android avec Adobe AIR, vous pouvez même l’améliorer avec des fonctionnalités supplémentaires. Du coup, vous avez toutes les ressources nécessaires pour créer vos propres applications AIR pour Android.

Les pratiques efficaces pour la gestion des ressources et le développement

Les derniers chapitres fournissent une multitude de conseils pour apprendre à gérer efficacement les ressources et le développement d’applications Adobe AIR.

L’Auteure nous donne plusieurs conseils sur l‘optimisation du code, des liens vers de la documentation de qualité, les différentes communautés existantes…

Ces chapitres abordent le concept des frames, la gestion de la mémoire avec la création des objets, leur suppression et le garbage collector (ou le ramasse miettes).

Ce livre explique également la gestion des évènements avec leur propagation, les écouteurs, les évènements personnalisés…

Il y a également plusieurs outils de diagnostics conseillés pour surveiller et améliorer les performances de ses applications.

Critique d’Applications Android avec Adobe AIR

Ce livre remplit parfaitement son objectif !

A travers plusieurs chapitres très détaillés et illustrés d’exemples, vous apprendrez à utiliser l’ensemble des fonctionnalités spécifiques aux smartphones sous Android et cela avec la technologie Adobe AIR.

Il y a également plusieurs précieux conseils sur l’optimisation des applications sous Android : avec la gestion de la batterie, des ressources mémoires et l’utilisation de la puissance du GPU.

Toutefois ce livre possède quelques points faibles, je trouve qu’il n’aborde pas assez en détail l’importance de l’utilisation et la création d’une architecture solide et évolutive pour le développement d’une application (flash, Adobe AIR ou autre).

Pour moi, l’architecture d’une application reste le pilier d’un développement réussi !

Si vous souhaitez développer des applications et jeux avec la technologie Adobe AIR sur les smartphones Android, ce livre est une mine d’informations pertinentes.

Je vous conseille de vous le procurer au plus vite !

Commander sur Amazon le Livre Applications Android avec Adobe AIR – Développez en ActionScript 3 pour Android.

Au cours de plusieurs tutoriels sur la création de jeux flash (Afterburner partie 1 et partie 2) avec le Framework Pixlib, vous avez appris à mettre en oeuvre les fonctionnalités de Starling Framework.

Le thème de ce Cours ActionScript 3 aborde la conversion de ce jeu flash pour la plateforme Android 😉

Et donc, la possibilité de diffuser votre jeux flash très facilement sur Google Play.

Voici ce que vous allez apprendre dans ce tutoriel flash :

• La technique pour créer un projet Android avec FDT.
• Comment utiliser le code source ActionScript 3 du jeux flash Afterburner.
• Comment compiler rapidement votre nouveau fichier swf.
• Toute la configuration étape par étape pour créer votre fichier de jeu .APK
• Comment mettre en ligne votre nouveau Jeu Adobe AIR sur Google Play.
• Une solution très simple pour utiliser les ressources du jeux flash (images png, fichiers xml, sons MP3, …) sans faire appel à la connexion 3G du smartphone.

Cette formation vous permet de créer un jeu Adobe AIR pour Android à partir d’un jeu flash en ActionScript 3 !

Jeu Adobe AIR avec Pixlib et Starling Framework

Version démonstration

Ci-dessous un lien vers le jeu flash créé : Afterburner.

Le jeu Afterburner Adobe AIR pour Android tourne à 45fps et utilise moins de 7Mo de mémoire sur mon smartphone Motorola Milestone 2 !

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.

Installer le jeu Afterburner depuis Google Play

Note : 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.

Avez-vous déjà développé des jeux flash sous Android ? avec la technologie Adobe AIR ?

Dites-moi si vous avez déjà utilisés les nouvelles possibilités offertes avec Adobe AIR et Starling Framework dans les jeux flash sur smartphones.

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.

Note : 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.

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.

Note : 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.

Un Cours ActionScript 3 réclamés par les Développeurs suivant la Formation AS3 Facile.

Vous trouverez un ensemble de conseils à suivre pour optimiser votre code ActionScript 3 et le rendre plus performant 😉

J’ai testé chacun de ces exemples dans des applications flash. Il existe plusieurs benchmarks sur internet montrant les gains de performances.

1 – Évitez les multiplications dans les boucles

Mauvaise version

Le résultat est multiplié par un facteur 10 à chaque boucle. La multiplication n’est pas nécessaire.

[codesyntax lang= »actionscript3″ title= »multiplication » bookmarkname= »multiplication »]

[/codesyntax]

Version correcte

La multiplication peut être remplacée par une addition qui est beaucoup moins gourmande en ressources mémoires.

Et nous obtenons exactement le même résultat.

[codesyntax lang= »actionscript3″ title= »addition » bookmarkname= »addition »]

[/codesyntax]

2 – Le Casting

Mauvaise version

Les éléments du tableau sont demandés directement. C’est une mauvaise solution parce que le Player Flash ne connait pas l’objet et la refactorisation du code est impossible.

[codesyntax lang= »actionscript3″ title= »casting » bookmarkname= »casting »]

[/codesyntax]

Versions correctes

Il suffit de caster l’objet à l’intérieur du tableau pour améliorer les performances.

[codesyntax lang= »actionscript3″ title= »casting » bookmarkname= »casting »]

[/codesyntax]

Dans la majorité des cas, utilisez plutôt les Vecteurs pour typer vos tableaux.

[codesyntax lang= »actionscript3″ title= »casting » bookmarkname= »casting »]

[/codesyntax]

3 – Réutilisez les instances créées

Mauvaise version

Dans l’exemple suivant, l’instance Point est créée à chaque itération. C’est très couteux en ressource et inutile.

[codesyntax lang= »actionscript3″ title= »instances » bookmarkname= »instances »]

[/codesyntax]

Version correcte

Il n’est pas nécessaire de créer une nouvelle instance de Point à chaque itération. Une seule instance est nécessaire pour la boucle.

[codesyntax lang= »actionscript3″ title= »instance » bookmarkname= »instance »]

[/codesyntax]

4 – L’appel de fonction

Lorsque c’est possible, évitez d’appeler directement les fonctions Math() de Flash Player. Elles sont couteuses en ressources.

Remplacez les fonctions Math par leurs équivalents avec les opérations (additions, multiplications…).

[codesyntax lang= »actionscript3″ title= »fonction » bookmarkname= »fonction »]

[/codesyntax]

5 – Le typage

Mauvaise version

Dans l’exemple ci-dessous, la création de l’objet n’est pas typée. C’est une mauvaise solution parce que le Player Flash ne connait pas l’objet. C’est une pratique non recommandée pour le refactoring et la Programmation Orientée Objet.

[codesyntax lang= »actionscript3″ title= »typage » bookmarkname= »typage »]

[/codesyntax]

Version correcte

Lors de la création de l’objet, typez ses propriétés correctement. Ainsi le Player Flash connait l’objet et peut lui appliquer des optimisations spécifiques, en fonction du type (Number, String,…).

[codesyntax lang= »actionscript3″ title= »typage » bookmarkname= »typage »]

[/codesyntax]

6 – Déclaration de variables

Mauvaise version

Lorsque vous avez besoin de déclarer plusieurs variables, la déclaration une ligne par variable n’est pas une solution optimisée.

[codesyntax lang= »actionscript3″ title= »declaration variables » bookmarkname= »declaration variables »]

[/codesyntax]

Version correcte

Pour déclarer plusieurs variables, il est plus optimisé d’utiliser la déclaration sur une seule ligne 😉

[codesyntax lang= »actionscript3″ title= »declaration variable » bookmarkname= »declaration variable »]

[/codesyntax]

7 – Boucle For

Une règle très simple en ActionScript 3, utilisez des integers pour les itérations de vos boucles.

Mauvaise version

[codesyntax lang= »actionscript3″ title= »boucle for » bookmarkname= »boucle for »]

[/codesyntax]

Version correcte

Pour une exécution plus rapide, utilisez int à la place de Number dans vos boucles.

[codesyntax lang= »actionscript3″ title= »boucle for » bookmarkname= »boucle for »]

[/codesyntax]

8 – Optimisation des multiplications

Si vous utilisez cette opération i*33, le résultat sera de type Number.

L’accès au tableau est optimisé pour les types int. Donc pour vos calculs dans les tableaux, pensez au casting du résultat en int.

Mauvaise version

[codesyntax lang= »actionscript3″ title= »multiplications » bookmarkname= »multiplications »]

[/codesyntax]

Version optimisée

[codesyntax lang= »actionscript3″ title= »multiplication » bookmarkname= »multiplication »]

[/codesyntax]

9 – Les constantes des autres classes

Une autre optimisation concerne l’utilisation d’une constante provenant d’une autre classe.

Mauvaise version

[codesyntax lang= »actionscript3″ title= »cosntantes » bookmarkname= »constantes »]

[/codesyntax]

Version correcte

Le code précédent peut être optimisé en sortant la constante de la boucle.

Vous créez une variable en dehors de la boucle pour recevoir la constante.

[codesyntax lang= »actionscript3″ title= »constantes » bookmarkname= »constantes »]

[/codesyntax]

10 – Les opérateurs sur les bits

L’utilisation des opérateurs sur les bits augmente significativement les performances.

A la place de la multiplication et de la division utilisation les syntaxes sur les bits.

Mauvaise version

[codesyntax lang= »actionscript3″ title= »opérateurs sur les bits » bookmarkname= »opérateurs sur les bits »]

[/codesyntax]

Version optimisée

[codesyntax lang= »actionscript3″ title= »opérateurs sur les bits » bookmarkname= »opérateurs sur les bits »]

[/codesyntax]

11 – Utilisez des Vector à la place des Array

Le Player Flash version 10 a ajouté un nouveau type de données les Vector (ou Vecteurs).

Les Vector sont plus rapides que les Array pour générer des listes des données et parcourir des collections.

Version Array non optimisée

[codesyntax lang= »actionscript3″ title= »Vector » bookmarkname= »Vector »]

[/codesyntax]

Version équivalent avec Vector

[codesyntax lang= »actionscript3″ title= »Vector » bookmarkname= »Vector »]

[/codesyntax]

Pour aller plus loin dans l’optimisation ActionScript 3

Il y a encore plusieurs autres optimisations à apporter dans votre développement Flash.

Je vous conseille d’étudier l’excellent livre de Thibault Imbert sur l’optimisation des publicités.

Avez-vous d’autres optimisations à suggérer ?

Partagez vos optimisations de code ActionScript 3 dans les commentaires ci-dessous.

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 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).

Avez-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 ?

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.

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).

Avez-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 ?

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 l’animation de personnages, notamment pour des jeux flash !

Pour une présentation de Starling Framework, je vous invite à consulter le Cours AS3 dédié.

Dans ce Cours AS3, nous allons apprendre à animer un ou plusieurs personnages, directement à partir d’une seule image (jpg, png) !

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 plusieurs personnages animés dans une seule image png ou jpg !
• 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 (comme les Custom Sprite).
• Le code complet pour créer vos premiers personnages animés grâce à Starling, à partir d’une image unique, chargée depuis votre swf.

Cette formation vous permettra d’animer des personnages en utilisant le Framework Starling et donc de profiter de la puissance du GPU pour le rendu de vos applications flash en 2D.

Animations de personnages avec Starling Framework

Version démonstration

Ci-dessous un exemple tout simple d’utilisation de Starling Framework dans flash !

Cliquez ici pour voir la version de démonstration N°1.

Utilisez les touches directionnelles de votre clavier pour diriger le personnage à droite et à gauche.

Cliquez ici pour voir la version de démonstration N°2.

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 le logiciel gratuit TexturePacker pour créer les images png contenant vos animations.

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).

Avez-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 ?