Работа с шаблонами в Adobe Flash. Обратный отсчет даты.
06-06-2013 01:06
к комментариям - к полной версии
- понравилось!
Хотя программа Adobe Flash и является профессиональным инструментом веб программистов и дизайнеров, но содержащиеся в ней готовые шаблоны и проекты позволяют многим пользователям сети, с минимальными познаниями флеш приложений, создавать интерактивный контент для своих веб страничек. Таким очень полезным шаблоном является проект - шаблон "Обратный отсчет даты".
Рассмотрим подробно работу с этим шаблоном
Работаем в Adobe Flash CS6. Прочитать о программе и скачать ее можно здесь Adobe Flash CS6 Portable.
До начала работы с шаблоном я предлагаю вам создать рабочую папку проекта, можно прямо на рабочем столе. Назовите ее, например "Шаблон таймера". В эту папку, в процессе работы с шаблоном, периодически сохраняйте проект в формате *.fla, родном формате Adobe Flash(Файл - Сохранить как). Это очень удобно, потому что всегда можно вернутся к доработке проекта. Кроме того созданный в Adobe Flash и скомпилированный в swf - файл нельзя будет открыть в этой программе для редактирования.
Вот теперь, используя шаблон "Обратный отсчет даты", создадим таймер обратного отсчета до 4 часов утра 22 июня 2013 года.
Открываем программу и в списке проектов в разделе "Создать по шаблону" выбираем пункт "Образцы файлов".
[700x]
В открывшемся диалоговом окне выбираем шаблон "Обратный отсчет даты".
[700x]
На рабочем столе, после открытия проекта, вы увидите фон с двумя текстовыми полями - "Текст даты" и "Текст отсчета"
На временной шкале вы увидите 3 слоя
1. Фон 2. Текстовые поля 3. Действия.
[700x]
Для начала рассмотрим код, который обеспечивает работу этого шаблона и отредактируем его в соответствии с необходимой нам датой, до которой будет производиться отсчет.
Для этого, выделяем на временной шкале третий слой "Действия" и откроем одноименное окно (вкладку) программы - "Действия" (F9)
[700x]
В открывшемся окне "Действия" видим код для флеш ролика "Обратный отсчет даты".
Код частично скрыт.
Самое простое решение - это просто указать в первых трех строчках кода необходимые параметры - год, месяц и число до которого будет производиться отсчет. (где какой параметр располагать и в каком формате видно из комментариев кода)
Мы же в нашем примере будем указывать еще один дополнительный параметр - час наступления события, а также поменяем английские названия параметров времени на русские.
Для того, чтобы получить доступ ко всему коду необходимо дважды щелкнуть по контейнеру "var star..."
После этого действия код откроется полностью и можно будет ввести все необходимые изменения.
Особое внимание обратите на строку 9 кода. По умолчанию эта строчка выглядит следующим образом:
*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 0, 0, 0, 0);
Здесь - 0, 0, 0, 0 - это параметры времени час, минуты, секунды, миллисекунды.
[700x]
Например, если вы захотите ввести значение до 5 часов утра 59 мин. 59 сек., то это будет выглядеть:
*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 5, 59, 59, 0);
[700x]
В нашем же случае мы указываем до 4 часов утра и это будет выглядеть следующим образом:
*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 4, 0, 0, 0);
[800x186]
Следующим шагом редактируем строку 21
По умолчанию она выглядит так:
*countdown_txt.text = Math.floor(dayTill)+"days "+Math.floor(hoursTill)+"hrs "+Math.floor(minTill)+"min "+Math.floor(secTill)+"sec";
[700x]
Заменяем название параметров времени. Английские названия меняем на русские.
Теперь строка 21 выглядит так:
*countdown_txt.text = Math.floor(dayTill)+"дней "+Math.floor(hoursTill)+"час "+Math.floor(minTill)+"мин "+Math.floor(secTill)+"сек";
[700x]
Полный отредактированный код будет таким:
[700x]
Или можете открыть текстовый файл кода
Вложение: 22_iyunya.txt
Все. Код отредактирован и мы переходим на вкладку "Временная шкала". На Временной шкале выделяем Слой 2 - "Текстовые поля", а на панели инструментов выбираем инструмент "Текст".
[700x]
Работаем с первым текстовым полем. Здесь будет отображаться информация о дате, до которой будет вестись отсчет. Саму дату вводить не надо. Она имеется в коде и будет выводится автоматически при запуске флеш ролика. Инструментом текст выделите в первом текстовом поле надпись"Текст даты".
после этого обратимся к панели "Свойства".
В этой панели в разделе "Символ" вы сможете, при необходимости, поменять шрифт текста и его размер. Но самое главное!!! - вы должны обязательно внедрить шрифт в ролик. Без внедрения шрифта этот шаблон работать не будет.
[700x]
Теперь кратко о настройки параметров внедрения шрифтов.
На панели "Свойства" нажимаем кнопочку "Внедрить" (Embed):
[313x391]
В появившемся окне, на вкладке параметры, выбираем диапазон символов, который нам нужен.
Встает вопрос - "А какой нужен?". Здесь есть два варианта:
1 Внедрить все элементы(глифы) выбранного шрифта.
[700x]
2 Внедрить только те элементы шрифта, которые используются в проекте.
У нас в данном примере используются цифры от 0 до 9, используется пунктуация и в названии параметров времени используется кириллица (дней, час... и т.д.).
Соответственно, ставим галочки в чекбоксах только для данных элементов.
[700x411]
Нажимаем "ОК" и наш шрифт появится в библиотеке. Теперь, кстати, с текстом можно производить любую трансформацию (наклон, поворот, масштаб и т.д.).
Переходим ко второму текстовому полю - "Текст отсчета". Если будете использовать тот же шрифт, то все можно оставить как есть и ничего с этим текстовым полем не делать. Если будете в этом поле использовать другой шрифт, то его также надо будет внедрить(!!!).
После того как полностью отредактирован код и выбраны и внедрены шрифты можно произвести тестирование ролика. Нажимаем Ctrl+Enter и смотрим как работает наш шаблон.
[340x302]
Если все работает нормально, поработаем еще над нашим шаблоном и придадим ему более информативный и законченный вид.(хотя если вас устраивает такой вариант таймера можете на этом этапе
сохранить флеш ролик - Файл - Экспорт - Экспортировать ролик.
Также советую в созданную папку для проекта периодически сохранять файл проекта в формате *.fla. Файл - Сохранить как.
Продолжаем работать над завершением проекта.
Добавим еще один текстовый слой и введем на нем текст "До 4 часов утра" Для этого выше второго слоя "Текстовые поля" создаем новый слой и называем его "Дополнительный текст"
Создаем новый слой
[700x]
Добавляем дополнительный текст и внедряем его.
[700x]
Также выше слоя "Фон" можно создать несколько дополнительных слоев и разместить на них клипарт соответствующей тематики.
К текстам можно применить фильтры из арсенала программы - фаска, тень, свечение и т. д.
[700x]
По окончанию всех действий над проектом протестировать его и если все устраивает сохранить как проект и как флеш файл.
вверх^
к полной версии
понравилось!
в evernote
Рассмотрим подробно работу с этим шаблоном
Работаем в Adobe Flash CS6. Прочитать о программе и скачать ее можно здесь Adobe Flash CS6 Portable.
До начала работы с шаблоном я предлагаю вам создать рабочую папку проекта, можно прямо на рабочем столе. Назовите ее, например "Шаблон таймера". В эту папку, в процессе работы с шаблоном, периодически сохраняйте проект в формате *.fla, родном формате Adobe Flash(Файл - Сохранить как). Это очень удобно, потому что всегда можно вернутся к доработке проекта. Кроме того созданный в Adobe Flash и скомпилированный в swf - файл нельзя будет открыть в этой программе для редактирования.
Вот теперь, используя шаблон "Обратный отсчет даты", создадим таймер обратного отсчета до 4 часов утра 22 июня 2013 года.
Открываем программу и в списке проектов в разделе "Создать по шаблону" выбираем пункт "Образцы файлов".
[700x]В открывшемся диалоговом окне выбираем шаблон "Обратный отсчет даты".
[700x]На рабочем столе, после открытия проекта, вы увидите фон с двумя текстовыми полями - "Текст даты" и "Текст отсчета"
На временной шкале вы увидите 3 слоя
1. Фон 2. Текстовые поля 3. Действия.
[700x]Для начала рассмотрим код, который обеспечивает работу этого шаблона и отредактируем его в соответствии с необходимой нам датой, до которой будет производиться отсчет.
Для этого, выделяем на временной шкале третий слой "Действия" и откроем одноименное окно (вкладку) программы - "Действия" (F9)
[700x]В открывшемся окне "Действия" видим код для флеш ролика "Обратный отсчет даты".
Код частично скрыт.
Самое простое решение - это просто указать в первых трех строчках кода необходимые параметры - год, месяц и число до которого будет производиться отсчет. (где какой параметр располагать и в каком формате видно из комментариев кода)
Мы же в нашем примере будем указывать еще один дополнительный параметр - час наступления события, а также поменяем английские названия параметров времени на русские.
Для того, чтобы получить доступ ко всему коду необходимо дважды щелкнуть по контейнеру "var star..."
После этого действия код откроется полностью и можно будет ввести все необходимые изменения.
Особое внимание обратите на строку 9 кода. По умолчанию эта строчка выглядит следующим образом:
*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 0, 0, 0, 0);
Здесь - 0, 0, 0, 0 - это параметры времени час, минуты, секунды, миллисекунды.
[700x]Например, если вы захотите ввести значение до 5 часов утра 59 мин. 59 сек., то это будет выглядеть:
*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 5, 59, 59, 0);
[700x]В нашем же случае мы указываем до 4 часов утра и это будет выглядеть следующим образом:
*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 4, 0, 0, 0);
[800x186]Следующим шагом редактируем строку 21
По умолчанию она выглядит так:
*countdown_txt.text = Math.floor(dayTill)+"days "+Math.floor(hoursTill)+"hrs "+Math.floor(minTill)+"min "+Math.floor(secTill)+"sec";
[700x]Заменяем название параметров времени. Английские названия меняем на русские.
Теперь строка 21 выглядит так:
*countdown_txt.text = Math.floor(dayTill)+"дней "+Math.floor(hoursTill)+"час "+Math.floor(minTill)+"мин "+Math.floor(secTill)+"сек";
[700x]Полный отредактированный код будет таким:
[700x]Или можете открыть текстовый файл кода
Вложение: 22_iyunya.txt
Все. Код отредактирован и мы переходим на вкладку "Временная шкала". На Временной шкале выделяем Слой 2 - "Текстовые поля", а на панели инструментов выбираем инструмент "Текст".
[700x]Работаем с первым текстовым полем. Здесь будет отображаться информация о дате, до которой будет вестись отсчет. Саму дату вводить не надо. Она имеется в коде и будет выводится автоматически при запуске флеш ролика. Инструментом текст выделите в первом текстовом поле надпись"Текст даты".
после этого обратимся к панели "Свойства".
В этой панели в разделе "Символ" вы сможете, при необходимости, поменять шрифт текста и его размер. Но самое главное!!! - вы должны обязательно внедрить шрифт в ролик. Без внедрения шрифта этот шаблон работать не будет.
[700x]Теперь кратко о настройки параметров внедрения шрифтов.
На панели "Свойства" нажимаем кнопочку "Внедрить" (Embed):
[313x391]В появившемся окне, на вкладке параметры, выбираем диапазон символов, который нам нужен.
Встает вопрос - "А какой нужен?". Здесь есть два варианта:
1 Внедрить все элементы(глифы) выбранного шрифта.
[700x]2 Внедрить только те элементы шрифта, которые используются в проекте.
У нас в данном примере используются цифры от 0 до 9, используется пунктуация и в названии параметров времени используется кириллица (дней, час... и т.д.).
Соответственно, ставим галочки в чекбоксах только для данных элементов.
[700x411]Нажимаем "ОК" и наш шрифт появится в библиотеке. Теперь, кстати, с текстом можно производить любую трансформацию (наклон, поворот, масштаб и т.д.).
Переходим ко второму текстовому полю - "Текст отсчета". Если будете использовать тот же шрифт, то все можно оставить как есть и ничего с этим текстовым полем не делать. Если будете в этом поле использовать другой шрифт, то его также надо будет внедрить(!!!).
После того как полностью отредактирован код и выбраны и внедрены шрифты можно произвести тестирование ролика. Нажимаем Ctrl+Enter и смотрим как работает наш шаблон.
[340x302]Если все работает нормально, поработаем еще над нашим шаблоном и придадим ему более информативный и законченный вид.(хотя если вас устраивает такой вариант таймера можете на этом этапе
сохранить флеш ролик - Файл - Экспорт - Экспортировать ролик.
Также советую в созданную папку для проекта периодически сохранять файл проекта в формате *.fla. Файл - Сохранить как.
Продолжаем работать над завершением проекта.
Добавим еще один текстовый слой и введем на нем текст "До 4 часов утра" Для этого выше второго слоя "Текстовые поля" создаем новый слой и называем его "Дополнительный текст"
Создаем новый слой
[700x]Добавляем дополнительный текст и внедряем его.
[700x]Также выше слоя "Фон" можно создать несколько дополнительных слоев и разместить на них клипарт соответствующей тематики.
К текстам можно применить фильтры из арсенала программы - фаска, тень, свечение и т. д.
[700x]По окончанию всех действий над проектом протестировать его и если все устраивает сохранить как проект и как флеш файл.
Комментарии (18):
Franzuzhenka
06-06-2013-10:02
удалить
Dobroe utro solnishko! Spasibo bolshoe sa urok! Utashila, budem rasbiratsja!!!
Мариночка,приветик.
Спасибо ,что выкроила время для этого урока.
Бегу цитировать))
И буду разбираться)))
Это клад для меня,ты знаешь.
Еще раз огромное СПАСИБО!!!
Спасибо ,что выкроила время для этого урока.
Бегу цитировать))
И буду разбираться)))
Это клад для меня,ты знаешь.
Еще раз огромное СПАСИБО!!!
Лида_Юринец
06-06-2013-10:37
удалить
Спасибо за урок!!!Никак руки не доходят взяться попробовать что то сделать....
Мариночка,еще раз спасибо.
Получилось,поменяла только фон..больше ничего не добавляла.
Для меня главное было внедрить шрифты.
При внедрении мне пришлось ставить галочку"все"
Иначе дата вся сливалась в одну строчку(не было косых линий-разделителей)
вот так с галочкой "цифры[0-9]..."
здесь поставила галочку на"все"
Получилось,поменяла только фон..больше ничего не добавляла.
Для меня главное было внедрить шрифты.
При внедрении мне пришлось ставить галочку"все"
Иначе дата вся сливалась в одну строчку(не было косых линий-разделителей)
вот так с галочкой "цифры[0-9]..."
здесь поставила галочку на"все"
Irina-snez
10-06-2013-12:31
удалить
Спасибо, Мариночка! Очень искала, как сделать информер!
Та_ещё_штучка_Я
10-06-2013-19:46
удалить
Спасибо за урок, Мариш!
нынче обленилась, но когда-нить непременно очень полюбопытствую.
нынче обленилась, но когда-нить непременно очень полюбопытствую.
Лариса_Гурьянова
26-07-2013-15:36
удалить
Вот, спасибо, хорошо, положите на камод..))
Спасибо, Мариночка, за шикарный урок!!!!
Пошла пробывать. Программу скачала, на первый взгляд сложно...))
Ну, ничего...попробую разобраться. Хорошо, что на русском!
Спасибо, Мариночка, за шикарный урок!!!!
Пошла пробывать. Программу скачала, на первый взгляд сложно...))
Ну, ничего...попробую разобраться. Хорошо, что на русском!
koreckolga
26-07-2013-23:23
удалить
Мариночка, искренне благодарю!!!
Татьяна_Волкова_Литвинова
01-02-2014-12:40
удалить
Марина, спасибо за урок. Программа у меня стоит. Но работать в ней не умею, только изучаю. Читаю чужие уроки, пытаюсь разобраться. Спасибо их создателям.
novprospekt
02-02-2014-08:32
удалить
Ответ на комментарий Татьяна_Волкова_Литвинова #
Танюш, вот здесь уроки обучающего ресурса
TeachVideo
Это самые азы, то что нужно обязательно знать.(там для Flash CS4, но для шестого все практически идентично). Уроки очень профессиональные и понятные. Обязательно поработай с ними. Многое сразу станет понятным.
TeachVideo
Это самые азы, то что нужно обязательно знать.(там для Flash CS4, но для шестого все практически идентично). Уроки очень профессиональные и понятные. Обязательно поработай с ними. Многое сразу станет понятным.
Татьяна_Волкова_Литвинова
02-02-2014-13:34
удалить
Ответ на комментарий novprospekt #
Марина, спасибо! Просматриваю. Нашла в интернете еще уроки изучаю.
La-Perla_Margarita
06-02-2014-21:16
удалить
Оленька_555
20-05-2014-21:26
удалить
Спасибо за уроки.Очень хочется научится!
Комментарии (18):
вверх^
Вы сейчас не можете прокомментировать это сообщение.
Дневник Работа с шаблонами в Adobe Flash. Обратный отсчет даты. | novprospekt - Дневник novprospekt |
Лента друзей novprospekt
/ Полная версия
Добавить в друзья
Страницы:
раньше»