Делаем музыкальную флеш открытку в программе Sothink SWF Quicker

9 мaя, открытки, флэш, программы для флэш

Такую музыкальную флешку можно сделать очень быстро используя готовые кнопки контроля за воспроизведением музыки из галереи программы, а также понравившуюся песню или музыку в формате mp3, готовый коллаж, видеоролики и футажи.
 Я в этом уроке взяла свою открытку к 9 мая в формате gif.
 При написании урока использовалась версия программы
Sothink SWF Quicker 5.2.509
 на английском языке
 и русифицированная портативная версия

SothinkSWFQuicker 5.3.511
 Материал для урока Здесь 9 may.zip


 Открываем программу и импортируем на первый слой, который имеется на временной шкале, нашу картинку. Файл – Импорт (File-Import).

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

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

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Размер нашей анимации больше чем рабочее поле (сцена) программы по умолчанию. Поэтому, размеры сцены необходимо увеличить. Для этого инструментом Музыкальная открытка в  Sothink SWF Quicker Подвыбор (Subselection) щелкаем по рабочему полю (вернее по картинке, которая это рабочее поле закрывает) и во вкладке Свойства (Properties) видим размеры нашей сцены заданные по умолчанию – 400 X 300. Теперь посмотрим размеры нашей анимационной картинки. Инструментом Музыкальная открытка в  Sothink SWF QuickerВыбор (Selection) щелкаем по картинке и на панели Трансформация (Transform) видим размеры (ширину и высоту ) 561 X 386.

Музыкальная открытка в  Sothink SWF Quicker

Следовательно, размеры рабочего поля нам необходимо изменить до таких же размеров. Снова инструментом Подвыбор (Subselection) щелкаем по картинке, под которой находится наша сцена, и во вкладке Свойства (Properties) вводим необходимые размеры сцены.

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Теперь картинку необходимо выравнять относительно центра рабочего поля (сцены). Картинка должна занимать ровно все пространство сцены. Как определить координаты выравнивания по центру. У нас есть новые размеры рабочего пространства - ширина и высота .Ширина =561 Высота=386. Координата X для выравнивания по центру будет равна половине значения ширины, т. е. 280,5. Соответственно координата Y для выравнивания по центру будет равна половине значения высоты сцены, т. е. 193. Анимационную картинку выделяем и для нее в палитре Трансформация (Transform) вводим координаты X и Y для выравнивания по центру, относительно рабочего поля. X=280,5 Y=193

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Наш фон выровнен. Можем заняться музыкальным файлом, а затем кнопками, которые будут включать и выключать музыкальное сопровождение. Импортируем музыкальный файл mp3 в библиотеку. Файл - Импортировать в библиотеку (File-Import to Library).

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Проходим в палитру Библиотека (Library) и видим там наш музыкальный файл.

Музыкальная открытка в  Sothink SWF Quicker

Правой кнопкой мыши щелкаем по музыкальному файлу и вызываем контекстное меню. В контекстном меню выбираем пункт Связывание (Linkage).

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

В открывшемся диалоговом окне проставляем галочки в пунктах Экспорт для ActionScript (Export for ActionScript) и Экспорт в первом кадре (Export in first frame). В графе Идентификатор (Identifier) вписываем sound_id

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Нажимаем "ОК" и в палитре Библиотека (Library) видим, что рядом с символом музыкального файла появился идентификатор, который, посредством введенного в программу скрипта, в последствие, укажет на то, что флеш ролику необходимо проигрывает этот файл.

Музыкальная открытка в  Sothink SWF Quicker

Разобрались с музыкой и приступаем к кнопкам, которые будут управлять воспроизведением звука на музыкальной открытке. Я использую готовые кнопки play и stop из галереи программы. Каждую из этих кнопок я помещаю на отдельный слой для того, чтобы их легче было трансформировать. Поэтому, создаю выше слоя с фоновой картинкой (слой 1 выделен) еще два слоя. Переименовываю их соответственно "play" и "stop". Для создания нового слоя необходимо нажать кнопку Музыкальная открытка в  Sothink SWF QuickerВставить слой (Insert Layer) внизу левого края временной шкалы или вызвать из меню Вставка – Слой (Insert-Layer). Затем, для переименования, щелкнуть по созданному слою два раза и в диалоговом окне ввести для него название.

