Share
In deze zelfstudie laat ik je zien hoe je een stijlvolle analoge klok maakt met ActionScript 3.0. We gebruiken de resulterende swf-film met Screentime voor Flash om een volledig functionele screensaver te maken. Tijd voor wat plezier ...
Als we het object Date en de eigenschappen ervan gebruiken, krijgen we de dag, het uur, de minuten en de seconden en gebruiken we eenvoudig Math om de verkregen gegevens in een analoge klok weer te geven. De updates worden afgehandeld door een timer.
U kunt ook een digitale klok aan de screensaver toevoegen door deze FlashTuts + zelfstudie te volgen.
Open Flash en maak een nieuw Flash-bestand (ActionScript 3).
Stel de stage in op 640x400 en voeg een grijze lineaire achtergrond toe (#DBDBDD, # B3B2B7). Screentime zal de film automatisch opschalen naar volledig scherm, zodat we niet het stadium in de volledige resolutie hoeven in te stellen.
We beginnen met het maken van de klokachtergrond.
Selecteer het ovalen gereedschap (O) en teken een cirkel van 250x250 px en voeg een zwarte lineaire achtergrond toe (# 313131, # 000000). Gebruik het gereedschap Gradiënttransformatie (F) om het verloop te roteren om er als volgt uit te zien:
Maak een nieuwe cirkel, dit keer 248x248, met deze lineaire verloop (# 595959, # 000000). Gebruik opnieuw het gereedschap Gradiënttransformatie om het verloop te roteren en aan te passen.
Laten we nu nummers aan onze klok toevoegen.
Selecteer het tekstgereedschap (T), kies een lettertype naar keuze en een passend formaat voor de klok. Ik heb Myriad Pro Regular, 22 Pt, #DDDDDD gebruikt.
Schrijf de getallen in een TextField voor elk en lijn ze uit met de klok, dit kan een beetje moeilijk zijn zonder een referentie, kijk in de handleidingen in de afbeeldingen.
Horizontaal:
Verticaal:
Tijd om de wijzerplaten te maken.
Selecteer het Poly Star-hulpmiddel (klik op de knop Rechthoekgereedschap en houd vast) en klik vervolgens in het venster Eigenschappen op de knop Opties in het gedeelte Tool-instellingen. Verander het aantal zijden naar 3.
Maak een witte driehoek van 20x70 px, converteer deze naar een MovieClip en noem deze "hourHand".
Herhaal dit proces voor de minutenwijzer, maar verander de hoogte naar 110 px. Vergeet niet de instantienaam in te stellen op "minuteHand".
Selecteer het gereedschap Ovaal en maak een cirkel van 26x26 px, converteer deze naar een MovieClip en pas als volgt een filter toe:
Combineer voor de tweede hand een 8x8 px-cirkel en een rechthoek van 2x116 px. Vul ze met deze kleur # C90303.
Maak een nieuw ActionScript-document en sla het op als "Analog Clock.as".
Dit zijn de lessen die we nodig hebben:
pakket import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent;
We gaan Sprite-specifieke methoden en eigenschappen gebruiken, dus we breiden het gebruik van de Sprite-klasse uit.
public class AnalogClock breidt Sprite uit
Dit zijn de variabelen die we zullen gebruiken, uitgelegd in de opmerkingen.
/ * Een Date-object dat wordt gebruikt om de tijd * / var date te krijgen: Date = new Date (); / * Tijdvariabelen * / 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.
openbare functie AnalogClock (): void / * Deze code stelt de wijzers in de juiste positie in met behulp van de Date-objectgegevens * / hourHand.rotation = uren * 30 + (minuten * 0,5); // De uurwijzer draait 30 graden in 60 minuten, dat is 0,5 graden per minuut minuteHand.rotation = minutes * 6; // The Minute draait 6 graden per minuut, dat is 360 graden in 60 minuten - een uur secondHand.rotation = seconds * 6; // The Second Hand rotates 6 graden per seconde, dat is 360 graden in 60 seconden - een minuut timer.addEventListener (TimerEvent.TIMER, updateClock); timer.start ();
Dit is de functie die de klok behandelt. Het is dezelfde code van de eerste functies, zojuist elke seconde uitgevoerd door de timer.
persoonlijke functie updateClock (e: TimerEvent): void date = new Date (); uren = datum. uren; minuten = datum.minuten; seconden = datum.seconden; hourHand.rotation = uren * 30 + (minuten * 0,5); minuteHand.rotation = minuten * 6; secondHand.rotation = seconds * 6;
Ga terug naar het .fla-bestand en voeg in het eigenschappenvenster "AnalogClock" toe in het veld Klasse om dit de documentklasse te maken.
Screentime voor Flash is een hulpmiddel voor het maken van screensaver, het is snel en gemakkelijk te gebruiken. U kunt een proefversie van de website downloaden. De demo's zijn volledig functioneel, behalve dat de schermbeveiligingen die ze bouwen één week na het maken vervallen zijn. In deze tutorial gebruik ik de Mac-versie zodat de Screensaver alleen mac-is.
Open Screentime en selecteer op het tabblad Inhoud uw bestand door op de knop "..." te klikken en naar de swf te bladeren. Voer een naam in voor uw screensaver.
Laat de tabbladen Eigenschappen en Installatieprogramma standaard staan en kies in het tabblad Publiceren het installatieprogramma, kies de gewenste opties en klik op Build.
Wanneer de build is voltooid, opent u de installatieprogramma-app en klikt u op Installeren. Nu kunt u uw flitsende screensaver kiezen uit Systeemvoorkeuren.
U leert gewoon hoe eenvoudig het is om Flash-films of -toepassingen naar screensavers te converteren, de Screentime-toepassing te verkennen en uw eigen te maken!
Bedankt voor het lezen :)
Accentsconagua