Время и дата. Флеш-ролик.

 

В этом уроке рассматривается материал, по созданию своего флеш-ролика в Sothink SWF Quicker, для вывода аналоговых часов и даты на сайт.

Вообще-то в Инете можно найти много ресурсов, предлагающих скачать подобный ролик. Но иногда хочется что-то своё, да и навешанные на клип ссылки и не подходящий фон, или несуразный дизайн часов, так и подталкивает к созданию собственных часиков

Ниже я познакомлю вас с созданием собственных часов для сайта, да ещё и с выводом текущей даты. Попутно вы научитесь грабить, подходящие клипы. Уменьшая тем самым затраты собственного времени на создание необходимых изображений в графических редакторах.

Для урока понадобится файл в формате *.sgf, из которого экспортирован ролик встречающий вас на этой странице. Скачать файл.

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

Откройте его программой Sothink SWF Quicker, перед вами появится окно программы, с открытым в нём вышеописанным клипом.

Для продолжения урока откройте второе окно программы Sothink SWF Quicker, в нём мы будем создавать наши часы.(Будет открыто пустое окно программы)

В Панели Свойств (Внизу окна), на вкладке "Свойства", установите фон: #e28813;. Размеры: 400х470.

1. Перемещаемся в окно с клипом, заходим в Библиотеку, открываем папку "Графика".
2. Копируем, находящиеся в папке файлы.
3. Переходим в пустое окно программы.
4. Вставляем в Библиотеку, скопированные файлы

• Для копирования пакетом, при нажатой кнопке SHIFT, выделяем поочерёдно нужные файлы левой кнопкой мыши (Для данного случая, их должно быть 9). Щёлкаем правой кнопкой мыши по выделенному (синему) фону, в появившемся Контестном меню, выбираем строку "Копировать"
• Для вставки, щёлкаем правой кнопкой в Библиотеке. В появившемся Контестном меню, выбираем строку "Вставить"

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

Можно было скопировать сразу Символы клипов, для ускорения процесса создания, но в них может быть не нужная для нас информация. И того хуже! Вебмастер, создавший ролик, мог привязать к ним скрипты, препятствующие каким-либо изменениям в ролике и наши труды пойдут прахом.

Продолжаем урок.

Для скопированных изображений, создадим Символы клипов:

Вначале создадим Символ клипа Циферблата. Создаём новый символ (Вызвать функцию создания Нового Символа, можно многими способами. Я думаю вы с ними познакомитесь самостоятельно)

И так, щёлкаем правой кнопкой в Библиотеке по символу Графики "Обод". В появившемся меню выбираем строку "Новый Symbol".

Мы увидим диалоговое окно, для создания нового символа (справа)

Обзываем Символ ziferblat и отмечаем Тип Символа "Клип" (Как показано на рисунке.)

Жмём ОК.

На холсте будет предоставлена возможность редактирования Символа ziferblat.

Перемещаем из Библиотеки на холст символы Графики, зажав левую клавишу на нужном символе, поочеоёдно: Тень, Фон, Шкала, Циферблат, Обод.

Перетаскиваем в том порядке, который указан. На холсте появятся в хаотичном порядке изображения перенесённых объектов. Они все должны быть окружены пунктирными рамками, т.есть быть готовыми к редактированию. Если такого нет—щёлкните по холсту для активизации холста и выберите в верхнем меню программы "Правка"==>"Выбрать всё", при этом все объекты должны обрамиться пунктирными рамками.

После этого зайдите в Панель Трансформации на вкладку Расположение и отцентрируйте выбранные объекты, щёлкнув по, указанным на рисунке стрелками, кнопкам. Затем на вкладке Трансформация, введите указанные значения.
X равен 0
Y равен 0
Ширина равна 300
Высота равна 300

Справа приведён примерный образец того, что у вас должно получиться.

Создание Символов клипа, для скопированных файлов Символов графики.

—Щёлкаем, по названию Символа графики в Библиотеке "Час" правой кнопкой и выбираем строку Новый Symbol.

В предложенном диалоговом окне, заполняем. Название Символа—hour_k и отмечаем кружочек с названием—Клип. Нажимаем ОК.

Дважды щёлкаем левой кнопкой, появившийся в Библиотеке Символ клипа hour_k. Из Библиотеки перетаскиваем Символ графики Час на холст (После двойного клика по Символу графики, холст будет активизирован для редактирования Символа клипа hour_k).

В Панели трансформации, на вкладке Трансформация, устанавливаем местоположение изображения часовой стрелки:
X равен 0
Y равен 0
Ширина равна 25
Высота равна 66,1

