Menu drop-down

Cose da sapere per affrontare questo tutorial:

Conoscenza di Flash in generale (symbols, tweening, logiche di animazione)
Conoscenze di base sull'uso del Tell Target e delle actions

La logica dietro il menu

La prima cosa da decidere è che look dovràavere il menu.
Quello che avete visto sopra complica un pò le cose,perchè i pulsanti non appaiono semplicemente, mascorrono.
E tanto per complicare ancora di più la faccenda,ognuno dei menu, se selezionato fa scomparirel'altro.
Prima di costruire il menu, dovrete pianificare tuttele voci che ne faranno parte e disegnare tutta la partegrafica.

Quante fasi ci vogliono per creare il nostro menu ?
Partiamo con la più facile: pulsanti e symbols.
Continuiamo con la parte intermedia: animazioni.
E finiamo con la parte difficile: Actions.

In questo tutorial seguirete i passi per creare il menudrop-down, mentre per il fly-out vi accorgerete che nonè nient'altro che un tipo diverso di animazione,mentre la logica rimane la stessa.

Create il pulsante principale.
Metteteci il testo che ritenete più opportuno.
Assicuratevi di aver creato tutti gli stati che vi servono, di aver caricato tutti gli effetti audio, ecc.
Create i pulsanti delle opzioni.
Ora create 3 pulsanti per le opzioni 1, 2 e 3.
Tutto quello che dovete fare è creare il pulsante dell'opzione 1.
Fatelo un po' diverso e un po' più piccolo rispetto al pulsante principale.
Quando avrete finito, copiate tutti i frame ed incollateli negli altri due pulsanti.
Facendo così non dovrete creare sempre da zero tutto quanto per ogni pulsante e tutto avrà lo stesso stile, look e dimensione.
L'unica cosa da tenere presente è che dovrete andare a cambiare il testo all'interno dei pulsanti.
Create i movie clip ed aggiungete questi layers.
Ora lavoreremo sul movie clip dell'animazione drop-down.
Fate riferimento alla figura qui sotto per creare tutti i layers che serviranno all'interno di un movie clip chiamato "Drop Down" e assicuratevi di metterli nello stesso ordine che vedete riprodotto qui.
Diamo un'occhiata ad ogni layer e vediamo cosa fa
1. Menu Options: Questo è illayer che fa apparire il testo Menu Options.
  Se notate, il testo appare solo dal frame numero6.
  Questo perchè così la linea dicollegamento ha tempo di apparire interamente e soloDOPO verrà visualizzato il testo inquestione.
2. Line: Questa è la lineache verrà giù dal pulsante principale.
3. Invisible Box: Ok, questo serve perabbellire un po' le cose.
  Il concetto è che quando il pulsantedell'opzione 1 sta scendendo verso il basso, NONSI DEVE VEDERE spuntare da dietro il pulsanteprincipale.
  Allora create questo box invisibile in modo che ipulsanti siano nascosti fino al momento giusto.
  Il preciso diemnsinamento e posizionamento di questobox è essenziale, perciò assicuratevi chequesto layer sia sopra i layers dei pulsanti delleopzioni ma sotto quelli che conterranno testo, linee equant'altro.
4. Drop Down Line: Questa è solouna piccola linea che metteremo tra il testo MenuOptions e i pulsanti, giusto per dare un tocco distile...
5. Option buttons: Questi sono ipulsanti delle opzioni che scorreranno giù.
  Prima Opzione 1, poi Opzione 2 ed infine Opzione3.
1. Per prima cosa, notate la "colonna" dikeyframe vuoti al frame 1.
  Se non lo avete ancora fatto, createla ed inserite inuno qualsiasi di questi l'action Stop.
2. Ora, nel layer Menu Options create il vostrotesto e posizionatelo nel frame numero 6.
3. Create adesso l'animazione della linea dal pulsanteprincipale fino al testo che avete digitato.
  Disegnate una piccola linea nel frame 2, copiatela edincollatela nel frame 6.
  Sempre nel frame 6, allungatela e applicate uno shapetween.
