Accentsconagua

Gestion d'états d'animation avec Starling

Code
Share

Starling Framework est une API AS3 qui imite la liste d'affichage, avec une différence essentielle: il utilise les nouvelles fonctionnalités de Flash Player 11 pour restituer tout le contenu à l'aide du processeur graphique. Dans ce didacticiel, vous apprendrez à ajouter plusieurs animations à une image-objet à l'aide de Starling Framework. Il suppose une compréhension de base de l’utilisation de feuilles de sprites avec Starling..

Aperçu du résultat final

Cliquez ici pour voir la démonstration à laquelle nous allons travailler. Cliquez à gauche ou à droite du singe pour le faire marcher dans cette direction; remarquez comment il affiche une animation de marche lors du déplacement et un cadre statique debout.

Code initial

L'ensemble des fichiers source de la démo (dans les états initial et final) se trouvent dans le téléchargement source. Cependant, nous travaillerons principalement avec un fichier, MonkeySprite.as, alors voici le contenu, pour référence:

 package import flash.utils.getTimer; importer starling.animation.Juggler; importer starling.core.Starling; importer starling.display.MovieClip; importer starling.display.Sprite; importer starling.events.Event; importer starling.textures.Texture; importer starling.textures.TextureAtlas; Classe publique MonkeySprite étend Sprite private var standMovie: MovieClip; // animation permanente private var mouseX: Number = -1; // emplacement du clic de la souris sur l’axe des x privé private var lastTime: int; // dernier mouvement onFrame private var movieVector: Vector.; fonction publique MonkeySprite () var atlas: TextureAtlas = Assets.getTextureAtlas (); var standFrames: Vecteur. = atlas.getTextures ("monkey_1"); standMovie = new MovieClip (standFrames, 7); standMovie.loop = true; addChild (standMovie); pivotX = this.width * 0.5; this.addEventListener (Event.ENTER_FRAME, onFrame);  fonction publique onFrame (e: Event): void if (mouseX == -1) return; // capture si (this.x <= mouseX+5 && this.x >= mouseX-5) this.x = mouseX;  else var timeDiff: int = getTimer () - lastTime; lastTime + = timeDiff; if (mouseX> this.x) this.x + = timeDiff * .15;  else this.x - = timeDiff * .15;  fonction publique moveToPoint (pointX: Number): void mouseX = pointX; lastTime = getTimer ();

Regarder le screencast

Voici les URL mentionnées dans la vidéo:

  • Le cadre de Starling
  • Flash Builder
  • Hi-ReS-Stats de mrdoob
  • Archives d'art gratuites de Vicki Wenderlich

Vous voulez plus de tutoriels Starling?

Faites le nous savoir dans les commentaires!

Code
×