Forums Développement Multimédia

Aller au contenu

Centrer un clip sur la scène ( add on ancien post)

CODE Actionscript

23 réponses à ce sujet

#1 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 21 June 2013 - 13:19 PM

Bonjour,
je cherche à centrer le clip " contenu" sur la scène
J'ai essayé pleins de truc mais ça ne fonctionne pas comme je le souhaite.
Je n'arrive pas a trouver la formule magique !!

Merci pour votre aide.



var W:Number = stage.stageWidth; // largeur d'origine de la scène
var H:Number = stage.stageHeight; // hauteur d'origine de la scène

init();

function init(){
                stage.align = StageAlign.TOP_LEFT; // aligne la scène en haut à gauche
                stage.scaleMode = StageScaleMode.NO_SCALE; // interdit le changement d'échelle
                stage.addEventListener(Event.RESIZE,updateSize); // écoute le redimentionnement
                updateSize(null); // lance une première fois le redimentionnement
}

// adapter les éléments de la scène
function updateSize(e:Event){

                W = stage.stageWidth;  // nouvelle largeur
                H = stage.stageHeight; // nouvelle hauteur

                /* algorithme des modifs du fond
                                si largeur du fond < largeur scène
                                                largeur fond = largeur scène
                                                adapte la hauteur
                                sinon si hauteur du fond < hauteur scène
                                                hauteur fond = hauteur scène
                                                adapte la largeur
                */


                // adapter la taille du fond à la taille de la scène
                if( back_mc.width<W) {                                                                                           
                                back_mc.width = W;       
                                back_mc.scaleY = back_mc.scaleX;
                } else if ( back_mc.height<H){
                                back_mc.height = H;
                                back_mc.scaleX = back_mc.scaleY;
                }

                // center le fond sur la scène
                back_mc.x = W/2;
                back_mc.y = H/2;

                // position de la barre de titre
                titlebar_mc.x = titlebar_mc.width/2;
                titlebar_mc.y = titlebar_mc.height/2;

                // position du menu
                menu_mc.x = W - menu_mc.width;
                menu_mc.y = H - menu_mc.height;

// position du contenu
                contenu_mc.x
// J'aimerais qu'il reste centré sur la scène au redimenssionnement HTML sans déformations
                contenu_mc.y
// J'aimerais qu'il reste centré sur la scène au redimenssionnement HTML sans déformations
}

//---------------------------------------------------------------

stop();

Modifié par Krevare, 25 June 2013 - 13:13 PM.
Ajout des balises de code

Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#2 cate_38

    Ceinture Orange

  • Members
  • PipPipPip
  • 44 messages

Posté 21 June 2013 - 14:23 PM

Bonjour,

J'avais vu ceci dans les postes pour centrer efficacement un clip "conteneur".


//initialisation de la position
conteneur._x = Stage.width / 2 - conteneur._width / 2;
conteneur._y = Stage.height / 2 - conteneur._height / 2;
// ajout d'un �couteur pour garder le centrage si la fen�tre est redimensionn�e
conteneur_center_listener = new Object()
conteneur_center_listener.onResize = function()
{
  conteneur._x = Stage.width / 2 - conteneur._width / 2;
  conteneur._y = Stage.height / 2 - conteneur._height / 2;
}
Stage.addListener(conteneur_center_listener)
 


Mais je suis loin d'être pro... je laisse les "grosses pointures" te répondre plus amplement ! ;)

#3 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 24 June 2013 - 11:26 AM

Merci,

ça ne fonctionne pas exactement comme je veux, avec ton bout de code
mais ça m'a bien aidé quand même.

J'ai trouvé une autre solution en faisant tout simplement:

...

// center le mc sur la scene
mc.x = W/2;
mc.y = H/2;

}

Bonne journée.
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#4 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 24 June 2013 - 13:02 PM

Voir le messagecate_38, le 21 June 2013 - 14:23 PM, dit :

