Flash: follow

Ciao a tutti, ecco un altro mio quesito... c'è questo sito che vorrei capire come funziona... mi sembra molto complesso....

http://www.sonyclassics.com/persepolis

gli oggetti seguono il mouse e al clck di un bottone per selezionare una voce, c'è questo effetto in cui cascano tutti gli oggetti... molto bello... chi mi sa un aiuto a capire come impostare tutto? grazie mille

 faultless, N.D.

Ciao Faultless,

non è “difficile” creare quell’effetto che hai visto, è solo lungo se non hai mai realizzato niente di simile...

Per alcune caratteristiche è consigliabile utilizzare almeno ActionScript 2.0, non che non si possa realizzare una cosa simile con Flash 5 ma oggi è tutto più facile.

Analizziamo il comportamento degli oggetti così da indirizzarci verso la realizzazione di una cosa simile.

1. Gli oggetti si muovono in orizzontale in base alla posizione del Mouse...
Questo si può realizzare controllando la posizione del Mouse con _root._xmouse e regolando di conseguenza la posizione del clip filmato con this._x.

2. Gli oggetti sono sfocati...
Per fare questo puoi utilizzare la classe flash.filters.BlurFilter.

3. Gli oggetti si mettono a fuoco se il mouse ci passa sopra...
Sempre la classe flash.filters.BlurFilter controllando i valori di BlurX e BlurY.

4. Gli oggetti spariscono in basso con un effetto “a molla”...
Per fare questo ti tornerà utile la classe Tween e in particolare lo stesso tipo di easing che hanno usato loro, ovvero mx.transitions.easing.Back.easeIn.

Una volta che avrai letto sul manuale come si usano queste classi non ti ci vorrà molto a mettere assieme un risultato simile a quello che hai citato.

Quando una cosa ti sembra difficile cerca di scomporla in più parti e di realizzare una sola cosa per volta, per esempio potresti iniziare col realizzare un filmato con gli oggetti che si muovono a destra e a sinistra in base alla posizione del Mouse, poi aggiungerai tutti gli altri comportamenti.

 Professore, N.D.

ho provato con questo script,

onClipEvent (load) {
_x = 813;
speed = 95;
}
onClipEvent (enterFrame) {
endX = _root._xmouse;
_x += (endX-_x)/speed;
}

e questo fa muovere gli oggetti, ma come imposto la possibilità di Tween e in particolare il tipo di easing ovvero
mx.transitions.easing.Back.easeIn. ?


 faultless, N.D.

Ciao Faultless,

la classe Tween ti permette di creare animazioni come se fossero realizzate sulla linea temporale, in questo modo posso cambiare trasparenza, dimensioni, posizione o altre proprietà direttamente da script.

Nella maggior parte dei casi basta instanziare un oggetto di tipo Tween e lÂ’animazione parte da se.

Ecco un esempio:
//-----------------------------------
import mx.transitions.Tween;
var myTween:Tween = new Tween(myMC, "_y", mx.transitions.easing.Back.easeIn, myMC._y, Stage.height, 1, true);
//-----------------------------------
Questo script crea un’animazione di un oggetto verso il basso con effetto di Easing, cioé l’oggetto prima si muove nella direzione opposta al movimento e poi parte e lo esegue tutto.
Per farlo funzionare basta creare un MovieClip e dare nome alla sua istanza “myMC”.



Nel tuo caso immagino che avrai tanti oggetti, quindi:
1. creo una funzione che contiene le informazioni sul Tween, che sarà per tutti uguale.
2. creo un Array che contiene i nomi di tutti i MovieClip coinvolti.
3. scorro lÂ’Array per assegnare ad ogni MovieClip il comportamento onPress.
4. assegno allÂ’evento onPress di ogni MovieClip la funzione che ordina il Tween a tutti loro.

In ActionScript 2.0 è così:
//-----------------------------------
import mx.transitions.Tween;

/// Funzione per non dover ripetere le stesse cose più volte.
function abbatti(cosa:MovieClip) {
var myTween:Tween = new Tween(cosa, "_y", mx.transitions.easing.Back.easeIn, cosa._y, Stage.height, 1, true);
}

/// Array che conterrà i MovieClip
var elenco:Array = new Array();
/// Riempio lÂ’Array
elenco.push(clip);
elenco.push(clip1);
elenco.push(clip2);
elenco.push(clip3);

