Sujets sur : formation actionscript

Cours ActionScript 3 ‘formation actionscript’

Comment utiliser et personnaliser les Composants AS3 Facile ?

Commentaires fermés sur Comment utiliser et personnaliser les Composants AS3 Facile ?

Ecrit le 22 novembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Suite à vos demandes, le thème de ce Cours ActionScript 3 porte sur l’utilisation et la personnalisation des Composants du Framework AS3 Facile.

Pour apprendre à créer des Composants visuels et votre propre Framework AS3, consultez l’ensemble des cours ActionScript 3 sur le Framework AS3 Facile.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

Créer le fichier fla contenant les graphismes des composants AS3 Facile.
Comment personnaliser tous les composants AS3 Facile et les rendre conformes à vos applications flash.
Créer un fichier swc contenant les graphismes et l’utiliser dans votre application flash.
Un exemple d’utilisation et de personnalisation de chaque composants AS3 Facile.

Cette formation ActionScript 3 vous permettra d’utiliser, de modifier, d’ajouter et d’implémenter les Composants AS3 Facile dans vos applications flash.

Les Composants AS3 Facile

Version démonstration

Et voici notre application implémentant l’ensemble des composants du Framework AS3 Facile.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/11/composants-as3-facile.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/11/composants-as3-facile.swf

Télécharger le code source du cours AS3

Et voici le code source de l’exemple d’utilisation des composants du Framework AS3 Facile.

Télécharger “Utilisation Composants AS3 Facile”

composants-as3-facile.zip – Téléchargé 713 fois – 138,34 Ko

Télécharger la dernière version du Framework AS3 Facile.

Montrez moi vos applications flash qui utilisent les Composants AS3 Facile ?

Partagez votre personnalisations des graphismes des Composants AS3 Facile dans les commentaires ci-dessous.

Quelles sont les nouvelles fonctionnalités que vous avez ajoutés ? Quelles fonctionnalités souhaitez-vous dans le Framework AS3 Facile ?

Activer / Désactiver rapidement du code ActionScript via les balises Commentaires

Commentaires fermés sur Activer / Désactiver rapidement du code ActionScript via les balises Commentaires

Ecrit le 10 novembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Pendant la phase de développement et surtout d’écriture de code, il arrive souvent que nous effectuons divers tests de fonctionnalités.

Et pour cela, nous avons besoin de pouvoir désactiver / activer rapidement des lignes de codes.

Une solution est d’utiliser les possibilités offertes par les caractères de commentaires ActionScript.

Ci dessous, du code ActionScript désactivé, voyons comment l’activer rapidement.

[codesyntax lang= »actionscript3″ title= »Comment.as » bookmarkname= »Comment.as »]

/*

this.graphics.beginFill(0x808080, 0.5);

this.graphics.drawRect(100, 50, 100, 100);

this.graphics.endFill();

//*/

//*/

[/codesyntax]

Il suffit de commenter la première ligne en ajoutant le caractère / pour activer le code ActionScript.

[codesyntax lang= »actionscript3″ title= »Comment.as » bookmarkname= »Comment.as »]

//*

//*

this.graphics.beginFill(0x808080, 0.5);

this.graphics.drawRect(100, 50, 100, 100);

this.graphics.endFill();

//*/

//*/

[/codesyntax]

Ensuite, vous souhaitez ajouter un autre block de code et l’activer / le désactiver rapidement.

Ci dessous, le 2ème block de code est désactivé en supprimant le caractère / (la ligne précédent Block2).

[codesyntax lang= »actionscript3″ title= »Comment.as » bookmarkname= »Comment.as »]

//*

//*

// Block 1

this.graphics.beginFill(0x808080, 0.5);

this.graphics.drawRect(100, 50, 100, 100);

this.graphics.endFill();

/*/

/*/

// Block 2

var oTxt:TextField = new TextField();

oTxt.x = 30;

oTxt.y = 33;

oTxt.width = 200;

oTxt.height = 40;

oTxt.border = true;

oTxt.text = « Un bloc de texte »;

this.addChild(oTxt);

//*/

//*/

[/codesyntax]

Puis pour inverser l’activation des blocks de code, il suffit de supprimer le caractère / sur la 1ère ligne.

Ainsi le 1er block de code est désactivé, le 2ème block de code est activé.

[codesyntax lang= »actionscript3″ title= »Comment.as » bookmarkname= »Comment.as »]

/*

// Block 1

this.graphics.beginFill(0x808080, 0.5);

this.graphics.drawRect(100, 50, 100, 100);

this.graphics.endFill();

/*/

/*/

// Block 2

var oTxt:TextField = new TextField();

oTxt.x = 30;

oTxt.y = 33;

oTxt.width = 200;

oTxt.height = 40;

oTxt.border = true;

oTxt.text = « Un bloc de texte »;

this.addChild(oTxt);

//*/

//*/

[/codesyntax]

Ce sont des astuces de commentaires très pratiques pendant le développement et les tests de codes ActionScript.

Il est possible très simplement et rapidement de tester plusieurs blocks de code ActionScript et d’en désactiver d’autres.

Utilisez-vous d’autres astuces pour vos tests de code AS3 ?

Postez vos exemples dans les commentaires ci-dessous.

11 astuces pour optimiser votre code ActionScript 3

2 questions

Ecrit le 8 novembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

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 »]

const n: int;
var i: int;

var result: int;

for( i = 0; i &lt; n; ++i )
{
	result= i * 10;
	trace( result.toString() );
}

const n: int;

var i: int;

var result: int;

for( i = 0; i < n; ++i )

{

result= i * 10;

trace( result.toString() );

}

[/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 »]

const n: int;
var i: int;

var result: int;

for( i = 0; i &lt; n; ++i )
{
	trace( result.toString() );
	value += 10;
}

const n: int;

var i: int;

var result: int;

for( i = 0; i < n; ++i )

{

trace( result.toString() );

value += 10;

}