//initialisation de la position
conteneur._x = Stage.width / 2 - conteneur._width / 2;
conteneur._y = Stage.height / 2 - conteneur._height / 2;
// ajout d'un �couteur pour garder le centrage si la fen�tre est redimensionn�e
conteneur_center_listener = new Object()
conteneur_center_listener.onResize = function()
{
  conteneur._x = Stage.width / 2 - conteneur._width / 2;
  conteneur._y = Stage.height / 2 - conteneur._height / 2;
}
Stage.addListener(conteneur_center_listener)

Attention, ceci est écrit en AS2 ... ne fonctionnera pas en AS3
Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#5 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 24 June 2013 - 16:41 PM

Fichtre oui !
C'est ce que j'en ai déduis en testant.
Déjà que je suis mauvais en AS2 et archi-nul en AS3, si je mélange le tout ça fait un Mojito ?!
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#6 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 26 June 2013 - 11:49 AM

Bonjour,

j'essaye de faire en sorte qu'un clip reste centrer en largeur (x) au redimensionnement
et toujours positionner en haut (y).

j'ai donc essayé ça:
...


// centrer le mc sur la scene en haut et au toujours centrer au redimenssionement
mc.x = W/2;
mc.y = H - mc.width/2;

}

mon problème est que :
en X pas de problème ça fonctionne
mais en Y ça le positionne en bas.

J'ai essayé plein de truc sans arriver au résultat voulu.
Quelqu'un peux me guider ?

Merci.
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#7 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 26 June 2013 - 12:05 PM

Bonjour,

Le sujet initial : http://forums.mediab...ost__p__1159321
La réponse déjà donnée : http://forums.mediab...ost__p__1159350

Tu refais exactement les mêmes erreurs et repose les mêmes questions.
Pourtant tu as déjà eu la réponse à tout ça, et une solution qui fonctionne...

Citation

mon problème est que :
en X pas de problème ça fonctionne
mais en Y ça le positionne en bas.


Réponse dans l'autre sujet :

Citation

Pour finir, tu dois faire attention au points de repère de position de tes clips, là il est au centre, ce qui veut dire que tous les calculs sont faits par rapport au centre de ces clips et non leur point haut gauche comme cela se fait normalement, du coup là aussi il faut modifier les calculs.

Autrement dit :

mc.x = W/2;

Le clip est bien centré sur X donc le point d'ancrage du clip est en son centre car : largeur de la scène / par deux = centre de la scène.

mc.y = H - mc.width/2;

Le clip est centré par le bas, c'est normal car : hauteur - hauteur du clip / deux = centre du clip au bas de la scène.
D'autre part le code est faux puisque tu utilise "width", donc la largeur et non la hauteur du clip.

Si tu veux que le clip soit positionné toujours en haut il faut le calculer.
Ton clip à une hauteur fixe et un repère de position placé en son centre.
Le haut de la scène est toujours considéré à 0 sur l'axe y.
Pour que ton clip soit toujours placé en haut il suffit donc de faire : position du clip sur Y = hauteur du clip divisé par deux.

mc.y = mc.height/2;

On en revient à ce qu'on avait dit lors du dernier sujet que tu avait posté, essayer d'écrire ton code en français avant de le rédiger en actionscript, pour vérifier que c'est logique, faire attention aux repère de tes éléments, et apprendre les bases :

Lire ces conseils : http://forums.mediab.../as3premierspas
Lire ce bouquin : http://pratiqueactio...ion%200.1.4.zip

#8 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 26 June 2013 - 12:21 PM

Merci Maître Spi,
tu expliques très bien les choses, c'est agréable.

j'ai lu les liens, c'est très intéressant, mais les appliquer sur des cas concrets c'est une autre histoire. ( enfin pour moi ) !

Une autre question:
/2 ça veut dire quoi en français ?

Je ne comprend pas le concept...
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#9 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 26 June 2013 - 12:41 PM

Citation

/2 ça veut dire quoi en français ?

Tu es sérieux là ? :shock:

Sans indiscrétion, puis-je te demander ton âge ?

Il s'agit tout simplement du signe mathématique pour faire une division...
Il fait partie des différents opérateurs mathématiques :

+ : plus
- : moins
* : multiplié
/ : divisé

