Step 1: Brief Overview
Using the Date object and its properties, we'll get the day, hours, minutes and seconds and use TextFields on stage to display the obtained data. The updates will be handled by a Timer.
Step 2: Starting
Open Flash and create a new Flash File (ActionScript 3).
Set the stage size to 600x300 and add a blue to black radial background (#003030, #000000).
Step 3: Glowing Text
We're going to add two Dynamic Textfields for every element, we'll place the ones with the glow first to get the lines effect.
Select the Text Tool and create a 342x104px textfield, use the color #00FAFF, click the Center option in the Paragraph panel and choose a font you like. I used DS-Digital italic, 100pt.
Name it "clockGlow", add some numbers, center it to use it as a guide and add a Glow Filter with the following values:
You should have something like this:
Repeat the process with a smaller font size for the days and the am/pm indicator. The instance names are the name of the day plus the "Glow" word, this will be "monGlow", "tueGlow" and so on, "ampmGlow" for the AM/PM indicator.
Step 4: Lines Screen
We'll draw a series of lines that will cover the stage to get the LCD screen effect.
Select the Rectangle Tool and create a 600x1px black line, duplicate it (Cmd+D) and place it below leaving a 1px space.
Repeat the process until it matches the stage height. You will end with something like this:
Convert the lines screen to a group (Cmd+G) and center it in the stage.
Step 5: Sharp Text
As you can see in the last image, the line effect is all over the text. We only want it to apply to the glow, so let's add a new layer of text.
As this text is exactly the same we created before (without the Glow Filter) we can just copy the textfields and remove the Glow Filter. We'll also remove the "Glow" word from the instance names.
This will complete the interface.
Step 6: ActionScript Time
Create a new ActionScript Document and save it as "Main.as".
Step 7: Required Classes
This time we'll need just a few classes.
- package
- {
- import flash.display.MovieClip;
- import flash.utils.Timer;
- import flash.events.TimerEvent;
Step 8: Extending the Class
We're going to use MovieClip specific methods and properties so we extend using the MovieClip Class. Extending using the Sprite Class won't work.
- public class Main extends MovieClip
- {
Step 9: Variables
These are the variables we will use, explained in the comments.
- /* A Date object used to get the day, and time */
- var date:Date = new Date();
- var day:int = date.day; //The day
- /* The time */
- var hours:int = date.hours;
- var minutes:* = date.minutes;
- var seconds:* = date.seconds;
- /* A Timer object that will handle the updates, executed every second */
- var timer:Timer = new Timer(1000);
Step 10: Main Function
This function is executed when the class is loaded.
- public function Main():void
- {
- /* Prevents lag, since the timer is not executed until 1 second after starting the movie */
- updateClock();
-
- /* Hides all days text, these functions are explained later */
- hideObjects(mon, monGlow, tue, tueGlow, wed, wedGlow, thu, thuGlow, fri, friGlow, sat, satGlow, sun, sunGlow);
-
- /* Unhides the current day */
-
- showCurrentDay();
-
- /* Starts the timer */
- timer.addEventListener(TimerEvent.TIMER, startClock);
- timer.start();
- }
Step 11: Clock Function
This is the function that handles the Clock. It is called once in the main function, then every second in the startClock function.
- private function updateClock():void
- {
- /* AM PM, if hours is greater than 11, that is 12 and 12 is PM */
- if (hours>11)
- {
- ampm.text="PM";
- ampmGlow.text="PM";
- }
- else
- {
- ampm.text="AM";
- ampmGlow.text="AM";
- }
- /* Avoids 24 hour clock, if hours is greater than 12 (like 13) substracts 12 (so it is 1) */
- if (hours>12)
- {
- hours-=12;
- }
- /* If number is just one digit, add a 0 to the left */
- if (String(minutes).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;
- }
0 nhận xét:
Post a Comment