Share
ActionScript 3.0 is een zeer krachtige taal die alles kan maken, van eenvoudige en lichte hulpprogramma's tot complete bureaubladtoepassingen.
In deze tut gaan we iets eenvoudigs maken, een eenvoudige en goed uitziende digitale klok in Flash.
Met behulp van het object Date en de eigenschappen ervan, krijgen we de dag, het uur, de minuten en de seconden en gebruiken we TextFields op het podium om de verkregen gegevens weer te geven. De updates worden afgehandeld door een timer.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Zet de stage op 600x300 en voeg een blauwe tot zwarte radiale achtergrond toe (# 003030, # 000000).
We gaan twee dynamische tekstvelden toevoegen voor elk element, we zullen degenen met de gloed eerst plaatsen om het effect van de lijnen te krijgen.
Selecteer het gereedschap Tekst en maak een tekstveld van 342x104px, gebruik de kleur # 00FAFF, klik op de optie Midden in het deelvenster Alinea en kies een lettertype dat u bevalt. Ik gebruikte DS-Digital cursief, 100pt.
Noem het "clockGlow", voeg een paar cijfers toe, centreer het om het als een gids te gebruiken en voeg een Glow Filter toe met de volgende waarden:
Je zou zoiets als dit moeten hebben:
Herhaal het proces met een kleinere lettergrootte voor de dagen en de am / pm-indicator. De instantienamen zijn de naam van de dag plus het woord "Glow", dit is "monGlow", "tueGlow" enzovoort, "ampmGlow" voor de AM / PM-indicator.
We zullen een reeks lijnen tekenen die het podium bedekken om het effect van het LCD-scherm te krijgen.
Selecteer het gereedschap Rechthoek en maak een zwarte lijn van 600x1px, dupliceer deze (Cmd + D) en plaats deze onder het achterlaten van een 1px-spatie.
Herhaal het proces totdat het overeenkomt met de hoogte van het podium. Je eindigt met zoiets als dit:
Converteer het lijnenscherm naar een groep (Cmd + G) en centreer het in het werkgebied.
Zoals je kunt zien in de laatste afbeelding, is het lijneffect overal in de tekst. We willen alleen dat het van toepassing is op de gloed, dus laten we een nieuwe laag tekst toevoegen.
Aangezien deze tekst exact hetzelfde is als eerder gemaakt (zonder het Glow Filter), kunnen we de tekstvelden gewoon kopiëren en het Glow Filter verwijderen. We verwijderen ook het woord 'Gloed' uit de instantienamen.
Hiermee wordt de interface voltooid.
Maak een nieuw ActionScript-document en sla het op als "Main.as".
Deze keer hebben we slechts enkele lessen nodig.
pakket import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent;
We gaan MovieClip-specifieke methoden en eigenschappen gebruiken, dus we breiden deze uit met de MovieClip-klasse. Uitbreiden met de Sprite-klasse werkt niet.
public class Main breidt MovieClip uit
Dit zijn de variabelen die we zullen gebruiken, uitgelegd in de opmerkingen.
/ * Een Date-object dat wordt gebruikt om de dag en tijd op te halen * / var date: Date = new Date (); var day: int = date.day; // De dag / * De tijd * / var uren: int = date.hours; var minuten: * = date.minutes; var seconden: * = datum.seconden; / * Een timerobject dat de updates afhandelt en elke seconde wordt uitgevoerd * / var timer: Timer = new Timer (1000);
Deze functie wordt uitgevoerd wanneer de klasse is geladen.
public function Main (): void / * Voorkomt vertraging, omdat de timer niet wordt uitgevoerd tot 1 seconde na het starten van de film * / updateClock (); / * Verbergt alle dagen tekst, deze functies worden later uitgelegd * / hideObjects (mon, monGlow, tue, tueGlow, wed, wedGlow, thu, thuGlow, fri, friGlow, sat, satGlow, sun, sunGlow); / * Geeft de huidige dag * / showCurrentDay () weer; / * Start de timer * / timer.addEventListener (TimerEvent.TIMER, startClock); timer.start ();
Dit is de functie die de klok behandelt. Het wordt eenmaal in de hoofdfunctie genoemd en vervolgens elke seconde in de functie startClock.
persoonlijke functie updateClock (): void / * AM PM, als uren groter zijn dan 11, dat is 12 en 12 is PM * / if (uren> 11) ampm.text = "PM"; ampmGlow.text = "PM"; else ampm.text = "AM"; ampmGlow.text = "AM"; / * Vermijdt 24-uursklok, als uren groter zijn dan 12 (zoals 13) aftrekkingen 12 (dus het is 1) * / if (uren> 12) uur- = 12; / * Als nummer slechts één cijfer is, voeg dan een 0 toe aan de linker * / if (String (minuten) .length<2) minutes="0"+minutes; if (String(seconds).length<2) seconds="0"+seconds; /* Set TextFields */ clock.text=hours+":"+minutes+":"+seconds; clockGlow.text=hours+":"+minutes+":"+seconds;
Dit is een functie om objecten onzichtbaar te maken, we gebruiken de ... rustparameter om een willekeurig aantal parameters door te geven.
private functie hideObjects (... targets) for (var i: int = 0; i < targets.length; i++) targets[i].visible=false;
Deze instructie Switch controleert de dagvariabele om de dag op te halen en weer zichtbaar te maken.
Accentsconagua
persoonlijke functie showCurrentDay (): void switch (day) case 0: sun.visible = true; sunGlow.visible = true; breken; geval 1: mon.visible = true; monGlow.visible = true; breken; geval 2: tue.visible = true; tueGlow.visible = true; breken; geval 3: wed.visible = true; wedGlow.visible = true; breken; case 4: thu.visible = true; thuGlow.visible = true; breken; case 5: fri.visible = true; friGlow.visible = true; breken; case 6: sat.visible = true; satGlow.visible = true; breken; standaard: trace ("Week day error"); Deze functie werkt het Date-object bij om de werkelijke datum te krijgen en roept de updateClock-functie op om de tekstvelden bij te werken.
persoonlijke functie startClock (e: TimerEvent): void date = new Date (); hours date.hours; min = date.minutes; sec = date.seconds; updateClock ();
Ga terug naar het .Fla-bestand en voeg in het eigenschappenvenster "Hoofd" toe aan het veld Klasse om dit de documentklasse te maken.
Zoals je ziet, is het vrij eenvoudig om deze digitale klok te maken en aan te passen. Experimenteer met de dataklasse, verander de interface en voeg misschien meer functionaliteit toe!
Bedankt voor het lezen.
