Cool Effect Tutorials Flash!

Sintesi

In questo tutorial vi spiegherà come creare un effetto di transizione cubo su rollover del mouse.

Ecco il risultato finale:

Requisiti

Flash CS3 o Flash CS4.

Nota: La schermata di questo tutorial è fatto in Flash CS3. Funziona esattamente la stessa cosa in Flash CS4.

Step 1 - Installare il componente effetto

Acquistare l'effetto di transizione Cube qui. Si prega di seguire le istruzioni per l'installazione e trascinare il componente dal pannello componente nella libreria del file. Fla.

Step 2 - Create un nuovo livello

Per mantenere le cose in ordine è necessario creare un nuovo livello sulla linea temporale principale e dargli un nome. Fare questo, come mostrato nella schermata qui sotto.

Passaggio 3 - Creazione di sfondo

Ora si crea uno sfondo con un gradiente. Anche se questo non è necessario per far funzionare l'effetto che dimostra che gli effetti funziona anche con i contenuti trasparente (più su quello più successivamente).

Selezionare il primo fotogramma in bg "livello" e disegnare una forma con lo strumento rettangolo sulla tela. Selezionare il rettangolo e regolare le impostazioni colore per avere una pendenza bella (si può anche usare qualsiasi altro colore).

Fase 4 - pulsante Crea

L'effetto cubo dovrebbe reagire dinamicamente allo Stato utenti del mouse (rollover / rollout). NON è delle migliori pratiche per aggiungere il listener di eventi per l'effetto stesso e di utilizzare invece un "vuoto" pulsante.

Fare clic sul primo fotogramma del livello "btn" e disegnare un rettangolo con la dimensione della tela (colore non mater in quanto il pulsante non sarà visibile). Selezionare il rettangolo e convertirlo in un pulsante con [premere F8] o tasto destro del mouse sul MovieClip -> "Converti in simbolo ...".

Impostare il nome del pulsante "btn" e assicurarsi che il tipo è "Button".

Fare doppio clic sul pulsante. Ora trascinate il primo fotogramma chiave "Up" all'ultimo fotogramma "Hit". Questo fa sì, che il pulsante sarà interattivo, ma non visibile.

Tornare alla linea temporale principale e impostare il nome di istanza del pulsante "btn".

Fase 5 - Creazione di inizio Movieclip

L'effetto esigenze hanno due Movieclip in cui le informazioni visive sono prese da. Potrai creare il clip filmato la transizione inizierà con.

Fare clic sul primo fotogramma sul livello "img1". Importare un'immagine con le dimensioni della tela premendo [premere Ctrl-R] o "File" -> "Importa" -> "Importa on Stage ...".

Ora convertire questa immagine ad un MovieClip e il nome "img1".

Impostare il nome di istanza del appena creato MovieClip per "img1".

Fase 6 - Creazione End Movieclip

MovieClip End conterrà il testo al posto di un'immagine. La raggiungere questo obiettivo è necessario un approccio leggermente diverso.

Selezionare il primo fotogramma del livello "img2" (ok, la denominazione male, sentitevi liberi di correggere tale ) E disegnare un rettangolo con la dimensione della tela. Si vuole fare in modo che il clip filmato fine ha le stesse dimensioni MovieClip Start. Thats perché prima disegnare una forma invisibile, con le stesse dimensioni MovieClip Start.

Selezionare la forma e impostare il valore alfa a 0 (la forma è ancora lì, ma invisibile).

Convertire la forma di un movieclip [premere F8] o tasto destro del mouse sul MovieClip -> "Converti in simbolo ..." e il nome "img2".

Fare doppio clic sul appena creato MovieClip, creare un nuovo livello vuoto e inserire del testo su quel livello appena creato.

Tornate alla linea temporale principale e impostare il nome istanza della MovieClip per "img2".

Fase 7 - Aggiungi rollover ActionScript

Selezionate il livello "script" e aprire "Azioni" finestra con "Windows" -> "Azioni" o [premere F9].

Se si desidera semplicemente avere una transizione il rollover (e non di back-transizione sulla rollout), copia le seguenti righe nella finestra del codice.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver function (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "l-> r", 2, "easeInOutCubic", false);
 )

Nella prima riga si aggiunge il listener di eventi rollover al pulsante. Nella funzione "_onOver" (linea 3), prima di creare un'istanza della CubeTransitionEffectAS3 prima di disattivare l'interattività del mouse del componente (linea 4 e 5). Ricorda, il pulsante creato in precedenza si occupa degli effetti del mouse e non si desidera l'effetto di interferire su questo.

In linea 9 Infine si inizializza l'effetto (la documentazione del parametro qui). La parte più importante sono i primi due parametri. Si definisce che la transizione inizia con "img1" e finisce con "img2".

Esportare i tuoi file FLA. Come si vede, la componente effetto funziona perfettamente con lo sfondo trasparente di "img2".

Fase 8 - Più complesso ActionScript

OK, con il codice precedente, il rollover funziona bene. Ma cosa succede se anche voi volete avere una funzione di roll-out che inverte la transizione da "img2" a "img1"? Per raggiungere questo è necessario un codice più complesso. Eliminare lo script e inserire il seguente:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var running = false;
 goin var = false;
 goOut var = false;

 _onOver function (e: MouseEvent) (
  if (! esecuzione) (
  _createAnimation ( "in");
  running = true;
  else ()
  goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! esecuzione) (
  _createAnimation ( "out");
  running = true;
  else ()
  goin = true;
  goOut = false;
  )
 )

 _inAnimationDone function (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (goin) (
  _createAnimation ( "out");
  else ()
  running = false;
  goOut = false;
  )
 )

 _outAnimationDone function (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ( "in");
  else ()
  running = false;
  goin = false;
  )
 )

 _createAnimation funzione (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "in") (
  myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) else if (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

E 'importante sapere, che non è possibile invertire la direzione della transizione, durante l'effetto è in esecuzione. Invece si può "ricordare" l'azione di un utente, attendere che l'effetto è fatto e si applica la transizione revers.

Le variabili "Goin" e "goOut" (linea 5 e 6) sono utilizzati per tale scopo. Tu li hai quando le funzioni "_onOver" e "_onOut" (linea 8 e 18) vengono eseguiti. Ma solo se l'esecuzione var è vero, se è falso (linea 9 e 19), si avvia la transizione da subito (linea 10 e 20).

La funzione "_createAnimation" (linea 52) è la vostra funzione di supporto l'inizio l'animazione a seconda della direzione di "dir" è passato come parametro.

Si noti che dopo la chiamata al removeFilter "metodo" (linee 29 e 41) sia il Movieclip Start e MovieClip End sono impostati su visibili (su l'effetto). Ecco perché si imposta la visibilità Movieclip - la transizione iniziata con - a false (linea 30 e 42).

Scaricare

Clicca qui per scaricare il fla di questo tutorial. Nota: il FLA. Non comprende la componente effetto. Al fine di rendere il lavoro fla, è necessario acquistare l'effetto di transizione Cube qui.

Qui potete trovare un video tutorial di come realizzare un effetto diverso.