CS3|AS3 : Programmer un masque 2
Programmation d'un masque
Ce source fait suite au premier post sur la programmation de masque sous Flash. Avec évidemment une différence sur la façon d'aborder ce genre d'animation. D'une part il y a un background entièrement programmer, qui prend son source de la classe Design déjà discuter dans les post précédents.
C'est ce background design qui sera l'objet masqué. D'autre part il y a un masque qui sera animé de façon aléatoire. Avec l'objet Math et la méthode random( ), nous laissons le soin au programme de situer en ' x ' comme en ' y ', l'objet masque. L'objet masque est programmer de telle sorte qu'il part à une dimension ' width ' et ' height ' de 40px. Lorsqu'il a atteint une dimension de 300px par 300px, il recommence à 40px par 40px à une position ' x ' et ' y ' livré au hasard. L'objet << Math.random ( ) ; >> veut dire, và au hasard. Pour ce qui est du background, il est fixe. Plutot que d'instancié plusieurs objets design, il n'y en a qu'un seul. Par contre cette objet est dupliquer 47 fois, en ' y ' seulement, à l'aide d'une boucle ' for '. C'est ce qui fait que l'objet visuelle de base deviens comme un background image. Une action trace vous donne l'infos des dimensions à chaque itération de la boucle ' for '.
Voici le source
Débutants et débutantes en programmation Flash
Ce source fait suite au premier post sur la programmation de masque sous Flash. Avec évidemment une différence sur la façon d'aborder ce genre d'animation. D'une part il y a un background entièrement programmer, qui prend son source de la classe Design déjà discuter dans les post précédents.
C'est ce background design qui sera l'objet masqué. D'autre part il y a un masque qui sera animé de façon aléatoire. Avec l'objet Math et la méthode random( ), nous laissons le soin au programme de situer en ' x ' comme en ' y ', l'objet masque. L'objet masque est programmer de telle sorte qu'il part à une dimension ' width ' et ' height ' de 40px. Lorsqu'il a atteint une dimension de 300px par 300px, il recommence à 40px par 40px à une position ' x ' et ' y ' livré au hasard. L'objet << Math.random ( ) ; >> veut dire, và au hasard. Pour ce qui est du background, il est fixe. Plutot que d'instancié plusieurs objets design, il n'y en a qu'un seul. Par contre cette objet est dupliquer 47 fois, en ' y ' seulement, à l'aide d'une boucle ' for '. C'est ce qui fait que l'objet visuelle de base deviens comme un background image. Une action trace vous donne l'infos des dimensions à chaque itération de la boucle ' for '.
Voici le source
Consignes d'utilisations
:: Créé un dossier et nommé le: [ msg ].
:: Placer vous à l'intérieur du dossier [ msg ] et créé un autre dossier. Nommé le [ icom ].
:: Placer vous à l'intérieur du dossier [ icom ] et créé un autre dossier. Nommé le [ design ].
:: Placer le source qui suit dans le dossier [ design ].
:: NOTE : Charger le sur votre zone de travail. Vous devrez en faire un fichier << Design.as >>
:: et placer le comme ci-haut mentionner.
:: Prenez conscience que ce source est une classe nommé << Design.as >>
:: Arborescence : [msg [icom [design << Design.as >>] icom] msg].
:: Je vous suggère le fichier masque2.zip :: joint ici sur le post.
Le fichier Design.as
Mise en site le :: 30 Mars 2008.
Dernière modification le :: 30 Mars 2008.
:: Créé un dossier et nommé le: [ msg ].
:: Placer vous à l'intérieur du dossier [ msg ] et créé un autre dossier. Nommé le [ icom ].
:: Placer vous à l'intérieur du dossier [ icom ] et créé un autre dossier. Nommé le [ design ].
:: Placer le source qui suit dans le dossier [ design ].
:: NOTE : Charger le sur votre zone de travail. Vous devrez en faire un fichier << Design.as >>
:: et placer le comme ci-haut mentionner.
:: Prenez conscience que ce source est une classe nommé << Design.as >>
:: Arborescence : [msg [icom [design << Design.as >>] icom] msg].
:: Je vous suggère le fichier masque2.zip :: joint ici sur le post.
Le fichier Design.as
- Code: Tout sélectionner
package icom.design
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.filters.BlurFilter;
public class Design extends Sprite
{
// -- Objets Visuelles --
private var nom:String;
private var posx:Number;
private var posy:Number;
private var radius:Number;
private var largeur:Number;
private var hauteur:Number;
private var couleur:uint;
private var ligneGrosseur:Number;
private var ligneCouleur:uint;
private var trans:Number;
private var filtre:Boolean;
private var flou:BlurFilter;
private var matrice:Array;
// --
public function Design ()
{
}
public function rectangleDesign($nom:String, $posx:Number, $posy:Number, $largeur:Number, $hauteur:Number, $couleur:uint, $ligneGrosseur:Number,$ligneCouleur:uint, $trans:Number , $filtre:Boolean):void
{
this.name = $nom;
posx = $posx;
posy = $posy;
largeur = $largeur;
hauteur = $hauteur;
couleur = $couleur;
ligneGrosseur = $ligneGrosseur;
ligneCouleur = $ligneCouleur;
trans = $trans;
filtre = $filtre;
// --
this.graphics.lineStyle (ligneGrosseur, ligneCouleur, trans);
this.graphics.beginFill (couleur, trans);
this.graphics.drawRect (posx, posy, largeur, hauteur);
this.graphics.endFill ();
// --
if (filtre == true)
{
flou = new BlurFilter();
flou.blurX = 12;
flou.blurY = 0;
matrice = [flou];
this.filters = matrice;
}
else if (filtre == false)
{
matrice = [];
}
}
// -->
public function cercleDesign($nom:String, $posx:Number, $posy:Number, $radius:Number, $couleur:uint, $ligneGrosseur:Number, $ligneCouleur:uint, $trans:Number, $filtre:Boolean):void
{
nom = $nom;
posx = $posx;
posy = $posy;
radius = $radius;
couleur = $couleur;
ligneGrosseur = $ligneGrosseur;
ligneCouleur = $ligneCouleur;
trans = $trans;
filtre = $filtre;
// -->
this.graphics.lineStyle(ligneGrosseur, couleur, trans);
this.graphics.beginFill(couleur, trans);
this.graphics.drawCircle(posx, posy, radius);
this.graphics.endFill();
// --
if (filtre == true)
{
flou = new BlurFilter();
flou.blurX = 12;
flou.blurY = 0;
matrice = [flou];
this.filters = matrice;
}
else if (filtre == false)
{
matrice = [];
}
}
}
}
Mise en site le :: 30 Mars 2008.
Dernière modification le :: 30 Mars 2008.
Consignes d'utilisations
:: Dimension : Largeur : 605px - Hauteur 810px.
:: Stage Color : Black << Important : Pour une optimisation des filtres.
:: Placer le source sur le premier keyframe.
:: ctrl + enter.
:: Arborescence finale : [msg << masque2.fla >> [icom [design << Design.as >> ] icom] msg].
Le fichier masque2.fla
Mise en site le :: 30 Mars 2008.
Dernière modification le :: 30 Mars 2008.
:: Dimension : Largeur : 605px - Hauteur 810px.
:: Stage Color : Black << Important : Pour une optimisation des filtres.
:: Placer le source sur le premier keyframe.
:: ctrl + enter.
:: Arborescence finale : [msg << masque2.fla >> [icom [design << Design.as >> ] icom] msg].
Le fichier masque2.fla
- Code: Tout sélectionner
// -- Nos importations
// --
import icom.design.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
import flash.geom.Rectangle;
// --
// -- Variables de positionnement par défaut
// --
var px:Number = 0;
var py:Number = 0;
// --
// -- Instancié l'objet 'pt' de la classe Point
// -- et l'objet 'rect1' de la classe Rectangle
// --
var pt:Point = new Point(10, 10);
var rect1:Rectangle = new Rectangle(px, py, 605, 12);
// --
// -- Variable de duplication de l'objet visuelle 's'.
// --
var espace:Number = 17;
var nombres:Number = 47;
var compteur:Number;
// --
// -- Deux Containers : 'baseConteneur' pour le background visuelle.
// -- Ainsi qu'un container 'contCercle' pour le masque.
// --
var baseConteneur:Sprite = new Sprite();
addChild (baseConteneur);
var contCercle:Sprite = new Sprite();
baseConteneur.addChild (contCercle);
// --
// -- Nous écrivons une boucle de duplication de l'objet visuelle.
// -- et nous profitons de l'occasion pour construire l'objet visuelle.
// -- C'est cet objet visuelle qui sera dupliquer au nombres de fois de
// -- la variable 'nombres'. C'est à dire 47 fois. C'est aussi l'objet masqué.
// --
for (compteur = 0; compteur < nombres; compteur++)
{
var s:Design = new Design();
s.rectangleDesign ('zone-x2', 0, 0, rect1.width, rect1.height, 0xD4D0C8, 2, 0x0000FF, 0.7, true);
baseConteneur.addChild (s);
baseConteneur.x = pt.x;
s.y = pt.y + 5 + compteur * espace;
trace (compteur);
trace (baseConteneur.x + " " + baseConteneur.y + " " + baseConteneur.width + " " + baseConteneur.height);
}
// --
// -- Costruisons le cercle qui en fait, sera le masque.
// -- Il n'étais pas essentielle ici d'utilisé la classe Design
// -- puisque le rôle du masque, est tout simplement invisible.
// -- laissant traverser les données du background à l'intérieur de sa zone.
// --
var cercle:Design = new Design();
cercle.cercleDesign ('cercle', 0, 0, 200, 0x000000, 0, 0x000000, 1, false);
contCercle.addChild (cercle);
// --
// -- Comprenez ici que je me sert du containers 'baseConteneur' comme objet de masque
// -- mais c'est la valeur de l'objet cercle à l'intérieur du conteneur qui est cibler.
// -- N'oubliez pas que c'est 'baseConteneur' qui contient le background visuelle.
// --
baseConteneur.mask = cercle;
contCercle.x = 302.5;
contCercle.y = 405;
cercle.width = 0;
cercle.height = 0;
s.alpha = 0;
// --
// -- On prépare l'évènemet d'animation, il s'exécute au lancement
// -- du Flash Player, bref de l'animation.
// --
contCercle.addEventListener (Event.ENTER_FRAME, actionAnimation);
function actionAnimation (event:Event):void
{
cercle.width += 5;
cercle.height += 5;
// --
if (cercle.height >= 300)
{
cercle.width = 40;
cercle.height = 40;
// -- Le programme de positionnement aléatoire en 'x' et 'y'.
// -- C'est le conteneur de 'cercle' qui est positionner de façon aléatoire.
// -- Largeur >> ' * 605 ' Hauteur >> ' * 810 ' détermine une zone que le programme
// -- ne doit pas dépasser.
contCercle.x = Math.random() * 605;
contCercle.y = Math.random() * 810;
}
}
Mise en site le :: 30 Mars 2008.
Dernière modification le :: 30 Mars 2008.
Source masque2.fla
Ce genre simple mais très particulier laisse entrevoir ce que nous pourrions faire avec les masque programmer et quelques méthodes personnalisés ou prédéfinis de Flash. Par contre il deviens presque inutile d'aborder le sujet, trop large en possibilité de toute sorte. Une bible au complet pourrais en être écrit sur le sujet, surtout en ce qui concerne l'objet Math et sa méthode random. Si, par exemple, vous modifier la vitesse d'exécution à la ligne 76 et à ligne 77, vous pourriez obtenir une forme ovale plutot que ronde. En voici un exemple : cercle.width += 5; :: cercle.height +=2;. Parce que la vitesse d'exécution est différente en largeur vis à vis la hauteur, vous obtenez un forme d'animation de style ovale. Plusieurs façons jouent sur l'illusion de la vitesse, prenez exemple que vous changer la dimension du cercle de 40px à 100px au lieu de 300px, vous aurez l'impression d'une vitesse accélerer, vous trouverez cette valeur à la ligne 79, marquez 100 au lieu de 300. Vous pouvez de même changer les couleurs du background à la ligne 42 du source en question. La couleur du fond ' 0xD4D0C8 ' ou du contour ' 0xFF0000 ' comme exemple. Ce seras donc à vous de jouer avec les valeurs des variables du source.
Ce genre simple mais très particulier laisse entrevoir ce que nous pourrions faire avec les masque programmer et quelques méthodes personnalisés ou prédéfinis de Flash. Par contre il deviens presque inutile d'aborder le sujet, trop large en possibilité de toute sorte. Une bible au complet pourrais en être écrit sur le sujet, surtout en ce qui concerne l'objet Math et sa méthode random. Si, par exemple, vous modifier la vitesse d'exécution à la ligne 76 et à ligne 77, vous pourriez obtenir une forme ovale plutot que ronde. En voici un exemple : cercle.width += 5; :: cercle.height +=2;. Parce que la vitesse d'exécution est différente en largeur vis à vis la hauteur, vous obtenez un forme d'animation de style ovale. Plusieurs façons jouent sur l'illusion de la vitesse, prenez exemple que vous changer la dimension du cercle de 40px à 100px au lieu de 300px, vous aurez l'impression d'une vitesse accélerer, vous trouverez cette valeur à la ligne 79, marquez 100 au lieu de 300. Vous pouvez de même changer les couleurs du background à la ligne 42 du source en question. La couleur du fond ' 0xD4D0C8 ' ou du contour ' 0xFF0000 ' comme exemple. Ce seras donc à vous de jouer avec les valeurs des variables du source.
