Categories » AS3 Follow me on Twitter !

Sauvegarder une liste d'entiers dans un shared object

Voici une petite astuce qui peut vous simplifier la vie. Dans un grand nombre de jeux, nous avons besoin de stocker la liste des niveaux terminés par le joueur, et de pouvoir y accéder rapidement. La méthode la plus simple est de stocker cette donnée dans un SharedObject que nous retrouverons à chaque lancement de session.

 

Sauvegarde des données

 

Pour stocker une liste d'entiers dans un SharedObject sous la forme d'un entier seul, il faut sauvegarder la somme des puissances de 2 des valeurs souhaitées.
var mySo:SharedObject = SharedObject.getLocal("myApplication");
var dataToSave : Array = [2, 5, 4];
var somme : int = 0;
for each(var data : int in dataToSave)
{
    somme += Math.pow(2, data);
}
mySo.data.savedValue = somme;

 

Récupération des données

 

Et pour récupérer les données :
var intValue : int = mySo.data.savedValue;
var currentIndex : int; // identifiant du niveau à tester
if( ( Math.pow(2, currentIndex) & intValue) > 0 )
{
    // L'entier est bien présent dans la liste
}

Lire la suite >>


AS3 truncate function

En AS3, il n'y a pas de fonction native permettant de tronquer un nombre. Voici comment faire ça:

 

public function truncate(val:Number, precision:uint=0):Number
{
	var multiplier : Number = Math.pow(10, precision);
	return Math.round(val * multiplier) / multiplier;
}

 

truncate(10.2653, 2); //-> va retourner 10.26

Il existe une autre manière de le faire, mais nettement moins propre. Il s'agit de convertir le nombre en chaine de caractère, tronquer cette chaine, puis refaire la convertion ...

Lire la suite >>


Dessiner un graphe via un BitmapData

Admettons que nous voulons monitorer et afficher sous forme de courbe le fps d'une application.

La manière la plus simple à mettre en place est de passer par un Shape sur lequel on utilise l'API de dessin.

 

Cependant, si nous commencons à avoir plusieurs courbes à afficher en meme temps sur une grosse application, cela peut nous reduire de maniere importante les performances.

 

Une manière moins couteuse de dessiner un graphe est donc de passer par un BitmapData sur lequel on remplit les pixels nécessaires avec la bonne couleur.

 

Par exemple, admettons que nous avons les valeurs stockées sous la forme d'un vecteur:

var fpsValues : Vector.< Int >;

Nous partons du principe que nous remplissons le vecteur en ayant toujours un nombre maximal d'entrée inférieurs ou égal à la taille max du graphe, pour éviter d'avoir trop de données inutiles.

 

Attention: comme nous parlons en pixel, nous ne pouvons pas avoir de réels, seulement des entiers.

 

Lire la suite >>


PhotonStorm's FlxHealthBar update

By default in the 1.7 version (FlxBar)

 

In my last Flixel project (My Hero Factory), i needed a vertical health bar. So i decided to use Photon Storm's flixel power tools, which has a health bar quickly usable. But there is only an horizontal one.

 

So here is my quick update to his FlxHealthBar class :

 

First we need more possibilities :

public static const FILL_LEFT_TO_RIGHT        :int = 1;
public static const FILL_RIGHT_TO_LEFT        :int = 2;
public static const FILL_INSIDE_OUT           :int = 3;
public static const FILL_TOP_TO_BOTTOM        :int = 4;
public static const FILL_BOTTOM_TO_TOP        :int = 5;

 

The setup function :

Lire la suite >>


As3isolib - Déplacements

Dans le post précédent, nous avions vu comment initialiser les données nécessaire à as3isolib. Ici nous allons simplement ajouter un écouteur sur le clic de la souris et déplacer l'objet.

 

L'écouteur doit donc être ajouté sur la grille :

 

grid.addEventListener(MouseEvent.CLICK, gridMouseHandler);

private function gridMouseHandler(pEvt:ProxyEvent):void
{
    var evt:MouseEvent = MouseEvent(pEvt.targetEvent);
    var pt:Pt = new Pt(evt.localX, evt.localY);
    IsoMath.screenToIso(pt);
    
    monElement.moveTo( Math.floor(pt.x/CELL_SIZE) * CELL_SIZE, Math.floor(pt.y/CELL_SIZE) * CELL_SIZE, 0 );
}

 

Quelques informations complémentaires :

  • eDpLib.events.ProxyEvent hérite de la classe flash.events.Event et permet en plus à un proxy de redistribuer les informations de l'évènement au nom de l'IEventDispatcher qui n'est pas accessible directement depuis la liste d'affichage.
    Pour faire simple, ne vous posez pas la question et utilisez systématiquement cette classe sur la gestion d'évènement :)
  • as3isolib.geom.Pt est l'équivalent d'un Point avec une coordonnée Z supplémentaire.
  • La fonction statique screenToIso() permet de convertir les coordonnées dans l'espace 3D isométrique de la grille.

 

Pour faire quelque chose de plus joli, nous pourrions utiliser TweenLite (ou une quelconque librairie d'animation). Nous aurions donc :

 

TweenLite.to( monElement, 1, {x:Math.floor(pt.x/CELL_SIZE)*CELL_SIZE,
                              y:Math.floor(pt.y/CELL_SIZE)*CELL_SIZE});

Lire la suite >>


Introduction à As3isolib

As3isolib est une librairie open-source ActionScript3 qui permet de développer des jeux (ou tout type d'animation) basés sur un affichage isométrique.

Cette librairie est très simple d'utilisation, et ne nécessite pas un temps d'apprentissage enorme.

 

 

Nous allons voir ici les bases de l'affichage.

 

Tout d'abords, commencons par créer un nouveau projet AS3, que nous allons appeler IsoDemo.

Il nous faut bien évidemment les sources de la librairie : télécharger la v1.

Ici nous allons nous baser sur les sources pour le flash player 10, du coup il faut bien faire attention de spécifier la version minimale du player dans les paramètres.

 

Dans un premier temps, nous n'aurons besoin d'utiliser que les 3 classes principales de la librairie, qui sont :

  • IsoGrid : qui correspond à la grille de l'environnement
  • IsoScene : la scène en elle meme, sur laquelle nous allons placer nos élements d'affichages
  • IsoView : la vue, c'est a dire ce que l'utilisateur va voir a l'affichage.

 

Ces trois classes se trouvent dans le package as3isolib.display.

 

Nous allons commencer par initialiser la grille :

 

_grid = new IsoGrid();
// Nous definissons une grille de 8*8 cases et 1 case en hauteur
_grid.setGridSize(8, 8, 1);
// Puis nous définissons la taille d'une seul case
_grid.cellSize = 50;

 

Maintenant, passons à la scène, qui correspond à l'élement d'affichage :

 

_scene = new IsoScene();
_scene.addChild( _grid );

 

Et pour terminer, nous devons définir notre vue :

 

_view = new IsoView();
_view.setSize(800, 600);
// Pour pouvoir afficher entièrement la scène,
// nous définissons un point sur lequel nous allons centrer la vue
_view.centerOnPt(new Pt(200, 200, 0));
_view.addScene(_scene);

 

Voici ce que nous obtenons :

Lire la suite >>


Gestion du clavier en AS3

Dans les jeux, tout comme dans les applications, le clavier peut être autant utilisé que la souris.

Cependant, la gestion du clavier est un peu plus longue à mettre en place, par rapport à celle de la souris, car en règle générale, la souris ne possède que deux boutons (ou du moins, seuls ces deux boutons sont utilisés).

 

Pour ce faire, nous n'avons besoin que d'un seul écouteur sur l'élèment stage.

La classe KeyboardEvent nous permet de gérer l'évènement KEY_DOWN et KEY_UP. Dans notre cas, nous allons simplement gérer l'appui sur les touches.

 

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

 

Maintenant que nous avons notre écouteur, nous pouvons simplement gérer les keyCode de l'évènement dispatché.

 

private function keyDownHandler(pEvt:KeyboardEvent):void
{
    trace(pEvt.keyCode);
}

 

La classe flash.ui.Keyboard liste la majeure partie des touches disponible sur le clavier.

Par exemple, la touche ENTER est accessible par Keyboard.ENTER.

 

Maintenant, si vous souhaitez gérer l'appui sur les touches ctrl, shift et alt, l'évènement dispose d'attribut permettant de nous l'indiquer :

 

trace("ctrlKey: " + pEvt.ctrlKey);
trace("shiftKey: " + pEvt.shiftKey);
trace("altKey: " + pEvt.altKey);

 

Dans un cas un peu plus pratique, admettons que vous vouliez développer une calculatrice, sans pour autant utiliser TextInput (Flex) ou l'attribut type de la classe TextField (AS3).

Il vous faudrait alors gérer les différentes touches permettant d'écrire un 1.

 

if(pEvt.shiftKey && pEvt.keyCode == Keyboard.NUMBER_1 || pEvt.keyCode == Keyboard.NUMPAD_1)
{
    trace('touche 1');
}

 

Ce qui permet de gérer à la fois le pavé numérique, et les touches du clavier accessible par la touche shift.

Lire la suite >>


Google Analytics for Flash

Sur certains types de RIA, il peut être nécessaire de suivre les visites et le traffic générés.

Toute fois, en flash, à moins de passer par du JavaScript, c'est toujours difficile. Il existe cependant des projets permettant de profiter de la puissance de Google Analytics.

 

image GAforflash

 

Aujourd'hui nous allons voir l'utilisation de la librairie Google Analytics Tracking For Adobe Flash qui se trouve être développée par Adobe Systems, Inc. (pour les intimes).

 

Deux pré-requis avant d'aller plus loin. Tout d'abord, il vous faudra télécharger le swc puis l'importer dans votre projet (page de téléchargement).

Maintenant que tout est en place, deux méthodes s'offrent à vous.

Lire la suite >>


Démo de Color Shooter

Suite aux trois derniers tutos, voici une version de démonstration du jeu Color Shooter. Jeu classé dans la catégorie des shoot them up. Pour jouer, c'est par là !

Lire la suite >>


Développer un petit moteur d'affichage

Sur certain petits jeux ne nécessitant pas trop de ressources graphiques, voir même pour une petite application, il est toujours question d'utiliser les mêmes éléments, et la même façon de fonctionner.

Dans un précédent article, nous avions vu comment gérer les écrans d'affichage de manière simple et complètement indépendante du reste.

Maintenant nous allons voir comment mettre en pratique cette technique de manière à avoir un moteur de jeu relativement simple et basé sur les Sprite.

 

1- Le moteur

Notre moteur est le pilier, les classes principales de nos jeux devront hériter de celle-ci.

 

Chose importante, nous avons besoin d'attendre que notre classe soit ajoutée à la liste d'affichage avant d'aller plus loin, sinon nous ne pourrions avoir accès à l'élément stage.

 

Voici le code commenté :

Lire la suite >>


Faire un dégradé sur un texte

En as3, il est relativement simple de faire un dégradé sur un élément graphique (cf Faire un dégradé en Flash). Mais dès lors que nous souhaitons le faire sur du texte, à première vue, la tache ce complique.

 

Cependant, ce n'est pas extrèmement plus compliqué. En effet, il suffit de définir le dégradé, comme pour un élément graphique, mais au lieu de laisser cet élément seul, nous allons lui appliquer un masque. Et ce masque sera notre élément TextField.

Du coup, notre dégradé ce verra au travers de notre texte.

 

Voici un exemple avec une police compilée, pour bien montrer que le principe reste le même :

Lire la suite >>


Gestion simple de changement de page en AS3

Dans un jeu, il est souvent nécessaire d'avoir plusieurs écran, comme par exemple, l'écran d'accueil, l'écran de jeu, puis l'écran de score une fois le jeu terminé.

Voici une implementation relativement simple, avec possibilité de faire communiquer les vues (ou ecran) entre elles.

 

Tout d'abord, nous avons besoin de notre classe Screen, qui sera la classe parente de tous nos ecrans.

 

package com.afischer.ui
{
    import flash.display.Sprite;
	
    public class Screen extends Sprite
    {
        protected var params : Object;
		
        public function Screen(pParams:Object = null):void
        {
            params = pParams;
        }
    }
}

 

Nous avons donc une variable params qui nous permettra de faire communiquer les données entre les vues.

Lire la suite >>


Flex - compiler en ligne de commande

Si on ne passe pas par un IDE quelconque, pour pouvoir compiler une application flash, nous avons besoin de passer par un terminal et de compiler tout ca a la main.

Tout ce dont nous avons besoin est présent dans le sdk de Flex (dossier bin)

 

Le fichier de configuration

 

Le plus simple et le plus propre pour compiler, c'est de créer un fichier de configuration (réutilisable).

Voici un xml très simple, que nous allons appeller config.xml

 

< flex-config xmlns="http://www.adobe.com/2006/flex-config">
	< target-player>10.1.0< /target-player>
	< output>bin-debug/appli.swf< /output>
	< default-size>
	    < width>230
	    < height>800
	< /default-size>
	< compiler>
		< optimize>true< /optimize>
		< strict>true< /strict>
		< source-path append="true">
			< path-element>src< /path-element>
		< /source-path>
	< /compiler>
	< file-specs>
		< path-element>src/Application.mxml< /path-element>
	< /file-specs>
< /flex-config>

 

Pour avoir la liste des paramètres possible :

~/sdks/flex_sdk_4.1.0.16076/bin/mxmlc -help list advanced

Lire la suite >>


Astuce pour la détection des touches du téléphone

Avec AIR 2.5, il est possible de détecter les boutons BACK, MENU et SEARCH du téléphone.

Pour ce faire, il faut appliquer un écouteur sur l'évènement KEY_DOWN du clavier :

 

stage.addEventListener( KeyboardEvent.KEY_DOWN, onKeyDown);

private function onKeyDown( pEvt: KeyboardEvent ):void
{
    switch( pEvt.keyCode )
    {
        case Keyboard.BACK:
            // sur la pression du bouton retour
            break;
        case Keyboard.MENU:
            // sur la pression du bouton menu
            break;
        case Keyboard.SEARCH:
            // sur la pression du bouton recherche
            break;
    }
}

 

Cependant, avec le code précédent, une pression sur un des trois bouton va quitter l'application AIR.

Pour éviter cela, il faut utiliser la méthode preventDefault sur l'évènement du clavier :

 

case Keyboard.BACK:
    // sur la pression du bouton retour
    pEvt.preventDefault();
    break;

Lire la suite >>


Utilisation de l'accéléromètre

Depuis la disponibilité du Flash Player 10.1 et de AIR 2.0, nous pouvons accéder à l'accéléromètre.

Plusieurs jeux et applications, principalement sur téléphone mobile l'utilise déjà depuis un certain temps.

Voici comment l'utiliser.

 

La classe Accelerometer se trouve dans le package flash.sensors :

 

import flash.sensors.Accelerometer;
import flash.events.AccelerometerEvent;

 

La classe Accelerometer fournie une variable permettant de déterminer si la fonction est prise en charge par l'appareil, ce qui permet, dans le cas contraire, ajouter un controle différent (clavier par exemple).

 

if (Accelerometer.isSupported)
    trace('Accelerometer supported');
else
    trace('Accelerometer not supported');

Lire la suite >>


Coloration Flex 4 pour gedit

Gedit étant mon éditeur préféré, il se devait d'y avoir un fichier de coloration pour AS3 et MXML.

En cherchant un peu, j'ai trouvé les fichiers de coloration pour Flex (comprenant bien évidement AS3 et MXML) ici.

Seul souci, lors du passage à Flex 4, le code compris dans les balises < fx:Script > apparait surligné en rouge :

 

 

Pas très joli me direz-vous.

Pour modifier ce petit désagrément, il suffit de rajouter le code suivant :

Lire la suite >>


Création d'une librairie d'icone

Lorsque nous développons une application sous Flex, nous avons souvent besoin d'utiliser des icones.
La solution la plus simple évidement est la suivante :
 

< mx:Button label="Delete" icon="@Embed(source='assets/images/delete.png')"/>


Mais lorsque cet icone apparait plein de fois dans l'application, on ne va pas la réimporter à chaque fois, sinon le code va vide devenir lourd, et ça pour rien.
 
La meilleure solution, est de créer une classe qui va ne s'occuper que de ça. Nous allons l'appeler IconLibrary (original non ?)
 

package fr.revolugame.assets  
{
    /**
     * Les icones utilisées dans l'application
     */
    [Bindable]
    public final class IconLibrary
    {
        [Embed(source="assets/images/delete.png")]
        public static const DELETE:Class;
        
        // ...
    }
}


Et lorsque nous voulons l'utiliser dans un mxml :
 

< ![CDATA[
    import fr.revolugame.assets.IconLibrary;
]]>

< mx:Button label="Delete" icon="{IconLibrary.DELETE}"/>
 


Cela permettra d'avoir un code nettement plus propre et probablement moins lourd sur de grosses applications.
 
Si nous voulons encore plus optimiser la chose, il est recommandé de compiler cette librairie dans un swc et de l'importer ensuite dans notre application. Car de ce fait, nous n'aurons pas besoin de recompiler toutes les icones a chaque fois, et pourrons réutiliser cette librairie dans d'autre application.

Lire la suite >>


Découper une zone d'image en AS3

Voici une petite astuce qui permet d'optimiser une application Flash. Plutôt que d'importer les images en MovieClip, ce qui se veut être couteux en terme de performance, il vaut mieux passer par la classe Bitmap et la classe BitmapData pour récupérer les pixels souhaités pour ensuite les afficher. Et par la même occasion, faire une seule requête sur le serveur est moins couteux (par exemple si vous avez une application nécessitant beaucoup de pictogrammes).
Voici comment faire.

Tout d'abord, il faut importer l'image de la bibliothèque :
[Embed(source = 'monImage.png')] private var MonImg:Class;
var pic : Bitmap = new MonImg();
Maintenant que nous avons notre image au format Bitmap, nous pouvons travailler dessus.
var bmp1 : BitmapData = pic.bitmapData; // récuperation des données
var bmp2 : BitmapData = new BitmapData(18, 16, true); // création de données, avec la taille de l'image finale
var rect : Rectangle = new Rectangle(0, 0, 18, 16); // création de la zone de découpage
var pt : Point = new Point(0, 0); // création du point de fixation de la zone découpée sur la nouvelle image
bmp2.copyPixels(bmp1, rect, pt); // on copie les pixels dans la nouvelle zone
var bmp : Bitmap = new Bitmap(bmp2); // création de notre nouvelle image

Et voilà, nous pouvons maintenant utiliser notre image comme nous le souhaitons, en l'ajoutant à la liste d'affichage par exemple.

Lire la suite >>


Utiliser l'API YouTube en AS3

L'API YouTube permet de lire des vidéos stockées sur YouTube.com directement dans vos applications Flash. Elle permet également de personnaliser l'apparence du lecteur. Voici une brève introduction.
La documentation officielle est présente ici.

Récupération de l'API

Pour pouvoir utiliser l'API dans votre application, il est nécessaire de faire une requete pour recuperer le swc sur le serveur de YouTube. Pour ce faire :

_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));