4. Nel layer del box invisibile applicate un riempimentoche abbia lo stesso colore di quello di sfondo delvostro movie.
  Fateloleggermente più grande della misura del vostrotesto.
5. Create una piccola linea orizzontale che dovràcadere giù partendo dal testo e divideràquesto dai pulsanti delle opzioni.
  Per fare questo, disegnate una linea che sia lungacome il testo e posizionatela nel frame 6 del layerDrop Down Line.
  Allineate la linea in modo che sia sotto la M di Menuma in un punto dove non si veda.
  Copiate il frame 6 ed incollatelo nel frame 11.
  In questo frame muovete la linea in giù fino aquando verrà in vista ed applicate un motiontween.
6. Ora, abbiamo bisogno di aggiungere i pulsanti delleopzioni.
  Facciamo insieme il primo, mentre per i seguenti fateriferimento alla figura della timeline di sopra.
  Create un keyframe (F6) nel frame 11 del layer ButtonOption(1).
  Inserite il pulsante che avrete creato dietro il testo"Menu Options".
  Ora copiate questo frame ed incollatelo nel frame16.
  Da questo frame, muovete il pulsante in basso finosotto la linea che avete animato al punto 5 (sel'avete fatta...).
  Applicate un motion tween nei frame da 11 a 16.
  Se tutto funziona, l'effetto dovrebbe esserequello di un pulsante che appare da dietro il testo escende fino al punto previsto.
7. Per ognuno degli altri due pulsanti, l'unicadifferenza è che dovranno apparire da dietro ilpulsante a loro precedente (guardate lo swiffall'inizio per vedere il loro comportamento).
8. Nel layer 'Button option(3)' applicate uno Stopnel frame 26 (che sarebbe il keyframe della fine delterzo tween).
9. Per finire, inserite al fondo una "colonna"di keyframes vuoti uguali a quelli che sono al primoframe e inserite uno Stop su uno qualunque diquesti.
Ora dovreste aver finito con i symbols.
Andate sullo stage principale e inserite il movie clip.
Il movie clip non farà vedere niente a causa del keyframe vuoto all'inizio e voi dovreste vedere un semplice cerchietto bianco.
Cliccate due volte sul vostro movie clip e nella casella Instance Name digitate "DropDown".
Dalla vostra libreria, inserite il pulsante principale, cliccateci due volte sopra e applicate queste actions:

On [Release]
    Tell Target /dropdown
        Go To and Play (Frame # 2)
    End Tell Target
End On

Se avete più di un menu drop-down e volete che ognuno di essi sparisca quando passate con il mouse sopra un pulsante non appartenente ad esso, dovrete aggiungere un altro Tell Target direttamente sotto quello che avete appena creato.
Se vi ricordate, nel movie clip "Drop Down" avete creato una colonna di keyframes vuoti al fondo.
Ora questa colonna serve.
Diciamo di avere 4 pulsanti di menu (con altrettanti sottopulsanti).
Voi dovrete semplicemente aggiungere un Tell Target a tutte le istanze al frame 27 (o dove avrete la famosa colonna di keyframes vuoti) prima del Tell Target del menu stesso.
Questo "forzerà" il menu a mandare in play tutte le istanze a partire da quella posizione, cioè da dove si troverà il keyframe vuoto, "cancellando" tutto dallo schermo e, come finale, riprodurrà il proprio movie clip.
E' vero, è più facile a dirsi che a farsi, ma con un pò di pratica vedrete che non è poi così difficile come sembra.
Ricordatevi che Flash non è altro che un grosso riproduttore di azioni, ma la logica la fate voi, dovete pensare voi per lui.
Ora avete bisogno di allineare il pulsante principale con il movie clip.
Provate un po' di volte, muovendo poco per volta il movie clip (o il pulsante principale, fate voi...) e testando il movie (Ctrl+Enter).

SCARICA IL FILE SORGENTE .FLA

Tutorial originale di Amanda Farr di Virtual-FX,liberamente tradotto in italiano