[/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 »]

const list: Array /* type VectorTest */;
var i: int = list.length;

while( --i &gt; -1 )
	list[ i ].x = Math.random();

const list: Array /* type VectorTest */;

var i: int = list.length;

while( --i > -1 )

list[ i ].x = Math.random();

[/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 »]

const list: Array /* de VectorTest */;
var i: int = list.length;

while( --i &gt; -1 )
	VectorTest( list[ i ] ).x = Math.random();

const list: Array /* de VectorTest */;

var i: int = list.length;

while( --i > -1 )

VectorTest( list[ i ] ).x = Math.random();

[/codesyntax]

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

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

const list: Vector.&lt;VectorTest&gt;;
var i: int = list.length;

while( --i &gt; -1 )
	list[ i ].x = Math.random();

const list: Vector.<VectorTest>;

var i: int = list.length;

while( --i > -1 )

list[ i ].x = Math.random();

[/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 »]

const n: int = 1024;

for( var i: int = 0; i &lt; n; ++i )
{
	var point: Point = new Point();

	point.x = point.y = Math.random();

	// utilisation du "point" ...
}

const n: int = 1024;

for( var i: int = 0; i < n; ++i )

{

var point: Point = new Point();

point.x = point.y = Math.random();

// utilisation du "point" ...

}

[/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 »]

const n: int = 1024;
var point: Point = new Point();

for( var i: int = 0; i &lt; n; ++i )
{
	point.x = point.y = Math.random();

	// utilisation du "point" ...
}

const n: int = 1024;

var point: Point = new Point();

for( var i: int = 0; i < n; ++i )

{

point.x = point.y = Math.random();

// utilisation du "point" ...

}

[/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 »]

// version lente
y = Math.abs(x);

// version équivalente beaucoup plus rapide
y = x &gt; 0.0 ? x : -x;

// version lente

y = Math.abs(x);

// version équivalente beaucoup plus rapide

y = x > 0.0 ? x : -x;

[/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 »]

for( var i: int = 0; i &lt; 1033; ++i )
{
	var oData: Object = {};

	oData.x = 1.0;
	oData.y = 2.0;
	oData.z = 3.0;
}

for( var i: int = 0; i < 1033; ++i )

{

var oData: Object = {};

oData.x = 1.0;

oData.y = 2.0;

oData.z = 3.0;

}

[/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 »]

package
{
	public final class Data
	{
		public var x: Number;
		public var y: Number;
		public var z: Number;
	}
}

// dans un autre fichier ActionScript
for( var i: int = 0; i &lt; 1033; ++i )
{
	var oData: Data= new Data();

	oData.x = 1.0;
	oData.y = 2.0;
	oData.z = 3.0;
}

package

{

public final class Data

{

public var x: Number;

public var y: Number;

public var z: Number;

}

// dans un autre fichier ActionScript

for( var i: int = 0; i < 1033; ++i )

{

var oData: Data= new Data();

oData.x = 1.0;

oData.y = 2.0;

oData.z = 3.0;

}

[/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 »]

var a:int=0;
var b:int=0;
var c:int=0;

var a:int=0;

var b:int=0;

var c:int=0;

[/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 »]

var a:int=0, b:int=0, c:int=0;

1	var a:int=0, b:int=0, c:int=0;

[/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 »]

for (var i: Number = 0; i &lt; n; i++)
void;

1 2	for (var i: Number = 0; i < n; i++) void;

[/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 »]

for (var i: int = 0; i &lt; n; i++)
void;

1 2	for (var i: int = 0; i < n; i++) void;

[/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 »]

for (;i&lt;n2;i++)
	Data(array[i*2]).x = 2;

1 2	for (;i<n2;i++) Data(array[i*2]).x = 2;

[/codesyntax]

Version optimisée

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

for (;i&lt;n2;i++)
	Data( array[ int(i*2) ] ).x = 2;

1 2	for (;i<n2;i++) Data( array[ int(i*2) ] ).x = 2;

[/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 »]

var iVar:int;

for(var i:Number=0; i&lt;100000; i++)
{
	iVar = UneClass.UNE_CONSTANT;
}

var iVar:int;

for(var i:Number=0; i<100000; i++)

{

iVar = UneClass.UNE_CONSTANT;

}

[/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 »]

var iVar:int;
var iConstant:int = UneClass.UNE_CONSTANT;

for(var i:Number=0; i&lt;100000; i++)
{
	iVar = iConstant;
}

var iVar:int;

var iConstant:int = UneClass.UNE_CONSTANT;

for(var i:Number=0; i<100000; i++)

{

iVar = iConstant;

}

[/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 »]

for(var i:int=0; i&lt;100000; i++)
{
	var val1:int = 4 * 2;
	var val2:int = 4 * 4;
	var val3:int = 4 / 2;
	var val4:int = 4 / 4;
}

for(var i:int=0; i<100000; i++)

{

var val1:int = 4 * 2;

var val2:int = 4 * 4;

var val3:int = 4 / 2;

var val4:int = 4 / 4;

}

[/codesyntax]

Version optimisée

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

for(var i:int=0; i&lt;100000; i++)
{
	var val1:int = 4 &lt;&lt; 1;
	var val2:int = 4 &lt;&lt; 2;
	var val3:int = 4 &gt;&gt; 1;
	var val4:int = 4 &gt;&gt; 2;
}

for(var i:int=0; i<100000; i++)

{

var val1:int = 4 << 1;

var val2:int = 4 << 2;

var val3:int = 4 >> 1;

var val4:int = 4 >> 2;

}

[/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 »]

var a:Array = new Array(LENGTH);

for(var i:int = 0; i &lt; LENGTH; i++)
{
	a[i] = Math.random() * 100000;
}

var a:Array = new Array(LENGTH);

for(var i:int = 0; i < LENGTH; i++)

{

a[i] = Math.random() * 100000;

}

[/codesyntax]

Version équivalent avec Vector

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

var v:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;(LENGTH, true);

for(var i:int = 0; i &lt; LENGTH; i++)
{
	v[i] = Math.random() * 100000;
}

var v:Vector.<Number> = new Vector.<Number>(LENGTH, true);

for(var i:int = 0; i < LENGTH; i++)

{

v[i] = Math.random() * 100000;

}

[/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.

Les 6 Étapes Fondamentales pour Développer une Application Flash

1 question

Ecrit le 3 novembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Le thème de ce Cours AS3 aborde les 6 étapes fondamentales pour développer une application ou un jeu flash 😉

En effectuant ces étapes une par une, vous réduisez fortement le risque de bugs.

De plus, vous améliorez considérablement la robustesse et la souplesse de votre application.

Votre application flash devient ainsi beaucoup plus facilement maintenable dans le temps !

C’est parti pour la 1ère étape.

Étape 1 : Analyse du Projet

Une analyse du projet est nécessaire pour déterminer les besoins du clients. Il n’est pas forcément nécessaire d’utiliser l’artillerie lourde (UML, Merise…), c’est vraiment en fonction du projet et de sa complexité.

Le plus important est de déterminer exactement les fonctionnalités de l’application à développer pour le client. Tout simplement, rédiger un document reprenant une à une chaque demande du client, transposée en fonctionnalités. Ce document ne contient pas de technique, il est compréhensible par tout le monde.

Ce document représente le cahier des charges fonctionnel de votre projet !

Il est indispensable que le cahier des charges fonctionnel soit validé par votre client.

Cela vous évitera des désagréments par la suite : tel que le développement de fonctionnalités non prévues, une erreur d’interprétation de la demande du client…

Étape 2 : Étude Technique

Ensuite, il vous faut commencer un document qui va aborder l’aspect technique de votre application : le cahier des charges techniques.

Dans la pratique, en fonction de la complexité de l’application, vous proposerez une ligne directrice concernant les technologies à utiliser.

Par exemple, il n’est toujours opportun d’utiliser un Framework ActionScript.

Pour des applications ayant peu de fonctionnalités, d’interactions utilisateurs, le Framework PureMVC fera très bien l’affaire.

Par contre, pour une application ou un jeu flash plus évolué, avec une interaction utilisateur plus poussée et complexe, le Framework PixLib s’avère très pratique pour faciliter et accélérer le développement.

En fonction de votre étude technique, il est nécessaire de faire la part des choses : « inutile de sortir le bazooka pour tuer une mouche ».

Sur certains projets, vous pouvez vous passer complètement d’un Framework ActionScript.

Étape 3 : Diagramme de Classes

Tout dépend encore de votre projet, pour des petites applications, je vous conseille de passer directement à l’étape 4. Inutile de perdre du temps.

Pour des applications flash complexes, un diagramme de relations entre toutes les classes est particulièrement intéressant lorsque vous êtes plusieurs développeurs à intervenir. C’est également pratique pour la maintenabilité et les évolutions futures de l’application.

Sur ce diagramme, vous pouvez rajouter les principales responsabilités de vos classes : c’est à dire leurs méthodes publiques, leurs fonctions (c’est à dire ce qu’elles effectuent).

Ce diagramme de classes représente le pilier de votre application, que vous partagerez avec les autres développeurs de votre équipe.

Étape 4 : La Programmation

Et nous voilà dans le vif du sujet : la conception de votre application flash.

L’utilisation d’une stratégie de debug est indispensable avec un logiciel comme Monster Debugger, Firebug…

Il est également nécessaire de suivre les performances de votre code actionscript.

Plusieurs Éditeurs ActionScript peuvent grandement vous simplifier la programmation, comme FDT ou en FlashDevelop.

Étape 5 : La Phase de Tests

Une étape trop souvent négligée par les Développeurs, tout cela pour gagner du temps !!!

Qui au final, ce temps « gagné’ sera perdu en correction de bugs directement en Production.

Et surtout, une perte de crédibilité face à vos clients…

La phase de tests consiste à vérifier une à une l’ensemble des fonctionnalités de votre application.

Le but est de déceler les fameux bugs cachés, les pertes de performances…

Une fois que votre application fonctionne comme prévu dans votre analyse fonctionnelle, il vous reste la dernière étape 😉

Étape 6 : La Livraison

Et voila la dernière étape : la livraison de votre application flash au client 😉

Au fur et à mesure de vos différents projets, vous allez acquérir de nouvelles compétences.

Cela vous permettra de développer vos propres classes utilitaires et même un Framework adapté à vos besoins !

Et vous, comment procédez-vous pour développer vos applications flash ?

Quelle ligne directrice utilisez-vous ?

Donnez-moi votre avis dans les commentaires ci-dessous.

Classe de Sortie Debug Ultra Simple en ActionScript 3

Commentaires fermés sur Classe de Sortie Debug Ultra Simple en ActionScript 3

Ecrit le 1 novembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Sur le site de Grant Skinner, j’ai trouvé une classe de sortie debug ultra simple et pratique.

Pour afficher rapidement des valeurs, comme un trace, cette petite classe utilitaire est un bijou !

Utilisation de Out.as

Pour l’utiliser, c’est facile, il suffit de mettre la classe Out.as dans votre répertoire source (ou src).

Ensuite, il reste à affecter un champ texte de sortie à Out.textfield.

[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]

Out.textField = oTextDebug;

1	Out.textField = oTextDebug;

[/codesyntax]

Vous pouvez également spécifier le nombre maximum de caractères à conserver.

Ainsi, les anciennes trace seront automatiquement effacées au fur et à mesure de l’ajout des nouveaux.

[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]

Out.maxLength = 1333;

1	Out.maxLength = 1333;

[/codesyntax]

Ensuite, de n’importe endroit de votre application, vous pouvez appeler Out.trace (valeur) pour effectuer un trace.

Cela affiche la valeur dans votre TextField en l’ajoutant à la fin de votre champ de texte.

Vous pouvez faire défiler le champ texte à la fin pour afficher le dernier trace.

[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]

Out.trace("Bonjour");
Out.trace("count:", count);// Possibilité de transmettre plusieurs paramètres

1 2	Out.trace("Bonjour"); Out.trace("count:", count);// Possibilité de transmettre plusieurs paramètres

[/codesyntax]

Adapter Out.as à vos projets

Enfin, vous pouvez personnaliser le trace en fonction de votre projet.

Il suffit de remplacer Out.handler par votre propre fonction.

Par exemple, pour effectuer un format sur votre texte de trace, modifier sa couleur, ajouter des informations supplémentaires…

Vous pouvez ajouter une combinaison de touches (ctrl+d) pour afficher / masquer le trace.

Le code ci-dessous permet d’afficher le trace, uniquement si le premier paramètre est 1.

Ainsi, vous pouvez utiliser une variable, pour activer ou non la sortie trace sur Out.as.

[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]

function log(...rest:Array):Boolean
{
  trace("logging : "+rest.join(","));
  // ... etc.
  // écrit dans le TextField seulement si le premier paramètre (ex. priorité debug) est &gt; 1
  return rest[0] &gt; 1; // renvoie false pour empêcher l'écriture dans Out.textField
}
Out.handler = log;

function log(...rest:Array):Boolean

{

trace("logging : "+rest.join(","));

// ... etc.

// écrit dans le TextField seulement si le premier paramètre (ex. priorité debug) est > 1

return rest[0] > 1; // renvoie false pour empêcher l'écriture dans Out.textField

}

Out.handler = log;

[/codesyntax]

Exemple de personnalisation de Out.as

J’ai ajouté sur Out.as la gestion de l’appuie simultanée sur les touches Ctrl et D pour afficher ou masquer le TextField de Debug.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/11/debug-simple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/11/debug-simple.swf

Télécharger le code source de Out.as

Dans le fichier ci-dessous, le code source de l’exemple avec la classe Out.as modifiée.

Télécharger “Out.as Debug simple”

ex-out-debug-simple.zip – Téléchargé 609 fois – 88,25 Ko

Sources : Grant Skinner

Utiliser Box2D avec Starling Framework et un compteur de FPS optimisé

Commentaires fermés sur Utiliser Box2D avec Starling Framework et un compteur de FPS optimisé

Ecrit le 27 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 2D

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 a pour objectif de coupler Starling Framework avec Box2D : un moteur physique de détection de collisions.

Ainsi Box2D bénéficie du gain de performances du Flash Player 11 grâce aux classes Starling !

Les prochains cours AS3 seront consacrés à la découverte du Framework Box2D Flash AS3 😉

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.

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 associer Box2D à la puissance de Starling Framework.
Comment créer un compteur de FPS ultra light en consommation de ressources avec Starling Framework.
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.

Cette formation ActionScript 3 vous permettra d’utiliser d’autres Framework avec Starling pour profiter des nouvelles performances du Player Flash 11 dans vos applications flash.

Box2D et Compteur FPS avec Starling Framework

[spoiler]

Bonjour et bienvenue sur actionscript-facile.com

Dans ce sixième cours sur le framework starling, nous allons voir comment utiliser le Framework starling avec une autre Framework actionscript très connu qui est box2D.

Et tout ça dans une application flash AS3 pour profiter des nouvelles performances du flash Player 11 avec l’api stage 3D

Petit récapitulatif de starling qu’est ce que c’est ?

C’est une librairie en pure AS3, le Framework strarling permet que le rendu, tout le contenu graphique soit calculé directement par GPU même si ce n’est pas de la 3D.

Finalement cela permet d’obtenir des performances de rendu très très intéressante.

L’api de starling est très familière pour un apprentissage rapide avec sprite, display objet , movieclip, image etc.

Il suffit d’échanger les classes natives de flash avec leur équivalent starling.

Pour une présentation un peu plus détaillée de starling, je vous renvoi au premier cours actionscript sur ce Framework.

A travers un exemple pratique tiré du livre sur starling de Thibault Imbert, que vous trouverait en téléchargement sous ce cours vidéo.

Il y aura d’autres cours consacrés à starling Framework et surtout à ses extensions.

Nous allons donc utiliser le Framework box2D avec des objets starling.

Box2D est un framework de détection avancée des collisions : sur un corps, sur une voiture, un vélo…

Il permet de détecter les frottements, les collisions entre plusieurs objets.

Les prochains cours actionscript sur AS3 faciles seront d’ailleurs dédiés au framework box2D.

Nous allons apprendre étape par étape comment profiter de ces détections avancées collisions dans nos applications flash et enfin surtout dans nos jeux flash.

Passons tout de suite à la pratique.

Comme d’habitude je vous le rappelle très important d’utiliser et ce paramètre de compilation -SWF-version = 13 pour activer l’api stage 3D dans votre fichier index HTML.

Et de mettre Wmode = direct pour activer stage3D avec le flash Player 11.

Et bien évidemment d’utiliser le fichier Player global.SWC en version 11 que vous trouverez en téléchargement sous cette vidéo.

On a notre classe main qui étend Sprite de flash, cette fois on définie sa taille le framerate etc.

On initialise notre debuguer, la position de la scène 0 ;0 et on démarre starling game box2D pour créer notre environnement starling.

Tout simplement on active l’anti-crénelage, le multitouche pour les Smartphones et on démarre starling pour la création de notre environnement.

box2D comment ça fonctionne ?

Je ne vais pas rentrer dans le détail du framework box2D.

Je vous montre juste un petit exemple pratique.

Je rentrerais dans le détail du framework box2D lors des cours qui lui seront entièrement consacrés.

Je vous montre rapidement :

on défini un vecteur de gravité, c’est pour que le corps soit autorisé à se reposer.

Donc on créé un objet world, ce sera notre monde avec tous les tests de collision de gravité etc.

Cela peut simuler la gravité de la terre.

Finalement, là on utilise des variables pour créer nos formes H2 body et des polygones.

Donc ce sera des carrés et des rectangles.

On définit la position, l’angle au sol et on ajoute une forme au sol.

Ce sera notre sol, finalement je lui ai mis un angle pour qu’il soit pentu.

Ainsi les forme les carrés tomberont dessus. Puis elles vont rouler, enfin se dérouler.

Cela créé nos nouvelles formes polygones.

La forme au sol est statistique donc densité à null. Et là on utilise quoi donc la classe Quad que nous avons utilisé dans le premier cours sur starling Framework.

quad permet de créer un carré et là, on définit notre body.

Donc body qui est notre forme au sol.

C’est là où on utilise starling framework pour créer notre forme globale. Et on l’attribut à box2D.

Et là, on créé les éléments, on en créé 63 qui vont tomber au sol.

Donc on créé une nouvelle définition de Body comme ici. Ca c’était notre forme au sol : le carré et ça permet ben c’est la forme avec sa couleur etc.

Je vous montrerai…

Là on créé une nouvelle forme. On lui donne sa position, sa rotation aléatoire.

On fait la forme polygone avec box2D : sa densité, la section, la restitution.

Et c’est là, on créé un nouveau carré starling : sa taille, la rotation, son pivot de départ.

Et on l’affecte à body.

C’est une info très importante, c’est à dire que l’on utilise un objet starling.display au lieu d’un display objet ou d’un sprite de flash.

On le passe à notre forme box2D et donc box2D va utiliser la puissance du GPU avec le flash Player 11.

Ensuite, on affiche notre forme tout simplement le compteur de FPS.

Je vous l’expliquer dans un instant.

Sur chaque frame, on met notre monde en mouvement.

On met à jour, on parcourt toutes les formes de notre monde et on met à jour la position et la rotation.

Pareil, là également on teste s’il existe des objets starling et on leur applique les lois physiques avec box2D.

On récupère notre objet starling, on le cast comme un Display objet. Et après on change sa position, sa rotation.

Puis, on met à jour notre monde globale, ça c’est notre monde box2D avec des formes qui vont tomber du ciel et s’entrechoquer.

Avec le test de collision, on a créé un petit compteur de FPS.

Je vais vous montrer ça tout de suite.

Sa particularité, c’est qu’il utilise la puissance du GPU pour se mettre à jour.

Dans les précédents cours sur straling framework, j’utilisais le compteur Hit Stats qui est le compteur classique pour vérifier les performances d’une application flash.

Là on va créer notre compteur de FPS qui lui va utiliser la puissance du GPU donc votre carte graphique.

Et il ne va pas utiliser beaucoup de ressources. Le truc c’est que au moment de création de l’image donc on passe par un fichier png.

C’est-à-dire qu’on utilise des bitmap font générator.

Dans le cours sur les polices embarquées embed, je vous ai expliqué comment ça fonctionne. Je vais aller très vite.

Pour limiter la taille de l’image PNG générée, on va sélectionner uniquement les caractères qui nous intéressent donc FPS, puis ce sont les chiffres qui nous intéressent.

J’étais dans notre image FPS et l’espace qu’il y a là, et également le point, et donc là vous faites juste option save bitmap font.

Vous enregistrez votre image. Si on regarde l’image, vous voyez qu’il y a uniquement que les caractères nécessaires.

On va utiliser notre compteur FPS c’est tout y a besoin, rien d’autre.

Comme ça notre image, si on regarde la taille elle fait uniquement 4 ko donc c’est vraiment très faible. Cela limite l’utilisation de la taille de notre application etc.

Donc on la charge comme d’habitude. On charge le fichier XML, FNT.

Et là c’est exactement comme le cours sur starling ça n’a pas changé !

C’est à dire comme d’habitude, on créée notre bitmap, notre fichier XML.

On enregistre la police bitmap pour la rendre disponible dans les textes.

On créé notre objet textfield avec le nom de la police.

Si vous regardez, le nom correspond au nom qu’il y a dans le fichier XML.

Tout simplement chicken c’est le nom de la police j’ai choisis avec les coordonnées de chaque lettre.

Chaque lettre et chiffre évidemment. Pour chaque caractère, on définit sa taille à la taille native.

Quand on utilise bitmap font creator, on définit une taille de police.

Là on utilisera la taille native, cela évite les déformations vu que c’est des images que l’on utilise. Ca évite les scale, les déformations couleur noires.

On affiche le texte sur notre scène.

Sur chaque image par seconde, on calcul le nombre de FPS.

C’est des exemples du livre de Thibault Imbert que je reprends.

C’est son calcul pour afficher le nombre de frame par secondes écoulées avec un get timer.

La dernière prise du get timer et puis la prochaine celle de maintenant la dernière.

Là maintenant, on fait un petit delta, on calcul et on affiche le nombre de FPS tout simplement.

C’est à dire que sur cette application, à la fois, on utilise box2D donc la détection avancée des collisions.

Et notre compteur de FPS qui lui profite des nouvelles performances du flash Player 11 avec un calcul du rendu et donc par le GPU.

Donc forcément les caractères affichés du FPS proviennent d’une image PNG que l’on a ici.

Il ne reste plus qu’à lancer la compilation et à voir le résultat dans une page HTML de notre application starling box2D.

C’est-à-dire que ici, là cette partie, c’est la partie qui penche donc c’est le sol de notre application.

Là le FPS vous voyez il est très faible, mon PC rame mais je n’y peu pas grand-chose.

Et donc vous voyez les détections de collision.

Je vais recharger la page et vous allez voir le compteur de FPS qui est très très faible.

Et les éléments tomber un par un sur le sol avec une détection des collisions avancées.

Le chargement est en cours. Le flash va s’afficher donc ça permet de voir l’application tourner au ralenti.

Notre compteur de FPS qui se met à jour tout le temps et là le sol que vous voyez ici.

Le sol, là détection de collision et les éléments qui vont tomber.

Bon cette application fondamentalement elle ne sert pas à grand chose mais si vous souhaitez réutiliser le framework box2D ben vous avez quelque pistes.

Comment affecter des Display Objects starling à vos formes box2D et vous pouvez même réutiliser la classe FPS dans d’autres applications dans des applications flash classiques.

Comme ça vous n’utiliserez que très très peu de ressources donc je vous l’ai bien noté les lignes clefs.

C’est ici la ligne importante quand on récupérera quand on teste si notre forme est un display objets starling.

Et au moment de la création de notre monde, c’est quand on affecte un Display Objects starling à notre monde à une forme starling tout simplement.

Et le compteur de FPS qui finalement, vous pouvez rajouter l’utilisation mémoire comme Ie restart, il suffit de finalement copier coller le code.

Et vous avez votre texte oTtxt.txt à mettre à jour.

Il n’y a rien de très compliqué, je vous fournirais la classe.

Je la ferais dans quelque temps et puis je vous mettrez l’équivalent de restart avec starling.

C’est valable ce type de classe FPS lorsque vous utilisez le framework starling dans votre application sinon ça n’a pas grand intérêt.

Comme d’habitude vous trouverez l’ensemble du code source de ce cours actionscript en téléchargement sous cette vidéo.

Comme ça vous aurez un exemple prêt à l’utilisation un modèle pour réutiliser dans vos applications.

Puis je serais curieux de savoir comment vous utilisez starling framework dans vos applications flash ? dans vos jeux flash ?

Quelles sont les performances que cela vous a apporté en termes de FPS, d’utilisation mémoire ?

Comment vous combinez donc l’utilisation du starling framework et de vos autres framework comme pixlib ou pureMVC par exemple ?

Partagez tout cela dans dans les commentaires sous cette vidéo et je vous dis à très bientôt pour le prochain cours sur actionsript-facile.com

[/spoiler]

Version démonstration

Et voici notre application implémentant le Framework Box2D avec Starling Framework.

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’exemple Box2D 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 avec Box2D”

ex-starling6-box2d-fps.zip – Téléchargé 908 fois – 792,16 Ko

Le site Box2D Flash AS3 pour télécharger la dernière version.

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é 13331 fois – 8,90 Mo

Dans quelles types d’applications flash avez-vous implémenté Starling Framework ?

Partagez votre retour d’expérience Starling Framework dans les commentaires ci-dessous.

Les fonctions Tween et Dessin avec Starling Framework

Commentaires fermés sur Les fonctions Tween et Dessin avec Starling Framework

Ecrit le 25 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 2D

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 concerne l’utilisation des fonctionnalités de dessins et également la gestion des Tweens avec Starling Framework.

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.

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 dessiner avec Starling Framework.
Comment charger vos éléments (images, fonts) dynamiquement et les utiliser avec Starling Framework.
Et comment implémenter les classes Starling dans votre code ActionScript.
Comment implémenter plusieurs fonctionnalités simultanément avec Starling Framework. Par exemple, en appliquant un effet de Tween alpha sur une image chargée dynamiquement.

Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.

Cette formation ActionScript vous permettra d’ajouter le dynamisme des Tweens à vos applications flash.

De plus, vous serez capable de charger des éléments dynamiquement pour rendre vos jeux flash plus modulaires et personnalisables simplement.

Tweens et Drawing avec Starling Framework

[spoiler]

Bonjour à tous et bienvenue sur actionscript-facile.com

Dans ce 5eme cours sur le framework starling, nous allons voir comment utiliser des tweens, des outils de dessin et le chargement dynamiques de vos images de polices de caractères, avec starling dans votre application flash AS3.

Qu’est-ce que le framework starling ?

Pour une présentation complète et détaillée je vous renvoie à la toute 1ere vidéos de cours pour en apprendre plus.

Le Framework starling, en résumé, c’est une librairie en pure AS3.

Cela permet à votre application flash en 2D, pour le rendu, d’utiliser directement le GPU, donc la carte graphique de votre ordinateur.

Et d’avoir des performances de rendu incomparable par rapport aux anciennes versions du player flash.

L’API de starling framework, comme vous l’avez vu, est très familière, pour un apprentissage rapide.

En fait il suffit d’échanger les classes natives de flash avec leur équivalence dans les classes natives donc display objet, Sprite, movie clip etc. etc.

Dans ce tutoriel actionscript, nous allons voir plusieurs exemples pratiques.

Ces exemples sont tirés du livre sur starling framework de Thibault Imbert que vous trouverez en téléchargement sous cet tutoriel.

C’est un livre en anglais très bien fait.

Il y aura également d’autres cours AS3 consacré à ce framework.

Nous allons, à travers plusieurs exemples, utiliser des tween sur des objets starling, le chargement dynamique d’éléments graphiques et un outil de dessin très pratique avec straling.

Passons tout de suite à la pratique.

Comme d’habitude, notre classe main étend Sprite , le sprite de flash. Display.

Nos paramètres de compilation : pensez à rajouter default framerate si vous voulez les l’augmenter, tout en sachant que vous pouvez le configurer d’ici c’est plus simple.

Par contre n’oubliez pas de rajouter ce paramètre de compilation pour activer stage 3D avec le flash Player 11.

Dans vos paramètres de compilation, n’oubliez pas d’utiliser Player globale version 11. SWC, qui est bien évidemment en téléchargement sous ce tutoriel vidéo.

Et également, dans votre fichier index.html, pensez à rajouter Wmode = direct, ça permet d’activer stage3D et l’accélération du GPU.

Sinon en dehors de ça, un on créé une nouvelle instance de starling en activant

l’anti crénelage, le multitouche pour un smartphone.

Et on démarre game.

Qu’est-ce qu’on va faire ?

On va apprendre à manipuler les outils dessins.

C’est-à-dire on a une image et on veut la laisser affichée à l’écran .

A chaque fois que l’on appuie enfin, quand on laisse appuyer, par exemple, on peut le faire pour simuler un déplacement d’images sur un smartphone.

Un déplacement d’un objet et là on va prendre une image.

C’est une gomme, on l’a récupérée avec sa classe.

On a notre rendu de texture. Comme d’habitude, ça ne change pas, on créé un bitmap à partir notre image.

On créé les textures à partir de notre image.

Et on créé notre image avec la texture.

Tout ça, on l’a déjà vu plusieurs fois, c’est simple.

On déplace le point d’origine 0 ;0.

J’ai rajouté l’activation du smooting pour lisser l’image parce que je la redimensionne.

Juste en dessous, en faisant un scale.

Dans la moitié on créé notre zone de dessin.

Toute la taille de la scène et ensuite on créé notre canevas.

C’est-à-dire dans cette zone de dessin, on pourra dessiner.

On affecte la texture de rendu à une image et on ajoute le canevas sur la scène.

Ensuite, on écoute les événements de la souris ou du doigt.

Quand l’utilisateur appuie sur l’écran avec son doigt ou ses doigts, en multitouches on lance cette fonction.

On l’a déjà vu c’est-à-dire qu’on récupère les coordonnées des doigts dans un tableau.

On parcourt ce tableau et si c’est cliqué ou touché l’écran.

On dessines, sinon on fait rien.

Là on récupère la position de chaque doigts.

On positionne le pinceau, donc notre image pour dessiner.

Et après on dessine dans le canevas.

C’est vraiment tout simple.

Je vais recompiler l’application pour vous montrer le résultat.

Vous avez votre scène vide.

Si j’appuie sur la gomme, si je laisse appuyé sur la gomme qui reste appuyée en déplacement.

En relâchement, on pourrai rajouter d’effacer tout l’écran et laisser la dernière position de la gomme.

C’est simple à faire, je recharge, je vais simuler le multitouches en appuyant sur la touche contrôle.

J’appuie sur la touche contrôle et vous voyez 2 gommes en même temps recharger la page.

J’appuie sur la touche contrôle une fois.

Un petit outil de dessin à travailler voilà.

Cela vous laisse plusieurs possibilités dans un jeu pour faire le glisser déplacer etc. etc.

Maintenant, nous allons voir l’utilisation des tween avec le Framework starling.

C’est également assez simple qu’est ce qu’on fait ?

On récupère une police de caractère donc un fichier TTF qui contient notre polices de caractères.

Si on regarde ici, dans font on a angelina.ttf dans asset, on avait la gomme.

On attend l’initialisation de la scène.

On créé une nouvelle instance de notre police.

On créé un textField, comme le cours sur la création de deux polices embarquée.

Et on positionne notre texte sur la scène.

Ensuite, on affiche le texte et c’est là où on créé une tween.

On créé une tween, on précise le texte, enfin l’objet à ajouter sur une durée de quatre secondes.

Et on fait une transition de isInOut pour simuler un rebondissement.

Il y a plusieurs types de tween.

Vous les avez toutes là.

Vous pouvez très facilement les changer.

Par exemple on va prendre ça, l’objet tween.

Si vous avez déjà utilisé des tween classique qu’on peut faire ?

Tous ces changements d’alpha sur le texte.

Ca c’est pour bouger le ciel donc le rétrécir.

Vous avez plusieurs paramètres : vous pouvez jouer avec sous forme de tween.

On indique la destination de l’objet.

On va le déplacer vers le bas pour jouer sur la transparence alpha.

Par exemple, si on avait mit une image ici, on aurait pu jouer sur son alpha.

Ensuite, on écoute tous les événements diffusés par la tween.

Donc start quand elle démarre.

OnUpdate : c’est la progression quand elle est mise à jour.

OnComplete : quand elle est terminée.

Pour lancer la tween, il nous suffit juste de l’ajouter à starling.

La tween se lancera.

On a nos fonctions écouteur d’événements.

Appel par l’objet tween tout simplement.

Les trois c’est pareil.

J’ai rajouté un petit debug.

Après, vous pouvez enchaîner avec une deuxième tween etc. etc. une animation enfin n’importe.

J’ai mis du debug comme ça on verra le résultat dans monster debugger.

Une tween rien de bien compliqué, je lance la compilation et on va voir le résultat dans le debugger et directement à l’écran.

Je recharge ma page et vous allez voir le texte se déplacer avec une tween.

Voilà, le texte s’est déplacé normalement c’est un peu plus fluide mais bon ça c’est mon pc.

Je recharge une dernière fois et vous voyez le texte là qui se déplace.

Si on regarde le debug, nous avons bien notre debug.

C’est-à-dire mon chargement enfin application initialisée, la tween démarre et ensuite progression de la tween.

Elle est complétée.

Vous avez la possibilité d’enchaîner sur d’autres actions en fonction de ce que vous souhaitez écouter de la tween.

Nous allons voir le dernier thème de ce cours.

On a utilisé des ressources embarquées dans nos applications flash donc évidemment ça grossit le SWF final.

Il faut savoir qu’avec starling, c’est tout à fait possible de charger dynamiquement nos images, nos polices de caractères…

Le chargement dynamique permet d’alléger votre SWF et de charger les éléments uniquement quand l’utilisateur est sur l’interface concerné. Donc quand c’est nécessaire.

Pour cela, on crée un objet Loader classique.

On écoute les événements complete et error.

Et on charge une image. Une image qui est sur le site actionscript-facile.

Ensuite on écoute.

En cas d’erreur, ça c’est appelé par l’objet.

Je vais le rajouter appel par l’objet Loader.

Voilà et pareil ici.

Une fois que notre image est chargée, on récupère l’objet bimap.

Puisque c’est une image, quand ce sera une police on récupérera l’objet police.

Donc e.currentTarget.content as bitmap et après classique ça revient comme on l’avait vu tout à l’heure.

Une fois qu’on a récupéré notre bitmap, il nous reste plus qu’à faire un petit peu ce qu’on veut derrière.

Qu’est ce qu’on fait ?

On récupère notre bitmap, on créé notre texture puis on créé notre objet image et on l’affiche.

Vous pouvez faire ça pour vos jeux vidéo.

Vous chargez les graphismes en fonction du niveau où le joueur se situe.

Libre à vous de charger uniquement les éléments du niveau, les éléments du niveau 2.

Ca fait d’accord une petite barre de chargement mais au moins au premier chargement du SWF il sera super léger.

Il contiendra uniquement votre algorithme de calcul.

Il nous reste plus qu’à compiler et on va voir le résultat du chargement directement à l’écran.

Je vais recharger la page et vous allez voir le SWF sera vide dont il sera blanc et l’image va se charger.

L’image se charge et s’affiche.

Je refais elle s’affiche avec starling donc elle se charge et elle s’affiche.

On peut même rajouter un petit effet de tween alpha dessus.

Je vais le faire tout de suite et je vais recompiler.

Qu’est-ce que je fais ?

Comme je vous le disais, après une fois que l’image est chargée on la récupère.

Ca fonctionne exactement comme les autres exemples que je vous ai montré.

On créé notre objet tween sur l’image sur une durée de 6 secondes.

On fera une transition EasyOutElastic, on joue sur la transparence alpha et on l’ajoute à start.

Pour démarrer la tween rien de plus : là j’écoute.

Aucun événement diffusé par la tween.

J’en ai pas besoin c’est juste un exemple pratique.

Une fois que l’animation est chargée donc je recharge et vous allez voir l’image charger dynamiquement et après elle subi une tween sur son effet alpha.

Voilà, je recharge pour vous montrer une autre fois.

L’image est chargée dynamiquement et après elle subi une tween de six secondes sur son alpha.

On a vu plusieurs solutions d’utilisation des nouvelles fonctionnalités starling : les tween, le dessin, le chargement dynamique des assets.

Sous cette vidéo, vous pourrez télécharger le code source complet des différents exemples.

N’hésitez pas à poser vos questions sur le Framework Starling dans la zone commentaire sous cette vidéo.

Vous pouvez aussi partager vos liens vers les applications que vous avez créé qui utilise ce framework.

Je vous dis à très bientôt sur actionscript-facile.com pour le prochain cours sur Sarling framework.

[/spoiler]

Version démonstration

Ci-dessous plusieurs exemples d’utilisations de dessins, Tweens et chargements dynamiques avec Starling Framework.

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

Appuyez sur l’écran avec le clique gauche de la souris pour commencer à dessiner. Maintenez le bouton « Ctrl » du clavier enfoncé pour simuler le multi-touches des smartphones.

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 Tween - Dessin”

ex-starling5-dynamic-assets-tween.zip – Téléchargé 801 fois – 828,39 Ko

Consulter le code source directement sur GitHub.

Le Site Officiel de 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é 13331 fois – 8,90 Mo

Dans quelles types d’applications flash avez-vous implémenté Starling Framework ?

Postez votre retour d’expérience Starling Framework dans les commentaires ci-dessous.

Ou utilisez-vous un Framework concurrent, équivalent ou fait maison ?

Formation ActionScript Flash gratuite

Commentaires fermés sur Formation ActionScript Flash gratuite

Ecrit le 24 mai par Matthieu
Publié dans le(s) sujet(s) ActionScript 3 |Adobe Flash

Pendant les prochains jours, bénéficiez d’une formation actionscript gratuite en vidéos sur www.formation-actionscript.com

Vous pouvez même poser vos questions techniques directement au formateur.

Téléchargez le code source du Player AS3 Formation, développé avec le Framework Pixlib 3.0

Pendant une semaine, plusieurs vidéos gratuites dédiées à la programmation actionscript sont disponibles.

Venez les consulter sur www.formation-actionscript.com.

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : formation actionscript

Cours ActionScript 3 ‘formation actionscript’

Les Composants AS3 Facile

Version démonstration

Télécharger le code source du cours AS3

Montrez moi vos applications flash qui utilisent les Composants AS3 Facile ?

Utilisez-vous d’autres astuces pour vos tests de code AS3 ?

1 – Évitez les multiplications dans les boucles

Mauvaise version

Version correcte

2 – Le Casting

Mauvaise version

Versions correctes

3 – Réutilisez les instances créées

Mauvaise version

Version correcte

4 – L’appel de fonction

5 – Le typage

Mauvaise version

Version correcte

6 – Déclaration de variables

Mauvaise version

Version correcte

7 – Boucle For

Mauvaise version

Version correcte

8 – Optimisation des multiplications

Mauvaise version

Version optimisée

9 – Les constantes des autres classes

Mauvaise version

Version correcte

10 – Les opérateurs sur les bits

Mauvaise version

Version optimisée

11 – Utilisez des Vector à la place des Array

Version Array non optimisée

Version équivalent avec Vector

Pour aller plus loin dans l’optimisation ActionScript 3

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

Étape 1 : Analyse du Projet

Étape 2 : Étude Technique

Étape 3 : Diagramme de Classes

Étape 4 : La Programmation

Étape 5 : La Phase de Tests

Étape 6 : La Livraison

Et vous, comment procédez-vous pour développer vos applications flash ?

Utilisation de Out.as

Adapter Out.as à vos projets

Exemple de personnalisation de Out.as

Télécharger le code source de Out.as

Box2D et Compteur FPS avec Starling Framework

Version démonstration

Télécharger le code source du cours AS3

Dans quelles types d’applications flash avez-vous implémenté Starling Framework ?

Tweens et Drawing avec Starling Framework

Version démonstration

Télécharger le code source du cours AS3

Dans quelles types d’applications flash avez-vous implémenté Starling Framework ?

Cours Récents

Liens / Partenaires