#10 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 28 June 2013 - 15:42 PM

Ha bah oui! quel idiot !
:oops:
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#11 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 28 June 2013 - 16:23 PM

Bon alors voilà.
Maintenant j'essaye de faire pareil, MAIS avec un swf externe chargé dans un conteneur,
depuis un autre clip, sur une autre frame.

J' essaye de faire en sorte qu'il reste également centré au "resize"
mais ça le positionne dans le bas a droite de la scène, coupé. la moitié du clip est hors scène.

Ma question est la suivante:
Dois je faire différemment pour contraindre la position d'un swf externe ?
Merci pour votre aide.

voici ce que j'ai fait :


var W:Number = stage.stageWidth; // largeur d'origine de la scène
var H:Number = stage.stageHeight; // hauteur d'origine de la scène

// création du conteneur de l'image ou du swf
var conteneurImage:Loader = new Loader();
// url de l'image ou du swf à charger
var image:URLRequest = new URLRequest("mcExterne.swf");
// chargement de l'image ou du swf dans le conteneur
conteneurImage.load(image);
// affichage du conteneur
this.addChild(conteneurImage);

// adapter les éléments de la scène
function updateSize(e:Event){

W = stage.stageWidth; // nouvelle largeur
H = stage.stageHeight; // nouvelle hauteur


// conserve au centre le swf chargé suivant les redimenssionement de la page du navigateur
conteneurImage.x = W/2;
conteneurImage.y = H/2;

}
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#12 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 28 June 2013 - 16:33 PM

Bonjour,

Peux-tu réécrire ton message sans toutes les balises de code html s'il te plait ?

La seule chose que j'ai lue c'est :

Citation

Pourquoi le positionnement est différent en utilisant un conteneur, alors que sans ça le positionne correctement ?

