begin process at 2010 02 09 22:02:34
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

ActionScripts

 > AS2 - CALAGE AUTOMATIQUE DES CLIPS EN MODE NOSCALE

AS2 - CALAGE AUTOMATIQUE DES CLIPS EN MODE NOSCALE


 Information sur la source

Note :
9,5 / 10 - par 2 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :ActionScripts Classé sous :noScale, caler, positionner, fullscreen, scaleMode Niveau :Initié Date de création :13/09/2008 Date de mise à jour :14/09/2008 10:52:04 Vu / téléchargé :4 530 / 465

Auteur : mouahaha

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note


 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 ^^

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 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

Source avec Zip Source avec une capture FIREBUGTRACER (AS3) - UTILISER LA CONSOLE FIREBUG POUR VOS D...
Source avec Zip COLORMANAGER AS3
Source avec Zip Source avec une capture FORMULAIRE FLASH2MAIL SIMPLE AVEC INFOS
Source avec Zip UTILISATION DE L'OBJET CAMERA AVEC DETECTION DE MOUVEMENT ET...
Source avec Zip Source avec une capture UTILISATION DE L'OBJET COLOR (TEINTER UN SITE OU UNE IMAGE S...

 Sources de la même categorie

Source avec Zip NAVIGATION DANS UN FICHIER XML par inaden
Source avec Zip Source avec une capture TWSCROLLBAR, UNE CLASSE DE SCROLLBAR SIMPLE ET PRATIQUE À UT... par Twinspirit
Source avec Zip Source avec une capture REBOND DE BALLON AVEC TWEEN par habibcode
Source avec Zip DIAPORAMA AS2 par ahmedhrbdj
Source avec Zip EXAMPLES DE TWEENS AS2 par rajas

 Sources en rapport avec celle ci

Source avec Zip ENCHAINEMENT FLV SANS XML PAR BOUTON AVEC FULLSCREEN+FLVPLAY... par tranber78

Commentaires et avis

Commentaire de jaybob le 01/03/2009 15:51:19

Hello Mouahaha,
Excellent script très bien détaillé et didactique. Tu m'as épargné de looooongues heures de recherches et fait gagner un temps précieux. C'est exactement ce dont j'avais besoin. Merci,
Bob

Commentaire de mouahaha le 01/03/2009 16:10:07

De rien, content de t'avoir aidé ! :D

Commentaire de latour500 le 25/03/2009 20:04:09 9/10

Bonjour,
Super comme script, clair et tres fonctionnel pour l'avoir testé, merci  bcp.

Commentaire de bilbobsaquet le 29/03/2009 15:08:04

Le travail que tu as réalisé m'a grandement servi , il me sert dorénavant de base pour toutes mes réalisations.... encore merci à toi ;)
Néanmoins il se passe un bug quand je visionne un site via Firefox; les calages que j'ai précisé dans mon flash ne sont pas respectés, les éléments se ferrent en haut et se chevauchent.
Ce cas ne se presente que sur Firefox, tout est respecté sur I.E ou encore Safari.
Je dispose de la derniere mis à jour de Firefox.

Ce bug viendrait il de moi ? (ce que j'espère ;) )
As tu déja rencontré ce souci ?
                                       BilBob

(ps: Quand j'intègre mon swf à mon index.html je précise bien les tailles du swf à 100 % ainsi qu'un calage en milieu absolu.)

Commentaire de arabinet le 15/05/2009 16:07:39

un grand merci pour toi ton travail m'a boucaup m'aider encore mille merci

Commentaire de faab41 le 04/02/2010 10:54:49

Salut et merci pour ce travail très utile.
Toutefois je voulais utiliser des empty movie clip pour charger des swf dans la page principale, et ça fonctionne mais uniquement après redimension de la page.
J'ai beau chercher je ne comprend pas pourquoi ?
Si quelqu'un a une idée !
Encore merci

Commentaire de mouahaha le 04/02/2010 11:05:56

Si tes clips sont vides au départ, le calage ne peut pas se faire correctement car les dimensions finales du clip ne sont pas encore connues.
Il faut que tu appelles la fonction de calage après le chargement de tes clips, ou encore mieux, après le chargement de chaque clip si tu peux les écouter indépendamment.

Commentaire de faab41 le 04/02/2010 14:13:31 10/10

Merci pour ta réponse rapide mais ça ne fonctionne pas. J'ai preloader mes swf et du coup c'est le calage qui ne fonctionne plus. J'ai également essayé de mettre un clip sur la scene (donc avec une taille connu) et d'importer un swf dedans mais il faut encore bouger la fenetre pour que le calage se fasse. Si tu vois une autre solution ?
Merci d'avance.

Commentaire de mouahaha le 04/02/2010 14:28:53

Es-tu sûr d'appeler une première fois ta fonction de calage une fois que tous tes éléments sont chargés ? Si oui, je ne vois pas pourquoi ça fonctionnerait seulement lors du redimensionnement, puisque c'est la même fonction qui est appelée...

Commentaire de faab41 le 04/02/2010 15:05:28

C'est bon ça marche en préchargeant les swf avec un écouteur ! encore merci A+

 Ajouter un commentaire


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&#234;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&#232;me est dans le sujet de mon post. Pour ceux qui aurait trouv&#233; la bidouille merci davance. ;) Retailler et positionner des images [ par nepomuk ] Pour faire une galerie, je charge des photos, Les redimensionne &#224; la m&#234;me hauteur, en gardant les proportions, Les met bout &#224; bout en m jouer et positionner un swf [ par xmuse ] Bonjour tout le monde, voil&#224; mon probl&#232;me.Je tiens &#224; pr&#233;ciser que je suis ultra d&#233;butant.J'ai cr&#233;&#233; une animation av Comment positionner un movie loadé [ par kwiketa ] Bonjour, loadMovie("Mymovie.swf",1); Comment assigner&nbsp; _x et _y&nbsp; &#224;&nbsp; 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&#224; ! j'essai de positionner des&nbsp; textes cr&#233;es dynamyquement &#224; partir d'un XML : &nbsp;&nbsp;&nbsp; var maVille = _root.cre


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales