Cool Effect Flash Tutorials!

Riassunto

In questo tutorial potrete imparare a creare un effetto di transizione cubo sul rollover del mouse.

Ecco il risultato finale:

Requisiti

Flash CS3 o Flash CS4.

Nota: L'immagine di questo tutorial è realizzato in Flash CS3. Funziona esattamente lo stesso in Flash CS4.

Fase 1 - Installare l'effetto componente

Acquista il effetto di transizione Cube qui . Seguire le istruzioni di installazione e trascinare il componente dal pannello dei componenti nella libreria dei vostri 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. Fate questo come mostrato nella schermata qui sotto.

Fase 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 l'effetto funziona anche con contenuto trasparente (ne riparleremo più avanti).

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

Fase 4 - Creazione di bottone

L'effetto cubo dovrebbe reagire dinamicamente lo stato del mouse gli utenti (rollover / rollout). E 'la migliore prassi non per aggiungere il listener di eventi per lo stesso effetto e invece utilizzano un "bottone bianco".

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 fate clic destro 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". Ciò si assicura che il pulsante sarà interattivo ma non visibile.

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

Fase 5 - Creazione di inizio Scarica video

L'effetto esigenze hanno due Scarica video in cui vengono prese le informazioni visive. Ora puoi creare il clip filmato la transizione inizierà con.

Clicca sul primo fotogramma sul livello "img1". Importare una immagine con la dimensione della tela premendo [Ctrl-R] o "File" -> "Importa" -> "Importa on Stage ...".

Ora convertire questa immagine in un MovieClip e denominarlo "img1".

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

Fase 6 - Crea Scarica video End

Lo spezzone finale conterrà testo invece 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 le dimensioni della tela. Si vuole fare in modo che lo spezzone finale ha le stesse dimensioni MovieClip Start. Ecco perché dovete prima disegnare una forma invisibile, con le stesse dimensioni del MovieClip Start.

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

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

Fare doppio clic sull'icona appena creata MovieClip, creare un nuovo livello vuoto e mettere il vostro testo su quel livello appena creato.

Tornate alla linea temporale principale e impostare il nome di istanza MovieClip a "img2".

Fase 7 - Aggiungi rollover ActionScript

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

Nella prima riga si aggiunge il listener di eventi rollover al pulsante. Nella funzione "_onOver" (linea 3) si crea un'istanza della CubeTransitionEffectAS3 prima di disattivare l'interattività 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 ( documentazione del parametro qui ). La parte importante sono i primi due parametri. Si definisce che la transizione inizia con "img1" e finisce con "img2".

Esporta il 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 rollout che inverte la transizione da "img2" a "img1"? Per raggiungere questo è necessario un codice più complesso. Eliminare la sceneggiatura e inserire il seguente:

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

 esecuzione var = false;
 goin var = false;
 goOut var = false;

 _onOver funzione (e: MouseEvent) (
  if (! esecuzione) (
  _createAnimation ("in");
  esecuzione = true;
  Else ()
  goin = false;
  goOut = true;
  )
 )

 _onOut funzione (e: MouseEvent) (
  if (! esecuzione) (
  _createAnimation ("out");
  esecuzione = true;
  Else ()
  goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ("out");
  Else ()
  esecuzione = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("in");
  Else ()
  esecuzione = false;
  goin = false;
  )
 )

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

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

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

Le variabili "Goin" e "goOut" (linea 5 e 6) sono utilizzati per tale scopo. Si imposta quando le funzioni "_onOver" e "_onOut" (linea 8 e 18) vengono eseguiti. Ma solo se la var corsa è 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 alla avviare l'animazione a seconda della direzione di "dir" è passato come parametro.

Si noti che dopo aver chiamato il "metodo removeFilter (linea 29 e 41) sia lo spezzone di inizio e lo spezzone finale sono impostati visibili (su l'effetto). Ecco perché si imposta la visibilità Scarica video - la transizione iniziata con - a false (linea 30 e 42).

Download

Clicca qui per scaricare il fla di questo tutorial. Nota: L'. 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 .