Share
In questo tutorial, ti mostrerò come creare un elegante orologio analogico utilizzando ActionScript 3.0. Useremo il filmato swf risultante con Screentime per Flash per creare uno screensaver completamente funzionale. Tempo per divertirsi ...
Usando l'oggetto Date e le sue proprietà, otterremo il giorno, le ore, i minuti e i secondi e useremo un semplice Math per visualizzare i dati ottenuti in un orologio analogico. Gli aggiornamenti saranno gestiti da un timer.
Inoltre, puoi aggiungere un orologio digitale allo screensaver seguendo questo tutorial di FlashTuts +.
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage su 640x400 e aggiungi uno sfondo lineare grigio (#DBDBDD, # B3B2B7). Screentime ridimensiona automaticamente il film a schermo intero, quindi non è necessario impostare lo stage nella risoluzione completa.
Inizieremo creando lo sfondo dell'orologio.
Seleziona lo strumento Ovale (O) e disegna un cerchio di 250x250 px e aggiungi uno sfondo lineare nero (# 313131, # 000000). Utilizzare lo strumento Trasformazione sfumatura (F) per ruotare il gradiente in modo che assomigli all'immagine seguente:
Crea un altro cerchio, questa volta 248x248, con questo gradiente lineare (# 595959, # 000000). Anche in questo caso, utilizzare lo strumento Trasformazione sfumatura per ruotare e regolare la sfumatura.
Ora aggiungiamo numeri al nostro orologio.
Seleziona lo Strumento Testo (T), scegli un font a tua scelta e una dimensione appropriata per l'orologio. Ho usato Myriad Pro Regular, 22 Pt, #DDDDDD.
Scrivi i numeri in un campo di testo per ognuno e allineali all'orologio, questo può essere un po 'difficile senza un riferimento, controlla le guide nelle immagini.
Orizzontale:
Verticale:
È ora di creare le lancette dell'orologio.
Seleziona lo strumento Poly Star (fai clic e tieni premuto nel pulsante Strumento rettangolo), quindi nel pannello Proprietà fai clic sul pulsante Opzioni nella sezione Impostazioni strumento. Cambia il numero di lati in 3.
Crea un triangolo bianco 20x70 px, convertilo in MovieClip e chiamalo "hourHand".
Ripeti questa procedura per la lancetta dei minuti, ma modifica l'altezza a 110 px. Ricorda di impostare il nome dell'istanza su "minuteHand".
Seleziona lo strumento Ovale e crea un cerchio di 26x26 pixel, convertilo in un MovieClip e applica un filtro come segue:
Per la seconda mano combina un cerchio di 8x8 px e un rettangolo 2x116 px. Riempili con questo colore # C90303.
Crea un nuovo documento ActionScript e salvalo come "Analog Clock.as".
Queste sono le classi di cui avremo bisogno:
pacchetto import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent;
Useremo i metodi e le proprietà specifici di Sprite per estendere l'uso della classe Sprite.
la classe pubblica AnalogClock estende Sprite
Queste sono le variabili che useremo, spiegate nei commenti.
/ * Un oggetto Date utilizzato per ottenere l'ora * / var date: Date = new Date (); / * Variabili temporali * / 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 AnalogClock (): void / * Questo codice imposterà le lancette dell'orologio nella posizione corretta usando i dati dell'oggetto Date * / hourHand.rotation = hours * 30 + (minutes * 0.5); // La lancetta delle ore ruota di 30 gradi in 60 minuti, cioè 0,5 gradi al minuto minutoHand.rotation = minuti * 6; // Il minuto ruota di 6 gradi al minuto, ovvero 360 gradi in 60 minuti - un'ora secondoHand.rotation = secondi * 6; // La lancetta dei secondi ruota 6 gradi al secondo, ovvero 360 gradi in 60 secondi - un minuto timer.addEventListener (TimerEvent.TIMER, updateClock); timer.start ();
Questa è la funzione che gestisce l'orologio. È lo stesso codice delle prime funzioni, appena eseguito ogni secondo dal timer.
funzione privata updateClock (e: TimerEvent): void date = new Date (); ore = date.hours; minutes = date.minutes; seconds = date.seconds; hourHand.rotation = hours * 30 + (minutes * 0.5); minuteHand.rotation = minutes * 6; secondHand.rotation = seconds * 6;
Torna al file .fla e nel pannello Proprietà aggiungi "AnalogClock" nel campo Classe per rendere questa la Document Class.
Screentime for Flash è uno strumento per creare screensaver, è veloce e facile da usare. È possibile ottenere una versione di prova dal sito Web. Le demo sono completamente funzionanti, tranne che gli screen saver che costruiscono scadono una settimana dopo la loro creazione. In questo tutorial sto usando la versione per Mac in modo che lo Screensaver sia solo per Mac.
Apri Screentime e nella scheda Contenuto, seleziona il tuo file facendo clic sul pulsante "..." e sfogliando il file SWF. Inserisci un nome per il tuo salvaschermo.
Lasciare le schede Proprietà e Programma di installazione come predefinite e, nella scheda Pubblica, seleziona il programma di installazione, scegli le opzioni necessarie e fai clic su Crea.
Al termine della compilazione, apri l'app di installazione e fai clic su Installa. Ora puoi scegliere il tuo screensaver appariscente dalle Preferenze di Sistema.
Scopri solo quanto è facile convertire filmati flash o applicazioni in screensaver, esplorare l'applicazione Screentime e crearne di tuoi!
Grazie per aver letto :)
Accentsconagua