Accueil > > > AS2 - CALAGE AUTOMATIQUE DES CLIPS EN MODE NOSCALE
AS2 - CALAGE AUTOMATIQUE DES CLIPS EN MODE NOSCALE
Information sur la source
Description
Voici une fonction de calage de clips lors d'un redimensionnement en mode "noScale". J'ai développé cette source pour un site full-Flash sur lequel je travaille en ce moment. J'espère qu'elle pourra faciliter la tâche de certains d'entre vous. Et désolé pour l'AS2, je ne me suis pas encore mis dans l'AS3 ^^
Source
- /*
-
- EXPLICATION DE LA FONCTION :
-
- function caler(clip,pacX,pasX,margeX,pacY,pasY,margeY);
-
- - clip : Le clip cible évidemment.
-
- - pacX : Le point d'alignement du clip sur l'axe horizontal.
- Valeurs possibles :
- G = bord gauche
- C = centre
- D = bord droit
- A = ancre du clip
-
- - pasX : Le point d'alignement sur la scène sur l'axe horizontal.
- Valeurs possibles :
- G = bord gauche
- C = centre
- D = bord droit
-
- - margeX : Décalage supplémentaire sur l'axe horizontal (voir exemples plus bas).
-
- - pacY : Le point d'alignement du clip sur l'axe vertical.
- Valeurs possibles :
- H = bord supérieur
- M = milieu
- B = bord inférieur
- A = ancre du clip
-
- - pasY : Le point d'alignement sur la scène sur l'axe vertical.
- Valeurs possibles :
- H = bord supérieur
- M = milieu
- B = bord inférieur
-
- - margeY : Décalage supplémentaire sur l'axe vertical (voir exemples plus bas).
-
- */
-
- // Réglage du mode d'affichage
- Stage.scaleMode = "noScale";
-
- // Initialisation de l'objet s (scène)
- var s = new Object();
- s.oWi = 800; // largeur originale de la scène
- s.oHe = 600; // hauteur originale de la scène
-
- // Il est nécessaire de rentrer manuellement les dimensions originales de la scène,
- // afin de pouvoir calculer correctement tout le reste.
-
-
- // La voilà...
- function caler(clip,pacX,pasX,margeX,pacY,pasY,margeY){
- //----------------------------------------
- // Objet Scène
- //----------------------------------------
- s.Wi = Stage.width; // largeur actuelle de la scène
- s.He = Stage.height; // hauteur actuelle de la scène
- //----------------------------------------
- s.G = (s.oWi-s.Wi)/2; // position x du bord gauche de la scène
- s.C = s.oWi/2; // position x du centre de la scène
- s.D = s.oWi-(s.oWi-s.Wi)/2; // position x du bord droit de la scène
- //----------------------------------------
- s.H = (s.oHe-s.He)/2; // position y du bord supérieur de la scène
- s.M = s.oHe/2; // position y du milieu de la scène
- s.B = s.oHe-(s.oHe-s.He)/2; // position y du bord inférieur de la scène
- //----------------------------------------
- // Objet Clip
- //----------------------------------------
- var c = new Object();
- c.A = 0; // si l'ancre est choisie comme point d'alignement, pas de décalage
- c.aX = clip._x; // position x de l'ancre du clip
- c.aY = clip._y; // position y de l'ancre du clip
- c.l = clip.getBounds(_root); // limites du clip
- /*----------------------------------------
- Comme l'ancre d'un clip n'est pas toujours le point que l'on veut utiliser pour le placement,
- j'utilise getBounds afin de pouvoir calculer les coordonnées réelles des coins du clip.
- Ainsi, peut importe où vous placez l'ancre de vos clips, le calage se fera en fonction
- des paramètres choisis (regardez par exemple le clip bleu).
- ----------------------------------------*/
- c.G = c.aX-c.l.xMin; // décalage sur x entre le bord gauche du clip et son ancre
- c.D = c.aX-c.l.xMax; // décalage sur x entre le bord droit du clip et son ancre
- c.C = (c.G+c.D)/2; // décalage sur x entre le centre du clip et son ancre
- //----------------------------------------
- c.H = c.aY-c.l.yMin; // décalage sur y entre le bord supérieur du clip et son ancre
- c.B = c.aY-c.l.yMax; // décalage sur y entre le bord inférieur du clip et son ancre
- c.M = (c.B+c.H)/2; // décalage sur y entre le milieu du clip et son ancre
- //----------------------------------------
- // Placement du clip
- //----------------------------------------
- // Récupération des valeurs demandées en paramètres
- referenceSceneX = s[pasX];
- referenceSceneY = s[pasY];
- decalageClipX = c[pacX];
- decalageClipY = c[pacY];
- // Et enfin, placement du clip
- clip._x = referenceSceneX+decalageClipX+margeX;
- clip._y = referenceSceneY+decalageClipY+margeY;
- }
-
- // Création du tableau contenant les clips devant être recalés
- listeClips = new Array();
- listeClips.push([joe,"A","G",10,"A","H",10]);
- listeClips.push([jack,"D","D",-10,"H","M",0]);
- listeClips.push([william,"C","C",0,"M","M",0]);
- /*
- J'ai opté pour cette technique afin de pouvoir facilement rajouter
- et/ou soustraire des clips à la liste.
-
-
- EXEMPLES concernant les valeurs passées en paramètres :
- Pour joe, cela aura pour effet de caler l'ancre du clip
- dans le coin supérieur gauche de la scène, avec une marge de 10px sur les côtés.
- Quant à jack, il sera calé à 10px du bord droit avec le haut du clip aligné au milieu de la scène.
-
-
- La fonction suivante va donc appeler la fonction caler()
- pour chaque clip enregistré dans le tableau listeClips.
- */
- function calerTout(){
- for(i=0;i<listeClips.length;i++){
- caler(listeClips[i][0],
- listeClips[i][1],
- listeClips[i][2],
- listeClips[i][3],
- listeClips[i][4],
- listeClips[i][5],
- listeClips[i][6]);
- }
- }
-
- // On ajoute l'écouteur qui va appeler la fonction calerTout
- // en cas de redimensionnement de la fenêtre
- var stageListener:Object = new Object();
- stageListener.onResize = function(){
- calerTout();
- }
- Stage.addListener(stageListener);
-
- // Ici, en cliquant sur jack, on va ajouter sur la scène une occurence de averell
- // qui va être ajoutée au tableau listeClips avec ses propres paramètres de placement
- jack.onRelease = function(){
- _root.attachMovie("averell","averell",_root.getNextHighestDepth());
- listeClips.push([averell,"C","C",0,"B","B",-5]);
- calerTout();
- }
-
- // Pour finir, on initialise les placements des clips
- // en appelant manuellement la fonction
- calerTout();
-
/*
EXPLICATION DE LA FONCTION :
function caler(clip,pacX,pasX,margeX,pacY,pasY,margeY);
- clip : Le clip cible évidemment.
- pacX : Le point d'alignement du clip sur l'axe horizontal.
Valeurs possibles :
G = bord gauche
C = centre
D = bord droit
A = ancre du clip
- pasX : Le point d'alignement sur la scène sur l'axe horizontal.
Valeurs possibles :
G = bord gauche
C = centre
D = bord droit
- margeX : Décalage supplémentaire sur l'axe horizontal (voir exemples plus bas).
- pacY : Le point d'alignement du clip sur l'axe vertical.
Valeurs possibles :
H = bord supérieur
M = milieu
B = bord inférieur
A = ancre du clip
- pasY : Le point d'alignement sur la scène sur l'axe vertical.
Valeurs possibles :
H = bord supérieur
M = milieu
B = bord inférieur
- margeY : Décalage supplémentaire sur l'axe vertical (voir exemples plus bas).
*/
// Réglage du mode d'affichage
Stage.scaleMode = "noScale";
// Initialisation de l'objet s (scène)
var s = new Object();
s.oWi = 800; // largeur originale de la scène
s.oHe = 600; // hauteur originale de la scène
// Il est nécessaire de rentrer manuellement les dimensions originales de la scène,
// afin de pouvoir calculer correctement tout le reste.
// La voilà...
function caler(clip,pacX,pasX,margeX,pacY,pasY,margeY){
//----------------------------------------
// Objet Scène
//----------------------------------------
s.Wi = Stage.width; // largeur actuelle de la scène
s.He = Stage.height; // hauteur actuelle de la scène
//----------------------------------------
s.G = (s.oWi-s.Wi)/2; // position x du bord gauche de la scène
s.C = s.oWi/2; // position x du centre de la scène
s.D = s.oWi-(s.oWi-s.Wi)/2; // position x du bord droit de la scène
//----------------------------------------
s.H = (s.oHe-s.He)/2; // position y du bord supérieur de la scène
s.M = s.oHe/2; // position y du milieu de la scène
s.B = s.oHe-(s.oHe-s.He)/2; // position y du bord inférieur de la scène
//----------------------------------------
// Objet Clip
//----------------------------------------
var c = new Object();
c.A = 0; // si l'ancre est choisie comme point d'alignement, pas de décalage
c.aX = clip._x; // position x de l'ancre du clip
c.aY = clip._y; // position y de l'ancre du clip
c.l = clip.getBounds(_root); // limites du clip
/*----------------------------------------
Comme l'ancre d'un clip n'est pas toujours le point que l'on veut utiliser pour le placement,
j'utilise getBounds afin de pouvoir calculer les coordonnées réelles des coins du clip.
Ainsi, peut importe où vous placez l'ancre de vos clips, le calage se fera en fonction
des paramètres choisis (regardez par exemple le clip bleu).
----------------------------------------*/
c.G = c.aX-c.l.xMin; // décalage sur x entre le bord gauche du clip et son ancre
c.D = c.aX-c.l.xMax; // décalage sur x entre le bord droit du clip et son ancre
c.C = (c.G+c.D)/2; // décalage sur x entre le centre du clip et son ancre
//----------------------------------------
c.H = c.aY-c.l.yMin; // décalage sur y entre le bord supérieur du clip et son ancre
c.B = c.aY-c.l.yMax; // décalage sur y entre le bord inférieur du clip et son ancre
c.M = (c.B+c.H)/2; // décalage sur y entre le milieu du clip et son ancre
//----------------------------------------
// Placement du clip
//----------------------------------------
// Récupération des valeurs demandées en paramètres
referenceSceneX = s[pasX];
referenceSceneY = s[pasY];
decalageClipX = c[pacX];
decalageClipY = c[pacY];
// Et enfin, placement du clip
clip._x = referenceSceneX+decalageClipX+margeX;
clip._y = referenceSceneY+decalageClipY+margeY;
}
// Création du tableau contenant les clips devant être recalés
listeClips = new Array();
listeClips.push([joe,"A","G",10,"A","H",10]);
listeClips.push([jack,"D","D",-10,"H","M",0]);
listeClips.push([william,"C","C",0,"M","M",0]);
/*
J'ai opté pour cette technique afin de pouvoir facilement rajouter
et/ou soustraire des clips à la liste.
EXEMPLES concernant les valeurs passées en paramètres :
Pour joe, cela aura pour effet de caler l'ancre du clip
dans le coin supérieur gauche de la scène, avec une marge de 10px sur les côtés.
Quant à jack, il sera calé à 10px du bord droit avec le haut du clip aligné au milieu de la scène.
La fonction suivante va donc appeler la fonction caler()
pour chaque clip enregistré dans le tableau listeClips.
*/
function calerTout(){
for(i=0;i<listeClips.length;i++){
caler(listeClips[i][0],
listeClips[i][1],
listeClips[i][2],
listeClips[i][3],
listeClips[i][4],
listeClips[i][5],
listeClips[i][6]);
}
}
// On ajoute l'écouteur qui va appeler la fonction calerTout
// en cas de redimensionnement de la fenêtre
var stageListener:Object = new Object();
stageListener.onResize = function(){
calerTout();
}
Stage.addListener(stageListener);
// Ici, en cliquant sur jack, on va ajouter sur la scène une occurence de averell
// qui va être ajoutée au tableau listeClips avec ses propres paramètres de placement
jack.onRelease = function(){
_root.attachMovie("averell","averell",_root.getNextHighestDepth());
listeClips.push([averell,"C","C",0,"B","B",-5]);
calerTout();
}
// Pour finir, on initialise les placements des clips
// en appelant manuellement la fonction
calerTout();
Conclusion
Voilà, j'espère que j'ai été assez clair...
N'hésitez pas à me faire part de vos questions et de vos améliorations. Merci ^^
Historique
- 13 septembre 2008 21:17:09 :
- - ajout d'un croquis rapide pour expliquer visuellement les différentes variables
- 14 septembre 2008 10:51:13 :
- ajout du fichier AC_RunActiveContent.js que j'avais oublié de jiondre dans le zip
- 14 septembre 2008 10:52:04 :
- - ajout dans le zip du fichier AC_RunActiveContent.js que j'avais oublié
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Soucis de close.window apres un fullscreen... [ par C0ke ]
Bonjour a tous.Voila ca fait 2 jours que je me prend la tete sur la fermeture de mon animation flash en fullscreen.Le fullscreen fonctionne a merveill
pas de fullscreen [ par lilyvirus ]
SVP comment puis je faire pour obtenir une page HTML depuis un .swf, qui s'adapte a la taille de l'ecran mais ou il resterai la barre des titre bleu e
anim off-line en fullscreen sans étirer sa taille ? [ par eonmetal ]
salut tout le mondej'ai un petit problème qui est le suivant : je dois faire une anim off-line optimisée en 800/600, et si je la lance en fullscreen
100% mais sans fullscreen [ par Straw ]
scrollbar = no [ par damien3d ]
bonsoir,je recherche le code qui pourrait empêcher les scrollbar d'apparaitre.en effet, j'ouvre une popup en fullscreen et scrollbar=no mais cela
fscommand("fullscreen") ne marche pas sous Mozilla Firefox [ par badben ]
Salut, l'essentiel de mon problème est dans le sujet de mon post. Pour ceux qui aurait trouvé la bidouille merci davance. ;)
Retailler et positionner des images [ par nepomuk ]
Pour faire une galerie, je charge des photos, Les redimensionne à la même hauteur, en gardant les proportions, Les met bout à bout en m
jouer et positionner un swf [ par xmuse ]
Bonjour tout le monde, voilà mon problème.Je tiens à préciser que je suis ultra débutant.J'ai créé une animation av
Comment positionner un movie loadé [ par kwiketa ]
Bonjour, loadMovie("Mymovie.swf",1); Comment assigner _x et _y à Mymovie.swf ? je ne veux pas utiliser de clip conteneur &#
positionner des textfield - problème pour récup X et Y [ par Cgaybeul ]
ben voilà ! j'essai de positionner des textes crées dynamyquement à partir d'un XML : var maVille = _root.cre
|
Derniers Blogs
[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril
Le deuxième keynote du mix fut très riche en contenu. Internet Explorer 9 Juste un après le lancement de Internet Explorer 8, Microsoft a dévoilé les nouveautés de Internet Explorer 9. Désormais, IE supportera HTML5, SVG et CSS3. L'élément ...
Cliquez pour lire la suite de l'article par cyril CERTIFICATIONS BETA .NET 4CERTIFICATIONS BETA .NET 4 par KooKiz
Les inscriptions pour les certifications beta .NET 4 ont commencé. L'inscription est offerte pour les examens suivants : - 71-511, TS: Windows Applications Development with Microsoft .NET Framework 4 - 71-515, TS: Web Applications Development with...
Cliquez pour lire la suite de l'article par KooKiz [MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo
J'imagine que la plupart d'entre vous connaissent bien et utilisent le service de traduction de Google, mais connaissez-vous celui de Microsoft . Microsoft Translator ? Effectivement, Microsoft nous annoncé le lancement version 2 de la Technologie Preview...
Cliquez pour lire la suite de l'article par redo LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010!LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE
Toutes les vidéos de ce lancement sont en ligne!
Partie I - Intro
http://www.youtube.com/watch?v=LkQzTQ8T6CA
Partie II - Démo 1
http://www.youtube.com/watch?v=drAhYQ7lqvo
Partie III - Démo 2
http://www.youtube.com/watch?v=c8KM_1Gqybc...
Cliquez pour lire la suite de l'article par MPOWARE [WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE[WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE par FREMYCOMPANY
Je pense qu'ils ont besoin d'une piqure de rappel chez Microsoft : c'est bien gentil d'avoir une interface jolie, mais si c'est pour avoir un truc qui ne convainct pas dedans, c'est peine perdue.
---->
Système ouvert ----> Fermé ?
P...
Cliquez pour lire la suite de l'article par FREMYCOMPANY
Forum
RE : SETINTERVALRE : SETINTERVAL par Orange73
Cliquez pour lire la suite par Orange73
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|