A la découverte des ByteArray
7th novembre, 2009 par Arno
Voilà un petit moment qu’on en entend parler et malgré avoir lu pas mal d’articles (majoritairement sur le site d’Adobe) que ce soit sur Flex ou sur AIR, je n’ai jamais trouvé la motivation et/ou l’idée d’application pouvant me permettre de me lancer et tenter l’expérience RIA à proprement parler.
Il y a 2 semaines une petite éclaircie dans nos projets m’a permis de me dégager suffisament de temps pour faire deux petites démos AIR. La première, une application interne permettant aux membres de l’équipe de prod’ de CBi de remplir leurs taches journalières dans l’intranet tandis que la seconde m’a permis de me faire une première approche de l’API spécifique apportée par AIR (accès au système de fichier…).
La seconde application se présente plus comme une distraction avec la découverte des byteArray dans leur ensemble et des spécifications du format SWF. L’idée de départ était de récupérer le byteArray d’un fichier SWF, d’en parser chaque byte jusqu’à ce que mort s’en suive, et c’est le format SWF qui a eu raison de ma curiosité (temporairement tout du moins).
Comme la documentation AS3 le dit si bien : La classe ByteArray comporte des méthodes et des propriétés permettant d’optimiser la lecture, l’écriture et la manipulation des données binaires. Dans l’idée ce tableau de données est spécifique à chaque format de fichier, d’où la spécification de chacun des formats, ce qui ouvre comme perspective de pouvoir jouer avec tout un tas de type fichier tel que les pdf (AlivePDF par Thibault Imbert aka Dieu sur terre).
Avant tout, afin de bien comprendre le contenu des ByteArray refaisons un point rapide sur ces histoires d’octets, bytes et bits, leurs différences ainsi que leurs liens. Le bit est un chiffre binaire : basiquement 0 ou 1, son exploitation se fait au niveau machine (soit “très” bas niveau). On peut facilement confondre les bytes et les bits - vu que pour nous, pauvres francais, les deux se prononcent de la même manière - mais non, le byte est un ensemble de bits, il peut aussi bien être constituer de 6 bits comme il peut en être constitué de 9. L’octet, quant à lui, peut être assimilé à un byte dont la taille est fixe et est de 8 bits (comme son nom l’indique). Pour résumé et avoir une explication un peu plus visuelle :
Bit, Byte, Octet
Donc avec un peu d’imagination, on peut en déduire que les ByteArray sont des tableaux de bytes (je sais… je me suis donné là). Il s’agit donc d’ensembles de bits à tailles variables. Ce schéma permet d’illustrer l’idée :
ByteArray
Voilà à partir de maintenant, il ne nous reste plus qu’à cibler le format que l’on souhaite pouvoir interpréter, récupérer ses spécifications et prendre le temps d’en parser chaque byte. Les spécifications peuvent être vu comme un tableau d’équivalence c’est-à-dire qu’il nous indiquera ce que chaque byte signifie. Pour la petite application AIR, je me suis intéressé au format SWF donc premier réflex : récupérer et lire la spécification du format. Avec les différentes versions de Flash sont apparues autant de versions du format SWF et donc de spécifications, histoire de faire genre (et accessoirement parce qu’il s’agit de la version en cours) j’ai donc récupérer les spec’ du format SWF dans sa version 10, celles-ci sont disponibles gratuitement sur le site d’Adobe (lien direct).
Je n’ai, pour ainsi dire, aucune expérience dans ce genre de travaux, ni même dans ce genre de lectures, mais en tant que noob j’aurais tendance à penser que les informations proposées sont amplement suffisantes même pour débuter, le document est bien structurer et bien qu’il soit écrit en anglais, celà reste très clair. Alors attention, je parle en tant que développeur, celà reste du document très spécifique et je ne le conseillerais pas en lecture de chevet à n’importe qui, mais si vous êtes technique curieux et que vous avez un peu de temps à perdre, vous y trouverez l’information souhaitée.
Revenons-en plus particulièrement au petit applicatif que je vais présenter. Celui-ci va nous permettre de lire les informations contenues dans les headers du swf. Ces headers seront systématiquement présent au début du byteArray d’un fichier SWF, il s’agit d’informations qui lui sont spécifiques. Si l’on suit les spécifications (page 25), il y a 8 champs à lire pour ces headers :
- 3 de signatures (permettra de savoir si il s’agit d’un SWF ou un SWC)
- 1 de version du flash player
- 1 champs indiquant la taille totale du fichier en bytes (après décompression si compression il y a)
- 1 permettant de connaitre les dimensions du SWF
- 1 pour le frameRate
- Et 1 pour le nombre de frame totale contenu dans le SWF
Dans les spécifications chacun de ces champs sont caractérisés par : un nom, un type (qui détermine vulgairement la taille de l’ensemble) et une description (histoire quand même de nous aider à comprendre ce qu’on récupère).
Documentation des bytes à récupérer
Chaque type est décrit plus en détails au chapitre 1 (page 11) des spec’, et pour chacun de ces types on retrouve des méthodes dans la classe ByteArray qui nous permette de les manipuler (lecture ou ecriture). Prenons l’exemple du type UI8 - Unsigned 8-bit integer - il s’agit du type de nos 4 premiers champs, la méthode à utiliser afin de lire leur contenu est readUnsignedByte(), cette méthode revoi une valeur située entre 0 et 255 soit, si l’on se sépare de la base 10 et qu’on passe en base 16 (c’est-à-dire en hexadécimal) on récupère donc des valeurs comprises entre 0×00 et 0xff. Afin de pouvoir interpréter ces valeurs, nous trouverons des valeurs témoins dans les spécifications.
Apercu de l'application
Après quelques bonnes heures de réflexion et d’appréhension de nouvelles notions j’ai fini par trouver le moyen de récupérer la totalité des informations comprises dans les headers - enfin presque la totalité car je dois reconnaitre que je me suis casser les dents sur les dimensions et le parsing du type Rect. Cependant en téléchargeant et testant l’application vous vous rendrez compte que ces informations sont présentes. Je tiens à remercier Julien LAURENT, un collègue ayant bosser dans le monde du jeux-vidéo avant de venir se perdre dans le multimédia et le développement de cd-rom chez CBi, avec qui j’ai l’occasion d’échanger sur des réflexions de développement et bien que ces échanges soient encore trop peu fréquent malheuresement, je dois reconnaitre qu’ils sont toujours très constructifs. Et c’est à lui qu’on doit le parsing du type Rectangle et la récupération des dimensions.
Télécharger et tester l’application AIR
Si j’ai du temps, il se pourrait que je poursuive cette classe afin de permettre de récupérer le plus d’informations possibles,c’est toujours très instructif. Pour d’avantages d’informations sur le fonctionnement même de l’application, n’hésitez pas à me faire des retours et ce sera avec plaisir que je reposterais.
Peindre avec des ribbons en flash
4th juin, 2009 par Floz
J’ai commencé à me mettre sérieusement à flash après avoir vu une conférence d’Erik Natzke lors de l’édition 2007 du web flash festival au centre george pompidou. Et depuis ce moment, j’ai toujours bavé sur ses réalisations, et le fait de pouvoir créer une toile via du code.
Depuis une semaine je me suis mis à réfléchir et travailler sur : comment reproduire ces brushes en forme de rubans (ribbons) ?
Je viens d’arriver à un résultat assez stable et plutôt convaincant, même si ce n’est qu’un début. Et ça m’a fait bosser de nouveau sur quelques formules trigonométriques 
La difficulté principale de l’exercice était de dessiner à chaque fois un quadrilatère dont la taille et variable. Et ce n’est pas forcément un rectangle, il fallait donc non pas passer par la méthode drawRect(), mais par les bons vieux lineTo.
Étant donné que le tracé sera en fonction de la position p1, puis p2 de la souris, il nous faut récupérer l’angle d’inclinaison de ce segment, et l’appliquer à chaque point du quadrilatère.
Dis comme ça, ça doit sembler assez fouilli, donc passons par des exemples :
Tracer d’un segment d’après un angle.
Cette première expérience avait pour but de comprendre comment tracer un segment, d’après un angle et une distance (rayon). Autrement dit, d’appliquer une rotation à un point.
La formule le permettant est la suivante :
p.x = rayon * cos( angle en radian );
p.y = rayon * sin( angle en radian );
Pour récupérer un angle en fonction d’une trajectoire donnée, en flash, on passe par Math.atan2( y, x ).
atan2 correspond à arctan. La méthode se base sur le point d’origine (0, 0 ).
This movie requires Flash Player 9
Télécharger le .fla (CS3)
Accéder au fichier .as
Appliquer une rotation à un rectangle en appliquant une rotation à chacun de ses points.
Ma seconde expérience se porta sur la rotation d’un rectangle entier, autrement dit de ses 4 points.
Au passage, je suis tombé sur une seconde formule, beaucoup plus bavarde, pour appliquer une rotation a un point :
p.x = cos( angle en radians ) * pointToRotate.x - sin( angle en radians ) * pointToRotate.y;
p.y = sin( angle en radians ) * pointToRotate.x + cos( angle en radiants ) * pointToRotate.y;
On préfèrera donc la première, hein
A chaque clic sur la scène, la valeur de l’angle à ajouter à l’angle de base sera incrémenté de 10. Ainsi, le rectangle à gauche (angle = 0), deviendra celui de droite a chaque clic.
Dans l’idée d’un point A( x, y ), on aurait donc :
x = rayon * Math.cos( Math.atan2( ya, xa ) + ( 10 * n ) * Math.PI / 180;
y = rayon * Math.sin( Math.atan2( ya, xa ) + ( 10 * n ) * Math.PI / 180;
This movie requires Flash Player 9
Télécharger le .fla (CS3)
Accéder au fichier .as
Combinaison des deux premières expériences.
Bon, à l’époque j’avais pas encore totalement assimilé les deux premières étapes, ni les formules. Du coup, je suis passé par une étape supplémentaire qui correspond à combinaison des deux premières : on trace un segment, et le rectangle se calque dessus.
This movie requires Flash Player 9
Télécharger le .fla (CS3)
Accéder au fichier .as
L’application dans un enterFrame.
Étant donné qu’à ce moment là, j’avais tout pour que ça fonctionne, j’ai commencé à exporter l’ensemble dans un enterFrame.
This movie requires Flash Player 9
Télécharger le .fla (CS3)
Accéder au fichier .as
La même chose, en reliant chaque quadrilatère.
This movie requires Flash Player 9
Télécharger le .fla (CS3)
Accéder au fichier .as
Actuellement, je suis en train de bosser sur une version plus évoluée de tout ce que je viens de montrer.
J’ai commencé à porter le tout en orienté objet, ça commence à s’organiser petit à petit. Le but étant de développer une structure évolutive, ou l’on peut rajouter des brushs etc. Et pourquoi pas développer une petite appli permettant de s’en servir plus aisément (combien de ribbons, quelles couleurs, quelles valeurs d’alphas…).
Bref, à suivre.
Pour le moment, ça donne ceci (Flash Player 10 requis) :
This movie requires Flash Player 9
Théoriquement c’est débuggé, mais si vous avez des soucis avec, n’hésitez pas à me les remonter dans les commentaires !
Passer par des LinkedList pour gagner en performances
30th mai, 2009 par Floz
En ce moment, je passe pas mal de temps à feuilleter le wiki de Joa Ebert, afin de gagner en propreté de code et en performances. Dans son wiki, il y est question de LinkedList ainsi que de Pool.
En lisant l’exemple, je ne comprenais pas vraiment à quoi cela pouvait il servir (même si, sur le papier ça avait l’air cool), ni comment s’en servir…
Puis j’ai commencé à m’y intéressé plus sérieusement et à utiliser une LinkedList en partiel de Flash.
Il nous était demandé de faire un equalizer, et j’ai choisis de jouer avec du BitmapData et des modifications de pixels. En gros, une boucle plus ou moins grosse en enterFrame à manipuler.
Sachant que les LinkedList permettent de gagner en performances car :
- Passer par ce type de structures permet de stocker des objets plus rapidement,
- Itérer au sein d’une LinkedList est plus rapide que d’itérer un tableau ou autre (ce n’est plus le cas avec le FlashPlayer 10 et les Vector typé et fixes ? cf. Away3D)
Je me suis dis que c’était le moment d’essayer. Le résultat :
This movie requires Flash Player 9
Cliquez pour lancer l’anim. Recliquer pour la stopper. Sachant que le swf fait 1mo (il transporte le mp3 - Boards of Canada : Diving Station).
Bref, le rendu me plait bien, et c’est fluide. Même s’il n’y a que 256 pixels par secondes à 30FPS. Vous pouvez télécharger les sources en cliquant ici.
Bossant sur un projet en parallèle, je commencais à réfléchir en terme de réorganisation de code. Et c’est là que j’en suis revenu à ces histoires de Pool (j’en parlerai dans un autre post, je n’ai pas encore assez fouillé là dessus) et de LinkedList.
Du coup, je me suis dis que j’allais tenter de les utiliser au sein de mon effet de désintégration.
Résultat avec l’ancienne version :
This movie requires Flash Player 9
Résultat avec la nouvelle version :
This movie requires Flash Player 9
En fonction des pcs, les différences de résultat est plus ou moins flagrant.
Les performances sont gagnées sur le fait qu’on ne passe plus par des tableaux, et que la manipulation performante au final. Cool
Bon c’est bien tout ça, mais à quoi ça ressemble une LinkedList ? Je vous invite à regarder l’explication de Joa Ebert.
Puis, pour prendre mon equalizer comme exemple, ça donne :
En l’occurence, j’ai crée un objet Particle, qui correspond à des pixels de mon bitmapdata/equalizer :
package
{
public class Particle
{
public var px:Number = 0;
public var py:Number = 0;
public var next:Particle;
}
}
Une méthode d’instanciation de tous les objets de la LinkedList :
private function createParticles():void
{
// _particles sera la variable de référence de la LinkedList.
_particles = new Particle();
var currentParticle:Particle = _particles;
var numParticles:int = NUM_PARTICLES;
while ( --numParticles != 0 )
currentParticle = currentParticle.next = new Particle();
}
Un exemple d’itération au sein d’une LinkedList :
private function setParticlesPositions():void
{
// Comme je le disais précédemment : on crée une variable dans laquelle on stocke notre objet de référence de la LinkedList (notre point de départ, en quelque sorte).
var particle:Particle = _particles;
var px:Number = stage.stageWidth * .5;
var py:Number = stage.stageHeight * .5;
while ( particle )
{
particle.px = px;
particle.py = py;
// On passe à l'élément suivant; jusqu'à ce qu'il n'y en ait plus.
particle = particle.next;
}
}
Joa Ebert en parle aussi ici avec un superbe exemple. Il disait qu’il s’en servait aussi dans son moteur de tween qui était, grâce à tout ça, plus performant que les Tweenlite ou Tweener.
Comment créer des projets en utilisant FlashDevelop ?
26th mai, 2009 par Floz
Premièrement, je vous invite à lire le premier article sur minuit4 traitant de FlashDevelop. Notamment si vous n’avez pas installé FlashDevelop. Vous y trouverez aussi quelques plugins sympa, que je vous conseille fortement.
L’introduction étant faite, regardons comment créer des projets avec FlashDevelop…
1) Sans passer par l’IDE Flash
FlashDevelop permet de créer des projets AS2/AS3, et donc de les compiler sous forme d’un SWF, sans passer par l’IDE Flash. Pour celà, il utilise le FlexSDK.
Ainsi, si l’utilisation de Flash n’est pas nécessaire (pas de gros graphisme, pas d’animation fait main), vous pouvez opter ce type de projet.
Commencons :
Lancez FlashDevelop et sélectionnez l’onglet Project, puis faites New Project -> AS3 Project.
Créer un nouveau projet sans passer par l'IDE Flash
Choississez le chemin de votre projet, un nom, puis valider. A droite, vous avez l’explorateur de votre projet. Le dossier “src” contient tous vos fichiers de code .as. Notez que vous devrez obligatoirement avoir la classe principale, le Main.as en l’occurence, de votre projet en “Always Compile” (clic droit sur le fichier, Always Compile).
Si vous avez correctement installé les Flash Player Debug, vous devriez être capable de récupérer les trace de votre projet. Si ce n’est pas le cas, clic droit sur le nom de votre projet dans l’explorateur de fichier et sélectionnez “Properties“. Ici, vous pouvez sélectionnez le PlayMode de votre SWF. Choisissez “PopUp“. Si rien vous ne recevez toujours pas les trace… Vérifiez que vous avez bien installé les versions debug du flash player.
Sélectionnez la manière dont seront lu les SWF
Félicitations ! Vous avez crée votre premier projet AS3 sans passer par l’IDE Flash
2) En passant par l’IDE Flash
Créez un nouveau projet mais cette fois sélectionnez Flash IDE Project. Répétez les manips précédentes pour initialiser le bouzin.
Pour ce tutorial, nous allons ajouter 3 dossiers à notre projet.
- src, qui contiendra les fichiers .as.
- fla, qui contiendra les fichiers .fla.
- bin, qui contiendra les fichiers .swf.
Pour les ajouter, clic droit sur le nom de votre projet dans l’explorateur.
Maintenant, lancez flash et créez un nouveau document AS3. Sauvez le dans le dossier fla et créez une classe Main.as dans votre dossier src. Si vous avez correctement effectuez ces manips, vous devriez avoir cette organisation là :
Le projet actuel vu sous FlashDevelop
Retournez dans l’IDE Flash et remplissez le champs “Classe du Document” du panneau Propriétés avec le nom de votre classe Main.as. Soit Main.
Pour tous vos projets, la syntaxe correcte sera : nom_dossier.nom_sous_dossier.nom_classe
Et n’ajoutez rien. Pas de .as, ni de… Rien.
Remplissez la Classe du document, classe mère de votre projet
Bon, c’est cool tout ça, mais actuellement Flash ne sait pas où aller cherchez vos fichiers .as s’ils ne sont pas à côté du .fla courant. On va donc l’aider à y voir plus clair. Cliquez sur le bouton “Paramètres” à droite de “Publier“.
Dans la nouvelle fenêtre, recliquez sur Paramètres, à droite de “Version d’ActionScript“.
Cliquez sur le bouton “+” pour ajouter les dossiers dans lesquels se trouvent vos fichiers .as. Ici, “../src“.
ActionScript 3 parameters
Note : Ici, je vous suggère de décocher la case “Déclarer automatiquement les occurences sur votre scène”. Ainsi, vous devrez renseigner chacune des instances d’objet, posez sur votre scène, dans la classe correspondante. Exemple, je pose sur ma scène un clip que je nomme “clip1“. Dans ma classe Main.as j’ajouterai : “public var clip1:MovieClip“, que je pourrais ainsi réutiliser avec l’autocomplétion.
Revenons à nos moutons.
Sauvegardez, et copiez le code suivant dans votre Main.as :
package
{
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main()
{
trace( "hello world !" );
}
}
}
Maintenant, compilez en appuyant sur ctrl+entrée sous Flash ou FlashDevelop.
Tout fonctionne, mais il nous manque quelque chose… A savoir, indiquer le bon chemin pour les fichiers .swf.
Pour celà, dans la fenêtre Propriétés de Flash, cliquez sur Paramètre -> Sélectionnez l’onglet Formats -> Remplissez le bon chemin pointant vers votre dossier bin.
Pendant vos développements orienté objet, vous pourriez avoir besoin de lier un objet de votre librairie à une classe. Cette partie est très utile, voire vitale pour l’organisation de vos boulots, donc suivez la bien.
Ajoutez un objet (ex : un MovieClip nommé Symbole1) à votre librarie, et faites un clic droit dessus. Cliquez sur “Liaison” dans le menu contextuel, puis choisissez un nom de class et un chemin pour votre Symbole 1. Vous suivrez encore une fois la syntaxe suivante : nom_dossier.nom_sous_dossier.nom_classe.
Lié un objet de votre librarie à une classe
Une fois cette démarche effectuée, ajoutez la classe correspondante dans le dossier src, et commencez à coder !
Ici, vous devriez être capable de faire des projets via FlashDevelop !
Je vous invite à aller voir le wiki pour plus de documentation sur le soft, notamment la partie des raccourcis de FlashDevelop, très très intéressante !
Guide d’installation de FlashDevelop
25th mai, 2009 par Floz
FlashDevelop est un IDE open source pour les projets en AS2/AS3. Il s’agit d’une des meilleures alernatives à l’IDE Flash, qui, autant le dire, est totalement naze sur le plan du développement. Notamment pour ce qui est de l’autocomplétion de ses propres classes/classes importées. Alors que FlashDevelop lui, déchire, comme Flex Builder ou FDT; mais gratuitement. Il possède en plus une bonne colloration synthaxique, ainsi que pas mal d’autres trucs de fou. Par contre, il n’est actuellement disponible que pour Windows. Si vous êtes sous mac, jetez un oeil à Flex Builder, qui va bientôt devenir Flash builder.
1) Comment installer FlashDevelop ?
Ici rien de compliqué. D’ailleurs, c’est expliqué plutôt clairement sur le forum officiel :
- Téléchargez la dernière version de FlashDevelop (actuellement 3.0.0 RC4) et installez le. Laissez les settings par défaut.
- Téléchargez la dernière version stable du Adoble Flex SDK (environ 100mo). Dézippez le où vous le voulez sur votre HDD. Mais souvenez vous de son emplacement…
- Si vous n’avez pas la machine virtuelle java, téléchargez la et installez la ou FlashDevelop ne se lancera pas.
Vérifiez ensuite que vous ayez bien d’installé les versions debug du flash player. Elles vous serviront à récupérer les traces et les erreurs lorsque vous ne passerez pas par l’IDE Flash pour compiler votre projet. Prenez donc Windows Flash Player 10 ActiveX control debugger (for IE) et the Windows Player 10 content debugger (pour Netscape blabla). Désinstallez les anciennes versions avant d’installer les nouvelles.
2) Quelle configuration pour FlashDevelop ?
Ici, vous devriez avoir réussi à installer FlashDevelop. Maintenant, configurons le afin de l’utiliser avec l’IDE de flash, ou sans l’IDE de flash.
Premièrement, cliquez sur l’onglet Tools.
Tools -> Program Settings
Tools -> Program Settings -> AS3Context.
Ensuite, remplissez le champs “Flex SDK Location” avec le chemin vers votre dossier FlexSDK que vous avez tout à l’heure dézippé.
FlashDevelop "Path to Flash IDE" and "Flex SDK Location"
Enfin, toujours dans Program Settings, sélectionnez l’onglet “ASCompletion” et cherchez la ligne “Path to Flash IDE“. Encore une fois, remplissez la avec le chemin vers votre version de Flash. CS3 ou CS4, peut importe, c’est selon ce que vous désirez.
3) Plugins ?
Pour vous simplifiez la vie durant vos phase de débug, je vous conseille de télécharger 2 plugins, tous deux écris par Jérôme Decoster :
- Trace plugin generator
- Duplicate plugin
En bas du premier post de chacune de ces pages se trouve les fichiers à téléchargez (pas les fichiers sources, mais le plugin en .fdz).
Lancez les et rebootez FlashDevelop.
En appuyant sur F10, vous devriez voir “Duplicate” et”Trace” à la fin de la liste.
Via le raccourcis Ctrl+0 sur n’importe quel terme que vous avez écrit, vous utiliserez le trace plugin.
Via le raccourcis Ctrl+alt+d, vous utiliserez le plugin duplicate. (ctrl+maj+d pour revenir en arrière).
Sweet hein ?
Maintenant, jetons un oeil sur comment utiliser FlashDevelop avec nos projets AS3.
Portfolio Floz et package minuit4
16th mai, 2009 par Floz
J’en parlais dans les posts précédents : la refonte de mon portfolio est aujourd’hui terminée; et celui ci est en ligne à l’adresse suivante : www.floz.fr. Ce fut ma première utilisation de SWFAddress pour un site concret, et je suis plutôt content de sa mise en place. La navigation gagne ainsi beaucoup en ergonomie.
Le diaporama du package minuit4 a servi pour le portfolio, afin de présenté les différents travaux. La classe SlidingDiaporama a d’ailleurs subit quelques modifications afin de résoudre quelques bugs mineurs. Son utilisation devrait être encore plus aisée dorénavant.
De même, j’ai utilisé les différents loaders du package, tout en corrigeant quelques petites choses. Je ferai, très prochainement, un post sur leur utilisation.
Pour conclure sur le package minuit4, Arno & moi avons revu complétement son architecture il y a quelques semaines. Les classes sont beaucoup plus organisées, les packages sont plus parlant, bref, une nouvelle organisation qui a du bon !
Effet de désintégration en AS3 via Bitmap et BitmapData
7th mai, 2009 par Floz
J’avais une petite idée de transition pendant le développement de mon portfolio floz.fr en as3. Cette idée m’était venu d’un travail de André Michelle, sur des effets d’explosion via des manipulations sur des objets BitmapData. Il utilise notamment les méthodes getPixel() et setPixel() de BitmapData au lieu de passer par des tweens et donc de sauver des performances.
En effet, dans mon effet de désintégration (pour le moment nommé “Rain” et “RainBack”), je manipule tous les pixels de l’image afin de les faire tomber. Une sorte de pluie de pixel :
This movie requires Flash Player 9
Sur des petites images, c’est fluide sans problème. Mais plus l’image sera grande, et plus les performances chuteront. Ainsi, l’effet est à utiliser avec plus ou moins de modération en fonction de l’image sur lequel on l’applique !
Les classes sont dispos sur le google code du package minuit4, et dans un .rar les contenant. Les classes sont fonctionnelles, mais sont encore sujettes à des modifications. Non pas dans leur fonctionnement en soit, mais plutôt dans l’instanciation. Je pense les réorienter vers un fonctionnement similaire à tweenlite. A suivre !
Un petit exemple d’utilisation :
import fr.minuit4.animation.rain.Rain; var r:Rain = new Rain( new Icone( 0, 0 ) ); // Icone correspond à un DisplayObject dispo dans la bibliothèque de flash. r.addEventListener( Event.COMPLETE, onComplete ); addChild( r ); r.start();
Et l’effet sur une image plus grosse, avec l’outil de contrôle des FPS du package minuit4 afin vérifier les performances de l’application. Cliquez sur la scène pour lancer l’effet.
This movie requires Flash Player 9
Grosse mise à jour au niveau des performances ici.
SWFAddress et SWFObject
27th avril, 2009 par Floz
Je viens de passer une bonne heure -voire deux- à me battre avec SWFAddress et SWFObject afin de les faire fonctionner correctement ensemble.
En guise de courte présentation, SWFAddress est une librairie qui permet de faire du deep-linking dans des sites présentant du contenu Flash ou Ajax. Autrement dit, de donner un lien à l’utilisateur pour accéder directement à un contenu spécifique. SWFObject, quand à lui, permet d’intégrer un swf à une page HTML en instanciant un object tout en donnant la possibilité de lui passer différents paramètres. A noter que dans le cas où l’internaute n’aurait pas le player flash adéquat, il sera rediriger vers un contenu alternatif. Celui ci servant aussi pour le référencement. En apprendre plus à propos de SWFObject via mediabox.
Travaillant actuellement sur le développement de mon portfolio, je me suis retrouver à un problème en combinant SWFAddress et SWFObject : le deeplinking fonctionne bien, mais l’historique, non. De même, lorsque le site est chargé, si l’on change l’url à la main, les modifications ne se font pas au sein du contenu.
Le code était :
<head>
<title>FLOZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/swfaddress.js" type="text/javascript"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.115", "expressInstall.swf");
</script>
</head>
La solution : attribuer un id au swf, afin que SWFAddress puisse interagir avec lui.
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/swfaddress.js" type="text/javascript"></script>
<script type="text/javascript">
var attributes = { id: "flash_id" };
swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.115", "expressInstall.swf", null, null, attributes);
Par ailleurs, l’ordre de déclaration des librairies js est importante : l’importation de swfaddress.js doit se faire APRÈS celle de swfobject.js et AVANT la déclaration du swf.
C’est le genre de truc qui nous fait perdre quelques heures bêtement quoi : )
Diaporama AS3 pour le package minuit4
18th avril, 2009 par Floz
Pendant ma semaine de vacances aux USA, j’ai développé un diaporama en as3 qui vient d’être ajouté au package minuit4. Les exemples ci dessous vous présenteront en réalité deux diaporamas, FadingDiaporama et SlidingDiaporama, qui héritent tous les deux de la classe Diaporama.as du package, mais qui proposent des transitions différentes entre les images.
This movie requires Flash Player 9
Un petit exemple d’utilisation :
import fr.minuit4.diaporama.types.SlidingDiaporama; var imgs:Array = [ ... ]; // Une liste d'images. var slidingDiaporama:SlidingDiaporama= new SlidingDiaporama( 400, 200 ); addChild( slidingDiaporama); slidingDiaporama.addImages( imgs );
Et c’est tout !
Si l’on veut ajouter une image par une image, il existe une méthode .addImage().
D’autres telles que .next() ou .previous() permettront de naviguer entre les images. La méthode .startDiaporamaMode() permettra de faire défiler les images automatiquement, jusqu’à l’appel de .stopDiaporamaMode().
L’utilisation de ces deux classes est relativement simple, et la classe Diaporama peut être étendue afin de créer d’autres types de transitions.
A noter que FadingDiaporama.as ainsi que SlidingDiaporama.as fonctionnent avec la librairie de tween tweenlite, pour le moment.
Flash player 10 - fight one!
16th avril, 2009 par Arno
Rien ne vaut une semaine de vacances pour se relancer dans Flash. Depuis le temps que ça me tentait je n’avais pas encore eût l’occasion de tester certaines nouveautés de la nouvelle API du flash player 10.
Bon je vais pas faire une liste des nouvelles fonctionnalités - simplement parceque je serais bien incapable - mais je vais essayer de présenter quelques travaux de recherches. Dans un premier temps, c’est évidemment la 3D native que j’ai voulu tester, du coup après avoir fait mumuse avec un simple Sprite qui pivote sur l’axe des Y - je suis passé à la mise en place et la manipulation d’un cube, grace à la class SimpleZsorter de Lee Brimelow le rendu fait illusion.
Apercu du rendu d'un cube avec et sans l'utilisation de la class SimpleZSorter
Evidemment pour tout ce qui est gestion des modèles 3D, on peut oublier mais pour ce qui est petit effet de profondeur qu’on souhaiterait intégrer dans une application cette nouvelle API répond à nos attentes et il est vrai que de diminuer la taille du swf de sortie d’une centaine de Ko même si ça peut paraitre ridicule, c’est toujours ça de gagner.
Le deuxième point que j’ai voulu tester est le nouveau protocol de communication développé par Adobe : RTMP (pour Real Time Messaging Protocol) qui permet comme son nom l’indique : le transfert en temps réel de données entre deux clients - c’est le principe du peer-to-peer. Adobe propose un service : Stratus, encore en beta et gratuit, de mise en relation de clients. Le principe est simple : un client se connecte aux serveurs d’Adobe via le protocol rmtp - celui-ci lui attribut un identifiant unique - puis le client se met en attente de la connexion d’un second client qui utilisera l’identifiant unique pour débuter la communication p2p.
L’exemple que propose Adobe pour présenter ce service est relativement impressionnant - il s’agit d’une application de chat audio/video. Evidemment avec ce genre de service on peut imaginer la mise en place de jeux multi-joueurs mais avant d’en arriver là il faut d’abord bien en comprendre les tenant et les aboutissant - maitriser la communication entre les différents participants et en connaitre les limites. Du coup comme première application - j’ai développé un petit chat p2p. Léger détail : il faut connaitre l’identifiant de son interlocuteur pour pouvoir l’appeler, ce qui est paradoxale mais j’y travail.
Je reviendrais dans un prochain article pour ce qui est du détail du fonctionnement et de comment déployer une communication RTMP. Quoi qu’il en soit, cette première expérience avec l’API du flash player 10 me motive suffisament pour que je poursuive. A suivre…
Flux RSS- A la découverte des ByteArray
- Coordonnées des points d’une sphère
- M4Tween - Javascript
- Object Pooling
- M4Tween premier jet
- Peindre avec des ribbons en flash
- Passer par des LinkedList pour gagner en performances
- Comment créer des projets en utilisant FlashDevelop ?
- Guide d’installation de FlashDevelop
- Comment utiliser Cron? Automatisation des tâches, lancement de script php