Почему указываем данные размеры? Да потому, что в скачанном флеш-клипе, такие-же размеры. И если мы изменим какой-нибудь размер, в создаваемом клипе, то придётся менять/подгонять остальные размеры во всём клипе. Когда закончится данный урок, я надеюсь, вы будете в состоянии работать со значениями, не искажая дизайн ролика и изображений.

—Щёлкаем, по названию Символа графики в Библиотеке—Минута правой кнопкой и выбираем строку Новый Symbol.

В предложенном диалоговом окне, заполняем. Название Символа—min_k и отмечаем кружочек с названием—Клип. Нажимаем ОК.

Дважды щёлкаем левой кнопкой, появившийся в Библиотеке Символ клипа min_k . Из Библиотеки перетаскиваем Символ графики Минута на холст (После двойного клика по Символу графики, холст будет активизирован для редактирования Символа клипа min_k).

В Панели трансформации, на вкладке Трансформация, устанавливаем местоположение изображения минутной стрелки:
X равен 0
Y равен -50 ( с минусом)
Ширина равна 12
Высота равна 115

—Щёлкаем, по названию Символа графики в Библиотеке—Секунда правой кнопкой и выбираем строку Новый Symbol.

В предложенном диалоговом окне, заполняем. Название Символа—sec_k и отмечаем кружочек с названием—Клип. Нажимаем ОК.

Дважды щёлкаем левой кнопкой, появившийся в Библиотеке Символ клипа sec_k. Из Библиотеки перетаскиваем Символ графики Секунда на холст (После двойного клика по Символу графики, холст будет активизирован для редактирования Символа клипа sec_k).

В Панели трансформации, на вкладке Трансформация, устанавливаем местоположение изображения секундной стрелки:
X равен 0
Y равен -50 ( с минусом)
Ширина равна 8
Высота равна 150

Следующим этапом будет: Собрать стрелки в один Символ клипа.

Создаём новый Символ, нажимаем и держим нажатой кнопку Ctrl, жмём кнопку F8 (ещё один способ создания нового символа).

В диалоговом окне создания Символа пишем arms_k и выбираем Клип, жмём ОК.

Дважды щёлкаем по появившемуся в Библиотеке названию arms_k. На холсте—готовый к редактированию Символ клипа arms_k.

Перетаскиваем из Библиотеки Символ hour_k. В Панели трансформации, на вкладке Трансформация, устанавливаем:
X равен 0
Y равен 0
Ширина равна 25
Высота равна 66,1

В окне программы, наверху в Панели слоев щёлкаем по плюсику, для создания нового слоя. В него перетаскиваем из Библиотеки Символ min_k. В Панели трансформации, на вкладке Трансформация, устанавливаем:
X равен 0
Y равен 0
Ширина равна 12
Высота равна 115

Снова щёлкаем по плюсу, создавая новый, третий слой и в него перетаскиваем из Библиотеки Символ sec_k. В Панели трансформации, на вкладке Трансформация, устанавливаем:
X равен 0
Y равен 0
Ширина равна 8
Высота равна 150

Предыдущими действиями мы подготовили основные элементы, создаваемого клипа. Далее приступаем к созданию флеш-часов.

Дважды щёлкаем по холсту или щёлкаем по названию "Сцена" наверху окна. Перед вами должен быть открыт пустой холст.

Перетаскиваем на холст из Библиотеки Символ клипа ziferblat. В Панели трансформации, на вкладке Трансформация, устанавливаем:
X равен 200
Y равен 290
Ширина равна 300
Высота равна 300

Создаём новый слой, щёлкнув по плюсу. В него перетаскиваем Символ клипа arms_k. В Панели трансформации, на вкладке Трансформация, устанавливаем:
X равен 200,5
Y равен 290,5
Ширина равна 25
Высота равна 150

Создаём новый слой и переименовываем его в "Слой действия". Для переименования дважды кликните в Панели слоёв по вновь, созданному слою.

Выбираем Слой действия, внизу, в Панели Свойств выбираем вкладку "Действие" и вставляем код, который копируем отсюда.

Выбираем Слой №2, щёлкаем в нём по Символу arms_k, то есть по стрелкам и в Панели Свойств, на вкладке Свойства присваиваем Символу имя arms. Затем на вкладке "Действия" вставляем код, который берём здесь.

В Библиотеке, кликаем правой кнопкой по Символу клипа hour_k и в контестном меню выбираем строку "Найти первый образец". В Панели Свойств на вкладке "Свойства" даём имя hour.

