Простая музыкальная flash-открытка с кнопками ВОСПРОИЗВЕДЕНИЕ и СТОП,в программе Sothink SWF Quicker

Суббота, 25 Февраля 2012 г. 09:00 + в цитатник

Простая музыкальная flash-открытка с кнопками ВОСПРОИЗВЕДЕНИЕ и СТОП,в программе Sothink SWF Quicker
Нажмите на картинку что-бы смотреть флеш-открытку с музыкой..Жмите ВОСПРОИЗВЕДЕНИЕ..а если пожелаете отключить звук то жмите на СТОП

Пример примитивный но это лишь для наглядности итога..Поняв суть и последовательность Вы сможете создавать открыточки с музыкой на любой "вкус"
Если кто ещё не имеет у себя программку то можно
СКАЧАТЬ ПРОГРАММУ ТУТ.

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

Для увеличения скриншотов жмите на изображения

1.
Открываем программу. У нас уже сразу откроется рабочее поле для работы.
Смотрим на панель слоев ( сверху справа)

2.
Чтобы нам не путаться в дальнейшем,- создадим дополнительные слои..всего "8" слоёв..
Один у нас уже есть значит добавляем ещё семь..нажимаем на иконку добавления слоёв "7" раз

3.
Нам нужно создать прелоадер. Это такая полоса загрузки.
Создавать вручную мы не будем, а воспользуемся одним из предложенных программой прелоадеров.
**Смотрим справа снизу и жмем кнопочку "ГАЛЕРЕЯ"
**Жмем на плюсик около надписи "preloaders":
**Выпал список прелоадеров.
Жмем один раз левой кнопкой по
названию, а чуть выше,- в окошке -видим как он выглядит:
**Выбираем который нам больше понравился.
Я выбрала вот такой вот серенький..под названием "grayline"

4.
Выбрали прелоадер в галерее и теперь встаем на первый кадр второго слоя и переносим этот прелоадер на рабочее поле ( удерживая левую кнопку мышки на названии прелоадера,- тянем на белое рабочее поле и отпускаем)..располагаем в нужном месте(следим что-бы нужный слой и кадр были активны)
Если объект не сдвигается то один раз жмякните мышкой по объекту и он выделится.Располагаете в нужном месте
Я расположила в нижней части своей будущей открытки
Помним из прошлых уроков в нашем сообществе(когда создавали часики и таймер отсчёта..что каждый отрезочек деление-это кадр. Активируем кадр нажатием на него и он станет чёрного-активного цвета)
Получится примерно так:

5.
Сразу встанем на второй кадр этого же второго слоя..изображение прелоадера временно исчезнет..НЕ ВОЛНУЕМСЯ и нажмем на клавиатуре "F5" либо правой кнопкой мышки по кадру и в выползшей табличке выбираем пункт "ВСТАВИТЬ КАДР..не кадры а именно кадр)"..Изображение появится

6.
Теперь нам надо сделать две кнопки,- кнопку ВОСПРОИЗВЕДЕНИЕ и кнопку СТОП.

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

Отправляемся в верхнее меню программы ВСТАВКА-НОВЫЙ СИМВОЛ и в выпавшем окошке выбора задач выбираем "КНОПКА"

7.
Нас перекинуло в окно редактирования кнопки.
Теперь немного теории.
Смотрим вверх,- на линейку кадров.
Как видите, четыре подписанных не цифрами, а буквами кадра

"UP" (первый кадр) - в этот кадр рисуем как кнопка выглядит сама по себе.
"OVER" (второй) - в этот - как она будет выглядеть если навести на нее курсор мышки.
"DOWN" (третий) - в этот - как она будет выглядеть если ее нажать
"HIT" (четвертый) - в этом кадре обозначаем рабочую область кнопки. Т.е. сама кнопка может быть очень большой, а нажать можно только в центре на масенький квадратик. Примерно так, надеюсь,- мысль уловили)))
8.
Теперь от теории к делу
Встаем на первый кадр - "up" ( клик мышкой и он окрасится в активный-чёрный цвет)

9.
Берем инструмент прямоугольник ( палитра инструментов слева)

Сразу немного об обводке и цвете.
Когда взяли инструмент,то в нижней части программы показываются параметры доступные инструменту
там-же увидите окошечки выбора цвета обводки и заливки(в нашем примере это для инструмента ПРЯМОУГОЛЬНИК
1 - цвет обводки
2 - цвет заливки
Щелкаем по значку и выбираем нужный нам цвет)) ЗАПОМИНАЕМ на будущее этот пункт;-)
Если хотите нарисовать фигуру без обводки вообще, то после того как вам выползет окошко с выбором тона цветового,- жмете там вот на такой значок:
9-а