/// Faccio un ciclo per assegnare le azioni ad ogni MovieClip presente nellÂ’Array
for (i=0; i<elenco.length; i++) {
elenco[i].onPress = function() {
for (e=0; e<elenco.length; e++) {
abbatti(elenco[e]);
}
};
}
//-----------------------------------

Ecco fatto, al posto di clip, clip1 ecc... aggiungi i nomi delle istanze dei tuoi MovieClip e il gioco è fatto.

 Professore, N.D.

secondo te dopo aver fatto crollare i movie clip, a ognuno posso dare un azione tipo load movie o goto and stop? mi spiego sono dei MC, come collego questo script a un load movie?

 faultless, N.D.

Ciao Faultless,

a questi MovieClip puoi dare tutte le azioni da pulsante che vuoi, vanno inserite subito dopo le righe:

elenco[i].onPress = function() {
abbatti(elenco[e]);

prima di chiudere nuovamente la parentesi graffa.

Questo blocco di istruzioni rappresenta quello che ogni MovieClip deve fare e quindi si può aggiungere tranquillamente anche un GotoAndStop... l’unica difficoltà sta nel fatto che assegnamo a tutti la stessa azione, quindi se abbiamo parametri differenti (per esempio il numero del fotogramma o il nome del filmato da caricare) li dobbiamo elencare prima.

Adesso riscrivo tutto il codice aggiungendo un altro Array... in questo nuovo Array inserisco dei nomi, poi assegno a tutti i MovieClip l'azione loadMovie per caricare ognuno un filmato diverso....

//-----------------------------------
import mx.transitions.Tween;

/// Funzione per non dover ripetere le stesse cose più volte.
function abbatti(cosa:MovieClip) {
var myTween:Tween = new Tween(cosa, "_y", mx.transitions.easing.Back.easeIn, cosa._y, Stage.height, 1, true);
}

/// Array che conterrà i MovieClip
var elenco:Array = new Array();
/// Array che conterrà i nomi dei filmati da caricare
var carica:Array = new Array()

/// Riempio gli Array
elenco.push(clip);
carica.push("filmato.swf");
elenco.push(clip1);
carica.push("altro.swf");
elenco.push(clip2);
carica.push("terzo.swf");
elenco.push(clip3);
carica.push("nomeacaso.swf");


/// Faccio un ciclo per assegnare le azioni ad ogni MovieClip presente nellÂ’Array
for (i=0; i<elenco.length; i++) {
elenco[i].onPress = function() {
for (e=0; e<elenco.length; e++) {
abbatti(elenco[e]);
loadMovie(carica[i], _root.container);
}
};
}
//-----------------------------------

In questo modo ogni volta che clicco su un MovieClip faccio due cose:
- Abbatto tutti i MovieClip che fanno parte del “giochino”.
- Carico un filmato esterno dentro al MovieClip chiamato container che si dovrebbe trovare sulla root principale.

Flash sa cosa caricare perché i due Array hanno lo stesso numero di elementi al loro interno e in base all’ordine in cui li ho inseriti ho fatto in modo che ad ogni clip corrisponda un filmato esterno, in questo modo:

clip => filmato.swf
clip1 => altro.swf
clip2 => terzo.swf
clip3 => nomeacaso.swf

---------------------------------------------------------------------

Puoi fare la stessa cosa creando un Array che contiene dei numeri e poi usarli con il comando gotoAndStop...

Per esempio sostituisci queste righe

elenco.push(clip);
carica.push("filmato.swf");
elenco.push(clip1);
carica.push("altro.swf");
elenco.push(clip2);
carica.push("terzo.swf");
elenco.push(clip3);
carica.push("nomeacaso.swf");

con queste

elenco.push(clip);
carica.push(25);
elenco.push(clip1);
carica.push(32);
elenco.push(clip2);
carica.push(12);
elenco.push(clip3);
carica.push(75);

e sostituisci

loadMovie(carica[i], _root.container);

con

_root.gotoAndStop(carica[i]);


Fatto.

 Professore, N.D.

Grazie, ma non funziona il load movie...non so come mai lo script sembra lineare e giusto. forse puo essere la funzione che do a ogni movie clip cioè seguo in mouse...?

onClipEvent (load) {
_x = 813;
speed = 95;
}
onClipEvent (enterFrame) {
endX = _root._xmouse;
_x += (endX-_x)/speed;
}


ma non penso sia dovuto a questo....

 faultless, N.D.
001design.it ® è un marchio registrato.
© 2004-2017 Molfese Paolo - P.Iva: 03430820617 - All rights reserved | Tutti i diritti sono riservati.