В Библиотеке, кликаем правой кнопкой по Символу клипа min_k и в контестном меню выбираем строку "Найти первый образец". В Панели Свойств на вкладке "Свойства" даём имя min.

В Библиотеке, кликаем правой кнопкой по Символу клипа sec_k и в контестном меню выбираем строку "Найти первый образец". В Панели Свойств на вкладке "Свойства" даём имя sec.

Заходим в меню "Файл" программы, выбираем "Предосмотр". Если всё сделано правильно, вы должны увидеть окно с действующими часами. Если вы их не видите—где-то совершили ошибку. Пройдитесь по Библиотеке, проверяя на холсте введённые скрипты и значения.

А нам осталось ввести в ролик вывод даты и приветствия.

Для этого возвращаемся в окно программы с, скачанным с этого сайта, файлом. Копируем текстовый Символ txt. Вставляем его в окно с создаваемым нами роликом. Причём вставляем три копии. Первая у нас так и останется с именем txt, второй переименуем в day и третью в month.

Выбираем "Сцена", для перехода на основной холст. Выделяем в Панели слоёв первый слой, кликаем по плюсу, создавая новый слой.

Перемещаем на этот слой Текстовый Символ txt и вставляем значения в панели трансформации:
X равен 0
Y равен 20
Ширина равна 400
Высота равна 66,4

Перемещаем на этот слой Текстовый Символ day и вставляем значения в панели трансформации:
X равен 0
Y равен 20
Ширина равна 400
Высота равна 77,5

Перемещаем на этот слой Текстовый Символ month и вставляем значения в панели трансформации:
X равен 0
Y равен 85
Ширина равна 400
Высота равна 69,2

Производя эти действия, вы можете в Панели Свойств на вкладке "Свойства" менять шриф, размещение и пр. настройки текста. Но пока этого не делайте. Удостовертесь, что флеш-плеер выводит нормальную картинку, для этого воспользуйтесь "Предосмотром" или откройте в браузере.

Если всё сделано правильно приступайте к "Публикации", к сохранению созданного вами файла в нужном формате.

Ох, боюсь, не многие добрались до конца урока.

Ну а терпеливые и усердные смогут разместить на сайте часы, удовлетворяющие их желания.

Выводимый текст можно изменить в скрипте, расположенном в "Слое действий". Если внимательней рассмотрите скрипт, то поймёте, где и как это сделать.

Удачи вам и до скорого.

После комментария пользователя Елена считаю необходимым добавить следующее:

Файл shablon.sqf, используемый в этом уроке, подготовлен мной, для сокращения времени урока и облегчения понимания данной темы.

Пользователю, работающему с программой Sothink SWF Quicker, надо знать, что программа создаёт и сохраняет флеш-ролик в формате * .sqf, для последующего редактирования. Но этот формат не понимает флеш-проигрыватель, поэтому при публикации, созданный файл, сохраняется в формате *.swf, который труден для редактирования, а порой невозможен.

Можно воспользоваться программой SWFDecompiler, для конвертации swf-файла во fla-файл, однако fla-файл не понимает Sothink SWF Quicker. Fla- файл редактировать надо будет с помощью программы Macromedia Flash.

Но те приёмы копирования символов и последующей вставки их в создаваемый вами файл, действуют и для swf-файлов. Надо только сразу открывать два окна программы: в одном окне тот файл, который грабим, в другом окне, создаваемый файл. Два окна открываются для того, чтобы использовать собственный буфер обмена программы. Одно замечание по этому способу: трудно искать нужный символ, но при определённых знаниях- возможно.

http://xn--e1aaitbfdoe.net/rabotaflash/sothink-swf-quicker/7-sothink-swf-quicker/55-clock.html

Серия сообщений "Sothink SWF Quicker":

Часть 1 - Использование масок во flash
Часть 2 - Делаем элементарные часики.Начинаем учиться созданию flash.
...
Часть 22 - Создание анимированного фона
Часть 23 - Вертикальная 3D карусель
Часть 24 - Время и дата. Флеш-ролик.
Часть 25 - флеш-баннер
Часть 26 - Урок во флеш. Делаем анимированный флеш-плеер. Этап второй.
...
Часть 41 - Sothink SWF Quicker 5.0 Build 501 + Rus - Универсальная флеш программа + Урок.
Часть 42 - Урок. Снимаем логотип с плеера в программе Sothink SWF Quicker.
Часть 43 - Урок вращение в Sothink SWF Quicker от MissKcu