Share
ActionScript 3.0 è un linguaggio molto potente, in grado di creare qualsiasi cosa, dalle utility semplici e chiare alle applicazioni desktop complete.
In questo tutorial, creeremo qualcosa di semplice, un orologio digitale di base e di bell'aspetto in Flash.
Usando l'oggetto Date e le sue proprietà, otterremo il giorno, le ore, i minuti e i secondi e useremo TextField sul palco per visualizzare i dati ottenuti. Gli aggiornamenti saranno gestiti da un timer.
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage su 600x300 e aggiungi uno sfondo radiale da blu a nero (# 003030, # 000000).
Aggiungiamo due campi di testo dinamici per ogni elemento, posizioneremo quelli con il bagliore per primi per ottenere l'effetto delle linee.
Seleziona lo strumento Testo e crea un campo di testo 342x104px, usa il colore # 00FAFF, fai clic sull'opzione Centro nel pannello Paragrafo e scegli un carattere che ti piace. Ho usato DS-Digital italic, 100pt.
Assegnare un nome a "clockGlow", aggiungere alcuni numeri, centrarlo per utilizzarlo come guida e aggiungere un filtro bagliore con i seguenti valori:
Dovresti avere qualcosa di simile a questo:
Ripeti il processo con una dimensione del carattere più piccola per i giorni e l'indicatore am / pm. I nomi delle istanze sono il nome del giorno più la parola "Glow", questo sarà "monGlow", "tueGlow" e così via, "ampmGlow" per l'indicatore AM / PM.
Disegneremo una serie di linee che copriranno il palco per ottenere l'effetto dello schermo LCD.
Seleziona lo strumento Rettangolo e crea una linea nera 600x1px, duplicala (Cmd + D) e posizionala sotto lasciando uno spazio di 1px.
Ripeti il processo fino a quando non corrisponde all'altezza del palco. Finirai con qualcosa di simile a questo:
Converti lo schermo delle linee in un gruppo (Cmd + G) e centralo nel palco.
Come puoi vedere nell'ultima immagine, l'effetto linea è tutto il testo. Vogliamo solo che si applichi al bagliore, quindi aggiungiamo un nuovo livello di testo.
Poiché questo testo è esattamente lo stesso che abbiamo creato in precedenza (senza il filtro bagliore), possiamo semplicemente copiare i campi di testo e rimuovere il filtro bagliore. Rimuoveremo anche la parola "Glow" dai nomi delle istanze.
Questo completerà l'interfaccia.
Crea un nuovo documento ActionScript e salvalo come "Main.as".
Questa volta ci serviranno solo poche lezioni.
package import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent;
Useremo metodi e proprietà specifici di MovieClip per estendere l'utilizzo della classe MovieClip. L'estensione utilizzando la classe Sprite non funzionerà.
la classe pubblica Main estende MovieClip
Queste sono le variabili che useremo, spiegate nei commenti.
/ * Un oggetto Date utilizzato per ottenere il giorno e l'ora * / var date: Date = new Date (); var day: int = date.day; // Il giorno / * Il tempo * / var ore: int = date.hours; var minuti: * = date.minutes; var secondi: * = date.seconds; / * Un oggetto Timer che gestirà gli aggiornamenti, eseguito ogni secondo * / var timer: Timer = new Timer (1000);
Questa funzione viene eseguita quando la classe viene caricata.
funzione pubblica Main (): void / * Impedisce il lag, poiché il timer non viene eseguito fino a 1 secondo dopo l'avvio del film * / updateClock (); / * Nasconde il testo di tutti i giorni, queste funzioni sono spiegate in seguito * / hideObjects (mon, monGlow, tue, marlow, wed, wedGlow, thu, thuGlow, fri, friGlow, sat, satGlow, sun, sunGlow); / * Mostra il giorno corrente * / showCurrentDay (); / * Avvia il timer * / timer.addEventListener (TimerEvent.TIMER, startClock); timer.start ();
Questa è la funzione che gestisce l'orologio. Viene chiamato una volta nella funzione principale, quindi ogni secondo nella funzione startClock.
funzione privata updateClock (): void / * AM PM, se ore è maggiore di 11, cioè 12 e 12 è PM * / if (ore> 11) ampm.text = "PM"; ampmGlow.text = "PM"; else ampm.text = "AM"; ampmGlow.text = "AM"; / * Evita l'orologio a 24 ore, se le ore è maggiore di 12 (come 13) sottostrati 12 (quindi è 1) * / if (ore> 12) ore- = 12; / * Se il numero è solo una cifra, aggiungi uno 0 a sinistra * / if (String (minuti) .lunghezza<2) minutes="0"+minutes; if (String(seconds).length<2) seconds="0"+seconds; /* Set TextFields */ clock.text=hours+":"+minutes+":"+seconds; clockGlow.text=hours+":"+minutes+":"+seconds;
Questa è una funzione per rendere invisibili gli oggetti, usiamo il parametro ... rest per passare qualsiasi numero di parametri.
funzione privata hideObjects (... targets) for (var i: int = 0; i < targets.length; i++) targets[i].visible=false;
Questa istruzione Switch controllerà la variabile del giorno per ottenere il giorno e mostrarlo.
Accentsconagua
funzione privata showCurrentDay (): void switch (day) case 0: sun.visible = true; sunGlow.visible = true; rompere; caso 1: mon.visible = true; monGlow.visible = true; rompere; caso 2: tue.visibile = vero; tueGlow.visible = true; rompere; caso 3: wed.visible = true; wedGlow.visible = true; rompere; caso 4: thu.visible = true; thuGlow.visible = true; rompere; caso 5: fri.visible = true; friGlow.visible = true; rompere; caso 6: sat.visible = true; satGlow.visible = true; rompere; default: trace ("Errore giorno della settimana"); Questa funzione aggiorna l'oggetto Date per ottenere la data effettiva e chiama la funzione updateClock per aggiornare i campi di testo.
funzione privata startClock (e: TimerEvent): void date = new Date (); ore = date.hours; minuti = date.minutes; secondi = date.seconds; updateClock ();
Torna al file .Fla e nel pannello Proprietà aggiungi "Main" nel campo Class per renderlo la Document Class.
Come puoi vedere, è piuttosto facile creare e modificare questo orologio digitale. Sperimenta con la classe Date, cambia l'interfaccia e magari aggiungi più funzionalità!
Grazie per aver letto.