9-б
Я для прямоугольника выбрала просто розовую обводку и без заливки

10.
Возвращаемся))
Встали на кадр первый- "UP" нажимаем на деление-отрезок..он станет чёрного цвета, взяли инструмент(у нас это прямоугольник..), теперь на белом фоне рабочего поля рисуем(расстягиваем) прямоугольничек.Не делаем его большим

11.
Теперь смотрим вправо.
Там окошко размеров и координат)
Нам надо выставить нули в окошки координат ( т.е. чтобы фигура стояла по центру в понятиях самой программы, внешне можете этого и не увидеть):
Если вдруг эти показатели не активны то значит сбилось выделение объекта(у нас это прямоугольник)
Тогда возьмите инстврумент "СТРЕЛОЧКА"(ВЫБОР)

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

12.
Теперь встаем на следующий кадр - "OVER".
Для этого Нажимаем на деление этого кадра и оно станет чёрного цвета
Если все сделали правильно, то наш прямоугольник исчезнет с рабочего поля..
Жмем по кадру правой кнопкой мыши(по чёрному активному делению) и выбираем пункт "ВСТАВИТЬ ПУСТОЙ КЛЮЧЕВОЙ КАДР"
Рабочее поле всё ещё пустое..белое

13.
Берём иструмент "ОВАЛ" и так-же как с прямоугольником..назначаем цвет обводки и заливку(или её отсутствие)..(в параметрах инструмента которые в низу программы высвечиваются)
Далее растягиваем на рабочем поле овал(не делаем его большим)и в разделе правой стороны программы..в трансформации пишем нули в окошках координат (как это делали и с прямоугольником)

14.
Далее встаем на третий кадр "DOWN", точно так же жмем по нему правой кнопкой мыши(по чёрному активному отрезок-кадр) и выбираем пункт "ВСТАВИТЬ ПУСТОЙ КЛЮЧЕВОЙ КАДР"

И теперь на белом фоне рабочего поля рисуем звезду.
Чтобы переключить инструмент прямоугольник на "звезду", Жмем по инструменту "прямоугольник" левой кнопкой мыши, не отпуская ее выбираем инструмент звезда и только потом отпускаем кнопку.
14-а

Сразу в параметрах(они в низу программы) настраиваете обводку и заливку(или её отсутствие) и только потом "рисуете"
Звезду рисуем точно так же как и все остальное.
Только в начале нарисуется круг, а потом надо отпустить мышку, еще раз ее нажать и тянуть в центр.
Нарисовали, выставляем нули в координаты.(в разделе трансформация..как мы это делали с прямоугольником и овалом)
14-б

15.
Теперь встаем на четвертый кадр "HIT", просто щелчок левой кнопкой,по отрезку под названием кадра и этот участок окрасится в активный чёрный цвет(изображение у нас исчезнет,будет белое поле) и далее жмём правой кнопкой мышки по этому чёрному участку(кадру) и выбираем "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР" или в альтернативе жмем кнопку на клавиатуре "F6",и вновь появится наша звезда.))

16.
Берем знакомый уже нам инструмент "прямоугольник".
Для него в параметрах выбираем уже не только обводку(если она Вам нужна) но и заливку..Цвет подбираете на своё усмотрение
И теперь рисуем небольшой прямоугольник поверх звезды, чтобы спрятать ее.

17.
Теперь создаем новый слой(нажимаем на "документик с плюсиком" под палитрой слоёв, и встаем на первый кадр этого слоя,под названием "UP"..нажимаем на деление-отрезок и он окрасится в чёрный цвет

18.
Теперь берем инструмент текст ( щелчок по значку в панели инструментов,слева.)

19.
На поле мы видим наш "прямоугольник" который мы рисовали в начале создания кнопки
теперь удерживая левую кнопку мыши выделяем прямо по всей фигурке этого "прямоугольника" область для текста, получится так...
ЕСЛИ ВДРУГ "ЗАЕХАЛИ" НА ЛИШНЕЕ ПРОСТРАНСТВО то просто зажмите кружочек на рамке для текста и подредактируйте размер что-бы совпадал с созданным "прямоугольником" кнопки

20.
Пишем в этом получившемся окошке нужный нам текст.
Название кнопки.."воспроизведение"..."PLАY"
Я вот написала "ЖМИ"))
Потом выделяем текст ( удерживая левую кнопку мыши ведем курсор от начала слова до последней буквы, если кто не знает)

21.
Сделаем настройки текста в открывшихся параметрах этого инструмента..
ТИП выбираем СТАТИЧНЫЙ..выбираем цвет..шрифт..размер его

22.
Написали, поставили в нужное место на кнопке.
Теперь щелкаем по четвертому кадру нашего второго слоя,под названием "HIT"..по делению-отрезок и он станет чёрного цвета
наш текст который писали исчезнет но появится квадратик которым мы закрывали звезду(помните?)

23.
и потом жмите правой кнопкой мышки по нашему кадру..по его чёрному активному цвету и выбираете в списке "ВСТАВИТЬ КАДР"(или жмем "F5")
вот наш текст и появился на кнопочке
(Когда открытка будет готова то нажимая на эту кнопочку будет появляться звёздочка))..и начнётся воспроизведение анимации и музыки,установленных при создании открытки)

24.
НУ А ТЕПЕРЬ МЫ ВСПОМИНАЕМ О СОЗДАНИИ ОТКРЫТКИ..для которой мы и делаем эти кнопки..Вернёмся в нашу сцену с прелоадером и перенесём созданную кнопку туда
Над слоями жмите кнопку-раздел "СЦЕНА-1"

25.
Нам вновь откроется наша главная сцена..которую мы создавали в начале урока
Что-бы не спутать порядок слоёв..активируем слой №2

26/
Теперь нам нужно перенести-добавить в нашу сцену,кнопочку воспроизведения которую мы сделали.
Для этого справа внизу, где мы открыли галерею прелоадеров, переключаемся обратно на "библиотеку"
Следите что-бы в слоях ни чего не сбилось..мы находимся на активном втором слое

27.
Теперь, встаем на 3-ий кадр(жмём на третье деление) 3-его слоя ( клик левой кнопкой мыши),деление окрасится в чёрный цвет и жмем "F6" либо правой кнопкой мышки по чёрному делению и в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР
Проверяем, что стоим на активном третьем слое и на третьем кадре этого слоя(активное чёрное деление), и переносим на рабочее поле нашу кнопку воспроизведения.
Для этого в правой стороне программы..раздел БИБЛИОТЕКА..находим сивол "КНОПКА"(в окне предпросмотра видим содержимое кнопки)
Зажимаем левой кнопкой мышки этот символ и тянем удерживая на рабочее поле и отпускаем,расположив в нужном месте
я установила в левом нижнем углу рабочей области

28.
Теперь делаем кнопку СТОП.

Изучаете и повторяете действия с пункта №6 по пункт №24..включительно..
Но теперь создаёте кнопку "СТОП"

Так-же отправляетесь в верхнее меню..
ВСТАВКА-НОВЫЙ СИМВОЛ-КНОПКА
Создаёте кнопку с тестом "СТОП"
Выполняйте внимательно по пунктам..шаг за шагом..повторяйте как при создании кнопки воспроизведения..
Не суетитесь..
29.
Создали кнопку..вернулись на главную сцену,создания-сборки нашей открытки музыкальной
Теперь нам нужно эту кнопку то-же перетянуть на рабочую область будущей открытки(как мы и переносили кнопку воспроизведения)
Для этого уже встаем-активируем слой №4..жмём и он будет синего цвета и уже на 3-ий кадр(нашего 4-ого слоя ( клик левой кнопкой мыши по делению кадра и он окрасится в чёрный цвет) и жмем "F6" либо правой кнопкой мышки , в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР"
Проверяем, что стоим на третьем кадре, и переносим на рабочее поле нашу кнопку стоп.
Для этого так-же в правой стороне программы..раздел БИБЛИОТЕКА..находим сивол "КНОПКА"
Но это у нас уже есть один символ КНОПКА..это для кнопки воспроизведения
Ищите второй символ КНОПКА и в окне предпросмотра проверьте..что-бы была именно кнопка СТОП

Зажимаем левой кнопкой мышки этот символ и тянем удерживая на рабочее поле и отпускаем
Располагаем ее там, где хотим:-) У меня в правом нижнем углу
30.
Теперь создадим красивую надпись
используя шаблонные эффекты программы.
В моем случае это - "Любви и счастья Вам".
Идём в верхнее меню и выбираем ВСТАВКА-НОВЫЙ СИМВОЛ а в выпавшем окошке выбираем-"Видеоролик" и жмём "ОК"

31.
Нам откроется наше окошко редактирования клипа. Теперь берем инструмент текст ( щелчок по значку в панели инструментов,слева.)

32.
Удерживая левую кнопку мыши выделяем на белом поле область для текста, получится так...

33.
Пишем в этом получившемся окошке нужный нам текст.
Потом выделяем его ( удерживая левую кнопку мыши ведем курсор от начала слова до последней буквы, если кто не знает)

34.
Сделаем настройки текста в открывшихся параметрах этого инструмента..
ТИП выбираем СТАТИЧНЫЙ..выбираем цвет..шрифт..размер его

35.
Теперь берем инструмент по стрелке..

36.

37.
Вылезет окошко со списком эффектов. Слева щелкаем один раз по эффекту,- справа смотрим как это будет выглядеть:
Если всё устраивает то жмём и применяем эффект

37-а
В выпавшем уведомлении просто соглашаемся..жмём "ДА"
38.
Всё..надпись создали..
Возвращаемся к нашей сцене создания-сборки открытки
Для этого над слоями жмите кнопку-раздел "СЦЕНА-1"
(мы так уже делали когда создавали кнопки)
39.
Раскрылась наша рабочая сцена
Активируем слой №5(синий будет) и жмём на четвёртый кадр(деление) и это деление окрасится в чёрный цвет и жмем "F6" либо правой кнопкой мышки , в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР"
Проверяем, что стоим на четвертом кадре нашего пятого слоя и переносим на рабочее поле наш видеоролик с анимацией текста ( который только что сделали)
Так-же как и переносили кнопки
Зажимаем в библиотеке символ "видеоролик" и тянем на рабочую область. Располагаем в нужном месте

40.
Теперь сделаем анимацию растущего- уменьшающегося сердца.
Для начала подберем картинку ( лучше в png..фон прозрачный).
Подобрали картинку, скачиваете ее себе на компьютер.
Если она очень большая,- уменьшаем ее с помощью фотошопа до нужного нам размера.
Теперь ее надо импортировать в программу.
Для этого отправляемся в меню ФАЙЛ-ИМПОРТИРОВАТЬ В БИБЛИОТЕКУ

41.
Нам откроется окошко со списком папок на компьютере.
Находим наше сердечко и жмем "открыть" ( все как обычно):
Все, картинка в программе.

Теперь ее надо сделать графическим объектом.
Вверху программы жмем кнопочку "ВСТАВКА",
пункт "НОВЫЙ СИМВОЛ".
В выползшей табличке выбираем пункт "ГРАФИКА".

Нам откроется окно редактирования графического объекта.
42
Теперь просто переносим нашу картинку из списка в библиотеке на рабочее поле:
Символ-РИСУНОК..(нажав на него Вы увидите в окне предпросмотра..выше в библиотеке..свой объект.
У нас это сердечко
Следим что-бы в редакторе этого объекта был активен слой..он единственный-первый
И как уже делали..находим наш СИМВОЛ-РИСУНОК и зажимая левой кнопкой мышки,удерживая..тянем на рабочее поле

43
А теперь...Вверху жмем кнопочку "ВСТАВКА", пункт "НОВЫЙ СИМВОЛ".
В выползшей табличке выбираем пункт "ВИДЕОРОЛИК".
Как всегда откроется окно редактирования клипа:-)
Активируете слой
Переносим на рабочее поле наш только что созданный графический объект:..(СЕРДЕЧКО)..
СИМВОЛ-ГРАФИКА..(уже не РИСУНОК а именно ГРАФИКА)
Как это делать уже знаете))
Теперь отцентрируем его задав ему нулевые координаты.
Щелкните мышкой по сердечку если оно у вас не выделено. Смотрим справа, (трансформация) в окошки вписываем нули:
(Мы это уже делали когда центрировали прямоугольник,овал,звезду..при создании кнопок)

44.
Далее переходим к линейке кадров.
Встаем на 20-ый кадр(нажимаем на деление под номером кадра и он станет чёрного цвета) и жмем "F6" либо правой кнопкой мышки , в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР" или "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР"
Будет выглядеть так..

45.
Стоя на 20 кадре уменьшаем немного наше сердечко.
Для этого щелкните по сердечку один раз, чтобы оно было выделено.
Теперь смотрим справа раздел трансформации( там же, где координаты проставляли):

Вместо этих показателей вписываете показатели "90"
46
Возвращаемся на линейку кадров.
Щелкаем по любому кадру между 1-ым и 20-ым(на деление и оно окрасится в чёрный цвет) далее по этому-же делению-кадр жмём правой кнопкой мышки и в выползшем окошке выбираем пункт "СОЗДАТЬ ТВИНИНГ ДВИЖЕНИЯ":
Я выбрала кадр №13

47
Сразу после этого,- должна протянуться вот такая прямая линия,стрела, между кадрами:

48
Теперь возвращаемся ко второму кадру(слой выделен)..жмём что-бы кадр выделился,стал чёрного цвета и потом жмем правой кнопкой мыши по этому чёрному второму кадру и выбираем пункт "КОПИРОВАТЬ КАДРЫ":

49
Далее жмем по 39-ому кадру правой кнопкой мыши и выбираем пункт "ВСТАВИТЬ КАДРЫ..не кадр а КАДРЫ":

Повторяем процедуру,- щелкаем по любому кадру между20-ым и 39-ым правой кнопкой мышки и выползшем окошке выбираем пункт "СОЗДАТЬ ТВИНИНГ ДВИЖЕНИЯ".
Увидите так-же как появилась прямая линия,стрела между этими кадрами
Анимация готова:-))
50
Отправляемся в главную сцену где мы собираем нашу открытку
Жмите над слоями пункт "СЦЕНА 1"

51
Активируем слой №6 (станет синего цвета) и потом жмякаем на его кадр №4(деление станет чёрного цвета)и потом жмём "F6" либо правой кнопкой мышки , в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР"
Проверяем, что стоим на четвертом кадре, и переносим на рабочее поле наш муви клип с анимацией сердечка ( который только что сделали)
Как это делать Вы уже знаете..
Зажимаете в библиотеке СИМВОЛ-ВИДЕОРОЛИК (но в предпросмотре смотрите что-бы был выбран правильный ролик..
Видите сердечки наши?
Значит верно..именно нужный ролик) и удерживая тянете его по полю на рабочую область..
Отпускаете и располагаете в нужном месте

52
Уфф..осталось чуть-чуть и открытка будет готова
Теперь переходим к музыке:-)
Выбираем подходящий файл, скачиваем при необходимости его из интернета:-)
Импортируем его в программу точно также, как делали с картинкой, сердечком.
Через пункт верхнего меню программыФАЙЛ-ИМПОРТИРОВАТЬ В БИБЛИОТЕКУ
Находите нужную музыку и добавляете
( импортирование большого муз файла займет некоторое время, но недолго)
НО лучше грузить не большой отрезок музыки..примерно на 25 или 35 сек. воспроизведения..т.к большой файл(полная муз.композиция) создаёт для себя оооочень много кадров
Всё..загрузили музыку и она у нас в списке библиотеки появилась
Смотрите по названию свой файл

53.
Далее..
АКТИВИРУЕМ нажатием слой №7 строка этого слоя станет синего цвета и потом нажимаем кадр №3 этого слоя..Деление станет активного чёрного цвета и жмем "F6" либо правой кнопкой мышки , в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР"
Далее..нажмите опять на строку слоя что-бы активировались параметры слоя в нижней части программы
после как нажали строку слоя,выглядеть всё должно так..

Обратили внимание что и кнопочки наши появились))..мы их то-же делали на кадре №3..и музыка у нас на кадре №3..а значит нажав ВОСПРОИЗВЕДЕНИЕ..начнёт проигрываться музыка
54
Далее
Теперь смотрим вниз окна программы и ставим такие же настройки как у меня:

1.
ТВИНИНГ-"NONE"

2.
МУЗЫКА-по стрелочке нажимаете и там название вашей добавленной в библиотеку музыки. Выбираете её нажатием.

3
СИНХРОНИЗАЦИЯ-выбираете "ПОТОК"

4
ЭФФЕКТ-выбираете "НЕТ"

55.
Теперь смотрим справа в нашу библиотеку объектов.
Вот там наша песенка:(у вас своё название)
Нажимаете два раза на эту музыку

В выпавшем окне обращаете внимание на этот пункт и запоминаете его целое число(то что до запятой)

56
Это продолжительность нашей песенки в секундах.
В моем случае 43 секунды.
Теперь щелкаем по рабочему полю,в свободном месте,что-бы раскрылись СВОЙСТВА рабочей области и смотрим какая у нас стоит частота кадров ( по умолчанию, обычно 12):

57
Как видите у меня стоит 12 кадров в секунду:-)
Умножаем длину песни на частоту кадров.
Т.е в моем случае 43*12=516. Запоминаем это число..
Возвращаемся к линейке кадров, к нашему слою №7(куда вставляли песенку)
Песня начинается(добавляли) на третьем кадре.
Значит берем то наше число и прибавляем к нему "2".
У меня это число "516" (у вас своё)
Значит 516+2=518
Не забываем активировать строку слоя №7(станет синего цвета) и "бегунком" продвигаем шкалу кадров дальше(в правую сторону)и находим число или порядковое деление соответствующее вашему числу которое вывели
У меня число "518" а значит и кадр ищу № 518
Не забывайте что каждое отрезочек-деление это то-же кадры
К примеру есть кадр 515..а дальше просто деления до 520 кадра..то значит от 515 я и отсчитаю ещё три деления..это и будет мой кадр "518"(ну это теория..далее к делу)
Проверим что находимся на активном слое №7 и встаём(нажимаем) нужный кадр (числовой итог которого вывели)
У меня это на №518 ( у вас свое число,- значит и порядковый номер кадра тоже)это деление кадра станет чёрного цвета и нажимаем "F5"....внимательно...не f6 а именно F5 либо правой кнопкой мышки по кадру и в выползшей табличке выбираем пункт "ВСТАВИТЬ КАДР".

58
Сразу после этого от 3 кадра,нашего слоя №7 до последнего(у меня это кадр 518) протянется такая вот "кривая" полоса:...обозначающая что муз.файл добавился

Далее..нажмите на строку слоя №7..активный синий цвет и увидите как строка кадров с музыкой окрасилась в чёрный цвет
Вернём бегунок на место..к началу кадров(в левую сторону)(которым продвигали шкалу кадров,когда искали конечный кадр музыки)

59
Дело близится к завершению!
Теперь нам надо прописать скрипты:-))
Сначала для кнопок. что-бы всё функционировало и т.д
Находим на нашей сцене,в слоях нашу кнопку ВОСПРОИЗВЕДЕНИЯ..у меня она с текстом "ЖМИ", делали мы её на слое №3..кадр то-же №3
ТУТ ВНИМАТЕЛЬНО...последовательно

активируем слой №3

Далее..в верху панели кадров нажмите на деление соответствующее порядковому номеру кадра №3..значит третье деление..там появится отметка красного цвета

Далее..вернитесь к слою №3 и ни чего более не трогайте а уже около него нажмите на третье деление..кадр №3..ориентируйтесь по красной отметке..от неё опускайтесь ниже(что-бы не промахнуться с выбором кадра)

Нажимаете на изображение кнопки инструментом ВЫБОР(стрелочка) что-бы кнопка выделилась-активировалась

В нижней части программы выбираем вкладку "СВОЙСТВА"
в окне "ИМЯ" вписываете англ. btn

Нажмите вкладку ДЕЙСТВИЕ

60
Далее..переходим во вкладку "ДЕЙСТВИЕ" и вписываем туда скрипт и потом нажимаем галочку а в выпавшем окне уведомлении о том что ОШИБОК НЕ ОБНАРУЖЕНО жмём "ок"

ПРИМЕЧАНИЕ

Для того что-бы вписать скрипт делаем следующее...
Сейчас нажмите левой кнопкой мышки в начале текста символов скрипта и удерживая обведите мышкой ВЕСЬ текст до последнего символа предоставленного скрипта..что-бы текст скрипта выделился.,потом правой кнопкой мышки и в списке выбираете СКОПИРОВАТЬ
on (release) { btn._visible = false; btnstop._visible = true; play (); }
ДАЛЕЕ отправляетесь к открывшемуся окну ДЕЙСТВИЕ нашей программки где нужно вписать скрипт и в поле вставляем скопированный скрипт...для этого жмите в поле окна и потом правой кнопкой мышки и в списке выбираете ВСТАВИТЬ и наш скопированный скрипт-код вставится
61.
Далее находим кнопку "СТОП" и делаем всё как и с кнопкой воспроизведения.
Кнопка "СТОП" находится на слое №4(активируем этот слой)и кадр этого слоя №3..
далее как и с кнопкой воспроизведения нажимаем точно так же ее,инструменто выделяем, даем ей точно так же имя,во вкладке "СВОЙСТВА" в разделе "ИМЯ" но на этот раз англ. btnstop,(будьте внимательны)
а во вкладке "ДЕЙСТВИЯ" вписываем вот этот скрипт
on (release) { gotoAndStop(3); btn._visible = true; }
и так-же жмём галочку для подтверждения того что ОШИБОК НЕ ОБНАРУЖЕНО и применяем нажатием на "ОК"

62
Теперь встаем,активируем слой №8(станет синего цвета), и жмём кадр №1..на цифру кадра(окрасится в красный цвет) и потом на деление ниже(деление окрасится в чёрный цвет)
В нижней части программы,параметры,во вкладке "ДЕЙСТВИЕ" вписываем такой скрипт
ifFrameLoaded(518) { gotoAndStop(3); } // End of ifFrameLoaded
( где 518,- меняем на ваше число последнего кадра песенки..число которого мы выводили при добавлении музыкального файла..определяя кадр)

63
Далее встаем на второй кадр этого же слоя,
как всё делать вы уже знаете
потом жмем по нему правой кнопкой мыши и выбираем пункт "ВСТАВИТЬ ПУСТОЙ КЛЮЧЕВОЙ КАДР".
Во вкладке "ДЕЙСТВИЕ" (этого кадра).. вписываем такой скрипт:
Как всё это делать Вы уже знаете и как скопировать и вставить скрипт,то-же
gotoAndPlay(1);
и так-же нажимаете на галочку а потом в выпавшем окошке в котором уведомляют что ОШИБКИ НЕ ОБНАРУЖЕНО жмём "ок"

*примечание

если в поле,вкладки "ДЕЙСТВИЯ"..есть запись что "нет действий для данного..." то нажмите на строку слоя №8 а потом на верхнее деление кадра №2(на котором и работали),оно будет красного цвета а потом на нижнее деление кадра №2 и оно окрасится в чёрный цвет и уже потом вставляйте скрипт который скопировали
64
Далее встаем на третий кадр этого же слоя №8, жмем по нему правой кнопкой мыши и выбираем пункт "ВСТАВИТЬ ПУСТОЙ КЛЮЧЕВОЙ КАДР".
Во вкладке "ДЕЙСТВИЕ" этого кадра вписываем такой скрипт:
btnstop._visible = false;
Как всё это делать и как копировать-вставлять скрипт,Вы уже знаете..Не забывайте нажать галочку для применения и проверки скрипта
65
Теперь добавим общий фон открытки
Тут просто.
Подбираем подходящую картинку для фона нашей флешке.
Делаем в фотошопе,нужный размер ширины и высоты этой картинке
Запоминаем показатели размеров
Точно так же как уже делали,(когда добавляли изображение сердечек)- импортируем Вашу фоновую картинку в программу,(ФАЙЛ-ИМПОРТИРОВАТЬ В БИБЛИОТЕКУ)
Всё..картинка оказалась в библиотеке
Делаем из нее графический объект.
Для этого как и делали уже (с сердечками)
Вверху программы жмем кнопочку "ВСТАВКА", в выползшем окне выбора задачи мы выбираем пункт "НОВЫЙ СИМВОЛ".
В следующей выползшей табличке выбираем пункт "ГРАФИКА".
Нам откроется окно редактирования графического объекта.
Просто переносим нашу картинку из списка в библиотеке на рабочее поле:
Как это делать уже знаете
Активируете слой(он там единственный)
Находите в библиотеке своё изображение символ-РИСУНОК..жмёте..проверяете в предпросмотре что именно нужный рисунок..и зажав левой кнопкой мышки-удерживая тянете по полю на рабочую область и отпускаете

66
возвращаетесь на главную сцену
Нажимаете над слоями пункт "СЦЕНА1"

67
и переносим этот объект на первый кадр первого слоя на нашей сцене:-)
Для этого..

Активируем нажатием на строку слоя...слой №1..(станет синего цвета) а его кадр ПЕРВЫЙ(деление-отрезок) окрасится в чёрный цвет

Всё активно..

В библиотеке находим уже символ-ГРАФИКА(наш рисунок уже преобразован в символ графика)..жмём и в предпросмотре смотрим что выбрали правильный выбор..наша фоновая картинка

Зажимаем левой кнопкой мышки и удерживая тянем по полю на рабочую область и отпускаем

68
Теперь "подгоним" размеры рабочей области и размеры нашей фоновой картинки..
Они должны быть одинаковы..т.к всё что будет "за границами" рабочей области не вписавшееся..не будет показано в итоговом выходе..
а что-бы всё было хорошо делаем следующее..
*Смотрим в правой части программы..раздел "ТРАНСФОРМАЦИЯ"..а там указаны размеры добавленного графического объекта..Нашей фоновой картинки..
*На скрине я обозначила эти показатели.
*Моя картинка имеет ШИРИНА-400,ВЫСОТА-389

69
*Далее..Жмите мышкой по свободному полю рабочей области и смотрите параметры в нижней части программы во вкладке
"СВОЙСТВА"
*В показателях "ШИРИНА" и "ВЫСОТА" вписываете размеры Вашей фоновой картинки

*Далее..Нажимаете мышкой по самому изображению фоновой картинки и она активируется и если нужно стрелками клавиатуры продвиньте в нужное положение картинку что-бы "точно вписалась" в рабочую область

70
Ну и в завершение..последние действия.
БУДЬТЕ ВНИМАТЕЛЬНЫ
Вспоминаем о слое №7 на котором мы добавляли музыку
У нас слой с песенкой заканчивается кадром номер таким-то) у меня это 518, если помните:-) У вас свой)
Теперь надо встать на 518 кадр ( ваше число) каждого

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

Метки: sothink swf quicker

Процитировано 25 раз
Понравилось: 3 пользователям

<a href="https://www.liveinternet.ru/users/morela4/post208214000/">РџСЂРѕСЃС‚Р°СЏ РјСѓР·С‹РєР°Р»СЊРЅР°СЏ  flash-РѕС‚РєСЂС‹С‚РєР° СЃ РєРЅРѕРїРєР°РјРё Р’РћРЎРџР РћРР—Р’Р•Р”Р•РќРР• Рё РЎРўРћРџ,РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF Quicker</a><br/>
	
		
			
				
					
					
						
						РџСЂРѕСЃС‚Р°СЏ РјСѓР·С‹РєР°Р»СЊРЅР°СЏ flash-РѕС‚РєСЂС‹С‚РєР° СЃ РєРЅРѕРїРєР°РјРё Р’РћРЎРџР РћРР—Р’Р•Р”Р•РќРР• Рё РЎРўРћРџ,РІ РїСЂРѕРіСЂР°РјРјРµ Sothink SWF Quicker
						 РќР°Р¶РјРёС‚Рµ РЅР° РєР°СЂС‚РёРЅРєСѓ С‡С‚Рѕ-Р±С‹ СЃРјРѕС‚СЂРµС‚СЊ С„Р»РµС€-РѕС‚РєСЂС‹С‚РєСѓ СЃ РјСѓР·С‹РєРѕР№..Р–РјРёС‚Рµ Р’РћРЎРџР РћРР—Р’Р•Р”Р•РќРР•..Р° РµСЃР»Рё РїРѕР¶РµР»Р°РµС‚Рµ РѕС‚РєР»СЋС‡РёС‚СЊ Р·РІСѓРє С‚Рѕ Р¶РјРёС‚Рµ РЅР° РЎРўРћРџ
						 
						 РџСЂРёРјРµСЂ РїСЂРёРјРёС‚РёРІРЅС‹Р№ РЅРѕ СЌС‚Рѕ Р»РёС€СЊ РґР»СЏ РЅР°РіР»СЏРґРЅРѕСЃС‚Рё РёС‚РѕРіР°..РџРѕРЅСЏРІ СЃСѓС‚СЊ Рё РїРѕСЃР»РµРґРѕРІР°С‚РµР»СЊРЅРѕСЃС‚СЊ Р’С‹ СЃРјРѕР¶РµС‚Рµ СЃРѕР·РґР°РІР°С‚СЊ РѕС‚РєСЂС‹С‚РѕС‡РєРё СЃ РјСѓР·С‹РєРѕР№ РЅР° Р»СЋР±РѕР№ &quot;РІРєСѓСЃ&quot;
						Р•СЃР»Рё РєС‚Рѕ РµС‰С‘ РЅРµ РёРјРµРµС‚ Сѓ СЃРµР±СЏ РїСЂРѕРіСЂР°РјРјРєСѓ С‚Рѕ РјРѕР¶РЅРѕ
						РЎРљРђР§РђРўР¬ РџР РћР“Р РђРњРњРЈ РўРЈРў.
						 
						 РЎРµРіРѕРґРЅСЏ Р±СѓРґРµРј РґРµР»Р°С‚СЊ РјСѓР·С‹РєР°Р»СЊРЅСѓСЋ С„Р»Рµ... <a href="https://www.liveinternet.ru/users/morela4/post208214000/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]