Manipulation de Parallaxe

[Nairus]

Hello,

Un graphiste de ma boite veux que je me rapproche le plus possible de
son interpolation avec un système de parallaxe.

J'ai fait 3 occurences du clip qui contient les layers pour le
parallaxe.
Je fais 3 parallaxes et je bouge le focus uniquement sur celui du
milieu:

>>>>

import pegas.draw.Align;
import pegas.display.DisplayObjects;
import pegas.display.Parallaxe;

import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.geom.Rectangle;

stage.scaleMode = StageScaleMode.NO_SCALE ;

// defines the areas for the parallaxe
var area1:Rectangle = new Rectangle( 0 , 0 , home1.width ,
home1.height ) ;
var area2:Rectangle = new Rectangle( 0 , 0 , home2.width ,
home2.height ) ;
var area3:Rectangle = new Rectangle( 0 , 0 , home3.width ,
home3.height ) ;

// defines the layers content for the aeras
DisplayObjects.align( home1.layer1 , area1 , Align.CENTER ) ;
DisplayObjects.align( home1.layer2 , area1 , Align.CENTER ) ;
DisplayObjects.align( home1.layer3 , area1 , Align.CENTER ) ;
DisplayObjects.align( home1.layer4 , area1 , Align.CENTER ) ;
DisplayObjects.align( home1.layer5 , area1 , Align.CENTER ) ;
DisplayObjects.align( home1.layer6 , area1 , Align.CENTER ) ;
DisplayObjects.align( home1.layer7 , area1 , Align.CENTER ) ;

DisplayObjects.align( home2.layer1 , area2 , Align.CENTER ) ;
DisplayObjects.align( home2.layer2 , area2 , Align.CENTER ) ;
DisplayObjects.align( home2.layer3 , area2 , Align.CENTER ) ;
DisplayObjects.align( home2.layer4 , area2 , Align.CENTER ) ;
DisplayObjects.align( home2.layer5 , area2 , Align.CENTER ) ;
DisplayObjects.align( home2.layer6 , area2 , Align.CENTER ) ;
DisplayObjects.align( home2.layer7 , area2 , Align.CENTER ) ;

DisplayObjects.align( home3.layer1 , area3 , Align.CENTER ) ;
DisplayObjects.align( home3.layer2 , area3 , Align.CENTER ) ;
DisplayObjects.align( home3.layer3 , area3 , Align.CENTER ) ;
DisplayObjects.align( home3.layer4 , area3 , Align.CENTER ) ;
DisplayObjects.align( home3.layer5 , area3 , Align.CENTER ) ;
DisplayObjects.align( home3.layer6 , area3 , Align.CENTER ) ;
DisplayObjects.align( home3.layer7 , area3 , Align.CENTER ) ;

// defines the parallaxe
var parallaxe1:Parallaxe = new Parallaxe( area1 ) ;
var parallaxe2:Parallaxe = new Parallaxe( area2 ) ;
var parallaxe3:Parallaxe = new Parallaxe( area3 ) ;

// defines the speed of the interpolate
parallaxe1.smoothing = 100 ;
parallaxe2.smoothing = 100 ;
parallaxe3.smoothing = 100 ;

// add the layers to interpolate in the parallaxe
parallaxe1.addLayer( home1.layer1 , true ) ;
parallaxe1.addLayer( home1.layer2 ) ;
parallaxe1.addLayer( home1.layer3 ) ;
parallaxe1.addLayer( home1.layer4 ) ;
parallaxe1.addLayer( home1.layer5 ) ;
parallaxe1.addLayer( home1.layer6 ) ;
parallaxe1.addLayer( home1.layer7 ) ;

parallaxe2.addLayer( home2.layer1 , true ) ;
parallaxe2.addLayer( home2.layer2 ) ;
parallaxe2.addLayer( home2.layer3 ) ;
parallaxe2.addLayer( home2.layer4 ) ;
parallaxe2.addLayer( home2.layer5 ) ;
parallaxe2.addLayer( home2.layer6 ) ;
parallaxe2.addLayer( home2.layer7 ) ;

parallaxe3.addLayer( home3.layer1 , true ) ;
parallaxe3.addLayer( home3.layer2 ) ;
parallaxe3.addLayer( home3.layer3 ) ;
parallaxe3.addLayer( home3.layer4 ) ;
parallaxe3.addLayer( home2.layer5 ) ;
parallaxe3.addLayer( home3.layer6 ) ;
parallaxe3.addLayer( home3.layer7 ) ;

