StageManager 0.1
Par -Alexandre LEGOUT aka LAlex- le mercredi, août 25 2004, 23:44 - AS2 - Lien permanent
Pour continuer dans la série des 0.1, voici aujourd'hui une classe que je termine tout juste, servant à gérer le positionnement et la taille de clips dans des animations Flash plein écran. En effet, alors qu'il est maintenant possible de créer des site Flash occupant la totalité d'une fenêtre grâce à la classe Stage, trés peu de site l'utilisent ...
J'ai donc crée ce set de classe afin de faciliter la gestion des clips dans cette situation précise. On peut ainsi décider de la position d'un clip et de son alignement sur la scène, ainsi que sa taille. Il est ainsi possible de profiter presque de la même souplesse qu'offre HTML pour des applications qui pourraient ainsi occuper la totalité de la surface de l'animation.
Voici un exemple d'utilisation:import com.lalex.stage.StageManager;
import com.lalex.movieclip.SuperClip;
var stageMgr:StageManager = StageManager.getInstance();
// Alignement en haut à gauche, sans marge, de largeur 100%, hauteur inchangée
stageMgr.addElement(new SuperClip(_root.taskbar), {align:"left,top", margin:0, size:"100%,none"});
// Aligné à droite, avec une marge (à droite) de 10px
stageMgr.addElement(new SuperClip(_root.rightMenu), {align:"right", margin:10});
// Aligné en bas avec une marge (verticale) de 5% de la hauteur de l'anim
stageMgr.addElement(new SuperClip(_root.footer), {align:"bottom", margin:"none,5%"});
Bien qu'il manque encore des fonctionnalités ou des options de positionnement, StageManager est dors et déjà utilisable, et la classe SuperClip devrait donner naissance à une fonctionnalité similaire aux méthodes de positionnement de Stéphan Guénette.
L'utilisation de la composition dans SuperClip permet ainsi de gérer des clips dont le redimensionnement devrait se faire de manière spécifique, comme des composants par exemple. Il suffirait alors de créer une classe qui implémente l'interface IClip. Bref, en créant la classe appropriée, vous pouvez gérer virtuellement tout objet qui s'affiche à l'écran. 
Commentaires
tiens, moi aussi j'en ai fait un
[url:ffe99bc192]http://neo-lao.com/ressources/index.php?page=14&fiche=34[/url]
même principe, un Object en paramètre
Intéressant!
Tu devrais y ajouter un option pour qu'il utilise un setInterval, réduisant l'impact du onResize apellé trop fréquemment.
Plus d'infos: http://www.gotoandplay.ca/archives/2003/06/07/onresize_trop_exigeant.html
Pour ma part puis ce qu'on y est je vous propose une classe Localizer qui permet en fonction du Stage.align de déterminer la position du centre de la scène et du coup de savoir exactement où se trouve un point sur la scène.... cette méthode permet dans le cas d'un panneau par exemple pour un combobox, colorPicker ou autre de l'ouvrir toujours comme il faut selon où le composant se trouve dans la scène et dans toutes les situations ..
/* ----------------
Name : Localizer
Package : com.eka.stage
Version : 1.0.0
Date : 2003-03-25
Author : ekameleon
URL : <a href="http://www.ekameleon.net" rel="nofollow">http://www.ekameleon.net</a>
Mail : <a href="mailto:contact@ekameleon.net" rel="nofollow">contact@ekameleon.net</a>
DESCRIPTION :
Classe statique. Permet de définir la position d'un point selon le référentiel défini par la propriété Stage.align courante.
PUBLIC PROPERTIES :
- _middle : propriété en lecture seule. Retourne un point ayant pour coordonnées x et y le centre de la scène.
- _w : propriété en lecture seule. Retourne la largeur initiale de la scène principale.
- _h : propriété en lecture seule. Retourne la hauteur initiale de la scène principale.
PUBLIC METHODS :
- localizePoint (p:Object) : String
Description : Méthode statique.
Cette méthode renvoie une chaine de caractère
Retourne la position d'un point dans la scène principale en fonction du référentiel courant défini par la propriété Stage.align.
argument : un objet définissant un point de coordonnée x et y.
renvoi :
- "B" : Bottom
- "T" : Top
- "L" : Left
- "R" : Right
- "TL" : Top Left
- "TR" : Top Right
- "BL" : Bottom Left
- "BR" : Bottom Right
- "" : Center
- getMirror (position:String) : String
Decription : renvoi la position mirroir dans la scène d'une position donnée.
Exemple :
- "T" renvoi "R" ;
- "B" renvoi "T" ;
- "TR" renvoi "BL" ;
- "TL" renvoi "BR" ;
- "BR" renvoi "TL" ;
- "BL" renvoi "TR" ;
- "L" renvoi "R" ;
- "R" renvoi "L" ;
- "" renvoi "" ;
----------------*/
class com.eka.stage.Localizer {
private static var $initWidth = Stage.width ;
private static var $initHeight = Stage.height ;
private static var $x:Number ;
private static var $y:Number ;
// ----o Author Properties
public static var className:String= "Localizer" ;
public static var classPackage:String= "com.neko.stage";
public static var version:String= "1.0.0";
public static var author:String= "ekameleon";
public static var link:String= "<a href="http://www.ekameleon.net" rel="nofollow">http://www.ekameleon.net</a>" ;
// ----o Private Methods
private static var $curX:Number ;
private static var $curY:Number ;
private static var $pos:String ;
// ----o Constructor
private function Localizer () { Stage.scaleMode = "noScale" }
// ----o Virtual Properties
static public function get _middle () : Object {
setMiddle () ;
return { x:$x , y:$y }
}
static public function get _w () : Number { return $initWidth }
static public function get _h () : Number { return $initHeight }
// ----o Public Methods
static public function localizePoint (p:Object) : String {
$curX = p.x ;
$curY = p.y ;
setMiddle () ;
setPos () ;
return $pos ;
}
static public function getMirror (position:String) : String {
var pos:String ;
switch (position.toUpperCase () ) {
case "T" : return "R" ;
case "B" : return "T" ;
case "TR" : return "BL" ;
case "TL" : return "BR" ;
case "BR" : return "TL" ;
case "BL" : return "TR" ;
case "L" : return "R" ;
case "R" : return "L" ;
default : return "" ;
}
}
// ----o Private Methods
static private function setMiddle () : Void {
switch (Stage.align) {
case "TR" : // top right
$x = - (Stage.width - $initWidth) + Stage.width / 2 ;
$y = Stage.height / 2 ;
break ;
case "LT" : // top left
$x = Stage.width / 2 ;
$y = Stage.height / 2 ;
break ;
case "LB" : // bottom left
$x = Stage.width / 2 ;
$y = - ((Stage.height / 2) - $initHeight) ;
break ;
case "L" : // left
$x = Stage.width / 2 ;
$y = $initHeight / 2 ;
break ;
case "R" : // right
$x = - (Stage.width - $initWidth) + Stage.width / 2 ;
$y = $initHeight / 2 ;
break ;
case "RB" : // bottom right
$x = - (Stage.width - $initWidth) + Stage.width / 2 ;
$y = - ((Stage.height / 2) - $initHeight) ;
break ;
case "T" : // bottom
$x = $initWidth / 2 ;
$y = Stage.height / 2 ;
break ;
case "B" : // bottom
$x = $initWidth / 2 ;
$y = - ((Stage.height / 2) - $initHeight) ;
break ;
default : // center
$x = $initWidth / 2 ;
$y = $initHeight / 2 ;
}
}
static private function setPos () : Void {
if ($curX == undefined && $curY == undefined) { $pos = "" ; return ; }
if ($curX > $x && $curY > $y) $pos = "BR" ;
else if ( $curX < $x && $curY > $y ) $pos = "BL" ;
else if ( $curX > $x && $curY < $y) $pos = "TR" ;
else if ( $curX < $x && $curY < $y ) $pos = "TL" ;
else if ( $curX == $x && $curY > $y ) $pos = "B" ;
else if ( $curX == $x && $curY < $y ) $pos = "T" ;
else if ( $curX < $x && $curY == $y ) $pos = "L" ;
else $pos = "R" ;
}
}
Bien entendu faut que le Stage.scaleMode soit en mode "noScale" et l'animation en 100% au niveau de la publication HTML
Sinon top cette idée de temporisée le onResize, j'y avais pas pensé mais cela va me permettre pas mal de truc
merci steph de nous rappeler l'existance de ton billet là dessus.. je l'avais pas vu sur ton blog ?? 
bye
Cette classe repose sur le fait qu'elle soit initialisée au début du téléchargement de l'animation en _level0 si je ne m'abuse ? Sinon je ne vois pas trop comment déterminer le centre de l'animation sans connaitre la taille réelle de l'animation de base en elle-même quand on utilise align = "CC" par exemple.
Personnellement, c'est un truc que j'utilise depuis flash5 le fullscreen dans une fenetre html et l'utilisation du Stage... C'est un peu aussi l'argument qui m'a fait monter les prix de mes projets... Personne ne le proposait a l'epoque... Zut, va falloir que je trouvaille une autre idee... lol
Sinon, j'ai eu a utiliser pas mal de trucs pour me decider a rester sur la methode du broadcast : enregistrer mes objets ou mes clips a une classe qui ecoute le Stage et broadcaste vers ces objets lors d'un changement de l'etat du Stage, chaque objet ou clip ayant une methode specifique pour se replacer directement.
Moi aussi, je préfère que chacun de mes clips aient leurs propres méthodes pour se positionner... parce qu'il m'arrive souvent de les repositionner en animation et non directement, et ça c'est un truc que je préfère faire "custom" à chaque fois... Mais je vois bien des projets où cette classe pourrait m'être utile...
Mais roikku, si je me souviens bien l'événement onResize du stage n'est apparu que dans Flash MX, non ??
oe, mais cela n'empechait pas d'avoir du full screen dans la page html et de simuler les parametres de positionnement des le debut. Bien sur fallait fixer la taille de la page html ou du projo.
MX m'a vraiment simplifier la vie avec ce onResize... ^^
pas de Stage dans flash 5 en effet
Sinon pour Tek >> la taille de l'animation est défini par des variables statiques directement sur le _level0... vu que Stage gère quoi qu'il arrive le positionnement de l'animation principale
.... La finesse c'est qu'au lancement de l'animation, toutes les classes sont lues... à ce moment là l'animation est à sa taille par défaut et n'a pas encore pri la taille de l'écran avec le Stage.scaleMode et le Stage.align ... du coup on capte directement la taille d'origine de l'animation (largeur et hauteur) qu'on enregistre dans les propriétés statiques $initWidth et $initHeight
Pour ce qui est de la méthode de lalex... ce qui est intéressant c'est de recréer des DIV HTML mais en flash avec les mêmes propriété CSS ... du coup on peut rapidement retrouver la souplesse du html à ce niveau là et même imaginer utiliser la classe TextField.StyleSheet ou une autre qui hérite de la première pour gérer carrément son interface via des css (margin, padding etc....)
Par contre ... c'est vrai que je vais rajouter une méthode pour définir manuellement la taille de l'animation, cela peut servir pour généraliser l'effet de cette classe dans n'importe quel clip en utilisant le mc._width et le mc._height et non pas uniquement dans l'animation principale
bien sympa ces petite classe, ekaméleon pourquoi tu n'encapsule pas aussi la gestion d'un point dans une classe ?
c'est quoi que tu appelles la gestion d'un point ?
(un vecteur ? :))
@stef > Si le repositionnement doit se faire en animation, rien n'empeche d'implémenter une méthode move qui déplace en animation dans l'implémentation de l'interface IClip ...
ekameleon:
On est d'accord, mais je pensais au cas où la classe serait chargée dans un SWF aprés le lancement de l'animation. Personellement je charge l'animation en _level0 pour écraser le preloader et c'est mort dans ce cas.
Quoiqu'il en soit ce ne serait plus un problème si il y a vait moyen de récupérer la taille de l'animation exportée en AS. C'est pourtant jouable avec les fscommand depuis l'hôte du lecteur.
euh ? en général on se sert de ma classe au dessus dans un Stage.scaleMode = "noScale" et un Stage.align défini ... donc quoi qu'il arrive on se fiche de savoir dans quoi est chargé l'animation ... la scène principale sera tjs maitresse pour ce qui est de la largeur et la hauteur
Reste qu'en ajoutant la méthode setinitWidth et setInitHeight on a de quoi faire même dans d'autres cas de figure
Hello, je suis content d'avoir trouvé ta classe pour avoir un flash qui prend tout le stage automatiquement et sans ascenseur. J'utilise mac et j'ai vu qu'avec firefox, l'animation est coupée à environ 100 px du haut. Avec Safari et explorer il n'y a pas de problème. Est ce que ça pourrait être un problème due à la classe ?
non mais à la publication de ton .html
il ne faut pas publier avec flash directement 
Oui je sais, je traite le html séparément en stipulant la hauteur et largeur manuellement, mais avec firefox (et uniquement firefox), c'est comme si j'avais un stage d'une largeur 100% et d'une hauteur 100px. Alors que les valeurs dans le code html sont bel et bien 100% pour les deux.
c'est l'entête W3C au début de la page HTML qui ne va pas ... et d'autres éléments non conformes.
Il faut bien apprendre à intégrer les balises object et embed en faisant "simple" le plus souvant possible. Firefox n'aime pas beaucoup les effets de style de la publication par défaut de Flash
bye
Autant pour moi, j'avais en effet repris un vieux code qui conservait cette entête. Merci pour tout.
Fil des commentaires de ce billet