Музыкальная открытка в  Sothink SWF Quicker

Как видно на временной шкале, у нашего фона (слой 1, Layer 1) 20 кадров. Вновь созданным слоям для кнопок, также необходимо добавить недостающие кадры. Встаем на двадцатый кадр временной шкалы на слое "stop", щелкаем по нему курсором мыши и тянем курсор вниз, чтобы выделить все слои, где необходимо добавить недостающие кадры ( в нашем случае это 2 слоя, но ведь бывает и гораздо больше). Двадцатый кадр выделен на всех слоях и теперь нажимаем клавишу F5 на клавиатуре или из меню Вставка – Кадр (Insert- Frame).

Музыкальная открытка в  Sothink SWF Quicker

Кадры добавлены. Теперь расположим на слоях наши кнопки. Начнем с кнопки play. Слой "play" выделен. Переходим в палитру Галерея (Gallery) и выбираем папку Buttons. Раскройте ее, нажав на плюсик рядом с папкой. Выбираем папку arrowmove и также раскрываем ее. Перед нами список всех доступных в галереи кнопок для клипов. Выбираем кнопку play и дважды щелкаем по ней. Кнопка добавлена на фоновую картинку на слой "play".

Музыкальная открытка в  Sothink SWF Quicker

Теперь выделяем слой "stop" и точно также добавляем на него кнопку stop.

Музыкальная открытка в  Sothink SWF Quicker

Кнопки добавлены, но я хочу немного уменьшить их размер и изменить местоположение. Кнопка play будет располагаться слева внизу , а кнопка stop справа внизу фоновой картинки. Но, сначала необходимо определится с размером кнопок. Кнопки не надо делать слишком большими, чтобы они не отвлекали внимание от открытки. И в тоже время слишком мелкие кнопки могут потеряться на нашем коллаже. Инструментом Выбор (Selection) выделяем кнопку play . Переключаемся на инструмент Трансформация (Transform). Проходим в палитру Трансформация (Transform) и задаем следующие параметры: размеры кнопки Ширина=24 Высота=24, Немного о том, как следует определять координаты X и Y. Например, если как в этом примере, кнопки располагаются на одинаковой высоте от нижнего края картинки и с одинаковым отступом как от левого так и от правого края, то координата Y, следовательно у нас будут одинакова и для кнопки play и для кнопки stop ( в нашем примере = 363 пикс.) . Координату Х задаем исходя из композиции коллажа, например, как в нашем примере, X для кнопки play=30 пикс.(иначе говоря отступ от левого края = 30 пикс.), следовательно координата X для кнопки "stop" будет равна 561-30, т.е. X для кнопки "stop" =531 Таким образом, координаты размещения кнопки play на нашем фоне X=30 Y=363.

Музыкальная открытка в  Sothink SWF Quicker

Внимание! Теперь очень важный момент. Для того, чтобы программа поняла, что этой кнопкой необходимо включать воспроизведение музыки, нам необходимо образцу кнопки play присвоить имя. В последующем, когда мы введем скрипт, программа сможет идентифицировать эту кнопку, а вы сможете ею управлять. Открываем вкладку Свойства (Properties) и инструментом Выбор(Selection) выделяем кнопку play. В графу Имя (Name) вводим on_btn

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Далее выделяем с помощью инструмента Выбор (Selection) кнопку stop. Переключаемся на инструмент Трансформация (Transform) Проходим в палитру Трансформация (Transform) и выставляем координаты размещения кнопки stop и ее размеры: X=531 Y=363 Ширина=24 Высота=24

Музыкальная открытка в  Sothink SWF Quicker