Utilisation de l'API

Une fois que la librairie à été chargéé, nous pouvons la récuperer et ajouter les écouteurs sur les différentes actions :

private function onLoaderInit(event:Event):void {
    addChild(_loader);
    _loader.content.addEventListener("onReady", onPlayerReady);
    _loader.content.addEventListener("onError", onPlayerError);
    _loader.content.addEventListener("onStateChange", onPlayerStateChange);
    _loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
}

Une fois que notre lecteur est prêt, nous pouvons charger et lancer la vidéo :

private function onPlayerReady(event:Event):void {
    // Récupération de l'API youtube.
    _player = _loader.content;
    // On lance notre vidéo à partir de son identifiant
    _player.loadVideoById(VIDEO_ID);
    // On définie la taille de la vidéo
    _player.setSize(480, 270);
}

Lire la suite >>


Optimisation d'une zone de texte

La classe TextField permet d'ajouter du texte dans une application Flash, zone de texte ou zone de saisie. Mais lorsqu'on souhaite utiliser beaucoup d'occurrence de celle-ci, et des les animer, il se peut que les performances en prennent un gros coup. Pour optimiser tout ceci, il suffit de passer par la classe Bitmap.

La classe Bitmap permet, quand à elle, de représenter des objets d'affichage. Elle va donc nous permettre de transformer nos textes en images. Voici comment faire :

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.text.TextField;

var monTexte : TextField = new TextField();
monTexte.text = "Hello World";
monTexte.autosize = flash.text.TextFieldAutoSize.LEFT;

var bmp : BitmapData = new BitmapData(monTexte.width, monTexte.height);
bmp.draw(monTexte);

var bitmap : Bitmap = new Bitmap(bmp);
addChild(bitmap);

Une petite optimisation qui peut vraiment être utile lors du développement de grosses applications utilisant beaucoup de zone de texte.

Lire la suite >>


La classe PopUp

Dans ce tutoriel, nous allons voir comment développer une classe permettant de créer une fenêtre disposant d'un bouton de fermeture et du système de Drag and Drop.

La partie graphique

Pour commencer, notre classe a besoin de plusieurs paramètres, tel
que son parent, sa couleur, ou encore son contenu.

Voici la signature de notre classe :

public function PopUp(_parent:Stage, _color:uint, content:MovieClip):void

Dans le constructeur, nous instancions les différentes parties de notre fenêtre, puis nous dessinons le cadre et l'entête.

Lire la suite >>


Utiliser les curseurs natifs du système dans vos applications

Le Flash Player 10 intègre une nouvelle fonctionnalité particulièrement intéressante.
En effet, nous pouvons modifier le curseur de la souris en utilisant la propriété cursor de la classe flash.ui.Mouse.

Pour ce faire, nous devons lui attribuer une des constantes de la classe flash.ui.MouseCursor :
  • MouseCursor.AUTO : l'état par défaut
  • MouseCursor.ARROW : le curseur représentant la flèche
  • MouseCursor.BUTTON : le curseur en forme de main appuyant sur un bouton
  • MouseCursor.HAND : le curseur en forme de main réalisant un glissement
  • MouseCursor.IBEAM : le curseur en I de sélection de texte

Voici un petit exemple :
import flash.ui.Mouse;
import flash.ui.MouseCursor;

Mouse.cursor = MouseCursor.HAND;
L'utilisation de cette classe simplifie le changement de curseur à l'exécution, ce qui permet une meilleure intégration et utilisation de votre application par les utilisateurs qui retrouverons le confort d'utilisation de leur système.

Lire la suite >>


Faire une scrollbar en AS3

Dans ce tutoriel, nous allons voir comment créer une classe réutilisable pour faire une scrollbar horizontale. Elle permettra de déplacer un contenu dynamique (texte, image, ...).

 

Aspect visuel : la classe graphics

Comme nous souhaitons avoir une classe entièrement réutilisable, il nous faut pouvoir ajouter des éléments graphiques indépendamment du projet en cours. Pour cela, nous allons utiliser la classe graphics qui va nous permettre de dessiner les composants.

 

Pour cela, nous avons besoin de plusieurs paramètres : la largeur et la hauteur de notre scrollbar. Ces deux valeurs seront des attributs de notre classe. Voici notre fonction qui s'occupe de dessiner :
private function draw():void {
    var bg : Shape = new Shape();
    bg.graphics.beginFill(_bgColor);
    bg.graphics.lineStyle(0x000000);
    bg.graphics.drawRect(0, 0, _largeur, _hauteur);
    bg.graphics.endFill();
    addChild(bg);
} 
Et maintenant celle qui dessine le scroller (élément qui nous permet de déplacer le contenu) :
private function drawScroller():void {
    // petite vérification, pour ne pas dessiner de scroller s'il n'y en a pas besoin               
    if (_scrollContent.height > _hauteur) {
        var coeff : Number = _scrollContent.height / _hauteur;
        var tmp_scroll_height : Number = _hauteur / coeff; // pour verif que le scroller n'est pas trop petit
        if (tmp_scroll_height < 20) tmp_scroll_height = 20;
               
        _scroller = new Sprite();
        _scroller.graphics.beginFill(0x000000);
        // on dessine notre rectangle avec un petit décalage
        _scroller.graphics.drawRect(2, 2, _largeur - 4, tmp_scroll_height);
        _scroller.graphics.endFill();
               
        _scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
        _scrollContent.parent.stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);
               
        addChild(_scroller);
        _scroller.buttonMode = true;
               
        // rectangle qui correspond à la trajectoire du scroller
        rect_scroller = new Rectangle(0, 0, 0, _hauteur - _scroller.height - 4);
    }
} 

Lire la suite >>


Quelques bonnes pratiques en ActionScript3

Voici quelques bonnes pratiques nécessaire à adopter lors de développement d'application en ActionScript3.

Tout d'abord, il est nécessaire de toujours typer ses variables afin d'optimiser les performances et garantir une meilleure gestion des erreurs à la compilation et  à l'exécution. Par exemple, préférer

var i : int = 0; 

à

var i = 0;

Par contre, si une variable peut contenir n'importe quel type de données, nous pouvons utilisez le type *.

Lorsque vous utilisez une boucle, il est préférable de passer par une variable de référence, pour éviter que la machine virtuelle ne réévalue la longueur à chaque itération. Exemple :

Lire la suite >>


Mettre une image en noir et blanc

Pour rendre une image en noir et blanc sans passer par la création d'une nouvelle image, il faut utiliser la propriété filters d'un objet d'affichage. Il faut lui passer en paramètre un tableau de ColorMatrixFilter, qui permet d'appliquer une transformation de matrice aux couleurs RVBA (Rouge, Vert, Bleu et Alpha) sur l'image d'entrée afin d'obtenir un résultat intégrant un nouvel ensemble de valeurs.

Cette classe permet d'effectuer des modifications de saturation et des rotations de teinte, de définir la luminance de l'alpha et de produire d'autres effets. Vous pouvez appliquer le filtre à tout objet d’affichage (autrement dit, aux objets héritant des propriétés de la classe DisplayObject), tels que MovieClip, SimpleButton, TextField et Video, ainsi qu’aux objets BitmapData.

Autant vous dire qu'on peut faire ce qu'on veut à partir de cette fonction.
var a : Array< Float > = new Array();

a = a.concat([0.3086, 0.6094, 0.0820, 0.0, 0.0]); // rouge
a = a.concat([0.3086, 0.6094, 0.0820, 0.0, 0.0]); // vert
a = a.concat([0.3086, 0.6094, 0.0820, 0.0, 0.0]); // bleu
a = a.concat([0.0, 0.0, 0.0, 1.0, 0.0]); // alpha

var filtre : ColorMatrixFilter= new ColorMatrixFilter(a);
monClip.filters = [filtre];

Lire la suite >>


AS3 : Passer un paramètre à un listener

Qui n'a jamais eu envi de passer un paramètre lors d'un évènement dans une application Flash ?
Voici la solution !

Prenons par exemple, un évènement clic. Nous avons alors un écouteur de ce type :
addEventListener(MouseEvent.CLICK, maFonction);
Avec la fonction :
private maFonction(e:MouseEvent):void {
    ... 
}
Maintenant, pour passer un paramètre :
addEventListener(MouseEvent.CLICK, function(e:*):void { maFonction(e, maVar) });

private maFonction(e:MouseEvent, maVar:String):void {
    trace(maVar);
}

Lire la suite >>


Changer la couleur d'un élément en AS3

Il peut s'averer nécessaire de changer la couleur d'un élément dans un jeu par exemple pour différencier deux éléments selon les joueurs.
Voici comment faire sans créer plusieurs images de couleurs différentes.
// récupération de la couleur de départ de l'objet
var myColor:ColorTransform = myObject.transform.colorTransform;
// on lui affecte maintenant la couleur qu'on souhaite
myColor.color = 0x000000; // la valeur hexa de ma couleur
// puis on l'applique à notre objet
myObject.transform.colorTransform = myColor;
Si vous souhaitez utiliser les couleurs RGB, il faut créer une instance de la classe colorTransform en lui passant les paramètres RGB de votre couleur :
myColor : ColorTransform = new ColorTransform(0,0,0,1,redValue,greenValue,blueValue,0);
myObject.transform.colorTransform = myColor;
Avec redValue, greenValue et blueValue des variables Float (haXe) ou Number (AS3).

Lire la suite >>


Faire un dégradé en Flash

Voici une méthode relativement simple pour faire un dégradé en Flash. D'une part ça coute moins en terme de ressource qu'une image, et d'autre part ce n'est pas compliqué a faire.
Nous allons voir la version haXe. Pour la version AS3, c'est la même, à l'exception de la syntaxe de certaine classes, ou types.

Voici le fonctionnement :
/**
 * Création d'un rectangle contenant un dégradé
 */
var degrade : Shape = new Shape();
// Bordures du rectangle
degrade.graphics.lineStyle(2, 0x0043AB);
			
// Matrice de transformation du dégradé
var matrice:Matrix = new Matrix();
matrice.createGradientBox(250, 50); // largeur et hauteur du dégradé
	
degrade.graphics.beginGradientFill(GradientType.LINEAR, [0xA7C04A, 0xAD7FA8], [1, 1], [0, 255], matrice);
degrade.graphics.drawRect(0, 0, 250, 50);
		
degrade.graphics.endFill();
		
addChild(degrade);

La méthode beginGradientFill nécessite quelques paramètres :
  • le type de dégradé (LINEAR ou RADIAL)
  • le tableau des couleurs
  • le tableau des opacités de chaque couleur
  • le tableau de positionnement des couleurs
  • la matrice de transformation de type flash.geom.Matrix (optionnelle)

Lire la suite >>


Charger une librairie externe en AS3

Il est souvent utile dans les projets flash d'utiliser des librairies externes. Voici le code nécessaire au chargement de l'une d'entre elles en ActionScript3.

Seulement quatre classes sont nécessaires pour utiliser notre librairie :
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.system.ApplicationDomain;
Création des variables :
var loader : Loader = new Loader();
var request : URLRequest = new URLRequest("lib.swf"); // chemin

// création de l'ecouteur de fin de chargement
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

// chargement de la lib
loader.load(request);
Et pour terminer, l'utilisation d'une classe présente dans cette librairie.
Il existe deux manières de le faire, les voici :
private function onComplete(event:Event):void {
	// 1ere solution
	var maRessource : Class = loader.contentLoaderInfo.applicationDomain.getDefinition("maRessource") as Class;
	var monClip = new maRessource();
	
	// 2eme solution
	ApplicationDomain.currentDomain.getDefinition("maRessource");
	var monClip : maRessource = maRessource(event.target.content);
}

Lire la suite >>


Lecteur vidéo avec Flex

Dans ce tutoriel, nous verrons comment réaliser un joli lecteur vidéo très simplement grâce aux nombreuses classes présentes dans le framework Flex.

 

La structure de notre application

Ce projet est composé de deux fichiers :
  • VideoPlayer.mxml
  • stylePlayer.css
Rentrons dans le vif du sujet en voyant la structure de notre mxml :
< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="512" height="408" layout="absolute" >
   
    < mx:VideoDisplay id="video" width="512" height="384" autoPlay="false" source="mavideo.ext"
        playheadUpdate="updatePlayer()" />
Tout d'abord, nous créons un composant VideoDisplay qui contiendra notre vidéo. Nous lui donnons une taille fixe pour éviter les redimentionnements hasardeux.
L'attribut autoPlay peut être défini à true ou false, dans le cas où l'on souhaite lancer la lecture de la vidéo au chargement de l'application ou non.
S'en suis la source de notre vidéo, ou plus exactement l'emplacement de notre fichier vidéo.
Pour terminer, nous ajoutons un évenement qui nous permettra de gérer l'avancement de notre vidéo.
 
Nous allons maintenant définir un bloc qui contiendra les boutons et les détails de notre lecteur.

Lire la suite >>


Barre de chargement en Flash9

Commencons par le code

var root : MovieClip = flash.Lib.current; 
root.stop();
root.loaderInfo.addEventListener (ProgressEvent.PROGRESS, function(event:ProgressEvent)
{
    var pcent:Float=event.bytesLoaded/event.bytesTotal*100;
    trace("Chargement : "+pcent+"%");
    if(pcent==100) root.gotoAndStop(2)
}
);

Quelques explications :

Le stop() est la pour arreter l'avancement de l'animation.
On place ensuite un écouteur sur la progression total du chargement du swf, quand celui ci est terminé (égal à 100), on lance le reste de l'animation.

Dans l'exemple, on utilise la methode trace(), mais bien évidemment, vous pouvez créer une barre, ou n'importe quoi pour visualiser le chargement. Il suffit juste d'utiliser la variable pcent.

Lire la suite >>


Créer un menu personnalisé pour le clic droit Flash9

Vous souhaitez enlever, voir personnaliser le menu qui apparait par defaut lors d'un clic droit ?

Alors voilà comment il faut faire. C'est relativement simple, mais fort utile.


Tout d'abord, voici comment l'enlever :

var menu = new flash.ui.ContextMenu();
menu.hideBuiltInItems();
flash.Lib.current.contextMenu = menu;

Et maintenant, pour ajouter un nouvel élément :

var nouvelItem = new flash.ui.ContextMenuItem("Texte a afficher", true, true, true);
// on ajoute une action sur le bouton
nouvelItem.addEventListener(flash.events.ContextMenuEvent.MENU_ITEM_SELECT, function(e){ flash.Lib.getURL(new flash.net.URLRequest("http://revolugame.com"), "_self"); } menu.customItems.push(nouvelItem);
Rien de très compliqué.

Lire la suite >>


Showing - of Articles | Page of