rotationX e rotationY

[Flep]

Abbiamo visto che la classe MovieClip di Flash CS4 ha la nuova proprietą z.

Vedremo anche come creare animazioni con tale proprietą ma oggi voglio scrivere su altre 2 nuove proprietą:

• rotationX


• rotationY

Queste due nuove proprietą gesticono le rotazioni sulle assi X, Y e si possono creare delle animazioni decisamente nuove rispetto alle versioni precedenti di Flash.

Il loro valore si estende da -180 a 180.

Valori negativi indicano il senso antiorario mentre i positivi il senso orario.

Tutti i valori al di fuori di questo range vengono aggiunti o sottratti da 360 per ottenere un valore entro il range.

Vediamo alcuni esempi.

Creo un FLA che salvo con nome "main.fla" .

Al suo interno importo un' immagine sullo stage e gli attivo la proprietą smoothing.

La trasformo in MovieClip con punto di registrazione centrale e nome istanza "clip_mc".

Esempio 1

Uso un ENTER_FRAME per la rotationX.

Apro il pannello azioni e scrivo:

clip_mc.addEventListener(Event.ENTER_FRAME,rotateX);

function rotateX(evt:Event):void
{
	evt.target.rotationX++;
}

Esempio 2

Uso un ENTER_FRAME per la rotationY.

Apro il pannello azioni e scrivo:

clip_mc.addEventListener(Event.ENTER_FRAME,rotateY);

function rotateY(evt:Event):void
{
	evt.target.rotationY++;
}

Esempio 3

Aggiungo due bottoni sullo stage con rispettivi nomi istanza: right_btn e left_btn.

Utilizzo la Tween caurina per la rotationX.

Apro il pannello azioni e scrivo:

import caurina.transitions.Tweener;

var counter:int=0;

right_btn.addEventListener(MouseEvent.MOUSE_DOWN,rotateDown);
left_btn.addEventListener(MouseEvent.MOUSE_DOWN,rotateUp);

function rotateDown(evt:MouseEvent):void
{
	counter++;
	Tweener.addTween(clip_mc,{rotationX:counter*180,time:1,transition:"easeOutCubic"});
}

function rotateUp(evt:MouseEvent):void
{
	counter--;
	Tweener.addTween(clip_mc,{rotationX:counter*180,time:1,transition:"easeOutCubic"});
}

Esempio 4

Aggiungo due bottoni sullo stage con rispettivi nomi istanza: right_btn e left_btn.

Utilizzo la Tween caurina per la rotationY.

Apro il pannello azioni e scrivo:

import caurina.transitions.Tweener;

var counter:int=0;

right_btn.addEventListener(MouseEvent.MOUSE_DOWN,rotateDown);
left_btn.addEventListener(MouseEvent.MOUSE_DOWN,rotateUp);

function rotateDown(evt:MouseEvent):void
{
	counter++;
	Tweener.addTween(clip_mc,{rotationY:counter*180,time:1,transition:"easeOutCubic"});
}

function rotateUp(evt:MouseEvent):void
{
	counter--;
	Tweener.addTween(clip_mc,{rotationY:counter*180,time:1,transition:"easeOutCubic"});
}

Esempio 5

Aggiungo due bottoni sullo stage con rispettivi nomi istanza: right_btn e left_btn.

Utilizzo la Tween caurina per la rotationX e rotationY.

Apro il pannello azioni e scrivo:

import caurina.transitions.Tweener;

var counter:int=0;

right_btn.addEventListener(MouseEvent.MOUSE_DOWN,rotateDown);
left_btn.addEventListener(MouseEvent.MOUSE_DOWN,rotateUp);

function rotateDown(evt:MouseEvent):void
{
	counter++;
	Tweener.addTween(clip_mc,{rotationX:counter*180,rotationY:counter*180,time:1,transition:"easeOutCubic"});
}

function rotateUp(evt:MouseEvent):void
{
	counter--;
	Tweener.addTween(clip_mc,{rotationX:counter*180,rotationY:counter*180,time:1,transition:"easeOutCubic"});
}

Date sfogo alla vostra fantasia !

[superkent]

bellissimo tutorial!!
volevo sapere una cosa.. come si fa (sempre che si possa) a mettere sul retro un'altra foto o un altro mc??

[kazzar0310]

ops solo ora mi accorgo che c'č anche in italiano! avevo postato anche su quello in inglese ^^

Guida utilissima flep, ma smanettando mi trovo davanti un problema: ho tante movieclip e vorrei che con il passare del mouse sopra facessero una rotazione di 360°, il problema č che sembra che ruotino attorno all' asse Y dello stage, io vorrei che ruotassero attorno al loro centro, come si fa a dirglielo?

le movie clip sono create in RunTime

[Flep]

Ciao,
devi impostare il punto di registrazione su asse y delle MovieClip al centro.

[kazzar0310]

si ma le mc sono create via action script! e non reisco a darli il punto di registrazione centrale.

Nel frattempo ho provato con una mc da libreria con punto di registrazione centrale ed č tutto ok

[Flep]

Allora, le MC caricano qualcosa ? Delle immagini ? Oppure disegnano ?
Se caricano un'immagine o un'altra MovieClip, supponiamo che la MC che devi ruotare si chiami pippo_mc, e supponiamo che gli attacchi un'immagine che hai caricato che si chiama img, basta dire:

img.y=-img.height/2;
pippo_mc.addChild(img);

[kazzar0310]

cosi semplice? ^^

Grazie mille flep

[Tullio]

Ciao a tutti

Ho provato come indicato da Flep la rotationX con le tweener caurina.

Tutto ok, la rotazione viene eseguita correttamente sia testando dalla prova filmato in Flash CS4 che pubblicando il filmato sulla pagina html ma se lancio il file .swf dalla cartella del .fla, la rotazione non funziona !

Funziona tutto il resto ma non la rotazione.

E' normale che sia cosģ o c'č un modo per risolvere ?

Grazie in anticipo a chiunque mi aiuta a capire questa "stranezza"

[kazzar0310]

lol efettivamente č strano, come funziona su html deve funzionare anche li! sei sicuro che non ti dia errori?

[Tullio]

Se faccio la prova filmato da Flash (ctrl+invio) tutto funziona perfettamente e non dą errori.
Pubblico il filmato nella pagina html e la lancio in locale con il browser (Chrome e IE8) tutto OK come da Flash anche se richiamo nel browser direttamente l'.swf.
Se lancio l'.swf direttamente dalla cartella, la rotazione non vą !

Nell'esempio di Flep proposto qui con i pulsanti, č tutto bloccato e cliccando sui pulsanti il clip immagine non si muove.

Ho provato anche a lanciare la funzione senza usare i pulsanti e aggiungere altri parametri per la Tweener caurina come "alpha", "scaleX", "scaleY", "delay" funziona tutto ma la "rotationX" e "rotationY" nell'.swf lanciato da cartella non si vede !

E' davvero strano, mi piacerebbe capire il perchč.