La réponse est : parce que lorsque tu crée un clip à la main (en appuyant sur la touche F8) tu peux sélectionner où se trouve le repère de position (petite grille a droite sur la fenêtre qui s'affiche quand tu appuye sur F8) et que dans ton cas tu as mis le repère au centre de la grille (donc du clip). Et quand tu passe par le code pour insérer un clip dans un autre il place automatiquement le coin haut gauche du clip importé sur le repère de position du clip conteneur, donc dans ton cas le coin haut gauche du clip importé se trouve au centre du clip conteneur, ce qui te décale tout.

On travaille rarement avec le repère de position au centre du clip, sauf quand on a une obligation ou un intérêt spécifique à le faire, là ce n'est pas le cas. Le repère de position est presque toujours le coin haut gauche des éléments (qui correspond à la position x=0, y=0) dans tous les logiciels ou programmes que ce soit Flash ou un autre, autant s'y faire.

#13 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 28 June 2013 - 17:25 PM

Holala, ce n'est que le début des ennuis alors !
Mais le clip conteneur il est dynamique, comment je fais pour placer son repère de position ?
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#14 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6954 messages

Posté 28 June 2013 - 17:27 PM

Citation

Dois je faire différemment pour contraindre la position d'un swf externe ?

Non c'est pareil, pas besoin de réécrire le code d'ailleurs.
Comme dit dans mon message précédent, il te suffit en faire de bien repositionner le clip chargé dans son conteneur et le tour sera joué.
Tu charge le clip, tu regarde où il est placé, puis tu le repositionne dans le conteneur.
Si ton clip se trouve au centre du conteneur, pour le replacer il te suffit de faire :


monclip.x -= conteneur.width/2;
monclip.y -= conteneur.height/2;
 


#15 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 29 June 2013 - 09:03 AM

Merci.
ça fonctionne avec un "test.swf" externe dans lequel j'ai simplement posé un symbole, pour faire testé.
Mais le véritable .swf que je veux charger contient du code et d'autres fichiers qui se chargent dès la première frame.
ça prend quelques secondes...

Quand j'appelle ce fichier le positionnement est incorrect à la publication et encore différent dans une page de navigateur.
Est ce du au fait que le .swf à beaucoup d'info a charger avant de se positionner ou j'ai tout faux ?

Voici le code qui fonctionne avec le test, mais pas avec le fichier voulu...


var conteneur:Loader = new Loader();
var image:URLRequest = new URLRequest('test.swf');
// attente du chargement complet et affichage ?
conteneur.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
conteneur.load(image);
addChild(conteneur);
function loaderCompleteHandler(e:Event):void
{
    var loader:Loader = e.currentTarget.loader;
   
    // Modification des propriétés
conteneur.x -= loader.width/2;
conteneur.y -= loader.height/2;
}
 

Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#16 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 29 June 2013 - 16:29 PM

Bonjour Gaïa,

Deux choses.

Dans ton code, conteneur et loader représente le même objet, à savoir le Loader créé. Dans le code de Mr Spi, monclip et conteneur sont deux objets différents

Il me semble que l'objet Loader n'a pas de propriété x, width, y et height puisqu'il étend la classe DisplayObjectContainer (cf. doc Adobe).
C'est Loader.content qui représente l'objet chargé et ses propriétés.
Une idée consiste à placer ton loader dans un Sprite sur lequel tu agiras pour positionner le tout ...

Je te propose ceci :
var conteneur:Sprite = new Sprite();
var chargeur:Loader = new Loader();
var image:URLRequest = new URLRequest('test.swf');
addChild ( conteneur );

// attente du chargement complet et affichage
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
chargeur.load(image);

function loaderCompleteHandler(e:Event):void
{
        conteneur.addChild ( chargeur );

        // Modification des propriétés
        conteneur.x -= chargeur.content.width/2;
        conteneur.y -= chargeur.content.height/2;
}

Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#17 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3485 messages

Posté 29 June 2013 - 21:53 PM

Hello !

Citation

Il me semble que l'objet Loader n'a pas de propriété x, width, y et height puisqu'il étend la classe DisplayObjectContainer

Etant donné que DisplayObjectContainer extends DisplayObject, le loader agit bien comme un sprite et dispose des propriétés x/y/width/height donc le problème ne vient, apriori, pas de là.

Essaye d'ajouter ces deux lignes au tout début du code qui charge le swf secondaire

stage.align = "topLeft";
stage.scaleMode = "noScale";
 

théoriquement le positionnement devrait etre le même dans la publication et dans le navigateur.

Ensuite, cette partie

function loaderCompleteHandler(e:Event):void
{
        var loader:Loader = e.currentTarget.loader;
 
        // Modification des propriétés
conteneur.x -= loader.width/2;
conteneur.y -= loader.height/2;
}
 
je pense que ce que tu veux faire en fait c'est plutot

function loaderCompleteHandler(e:Event):void
{
        var loader:Loader = e.currentTarget.loader;
        //je centre le loader dans le conteneur
        loader.x -= loader.width/2;
        loader.y -= loader.height/2;
}
//je centre le contener au milieu du stage
//ceci dit, tu le met ou tu veux

contener.x = stage.stageWidth/2;
contener.y = stage.stageHeight/2;
 

Bon courage pour la suite !

#18 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 30 June 2013 - 08:27 AM

Voir le messagetlecoz, le 29 June 2013 - 21:53 PM, dit :

Etant donné que DisplayObjectContainer extends DisplayObject, le loader agit bien comme un sprite et dispose des propriétés x/y/width/height donc le problème ne vient, apriori, pas de là.

Merci pour la correction ...

Ensuite je simplifierais le code puisque tu n'as pas besoin de récupérer le loader dans loaderCompleteHandler

Voir le messagetlecoz, le 29 June 2013 - 21:53 PM, dit :

function loaderCompleteHandler(e:Event):void
{
        var loader:Loader = e.currentTarget.loader;
        //je centre le loader dans le conteneur
        loader.x -= loader.width/2;
        loader.y -= loader.height/2;
}

Cela deviendrait simplement :
function loaderCompleteHandler(e:Event):void
{
        //je centre le loader dans le conteneur
        conteneur.x -= conteneur.width/2;
        conteneur.y -= conteneur.height/2;
}

Voir le messagetlecoz, le 29 June 2013 - 21:53 PM, dit :

Essaye d'ajouter ces deux lignes au tout début du code qui charge le swf secondaire
stage.align = "topLeft";
stage.scaleMode = "noScale";
 

Mais oui ! +1
Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#19 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3485 messages

Posté 30 June 2013 - 09:06 AM

Hello !

Citation

Ensuite je simplifierais le code puisque tu n'as pas besoin de récupérer le loader dans loaderCompleteHandler
Image IPBtlecoz, le hier, 22:53 , dit :





function loaderCompleteHandler(e:Event):void
{
var loader:Loader = e.currentTarget.loader;
//je centre le loader dans le conteneur
loader.x -= loader.width/2;
loader.y -= loader.height/2;
}


Cela deviendrait simplement :


function loaderCompleteHandler(e:Event):void
{
//je centre le loader dans le conteneur
conteneur.x -= conteneur.width/2;
conteneur.y -= conteneur.height/2;
}



L'idée de mon code était de centré le loader dans le contener afin de pouvoir positionner le conteneur sans avoir à se soucier de la correction à apporter en terme de positionnement pour centrer l'image.

Ceci dit, idéalement, pour optimiser, il faudrait plutot faire ca


function loaderCompleteHandler(e:Event):void
{
           var content:DisplayObject = (e.currentTarget as LoaderInfo).loader.content as DisplayObject;
           content.x = (stage.stageWidth - content.width)/2;
           content.y = (stage.stageHeight - content.height)/2;
           addChild(content); //pas besoin de conteneur du tout
}
 

++

#20 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 30 June 2013 - 14:08 PM

Bonjour à tous et merci.

Alors en fait, sur la scène principale j'ai un clip A dans lequel il y a un clip B.
Dans ce clip B il y a un clip C.
C'est dans ce clip C que j''essaye de charger le swf secondaire ( toujours au centre/resize/ fullscreen )


Il se trouve que sur la scène principale je contrains déjà le clip A de cette façon:

...
var center_x:Number;
var center_y:Number;
stage.addEventListener( Event.RESIZE, resize_listener );
stage.dispatchEvent( new Event( Event.RESIZE ) );
function resize_listener( e:Event ): void
{
clipA.x = center_x;
clipA.y = center_y;
}
...
 

en supprimant ce bout de code le swf secondaire en centré a la publication, dans le html, et même en fullscreen.
grace à votre aide. Super !

Par contre si je supprime le code, qui contraint le clip A
Le swf externe se positionne bien au resize en Y, mais pas en X. ( plutôt à gauche de l'écran )

Je fais pourtant attention aux explications de mr SPI concernant les "repères de positions des clips "

C'est sioux ! vous pouvez m'aider encore un peu ?
Je continu à chercher...
Merci.
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#21 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 30 June 2013 - 17:46 PM

United
http://www.artistdir...ted-front/41436
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#22 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3485 messages

Posté 30 June 2013 - 20:27 PM

Hello !

Comme dit plus haut - quoi que pas tout à fait -


function loaderCompleteHandler(e:Event):void
{
            var element:DisplayObject = ((e.currentTarget as LoaderInfo).loader as Loader).content as DisplayObject;
            clipA.addChild(element);
            element.x -= element.width/2;
            element.y -= element.height/2;
}
 
++

#23 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 30 June 2013 - 21:06 PM

Merci Honoris

http://www.beginfill.com

J'M
Vive le graphisme qui bouge tout seul ( enfin presque) !!!

#24 Gaïa

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 85 messages

Posté 04 July 2013 - 15:34 PM

Hello.
Je crois que je vais finir avec un entonnoir sur la tête si ça continue !
Hospitalisé d'office...

ça fonctionnait il à quelques jours avec votre aide !!

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
at portfolio_fla::MainTimeline/frame1()
at flash.display::MovieClip/prevFrame()
at mercenariat_fla::allcontents_11/btn_enter()[mercenariat_fla.allcontents_11::frame1:78]
 

Au secours !
:roi:
Vive le graphisme qui bouge tout seul ( enfin presque) !!!



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP