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

Четверг, 10 Мая 2012 г. 06:55 + в цитатник

Цитата сообщения novprospekt

Прочитать целиком В свой цитатник или сообщество!

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

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

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

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

Размер нашей анимации больше чем рабочее поле (сцена) программы по умолчанию. Поэтому, размеры сцены необходимо увеличить. Для этого инструментом Делаем музыкальную флеш открытку в программе Sothink SWF Quicker

Подвыбор (Subselection) щелкаем по рабочему полю (вернее по картинке, которая это рабочее поле закрывает) и во вкладке Свойства (Properties) видим размеры нашей сцены заданные по умолчанию – 400 X 300.
Теперь посмотрим размеры нашей анимационной картинки. Инструментом

Выбор (Selection) щелкаем по картинке и на панели Трансформация (Transform) видим размеры (ширину и высоту ) 561 X 386.

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

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

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

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

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

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

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

Разобрались с музыкой и приступаем к кнопкам, которые будут управлять воспроизведением звука на музыкальной открытке.
Я использую готовые кнопки play и stop из галереи программы. Каждую из этих кнопок я помещаю на отдельный слой для того, чтобы их легче было трансформировать. Поэтому, создаю выше слоя с фоновой картинкой (слой 1 выделен) еще два слоя. Переименовываю их соответственно "play" и "stop". Для создания нового слоя необходимо нажать кнопку

Вставить слой (Insert Layer) внизу левого края временной шкалы или вызвать из меню Вставка – Слой (Insert-Layer). Затем, для переименования, щелкнуть по созданному слою два раза и в диалоговом окне ввести для него название.

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

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

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

Кнопки добавлены, но я хочу немного уменьшить их размер и изменить местоположение. Кнопка 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.

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

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

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

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

Для декорирования под слоями "play" и "stop" создаем дополнительные слои, которые называем "Декор1" для слоя "play" и "Декор2" для слоя "stop". Чтобы добавить слой "Декор1" под слой "play", необходимо выделить слой1 (Layer1) и нажать кнопку

Вставить слой (Insert Layer) внизу левого края временной шкалы. Чтобы создать слой "Декор2" под слой "stop" необходимо выделить слой "play" и нажать кнопку

Вставить слой (Insert Layer)
Слоям "Декор1" и "Декор2" не забываем добавить недостающие кадры. Их должно быть 20.

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

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

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

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

Вставить слой (Insert Layer). Слой называем "Скрипт". Дополнительные кадры для этого слоя можно не добавлять.
Теперь наша временная шкала выглядит следующим образом:

Выделяем первый кадр слоя "Скрипт" и открываем вкладку Действие (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();

};

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

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

Подписываем музыкальную открытку. Для этого создаем выше слоя "stop" новый слой и переименовываем его в "подпись". Добавляем слою недостающие кадры, чтобы их было 20, столько же, сколько в других слоях. Выбираем инструмент Инструмент текст

Текст(Text), растягиваем текстовое поле и, открыв вкладку Свойства (Properties), выставляем необходимые параметры для текста (цвет, размер, тип текста и т. д.).

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

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 9 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 10 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.
Часть 11 - Делаем музыкальную флеш открытку в программе Sothink SWF Quicker.

Серия сообщений "Sothink SWF Quicker":
Часть 1 - Использование масок во flash
Часть 2 - Делаем элементарные часики.Начинаем учиться созданию flash.
...
Часть 28 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.
Часть 29 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 30 - Делаем музыкальную флеш открытку в программе Sothink SWF Quicker.
Часть 31 - Делаем плеер в программе Sothink SWF Quicker
Часть 32 - Гуси-лебеди. Урок с анимацией крыльев. Sothink SWF Quicker
...
Часть 41 - Sothink SWF Quicker 5.0 Build 501 + Rus - Универсальная флеш программа + Урок.
Часть 42 - Урок. Снимаем логотип с плеера в программе Sothink SWF Quicker.
Часть 43 - Урок вращение в Sothink SWF Quicker от MissKcu