// function to interpolate the parallaxe
var enterFrame:Function = function( e:Event ):void
{
parallaxe1.focus.x = home2.mouseX ;
parallaxe1.interpolate() ;

parallaxe2.focus.x = home2.mouseX ;
parallaxe2.interpolate() ;

parallaxe3.focus.x = home2.mouseX ;
parallaxe3.interpolate() ;
}
stage.addEventListener(Event.ENTER_FRAME , enterFrame ) ;

>>>>

Il trouve qu'il y a trop de blanc entre les clips.

Je pense avoir à peu près compris comment utiliser les parallaxe mais
je doute que le résultat soit aussi précis que son interpolation.

Tu aurais une idée ?

A++
Nico

PS: je vais poster les fla après ce post car je ne sais pas où le
faire. Oui je sais, je bosse dans le fla. Je me fouetterais ce soir!!!
PPS: au passage, c'est vraiment sympa les parallaxes

[NairuS]

Voici les fla ;)

parallaxe.fla est celui qui contient le code AS
interpolation.fla est celui auquel il doit se rapprocher le plus.

A++ ;)

[NairuS]

Oups,

petite précision je crois que j'ai enregistré en CS4 les fla

:p

[ekameleon]

Hello :)

Faut que je lance l'appli dans Flash CS4 à première vue... le FLA marche pas dans CS3 ;)

Bon sinon...

1 - faut que les éléments graphiques aient un fond transparent.. cela aide pour le with et le height en général des clips.
2 - faut se méfier des clips qui "dépassent" ... le mieux dans ce cas est d'utiliser le paramètre bounds:Rectangle pour limiter le parallaxe d'un layer et pas se baser sur le width et height du layer par défaut.
3 - pourquoi tu découpes en 3 blocs la ville ?? Va être compilqué au final non ? Autant tout faire en un seul bloc.. sinon forcément cela va compliquer les choses.

EKA+ :)

Le 22 juillet 2009 18:01, NairuS <nicolas...@gmail.com> a écrit :

[ekameleon]

Hello :)

j'ai oublié de dire un truc :)

Si tu veux éviter le parallaxe sur la verticale il faut que tous les clips aient la même hauteur (height) donc utiliser un background transparent dans tous les clips avec une taille unique même si la largeur est pas la même dans tous ;)

PS : d'ailleurs vaut mieux qu'ils aient pas exactement la même largeur pour un effet plus réaliste..

PS2 : pense à utiliser scrollRect et à mettre tout dans un clip container (pas directement sur la scène)

EKA+ :)

[NairuS]

Hello,

Merci pour ta réponse.

Je regarderais demain.

Ca vient des Align je pense.

a++
;)

[ekameleon]

Ok pas de soucis :)

PS : en principe malgré tout c'est toujours plus simple de commencer par un truc un peu plus simple ;)

EKA+ :)

[NairuS]

Hello,

Voila mon résultat le plus proche.

Dans le fichier interpolation.fla il y a résultat 'souhaité' par le graphiste.

La taille de la scène est celle qui sera au final.

Dans le fichier parallaxe.fla j'ai ajouté un mask devant les immeubles (c'est ce qu'il y aura au final)
Le graphiste va ajouter d'autres éléments devant les immeubles.

Du coup, j'ai joué sur la propriété Align.BOTTOM au lieu de Align.CENTER et j'ai multiplié la largeur de l'area par 1.5.

En tout il y a 7 niveaux de layers mais je pense que le souci de blanc entre les éléments vient du fait qu'il y a aussi pas mal de blanc dans ces layers.

Si je ne mets pas le layer 1 par défaut dans le parallaxe tous les clips descendent derrière le mask ??
Je ne comprends pas pourquoi?

J'ai essayé de jouer aussi avec le scrollRect et la propriété bounds du parallaxe mais les clips tel qu'il sont fait disparaissent derrière le mask.

Je pense que je vais peut-être devoir tricher en mettant un layer statique en fond pour combler les blancs.

A++ ;)

[ekameleon]

Hello :)

le problème se situe juste au niveau de la créa... quand dans ton clip "home" j'aligne tous les layers en bottom les uns par rapport aux autres je vois bien que le décallage des bulding est mal fait... faut que ton graphiste fasse le graphisme en se concentrant sur des blocs rectangulaire de largeur différents, de hauteur identique mais surtout tous centrés à l'horizontal les uns par rapport aux autres..

