CS3|AS3 :: Programmer un masque 3 : Texte défilant
Programmation d'un masque et texte défilant
Ce tutos fait suite aux deux premiers concernant la programmation de masque. Par contre un nouvel objet est préciser ici. C'est un objet texte programmer. C'est cet objet qui sera animer. C'est ce qui fait la différence si on le compare aux deux premiers sources sur les masques programmer. En effet car dans les tutos précédents, c'était le masque qui était animé. Il en và différemment avec ce tuto. L'objet masque est fixe et l'objet texte animé.
Encore une fois, le design est nourri à partir de la classe Design. Pour ceux et celles qui n'auront pas encore télécharger le package << icom.design >> pourront le faire ici même. Mais si vous le préférer vous pourrez aussi le copier/coller dans la zone des sources. Le source qui suit est fort simple. L'animation de texte est un principe très exploiter et très actuelle sur le web. Ce n'est certe pas un révolution. Le principe que je vous donnent est un principe de base. Il s'agit tout simplement d'un texte défilant masqué. Il n'est pas obliger qu'un texte soit masqué, par contre, pourquoi ne pas savoir mixé les techniques exposées sur les différents tutos. Une pierre deux coups en quelque sorte. C'est à partir d'un évènement, que le texte défile. Cet évènement est exécuter en même temps que lorsque l'animation est lancé. Cet évènement est ' tx.addEventListener(Event.ENTER_FRAME, action). Il n'y a cependant pas d'écouteur d'arrêt de la méthode, ce qui en fait un texte qui défile indéfiniment.
:: Voci donc le source téléchargable.
Débutants et débutantes en programmation Flash
Ce tutos fait suite aux deux premiers concernant la programmation de masque. Par contre un nouvel objet est préciser ici. C'est un objet texte programmer. C'est cet objet qui sera animer. C'est ce qui fait la différence si on le compare aux deux premiers sources sur les masques programmer. En effet car dans les tutos précédents, c'était le masque qui était animé. Il en và différemment avec ce tuto. L'objet masque est fixe et l'objet texte animé.
Encore une fois, le design est nourri à partir de la classe Design. Pour ceux et celles qui n'auront pas encore télécharger le package << icom.design >> pourront le faire ici même. Mais si vous le préférer vous pourrez aussi le copier/coller dans la zone des sources. Le source qui suit est fort simple. L'animation de texte est un principe très exploiter et très actuelle sur le web. Ce n'est certe pas un révolution. Le principe que je vous donnent est un principe de base. Il s'agit tout simplement d'un texte défilant masqué. Il n'est pas obliger qu'un texte soit masqué, par contre, pourquoi ne pas savoir mixé les techniques exposées sur les différents tutos. Une pierre deux coups en quelque sorte. C'est à partir d'un évènement, que le texte défile. Cet évènement est exécuter en même temps que lorsque l'animation est lancé. Cet évènement est ' tx.addEventListener(Event.ENTER_FRAME, action). Il n'y a cependant pas d'écouteur d'arrêt de la méthode, ce qui en fait un texte qui défile indéfiniment.
:: Voci donc le source téléchargable.
:: Quelques consignes concernant le source.
:: Assurez vous d'avoir le package << icom.design>> dézipper le dans un répertoire de votre choix.
:: Le répertoire << icom >> contiens un autre répertoire nommé << design >>
:: Le répertoire << design >> contiens la classe < Design.as >
:: Vous devriez avoir dans votre répertoire perso : << icom >> + votre fichier.fla juste à côté de << icom >>
:: Je vous suggère fortement de télécharger le fichier ' texteDefilant.zip ' ci-haut accèssible.
:: Vous le dézipper et le laisser comme tel dans votre répertoire perso, Il est prêt à être utilisé.
:: Prenez conscience qu'un package n'est rien de plus qu'un répertoire, donc un path/chemin. Nommé ici << icom.design >>.
:: La classe Design.as
Mise en site le :: 19 Avril 2008.
Dernière modification le :: 19 Avril 2008.
:: Assurez vous d'avoir le package << icom.design>> dézipper le dans un répertoire de votre choix.
:: Le répertoire << icom >> contiens un autre répertoire nommé << design >>
:: Le répertoire << design >> contiens la classe < Design.as >
:: Vous devriez avoir dans votre répertoire perso : << icom >> + votre fichier.fla juste à côté de << icom >>
:: Je vous suggère fortement de télécharger le fichier ' texteDefilant.zip ' ci-haut accèssible.
:: Vous le dézipper et le laisser comme tel dans votre répertoire perso, Il est prêt à être utilisé.
:: Prenez conscience qu'un package n'est rien de plus qu'un répertoire, donc un path/chemin. Nommé ici << icom.design >>.
:: La classe Design.as
- Code: Tout sélectionner
package icom.design
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.filters.BlurFilter;
// -- Déclaration de la classe Design --
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 ()
{
// -- Constructeur par défaut --
}
public function rectangleDesign ($nom:String,$posx:Number,$posy:Number,$largeur:Number,$hauteur:Number,$couleur:uint,$ligneGrosseur:Number,$ligneCouleur:uint,$trans:Number,$filtre:Boolean):void
{
nom=$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 :: 19 Avril 2008.
Dernière modification le :: 19 Avril 2008.
:: Consignes
:: Nouveau document .fla.
:: Dimension de la scène : largeur : 625px Hauteur : 400px.
:: Couleur de la scène : Black << Pour une optimisation des filtres.
:: Placer le source sur le premier keyframe du root. << Animation pricipale, la scène.
:: Enrégister votre fichier.fla et placer le à côté du répertoire << icom >>.
:: ctrl + enter << le lancement de l'animation
:: zone.fla
Mise en site le :: 19 Avril 2008.
Dernière modification le : 19 Avril 2008.
:: Nouveau document .fla.
:: Dimension de la scène : largeur : 625px Hauteur : 400px.
:: Couleur de la scène : Black << Pour une optimisation des filtres.
:: Placer le source sur le premier keyframe du root. << Animation pricipale, la scène.
:: Enrégister votre fichier.fla et placer le à côté du répertoire << icom >>.
:: ctrl + enter << le lancement de l'animation
:: zone.fla
- Code: Tout sélectionner
// -- Importation de la classe personnelle Design.
// --
import icom.design.Design;
// --
// -- Importation des classe prédéfinis de Flash.
// --
import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.text.TextFormat;
import flash.text.TexrField;
import flash.events.Event;
// --
// -- Deux objets de la classe Rectangle
// --
var zone:Rectangle = new Rectangle(10, 10, 605, 35);
var zoneMask:Rectangle = new Rectangle(15, 12, 595, 30);
// --
// -- Conteneur de base.
// --
var base:Sprite = new Sprite();
addChild (base);
// --
// -- Conteneur du masque et du texte.
// --
var baseBar:Sprite = new Sprite();
// --
// -- L'objet masque, cet objet prend les données de l'objet zoneMask
// -- issus de la classe Rectangle.
// --
var masque:Sprite = new Sprite();
masque.graphics.beginFill(0xFF0000, 1);
masque.graphics.drawRect(zoneMask.x, zoneMask.y, zoneMask.width, zoneMask.height);
// --
// -- Instancions un objet design, cet objet cible la classe Design.
// --
var d:Design = new Design();
base.addChildAt(d, 0);
base.addChildAt(baseBar, 1);
baseBar.addChildAt(masque, 0);
// --
// -- Utilisation de la méthode de classe rectangleDesign.
// --
d.rectangleDesign('d',zone.x, zone.y, zone.width, zone.height, 0x0066FF, 2, 0xFFFFFF, 1, true);
// --
// -- Objet de formatage du texte ' tf '.
// -- Cet objet seras le paramètre de l'objet texte ' tx '.
// --
var tf:TextFormat = new TextFormat();
var tx:TextField = new TextField();
tf.bold = true;
tf.size = 30;
tf.color = 0x000000;
// --
// -- Objet texte ' tx '.
// -- Cet objet sera masqué. Animé.
// --
tx.type = 'dynamic';
tx.selectable = false;
tx.text = "www.monsitegratuit.com";
// --
// -- Ajout de l'objet de formatage comme param de l'objet texte.
// --
tx.setTextFormat(tf);
// --
// -- Ajouter au conteneur.
// --
baseBar.addChild(tx);
// --
// -- Définir quelques propriétés
// --
tx.x = zoneMask.width + 12;
tx.y = 4;
tx.width = zoneMask.width - 120;
// --
// -- Évènement de l'animation de ' tx '.
// --
tx.addEventListener(Event.ENTER_FRAME, action);
// --
// -- Ajoutons l'objet ' tx ' au masque. ' mask ' étant une propriété
// --
tx.mask = masque;
// --
// -- La fonction ' action '. pour un défilement en continu.
// --
function action (event:Event):void
{
tx.x -= 2.0;
if (tx.x <= zoneMask.x - tx.width)
{
tx.x = zoneMask.width;
}
}
Mise en site le :: 19 Avril 2008.
Dernière modification le : 19 Avril 2008.
Savoir mixé les différentes techniques à partir des différents tutos
Vous avez un peu partout sur MSG, des tutos fait par les membres et ce, dans différents secteurs de l'informatique. Vous pourriez très bien par exemple mixé le tuto nommé MX [6] :: Une technique d'animation et en faire l'objet masqué. Comme le disait si bien Hillman Curtis, webmaster New-Yorkais en Flash, que le mouvement est communication. Par le fait même le mouvement des objets dans un espace donné devrais avoir pour but de communiquer. Ne serais-ce que des sentiments et des émotions, au minimum communiquer la beauté même de l'art du mouvement des objets. Si vous êtes comme moi, vous devriez apprécier les espaces miniatures comme les zones de bannières publicitaires, qui à mon avis sont des espaces suffisant pour exprimer l'art du mouvement communicatif. Quoique les scripts de ce tuto soit basic, Il n'en tient qu'à vous de savoir mixé les différentes techniques soumis sur le site de MSG. Dans le source ci-haut mentionné, vous y trouvé des containers, au nombre de deux et imbriqués l'un dans l'autre. Par le fait même si vous cibler le conteneur de base et le déplacer en ' y '. toute l'animation suivra. Évidemment celà comprend le texte. C'est là un des nombreux avantages des containers. Si vous écrivez à la toute fin du source zone.fla ce qui suit : Exemple : base.y += 200; vous verrez l'ensemble du projet se positionner à 200px. Mais c'est grâce à l'imbrication des containers qu'il en est ainsi. J'ai donc mixé quelques unes des techniques mentionnés dans les différents tutos tout en restant simple. Evidemment je pourrais très bien mixé une ou des techniques d'animations et rendre ce simple projet en quelque chose de plus agréable à visualiser. Si l'objet texte était nourri d'une matrice de type ' string '. nous pourrions faire en sorte que le message change à chaque passage, selon la longeur de la matrice. Rien ici ne vous empêche d'attacher des clip's différents qui changerais selon le temps. Vous pouvez y placer des objets de la scène. La base est de comprendre que : ' tx.mask = masque; ' peu aussi bien être : ' monObjetDeScene.mask = masque; '.
Vous avez un peu partout sur MSG, des tutos fait par les membres et ce, dans différents secteurs de l'informatique. Vous pourriez très bien par exemple mixé le tuto nommé MX [6] :: Une technique d'animation et en faire l'objet masqué. Comme le disait si bien Hillman Curtis, webmaster New-Yorkais en Flash, que le mouvement est communication. Par le fait même le mouvement des objets dans un espace donné devrais avoir pour but de communiquer. Ne serais-ce que des sentiments et des émotions, au minimum communiquer la beauté même de l'art du mouvement des objets. Si vous êtes comme moi, vous devriez apprécier les espaces miniatures comme les zones de bannières publicitaires, qui à mon avis sont des espaces suffisant pour exprimer l'art du mouvement communicatif. Quoique les scripts de ce tuto soit basic, Il n'en tient qu'à vous de savoir mixé les différentes techniques soumis sur le site de MSG. Dans le source ci-haut mentionné, vous y trouvé des containers, au nombre de deux et imbriqués l'un dans l'autre. Par le fait même si vous cibler le conteneur de base et le déplacer en ' y '. toute l'animation suivra. Évidemment celà comprend le texte. C'est là un des nombreux avantages des containers. Si vous écrivez à la toute fin du source zone.fla ce qui suit : Exemple : base.y += 200; vous verrez l'ensemble du projet se positionner à 200px. Mais c'est grâce à l'imbrication des containers qu'il en est ainsi. J'ai donc mixé quelques unes des techniques mentionnés dans les différents tutos tout en restant simple. Evidemment je pourrais très bien mixé une ou des techniques d'animations et rendre ce simple projet en quelque chose de plus agréable à visualiser. Si l'objet texte était nourri d'une matrice de type ' string '. nous pourrions faire en sorte que le message change à chaque passage, selon la longeur de la matrice. Rien ici ne vous empêche d'attacher des clip's différents qui changerais selon le temps. Vous pouvez y placer des objets de la scène. La base est de comprendre que : ' tx.mask = masque; ' peu aussi bien être : ' monObjetDeScene.mask = masque; '.
