Redazione
a- a+

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, ma scorrono.
E tanto per complicare ancora di più la faccenda, ognuno dei menu, se selezionato fa scomparire l'altro.
Prima di costruire il menu, dovrete pianificare tutte le voci che ne faranno parte e disegnare tutta la parte grafica.


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 menu drop-down, mentre per il fly-out vi accorgerete che non è nient'altro che un tipo diverso di animazione, mentre la logica rimane la stessa.

  1. 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.
     
  2. 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.
     
  3. 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.

     
  4. Diamo un'occhiata ad ogni layer e vediamo cosa fa
    1. Menu Options:  Questo è il layer che fa apparire il testo Menu Options.
      Se notate, il testo appare solo dal frame numero 6.
      Questo perchè così la linea di collegamento ha tempo di apparire interamente e solo DOPO verrà visualizzato il testo in questione.
    2. Line:  Questa è la linea che verrà giù dal pulsante principale.
    3. Invisible Box: Ok, questo serve per abbellire un po' le cose.
      Il concetto è che quando il pulsante dell'opzione 1 sta scendendo verso il basso, NON SI DEVE VEDERE spuntare da dietro il pulsante principale.
      Allora create questo box invisibile in modo che i pulsanti siano nascosti fino al momento giusto.
      Il preciso diemnsinamento e posizionamento di questo box è essenziale, perciò assicuratevi che questo layer sia sopra i layers dei pulsanti delle opzioni ma sotto quelli che conterranno testo, linee e quant'altro.
    4. Drop Down Line: Questa è solo una piccola linea che metteremo tra il testo Menu Options e i pulsanti, giusto per dare un tocco di stile...
    5. Option buttons:  Questi sono i pulsanti delle opzioni che scorreranno giù.
      Prima Opzione 1, poi Opzione 2 ed infine Opzione 3.
       
  5.  
    1. Per prima cosa, notate la "colonna" di keyframe vuoti al frame 1.
      Se non lo avete ancora fatto, createla ed inserite in uno qualsiasi di questi l'action Stop.
    2. Ora, nel layer Menu Options create il vostro testo e posizionatelo nel frame numero 6.
    3. Create adesso l'animazione della linea dal pulsante principale fino al testo che avete digitato.
      Disegnate una piccola linea nel frame 2, copiatela ed incollatela nel frame 6.
      Sempre nel frame 6, allungatela e applicate uno shape tween.
    4. Nel layer del box invisibile applicate un riempimento che abbia lo stesso colore di quello di sfondo del vostro movie.
      Fatelo leggermente più grande della misura del vostro testo.
    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 lunga come il testo e posizionatela nel frame 6 del layer Drop Down Line.
      Allineate la linea in modo che sia sotto la M di Menu ma 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 a quando verrà in vista ed applicate un motion tween.
    6. Ora, abbiamo bisogno di aggiungere i pulsanti delle opzioni.
      Facciamo insieme il primo, mentre per i seguenti fate riferimento alla figura della timeline di sopra.
      Create un keyframe (F6) nel frame 11 del layer Button Option(1).
      Inserite il pulsante che avrete creato dietro il testo "Menu Options".
      Ora copiate questo frame ed incollatelo nel frame 16.
      Da questo frame, muovete il pulsante in basso fino sotto la linea che avete animato al punto 5 (se l'avete fatta...).
      Applicate un motion tween nei frame da 11 a 16.
      Se tutto funziona, l'effetto dovrebbe essere quello di un pulsante che appare da dietro il testo e scende fino al punto previsto.
    7. Per ognuno degli altri due pulsanti, l'unica differenza è che dovranno apparire da dietro il pulsante a loro precedente (guardate lo swiff all'inizio per vedere il loro comportamento).
    8. Nel layer 'Button option(3)' applicate uno Stop nel frame 26 (che sarebbe il keyframe della fine del terzo tween).
    9. Per finire, inserite al fondo una "colonna" di keyframes vuoti uguali a quelli che sono al primo frame e inserite uno Stop su uno qualunque di questi.
       
  6. 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".
     
  7. 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.
     
  8. 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



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?