Вводим также имя для кнопки stop! Открываем вкладку Свойства (Properties) и инструментом Выбор(Selection) выделяем кнопку stop. В графу Имя (Name) вводим off_btn

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Еще можно декорировать эти стандартные кнопки. Например, поместить под кнопку какой – нибудь клипарт соответствующей тематики. Я добавлю вот это изображение в формате PNG:

Музыкальная открытка в  Sothink SWF Quicker

Для декорирования под слоями "play" и "stop" создаем дополнительные слои, которые называем "Декор1" для слоя "play" и "Декор2" для слоя "stop". Чтобы добавить слой "Декор1" под слой "play", необходимо выделить слой1 (Layer1) и нажать кнопкуМузыкальная открытка в  Sothink SWF QuickerВставить слой (Insert Layer) внизу левого края временной шкалы. Чтобы создать слой "Декор2" под слой "stop" необходимо выделить слой "play" и нажать кнопкуМузыкальная открытка в  Sothink SWF QuickerВставить слой (Insert Layer) Слоям "Декор1" и "Декор2" не забываем добавить недостающие кадры. Их должно быть 20.

Музыкальная открытка в  Sothink SWF Quicker

Временная шкала после этих действий должна выглядеть следующим образом.

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Выделяем слой "Декор1" и импортируем на него клипарт Файл – Импорт (File-Import). В палитре Трансформация (Transform) выставляем размеры и указываем координаты местоположения X и Y для клипарта. X=31 Y=361 Ширина= 50 Высота= 49

Музыкальная открытка в  Sothink SWF Quicker

Выделяем слой "Декор2" и в Библиотеке находим нашу картинку из клипарта. Выделяем эту картинку в Библиотеке и, захватив курсором, перетягиваем ее на рабочее поле. В палитре Трансформация (Transform) выставляем размеры и указываем координаты местоположения X и Y X= 530 Y=361 Ширина= 50 Высота= 49

Музыкальная открытка в  Sothink SWF Quicker

Мы создали все основные элементы нашей музыкальной флешки и теперь настало время сообщить ей, как надо работать, т. е, ввести программу- скрипт. Поверх всех слоев создаем новый слой. Нажимаем кнопку Музыкальная открытка в  Sothink SWF QuickerВставить слой (Insert Layer). Слой называем "Скрипт". Дополнительные кадры для этого слоя можно не добавлять. Теперь наша временная шкала выглядит следующим образом:

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Выделяем первый кадр слоя "Скрипт" и открываем вкладку Действие (Action) на нижней панели вкладок под рабочим полем. В блокнот этой вкладки вводим скрипт

code:

var my_sound:Sound = new Sound();

my_sound.attachSound("sound_id");

on_btn.onPress = function() { my_sound.start(); };

off_btn.onPress = function() { my_sound.stop(); };

Нажимаем зеленую галочку для применения и проверки скрипта.

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Если вы все этапы работы проделали правильно и без ошибок скопировали скрипт, то программа выдаст сообщение, что ошибок не обнаружено. Нажмите на этом сообщении "ОК" и тестируйте вашу музыкальную открытку.

Музыкальная открытка в  Sothink SWF Quicker

Музыкальная открытка в  Sothink SWF Quicker

Подписываем музыкальную открытку. Для этого создаем выше слоя "stop" новый слой и переименовываем его в "подпись". Добавляем слою недостающие кадры, чтобы их было 20, столько же, сколько в других слоях. Выбираем инструмент Музыкальная открытка в  Sothink SWF Quicker Текст(Text), растягиваем текстовое поле и, открыв вкладку Свойства (Properties), выставляем необходимые параметры для текста (цвет, размер, тип текста и т. д.).

Музыкальная открытка в  Sothink SWF Quicker

Сохраняем флешку Файл – Экспорт –Экспорт фильма (File – Export –Export Movie) Открытка полностью готова. Можно ее сохранить и размещать в интернете.

Музыкальная открытка в  Sothink SWF Quicker