Статьи

Создайте привлекательные цифровые часы во Flash

Март 3, 2019

ActionScript 3.0 — очень мощный язык, способный создавать что угодно, от простых и легких утилит до полнофункциональных настольных приложений.

В этом выпуске мы собираемся создать что-то простое, простые и красивые цифровые часы во Flash.

Шаг 1: Краткий обзор

Используя объект Date и его свойства, мы получим день, часы, минуты и секунды и будем использовать TextFields на сцене для отображения полученных данных. Обновления будут обрабатываться таймером .

Шаг 2: Начало

Откройте Flash и создайте новый файл Flash (ActionScript 3).

флеш часы

Установите размер сцены 600×300 и добавьте радиальный фон от синего до черного (# 003030, # 000000).

"вспышка

Шаг 3: Светящийся текст

Мы собираемся добавить два динамических текстовых поля для каждого элемента, сначала мы поместим поля с жаром, чтобы получить эффект линий.

Выберите инструмент «Текст» и создайте текстовое поле размером 342×104 пикселей, используйте цвет # 00FAFF, щелкните параметр «Центр» на панели «Абзац» и выберите понравившийся шрифт. Я использовал DS-Digital курсив, 100pt.

Назовите его «clockGlow», добавьте несколько чисел, отцентрируйте его, чтобы использовать в качестве ориентира, и добавьте Glow Filter со следующими значениями:

флеш часы

У вас должно быть что-то вроде этого:

флеш часы

Повторите процесс с меньшим размером шрифта для дней и индикатора am / pm. Имена экземпляров — это название дня плюс слово «Glow», это будет «monGlow», «tueGlow» и т. Д. «AmpmGlow» для индикатора AM / PM.

флеш часы

Шаг 4: Экран линий

Мы нарисуем ряд линий, которые будут покрывать сцену, чтобы получить эффект ЖК-экрана.

Выберите инструмент «Прямоугольник» и создайте черную линию 600x1px, продублируйте ее (Cmd + D) и поместите ее ниже, оставляя пространство в 1px.

Повторяйте процесс, пока он не совпадет с высотой сцены. Вы закончите что-то вроде этого:

флеш часы

Преобразуйте экран линий в группу (Cmd + G) и отцентрируйте его на сцене.

флеш часы

Шаг 5: Четкий текст

Как вы можете видеть на последнем изображении, эффект линии распространяется по всему тексту. Мы хотим, чтобы он применялся только к свету, поэтому давайте добавим новый слой текста.

Поскольку этот текст точно такой же, который мы создали ранее (без фильтра свечения), мы можем просто скопировать текстовые поля и удалить фильтр свечения. Мы также удалим слово «Glow» из имен экземпляров.

Это завершит интерфейс.

флеш часы

Шаг 6: Время ActionScript

Создайте новый документ ActionScript и сохраните его как «Main.as».

флеш часы

Шаг 7: Обязательные классы

На этот раз нам понадобится всего несколько занятий.

1
2
3
4
5
package
{
    import flash.display.MovieClip;
    import flash.utils.Timer;
    import flash.events.TimerEvent;

Шаг 8: Расширение класса

Мы собираемся использовать специальные методы и свойства MovieClip, поэтому мы расширяем их с помощью класса MovieClip. Расширение с использованием класса Sprite не будет работать.

1
2
public class Main extends MovieClip
{

Шаг 9: переменные

Это переменные, которые мы будем использовать, объяснено в комментариях.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/* A Date object used to get the day, and time */
 
var date:Date = new Date();
 
var day:int = date.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);

Шаг 10: Основная функция

Эта функция выполняется, когда класс загружен.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
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();
}

Шаг 11: Функция часов

Это функция, которая обрабатывает часы. Он вызывается один раз в основной функции, затем каждую секунду в функции startClock.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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;
}

Шаг 12: Скрыть функцию

Эта функция делает объекты невидимыми, мы используем параметр … rest для передачи любого количества параметров.

1
2
3
4
5
6
7
private function hideObjects(…targets)
{
    for (var i:int = 0; i < targets.length; i++)
    {
        targets[i].visible=false;
    }
}

Шаг 13: Текущий день

Этот оператор Switch будет проверять переменную дня, чтобы получить день и показать его.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
private function showCurrentDay():void
{
    switch (day)
    {
        case 0 :
            sun.visible=true;
            sunGlow.visible=true;
            break;
        case 1 :
            mon.visible=true;
            monGlow.visible=true;
            break;
        case 2 :
            tue.visible=true;
            tueGlow.visible=true;
            break;
        case 3 :
            wed.visible=true;
            wedGlow.visible=true;
            break;
        case 4 :
            thu.visible=true;
            thuGlow.visible=true;
            break;
        case 5 :
            fri.visible=true;
            friGlow.visible=true;
            break;
        case 6 :
            sat.visible=true;
            satGlow.visible=true;
            break;
        default :
            trace(«Week day error»);
    }
}

Шаг 14: Функция запуска

Эта функция обновляет объект Date для получения фактической даты и вызывает функцию updateClock для обновления текстовых полей.

01
02
03
04
05
06
07
08
09
10
private function startClock(e:TimerEvent):void
{
    date = new Date();
 
    hours=date.hours;
    minutes=date.minutes;
    seconds=date.seconds;
             
    updateClock();
}

Шаг 15: Класс документа

Вернитесь к файлу .Fla и в панели свойств добавьте «Main» в поле Class, чтобы сделать этот класс документа.

флеш часы

Вывод

Как видите, эти цифровые часы довольно легко создавать и модифицировать. Поэкспериментируйте с классом дат, измените интерфейс и, возможно, добавьте больше функциональности!

Спасибо за прочтение.

51
Share: