Share
La navigazione è una parte cruciale del tuo sito web, ma spesso è noiosa da costruire e mantenere. In questo tutorial descriverò un modo rapido e solido di utilizzare le abilità di base di ActionScript, unendo un po 'della tua creatività, per costruire sistemi di navigazione intuitivi e intuitivi. Ok, tempo di sporcarci le mani, beh ... sudato forse ...
Questo tutorial dimostra come evitare di fare doppio clic sugli elementi all'interno del menu, un elemento molto trascurato che migliora la tua esperienza online. Imparerai anche come creare e combinare più array con facilità. Per prima cosa modificheremo la scena, posizioneremo fotogrammi chiave ed etichette, quindi alla fine aggiungeremo un po 'di ActionScript per farlo diventare vivo. Impareremo anche come creare transizioni di pagina che aggiungano un piccolo extra al tuo sito web.
In retrospettiva, questo tutorial è molto semplice, ma copre un sacco di gemme nascoste. Sii creativo, collega i dati con xml, modifica le forme della maschera, modifica gli stati di rollOver dei pulsanti e divertiti.
Crea un nuovo documento ActionScript 3: 600px X 400px, 30frames al secondo e utilizza il bianco come sfondo. Per prima cosa, creiamo il pulsante. Disegna una casella di testo sul palco e assegnagli un nome di istanza di "txt". Per fare questo vai al pannello delle proprietà (CTRL F3 / Finestra> proprietà> proprietà). Ora coprite il simbolo in un simbolo (F8 / Modifica> Converti in simbolo), selezionate Movie Clip e assicuratevi che il punto di registrazione sia in alto a sinistra. Dai un nome all'istanza "button_text_mc".
Su un nuovo livello, crea un rettangolo che si adatti ai limiti del tuo Movie Movie Clip. Questo funzionerà come un'area di successo per il tuo pulsante. Convertilo in un simbolo.
Ora seleziona entrambi i livelli e convertili in un simbolo. Dai un nome a questa istanza "hitarea_mc". Assicurati di inserire il valore alfa di "hitarea_mc" a zero nella finestra delle proprietà.
Ora facciamo un supporto per i nostri pulsanti. Ovviamente puoi renderlo più avanzato rendendo questa navigazione dinamica completa con xml o php, ma per il bene di questo tutorial useremo
alcuni ActionScript per assegnare un nome alle voci del menu e inserire le funzionalità.
Trascina un'istanza del Movie Clip "button_movieclip" sul palco per ogni oggetto che desideri per la tua navigazione. Useremo 6 in questo caso. Ora dai a ciascuna istanza un nome univoco; Ho scelto b1, b2, ... fino a b6. Ora completeremo questo in un nuovo Movie Clip chiamato "menu_total".
La cosa buona è che, se vogliamo usarlo in seguito, possiamo semplicemente trascinare la clip "menu_total" dalla libreria e usarla direttamente. Ora dovresti avere un singolo Movie Clip sul palco con sei pulsanti che trasformeremo nella nostra navigazione.
Aah la parte divertente. Alcune animazioni e trucchi. Come si vede nell'esempio, il menu si rivela solo quando il cursore del mouse si sposta vicino al riquadro del menu e alla linea. Per raggiungere questo obiettivo, avremo bisogno di una hitarea invisibile e di alcuni fotogrammi chiave per passare a un diverso stato di vista.
Assicurati di essere all'interno del MovieCot "menu_total" e crea 2 nuovi livelli nella parte superiore dei tuoi livelli: uno denominato "codice", l'altro denominato "etichette". Seleziona il livello "etichette" e aggiungi un fotogramma chiave vuoto sul fotogramma 1, 2, 10, 24, 25, 37. Ora assegna il secondo framelabel "CHIUSO", il decimo framelabel "OVER" e il 25 ° framelabel "OUT".
Crea un nuovo livello sotto il livello dei pulsanti e chiamalo "hit_area", quindi prendi il clip filmato "hitarea_mc" dalla tua libreria e posizionalo a sinistra dei pulsanti. Infine, ridimensionarlo in modo che l'utente abbia spazio per spostare il mouse. Assicurati che i fotogrammi chiave per "HOVER" raggiungano solo il fotogramma 10.
Crea ancora un altro livello e chiamalo "menu_out", quindi vai al fotogramma 10 e posiziona un'altra copia di "hit_area_mc" sul palco. Assegnagli un nome di istanza di "HOVEROUT_MC" e assicurati che entrambi questi Movie Clip abbiano un valore alfa pari a 0. Inoltre, questi due Movie Clip dell'area colpita devono sovrapporsi un po '. Altrimenti Flash perderà il hit test quando si sposta il mouse verso i pulsanti.
OK, a tal fine, i tuoi frame e le tue etichette dovrebbero apparire così:
Ecco come dovrebbero apparire le aree colpite del mouse:
Ecco come dovrebbe apparire la seconda hitarea: inizia sul fotogramma chiave dello stato sopra.
Ora diamo un'occhiata al mascheramento.
Nell'intervallo dell'animazione per gli stati rollOver / rollOut, crea un Movie Clip vuoto e assegnagli un nome di istanza di "loaderclip".
Questo bit dipende interamente da te e dalla tua immaginazione, ma ecco una base che dovrebbe iniziare. Crea un nuovo file ActionScript 3.0 con le stesse dimensioni del tuo file principale. Crea l'animazione di entrata / uscita della tua pagina. Assicurati di mettere uno stop (); comando allo stato finale dell'animazione (il luogo in cui arriverà il contenuto effettivo). Salva i tuoi file come pagina1.swf, pagina2, ... fino alla quantità di pulsanti che hai creato, in questo caso 6.
Nel mio esempio assolutamente semplice ho iniziato con una piccola scatola che si estende lungo la timeline da 0 a 100 mentre sale alla sua altezza finale.
Bene, ora un po 'di tempo per ActionScript. Prima di tutto, puoi rendere più piccante qualunque cosa accada con il menu come preferisci. Ad esempio, è possibile utilizzare le animazioni rollOver / rollOut più avanzate.
Per il bene di questo tutorial ho scelto un effetto molto semplice.
Dovrai scaricare e importare la classe opensource creata da Grant Skinner chiamata "tweenmax". Assicurati di scaricare la versione AS3. Useremo anche le classi incorporate per le transizioni.
Con il tuo livello di codice selezionato sul fotogramma uno, inserisci il codice nei seguenti passaggi (Spiegherò ogni riga nei commenti).
Nota: da questo punto è molto semplice creare un nuovo array con tutte le tue azioni e collegarlo al gestore onRelease, allo stesso modo in cui colleghi i nomi dei pulsanti ai video clip reali. Con il minimo sforzo è possibile costruire un sistema di navigazione molto forte che può essere riutilizzato più e più volte. Potresti creare una classe per questo, ma questo non è lo scopo di questo tutorial.
import gs.TweenMax; import fl.motion.easing. *; import fl.transitions. *; import fl.transitions.easing. *;
// variabili per il rollover del pulsante, out, hit state var speed: Number = 0.3; var motion: Function = Sine.easeOut; var colourOver: String = "0x9BE07C"; var colourOut: String = "0x000000"; var colourRelease: String = "0xFF0000"; // memorizza i pulsanti come oggetti da utilizzare in un secondo momento o come riferimento. var btn: Object; var disabledBtn: Object; // La variabile currentPage, nextPage contiene i movieclips che caricheremo. var currentPage: MovieClip = null; var nextPage: MovieClip = null; // il loader var loader: Loader; // quale MovieClip carica var urlRequest: URLRequest; // il nome del nostro menu movieclip.MENUNAME.txt.text = "MENU>";
Accentsconagua
// per prima cosa faremo riferimento a tutti i pulsanti sui pulsanti var dello stage: Array = new Array (b1, b2, b3, b4, b5, b6); // questo array contiene tutti i nomi che vogliamo usare per i nostri pulsanti var nome_file: Array = new Array ("Home", "Chi siamo", "Lavoro selezionato", "Riferimenti", "Lavori", "Contatti"); // questo array memorizza quale swf vogliamo caricare var swf_array: Array = new Array ("swf1.swf", "swf2.swf", "swf3.swf", "swf4.swf", "swf5.swf", " swf6.swf "); for (var i: String in buttons) // assegna l'array button_name al textclip dei nostri pulsanti buttons [i] .button_txt.txt.text = button_name [i]; // assegna quale swf verrà caricato per ciascuno dei pulsanti pulsanti [i] .currentPage = swf_array [i]; // dichiara che utilizzeremo il Movie Clip come pulsante [i] .buttonMode = true; // assicurati che la clip button_txt non reagisca ai pulsanti del mouse [i] .button_txt.mouseChildren = false; // aggiungi i listener per i pulsanti dei pulsanti [i] .addEventListener (MouseEvent.CLICK, onCLICK); pulsanti [i] .addEventListener (MouseEvent.MOUSE_OVER, onOVER); pulsanti [i] .addEventListener (MouseEvent.MOUSE_OUT, onOUT);
function onCLICK (event: MouseEvent): void // assicurati che la variabile del nostro target attuale sia memorizzata, la indirizzeremo successivamente alla funzione per disabilitarne lo stato btn = event.currentTarget; disableBtn (btn);; function onOVER (event: MouseEvent): void btn = event.currentTarget; // qui abbiamo tween to il colore eccessivo che abbiamo assegnato in precedenza alle variabili. TweenMax.to (btn, speed, tint: colourOver, ease: motion);; function onOUT (event: MouseEvent): void btn = event.currentTarget; TweenMax.to (btn, velocità, tinta: coloreOut, facilità: movimento);;
Questo è il nucleo principale del nostro progetto. Ogni passaggio importante è commentato nel codice.
function disableBtn (btn: Object): void // se il pulsante è disabilitato ci assicureremo che ogni evento sia tornato nella sua posizione in modo che possiamo riutilizzarlo se (disabledBtn) disabledBtn.buttonMode = true; disabledBtn.mouseEnabled = true; TweenMax.to (disabledBtn, speed, tint: colourOut, ease: motion); disabledBtn.addEventListener (MouseEvent.CLICK, onCLICK); disabledBtn.addEventListener (MouseEvent.MOUSE_OUT, onOUT); disabledBtn.addEventListener (MouseEvent.MOUSE_OVER, onOVER); TweenMax.to (btn, speed, tint: colourRelease, ease: motion); // disabilitare significa non essere più in grado di usarlo, quindi qui rimuoviamo tutte le funzionalità btn.buttonMode = false; btn.mouseEnabled = false; btn.removeEventListener (MouseEvent.CLICK, onCLICK); btn.removeEventListener (MouseEvent.MOUSE_OUT, onOUT); btn.removeEventListener (MouseEvent.MOUSE_OVER, onOVER); // assicurati che il pulsante corrente selezionato sia etichettato come disabilitato. disabledBtn = btn; // Crea un nuovo caricatore di istanze del caricatore = nuovo Loader (); // aggiungi la variabile currentPage alla richiesta url urlRequest = new URLRequest (btn.currentPage); // carica la richiesta url loader.load (urlRequest); // una volta caricato il file, attiveremo la funzione fileLoaded loader.contentLoaderInfo.addEventListener (Event.COMPLETE, isLoaded); function isLoaded (event: Event): void // Il loader ora contiene la pagina che verrà visualizzata in seguito su nextPage = event.target.content; // controlla se c'è una currentPage if (currentPage! = null) // tween l'alpha a zero // quindi aspetta ... perché usiamo 2 diversi tweenclass? bene, solo per mostrarti i vantaggi e gli svantaggi di entrambi. Decidi tu stesso quello che ritieni più adatto ai tuoi progetti. var tweenAlpha: Tween = new Tween (currentPage, "alpha", Regular.easeOut, 1, 0, .7, true); // Inoltre, puoi fare in modo che currentPage esegua un'animazione in uscita extra. Assicurati di giocare con la lunghezza del tuo alfa in modo che non scompaia prima che l'animazione sia completata. currentPage.gotoAndPlay (31); // currentPageGone verrà chiamato quando l'interpolazione è terminata tweenAlpha.addEventListener (TweenEvent.MOTION_FINISH, currentPageOut); else // se non c'è currentPage attiveremo la funzione showNextPage. doNextPage (); function doNextPage (): void // posiziona il loaderclip come nextPage nextPage.x = 238.0; nextPage.y = 0; // Tween l'alfa da 0 a 1 var tweenAlpha: Tween = new Tween (nextPage, "alpha", Regular.easeOut, 0, 1, .3, true); // Aggiungi la pagina successiva allo stage addChild (nextPage); // La prossima pagina è ora la nostra pagina corrente - confusa? Non lo è. Sostituiamo la pagina successiva con quella attuale. currentPage = nextPage; // Una volta completata l'animazione, attiveremo questa funzione function currentPageOut (event: Event): void // Rimuovi completamente la pagina corrente dallo stage removeChild (currentPage); // Mostriamo la prossima pagina doNextPage (); // non posiziona un comando stop perché atterreremo direttamente sul frame 2.
Alla fine, risaliamo di un fotogramma. Assicurati di trovarti al fotogramma 2 del MovieCot_Total.
// aggiungi un eventlistener per il mousemove HOVER.addEventListener (MouseEvent.MOUSE_MOVE, openmenu); function openmenu (e: Event): void // quando i valori x & y del mouse si trovano all'interno della clip filmato denominata "HOVER", l'hittest è true HOVER.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay ( "AL DI SOPRA DI"); // assicurati di rimuovere l'ascoltatore in modo che non possiamo attivare questo accidentalmente. HOVER.removeEventListener (MouseEvent.MOUSE_MOVE, openmenu); Stop();
Passare ora al frame 24 del Movie_Total Movie Clip.
// aggiungi un eventlistener per il mouse Moveremove HOVER_OUT.addEventListener (MouseEvent.MOUSE_MOVE, menuout); function menuout (e: Event): void // quando i valori x & y del mouse si trovano all'interno della clip filmato denominata "HOVER_OUT", l'hittest è true HOVER_OUT.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay ( "SU"); // assicurati di rimuovere l'ascoltatore in modo che non possiamo attivare questo accidentalmente. HOVER_OUT.removeEventListener (MouseEvent.MOUSE_MOVE, menuout); Stop();
Nell'ultimo fotogramma dell'animazione, imposta semplicemente la seguente riga di codice. Il motivo è che saltiamo il frame 1 in modo che il menu non si carichi nuovamente, perdendo così lo stato attivo / disabilitato.
gotoAndStop ( "CHIUSA")
Quindi eccoci! Hai imparato come abilitare / disabilitare i pulsanti cliccati in un array con dati combinati, utilizzare tecniche di mascheramento e come creare sistemi di menu semplici ma efficaci che possono essere riutilizzati con il minimo sforzo. Tutto questo con una transizione di pagina semplice ma efficace. Spero ti sia piaciuto questo e ho trovato un modo pratico per accelerare il tuo flusso di lavoro in Flash.