Sinon :)

1 - pourquoi des 1 partout à la fin des noms de variables ?

Là c'est pas au code d'être touché mais au graphisme et il faut surtout pas penser l'animation comme avec une simple interpolation mais plutot comme en cinéma avec des "plans" et différentes profondeur en centrant tout par rapport à la caméra :)

2 - le scrollRect faut l'appliquer sur ton clip "home" et non pas sur la scène principale : home.scrollRect = new Rectangle(0,0,width,height) ;

3 - évite de créer tes rectangles en te basant sur la hauteur ou largeur de ton clip home qui lui même au lancement contient des tas de sous clips avec des tailles différentes .. mets de valeurs fixes en dur dans ton Rectangle...

4 - pour le "main" du parallaxe (celui que tu mets en true dans addLayer) cible plutôt celui du centre (ou presque).. par exemple le layer4. Évite de cibler le premier car forcément cela peut créer des soucis :)


Voilà ;)

EKA+ :)

[NairuS]

Re,

Le 23 juillet 2009 16:09, ekameleon <ekam...@gmail.com> a écrit :

Hello :)

le problème se situe juste au niveau de la créa... quand dans ton clip "home" j'aligne tous les layers en bottom les uns par rapport aux autres je vois bien que le décallage des bulding est mal fait... faut que ton graphiste fasse le graphisme en se concentrant sur des blocs rectangulaire de largeur différents, de hauteur identique mais surtout tous centrés à l'horizontal les uns par rapport aux autres..

Sinon :)

1 - pourquoi des 1 partout à la fin des noms de variables ?

Je vais cleaner ça !! Shame on me

Là c'est pas au code d'être touché mais au graphisme et il faut surtout pas penser l'animation comme avec une simple interpolation mais plutot comme en cinéma avec des "plans" et différentes profondeur en centrant tout par rapport à la caméra :)

2 - le scrollRect faut l'appliquer sur ton clip "home" et non pas sur la scène principale : home.scrollRect = new Rectangle(0,0,width,height) ;

3 - évite de créer tes rectangles en te basant sur la hauteur ou largeur de ton clip home qui lui même au lancement contient des tas de sous clips avec des tailles différentes .. mets de valeurs fixes en dur dans ton Rectangle...

4 - pour le "main" du parallaxe (celui que tu mets en true dans addLayer) cible plutôt celui du centre (ou presque).. par exemple le layer4. Évite de cibler le premier car forcément cela peut créer des soucis :)

Oui, en regardant ce que tu as fait, c'est ce que je pensais.... a peu près... :)

Voilà ;)

EKA+ :)

Merci.

Je vais tenter d'isoler ça.

++ ;)
 

[NairuS]

RE,

J'ai une meilleur rendu avec cette version

Cool merci pour tes conseils

a++ ;)

[NairuS]

Hello,

Je pense avoir fait tout ce que je pouvais pour me rapprocher le plus possible du résultat souhaité.
Mais selon le graphiste je suis encore trop loin.

Est-ce que ça ne vient pas de la disposition des formes dans les différents calques ?

Il trouve qu'il y a encore beaucoup de blancs entre les formes.
Je vais essayé de découper le parallaxe plus minutieusement.

A++
NairuS

[ekameleon]

Hello :)

Il y a déjà trop de layers à mon avis et surtout pas assez de différence de taille entre les différents plan ;)

Un parallaxe est un effet pour simuler une profondeur et un déplacement différent des plans.. sur ton exemple c'est vraiment pas top top non ? :)

Tu vois bien dans l'exemple original du parallaxe que les layers n'ont pas la même taille (du moins les éléments dedans ? )

EKA+ :)

[NairuS]

Re,

Oui c'est bien ce que j'ai compris :p

Je viens de faire un test avec 2 layers en moins et l'effet et meilleur.

Je vais essayer de gruger un max :)

++
NairuS :)

[NairuS]

Hello,

Ca y est j'y suis arrivé.

J'ai dû casser la composition du graphiste pour mettre tout les éléments à interpoler en 0 0.

En réfléchissant un peu j'ai trouvé ça complètement logique.

Va falloir que je spécifie bien ça, sinon ça va être compliqué pour ne pas dire autre chose.

Merci pour tes précieux conseils.

a+
NairuS :)