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