Создаем таймер обратного отсчета в программе Sothink SWF Quicker


Если кто ещё не имеет у себя программку то можно
СКАЧАТЬ ПРОГРАММУ ТУТ.
Приступим к уроку..Сам урок я подсмотрела ТУТ..у "novprospekt",он для английской версии программы.
А я расписываю для русской версии программы и конечно вношу какие-то свои добавки и более подробные пояснения со своими скринами,расписывая свою практику и результат
Открываем программу..
Динамический (или изменяемый текст) Dynamic Text - это такое текстовое поле, содержимое которого изменяется в процессе воспроизведения флешролика с помощью сценария.
Таймер обратного отсчета, который мы будем создавать покажет нам сколько дней, часов, минут и секунд осталось до наступления того или иного события.
Например, до дня рождения близкого человека или до наступления любимого праздника.
После того как отсчет будет завершен, будет выведена фраза, которую вы введете в динамическое текстовое поле и в текст самого скрипта.
Например, «С Днем Рождения» или «С Праздником!»
В данном уроке мы поздравим мужчин с Праздником 23 февраля!
1.
Откройте программу Sothink SWF Quicker и создайте новый документ..(нажав на соответствующий знак сразу в открывшейся программе..(если у Вас другая версия программы)..В данном уроке программа сразу открывается с готовым пустым документом на рабочем столе
2.
Настройте рабочую область программы.
Рабочее пространство можно редактировать в палитре Properties (Параметров) или еще, очень часто, в терминологии флеш, эту палитру называют "Инспектор свойств"
Отображается она (палитра) по умолчанию внизу окна программы. Давайте дальше для удобства будем называть эту палитру – палитрой Properties (Параметров).
Я даю скрин расположения основных палитр программы, которые мы будем использовать.

2-а
Если какие-то из них будут отсутствовать в окне вашей программы, их можно восстановить, пройдя в панель Меню, затем вкладка Window( ОКНО ) и проставить галочку у необходимых для работы палитр.

3.
Возвратимся к настройке рабочего пространства.
Впервую очередь, в настройку входит задание размеров рабочей области документа (сцены).
Для создания моей работы я поставила размеры
ШИРИНА-500
Высота-380....
При публикации в дальнейшем это и будут параметры размеров ролика

4.
Прежде чем открыть фоновое изображение на которое будем делать таймер отсчёта времени нужно это изображение уменьшить или увеличить в фотошопе до пропорциональных размеров в соответствии с заданными параметрами размеров рабочей области,которые мы прописали в программе..или наоборот..можно параметры будущего ролика прописать в соответствии с размерами фонового изображения
В общем я открываю фоновое изображение и оно по размерам соответствует рабочей области
ширина-500
высота-380
Что-бы его загрузить-открыть в программе нужно нажать на первый слой на временной шкале,слой будет активного синего цвета

5.
Далее..Верхнее меню программы ФАЙЛ-ИМПОРТ
Находите своё изображение для фона. Добавляете. оно появилось на рабочем столе программы

6.
Видим что изображение чуть-чуть нужно ровнять относительно рабочей сцены..что-бы "вписалось" в рабочий документ..Для этого выровняем изображение по центру рабочего документа а для этого внесём числовые значения в графы X и Y.
Если, например, для нашего случая ширина сцены задана 500 пикс., а высота 380 пикс., то, соответственно, параметры для выравнивания изображения по центру рабочего пространства (сцены) будут для X=250, а для Y=190

7.
Если Вы хотите сделать таймер на прозрачном фоне для того, чтобы потом была возможность вставлять его в другие проекты, то сразу можно перейти к созданию этой части урока (пропустив часть с добавлением фона)
Создание таймера.
Для его создания необходимо сделать два текстовых блока.
Первый текстовый блок может быть как Статический(Static) так и Динамический(Dynamic) текстовый блок, назавем его "Заголовок". Как выбрать тип текста.
Если вы планируете применять к заголовку какие- либо эффекты движения или хотите чтобы ваш текст был многострочным, то выбирайте тип - Динамический (Dynamic).
В тексте "Заголовок" пишем - о каком событии пойдет речь.
Например, " До 23 февраля осталось…".
Второй текстовый блок обязательно - Динамический(Dynamic) или собственно сам таймер. Назавем этот текстовый блок "Таймер".
Теперь переходим к созданию этих текстовых блоков.
Если открывали фоновое изображение на СЛОЙ-1, то для введения текста "Заголовок" в палитре временной шкалы создайте новый слой-2, выше фонового слой-1.(если фоновое изображение не добавляли то работаете на первом и пока единственном слое)
В нашем уроке фон есть а значит добавим второй слой...нажав на символическую иконку документика с загнутым уголком и плюсиком

8.
Для создания текстов выбираем инструмент "Text" на панели инструментов ( щелчок левой клавишей мыши) и на рабочем пространстве (сцене), если фоновое изображение отсутствует или на фоновом изображении выделяем поле для введения текста "Заголовок". (удерживая левую кнопку тянем мышку в сторону).

9.
После того как мы выбрали инструмент текст и создали поле для введения текста, становится доступно редактирование параметров текста в палитре Properties (Параметров). Здесь можно установить название шрифта,его размер и цвет.
Как уже и указывалось для текста оглавления тип выбираем СТАТИЧЕСКИЙ..всё остальное по Вашему усмотрению

10.
Как подготовили настройки текста то пишите сам текст..Жмите в рамочку для текста и печатайте
Когда текст введен, его можно отредактировать.
Для этого, удерживая левую кнопку мыши, текст выделяем, протягивая по нему курсор, и, во вкладке параметров текста, изменяем размер, цвет или название шрифта, если это необходимо.(вдруг что-то захотите отредактировать)

11.
Завершив манипуляции с текстовым полем, щелкаем по инструменту "Выделение" (Selection) и белый фон в текстовом поле исчезнет. Теперь, если выбрать инструмент "Transform" (Трансформирование), то вокруг текстового блока появятся маркеры трансформации, и у текстового блока можно изменить размер в целом или переместить блок, а также повернуть его. Все эти изменения размеров и положения можно также наблюдать в палитре "Transform" (Трансформация), а также вводить вручную в поля этой палитры необходимые размеры и углы наклона.

12.
Переходим к созданию динамического текста, т.е. непосредственно самого таймера.

Для этого обязательно создаем новый слой поверх всех остальных слоев. У меня это слой-3, если у вас фона нет, то это будет слой-2. Но, новый слой для динамического текста должен быть обязательно.
Как создавать новый слой уже пояснялось в уроке выше.
Снова идем к инструменту ТЕКСТ ("Text") в панеле инструментов, щелкаем по нему для выбора.
На рабочем пространстве (сцене) или на фоновом изображении растягиваем новое поле для ввода текста .
Следим, чтобы оно полностью находилось в границах рабочей области (сцены).
Вот, теперь, самое важное! Внимание!
Необходимо правильно указать параметры динамического текста, потому, что программа при создании таймера с помощью скрипта будет обращаться именно к указанным параметрам.
Далее я приведу скрин с настройками параметров динамического текста.
Вы его внимательно изучите.
Можно изменять все настройки касательно шрифта.
Но выбирайте хорошо читаемый шрифт и не задавайте слишком большого значения размерам шрифта, иначе информационная панель таймера может просто не войти в ваше рабочее поле.
Чего изменять нельзя, так - это тип текста. Тип (Type) текста обязательно должен быть указан ДИНАМИЧНЫЙ (Dynamic)(выбрать в выпадающем списке).
В графе ИМЯ (Name) должно быть вписано: timetxt
В графе Var: time_txt...вот как видите так и пишем

***ПРИМЕЧАНИЕ--эти параметры вводим вручную..печатаем самостоятельно

***Для того чтобы поля ИМЯ и Var стали доступны для введения текста необходимо щелкнуть по инструменту "Выделение" изображение СТРЕЛОЧКА в палитре инструментов(Selection) и заполнить указанные графы.

Тип формата текстового поля : МНОГОСТРОЧНЫЙ(Multiline)
Multiline это многострочное текстовое поле в отличие от Single Line (Однострочное). При формате Multiline, текст, если он не умещается на одной строке, переносится на другую, тогда как при формате Single Line (Однострочном).часть текста становится невидимой.
Когда всё готово то вводим нужный текст. В поле для текста ввожу текст поздравления, который мы условно назвали "Таймер".
Я ввожу текст - "С Праздником,мужчины!".
..и обязательно следим что-бы не сбились со слоёв..

13.
6. Когда динамический текст будет введен и заполнена палитра Параметров и т.д, создаем новый слой для скрипта.
У меня это слой-4, если фоновой картинки нет – это будет слой-3.
Вводим скрипт для таймера.
Там же где находится панель Параметров, ниже рабочего пространства но в строке выше окна параметров..есть вкладки..Выбираем вкладку ДЕЙСТВИЯ.

Перейдите на эту вкладку, щелкнув по ней. Или, если она отсутствует, то верхнее Меню программы –ОКНО – поставить галочку против палитры ДЕЙСТВИЯ (или Action.)
Расскажу немного о самом скрипте. Это универсальный скрипт адаптированный мною для программы Sothink SWFQuicker.(ПИШЕТ АВТОР)
Для того, чтобы его применять достаточно изменить в нем дату до которой будет идти отсчет и текст поздравления,(у нас это " С Праздником,мужчины!".
Для этого....
Сейчас тыкните мышкой в окошко ниже,потом правой кнопкой мышки и в списке выбираете ВЫДЕЛИТЬ ВСЁ и потом когда выделится(код в окошке будет синего цвета то жмите опять правой кнопкой мышки и в списке выбираете СКОПИРОВАТЬ



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


Как правильно ввести дату.
Дата вводится в таком формате 2012, 1, 14 - год, месяц, число. Обратите внимание, что месяцы для скрипта начинаются с 0, т.е. январь соответствует нулевому месяцу!!!
январю соответствует - 0,
февраль - 1,
март - 2,
и т д
декабрь - 11
Например, дата "до 1 января 2013 года осталось" будет выглядеть следующим образом: 2013, 0, 1 Дата до 23 февраля 2012 соответственно - 2012, 1, 23
Текст поздравления в скрипт вводится такой же, какой вы вписали, когда создавали динамический текст.
В нашем уроке это "С Праздником,мужчины!"

14.
Скопировать из блокнота отредактированный скрипт.
1
Вставить его в открытое нами окно вкладки "ДЕЙСТВИЯ"
2.
Нажимаете зеленую галочку применения.
3.
Если все отредактировали верно, правильно скопировали и вставили, то появится надпись, что ошибок нет..
Жмите в ней "ОК"
4.
В верхнем меню выбираете СТРЕЛОЧКУ превью просмотра и любуетесь своей работой

15.
Сохраняете свою работу
в верхнем меню программы нажимаете на ЭКСПОРТ и в выпавшем окне прописываете название работе и выбираете формат SWF и указываете место для сохранения

17.
Вот Вы и сделали своими руками открытку-информер..Всё не так сложно как кажется))..Один раз осилите и уже потом всё очень легко будет
Там где Вы сохранили на компе открытку-информер,будет вот такой документик

Нажимаете правой кнопкой мышки и выбираете ОТКРЫТЬ..она откроется Вашему просмотру если даже нет подключенного интернета
В дальнейшем загружайте на хостинг хранения флешек..давайте ссылочки друзьям и т.д
Вот и всё!
ПРИМЕЧАНИЕ...Программка хоть и портабельная и при сохранении выдаёт уведомление что в портабельной версии будет наложена "марка производителя программы" на изображение...не волнуйтесь..Сохраняется чисто))
 Васютина Светлана

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

Часть 1 - Использование масок во flash
Часть 2 - Делаем элементарные часики.Начинаем учиться созданию flash.
...
Часть 16 - Как сделать градиент цвета
Часть 17 - Создаем таймер обратного отсчета в программе Sothink SWFQuicker
Часть 18 - Создаем таймер обратного отсчета(23 февраля) в программе Sothink SWF Quicker
Часть 19 - Простые флеш часики своими руками
Часть 20 - Простая музыкальная flash-открытка с кнопками ВОСПРОИЗВЕДЕНИЕ и СТОП,в программе Sothink SWF Quicker
...
Часть 41 - Sothink SWF Quicker 5.0 Build 501 + Rus - Универсальная флеш программа + Урок.
Часть 42 - Урок. Снимаем логотип с плеера в программе Sothink SWF Quicker.
Часть 43 - Урок вращение в Sothink SWF Quicker от MissKcu