[показать]Пример примитивный но это лишь для наглядности итога..Поняв суть и последовательность Вы сможете создавать открыточки с музыкой на любой "вкус" Если кто ещё не имеет у себя программку то можно Сегодня будем делать музыкальную флеш-открыточку с кнопочкой воспроизведения и стоп,своими руками. Урок будет "разбит" на несколько частей но в итоге всё взаимосвязано будет. Изучайте внимательно текст и скриншоты..Кажется что всё очень сложно и долго..Уверяю--не сложно)). Будьте просто внимательны и последовательно выполняйте. Не огорчайтесь если с первого раза не получится..упрямо изучайте-выполняйте повторно Сам урок я читала-изучала но я расписала этот урок более подробно для начинающих,со своими скриншотами практики и прописала некоторые уточнения и дополнения..в общем ремарки 1. Открываем программу. У нас уже сразу откроется рабочее поле для работы. Смотрим на панель слоев ( сверху справа) [показать]2. Чтобы нам не путаться в дальнейшем,- создадим дополнительные слои..всего "8" слоёв.. Один у нас уже есть значит добавляем ещё семь..нажимаем на иконку добавления слоёв "7" раз [показать]3. Нам нужно создать прелоадер. Это такая полоса загрузки. Создавать вручную мы не будем, а воспользуемся одним из предложенных программой прелоадеров. **Смотрим справа снизу и жмем кнопочку "ГАЛЕРЕЯ" **Жмем на плюсик около надписи "preloaders": **Выпал список прелоадеров. Жмем один раз левой кнопкой по названию, а чуть выше,- в окошке -видим как он выглядит: **Выбираем который нам больше понравился. Я выбрала вот такой вот серенький..под названием "grayline" [показать]4. Выбрали прелоадер в галерее и теперь встаем на Если объект не сдвигается то один раз жмякните мышкой по объекту и он выделится.Располагаете в нужном месте Я расположила в нижней части своей будущей открытки Получится примерно так: [показать]5. Сразу встанем на второй кадр этого же второго слоя..изображение прелоадера временно исчезнет..НЕ ВОЛНУЕМСЯ и нажмем на клавиатуре "F5" либо правой кнопкой мышки по кадру и в выползшей табличке выбираем пункт "ВСТАВИТЬ КАДР..не кадры а именно кадр)"..Изображение появится [показать]6. Кнопки очень важный момент при создании флешек. Кнопки могут исполнять стандартную роль перехода на какую-либо ссылку ( страничку в интернете), или же являться кнопками управления самой флешкой. Будь то остановка, воспроизведение и многое другое:-) Отправляемся в верхнее меню программы ВСТАВКА-НОВЫЙ СИМВОЛ и в выпавшем окошке выбора задач выбираем "КНОПКА" [показать]7. Нас перекинуло в окно редактирования кнопки. Теперь немного теории. Смотрим вверх,- на линейку кадров. Как видите, четыре подписанных не цифрами, а буквами кадра [показать]"UP" (первый кадр) - в этот кадр рисуем как кнопка выглядит сама по себе. "OVER" (второй) - в этот - как она будет выглядеть если навести на нее курсор мышки. "DOWN" (третий) - в этот - как она будет выглядеть если ее нажать "HIT" (четвертый) - в этом кадре обозначаем рабочую область кнопки. Т.е. сама кнопка может быть очень большой, а нажать можно только в центре на масенький квадратик. Примерно так, надеюсь,- мысль уловили))) 8. Теперь от теории к делу Встаем на первый кадр - "up" ( клик мышкой и он окрасится в активный-чёрный цвет) [показать]9. Берем инструмент прямоугольник ( палитра инструментов слева) [показать]Сразу немного об обводке и цвете. Когда взяли инструмент,то в нижней части программы показываются параметры доступные инструменту там-же увидите окошечки выбора цвета обводки и заливки(в нашем примере это для инструмента ПРЯМОУГОЛЬНИК 1 - цвет обводки 2 - цвет заливки Щелкаем по значку и выбираем нужный нам цвет)) ЗАПОМИНАЕМ на будущее этот пункт;-) Если хотите нарисовать фигуру без обводки вообще, то после того как вам выползет окошко с выбором тона цветового,- жмете там вот на такой значок: 9-а [показать]9-б Я для прямоугольника выбрала просто розовую обводку и без заливки [показать]10. Возвращаемся)) Встали на кадр первый- [показать]11. Теперь смотрим вправо. Там окошко размеров и координат) Нам надо выставить нули в окошки координат ( т.е. чтобы фигура стояла по центру в понятиях самой программы, внешне можете этого и не увидеть): Если вдруг эти показатели не активны то значит сбилось выделение объекта(у нас это прямоугольник) Тогда возьмите инстврумент "СТРЕЛОЧКА"(ВЫБОР) [показать]и жмякните один раз по прямоугольнику который растянули на рабочей области И теперь пропишем нули в разделе трансформации..окошки размеров и координат [показать]12. Теперь встаем на следующий кадр - Для этого Нажимаем на деление этого кадра и оно станет чёрного цвета Если все сделали правильно, то наш прямоугольник исчезнет с рабочего поля.. Жмем по кадру правой кнопкой мыши(по чёрному активному делению) и выбираем пункт "ВСТАВИТЬ ПУСТОЙ КЛЮЧЕВОЙ КАДР" Рабочее поле всё ещё пустое..белое [показать]13. Берём иструмент "ОВАЛ" и так-же как с прямоугольником..назначаем цвет обводки и заливку(или её отсутствие)..(в параметрах инструмента которые в низу программы высвечиваются) Далее растягиваем на рабочем поле овал(не делаем его большим)и в разделе правой стороны программы..в трансформации пишем нули в окошках координат (как это делали и с прямоугольником) [показать]14. Далее встаем на третий кадр [показать]И теперь на белом фоне рабочего поля рисуем звезду. Чтобы переключить инструмент прямоугольник на "звезду", Жмем по инструменту "прямоугольник" левой кнопкой мыши, не отпуская ее выбираем инструмент звезда и только потом отпускаем кнопку. 14-а [показать]Сразу в параметрах(они в низу программы) настраиваете обводку и заливку(или её отсутствие) и только потом "рисуете" Звезду рисуем точно так же как и все остальное. Только в начале нарисуется круг, а потом надо отпустить мышку, еще раз ее нажать и тянуть в центр. Нарисовали, выставляем нули в координаты.(в разделе трансформация..как мы это делали с прямоугольником и овалом) 14-б [показать]15. Теперь встаем на четвертый кадр [показать]16. Берем знакомый уже нам инструмент "прямоугольник". Для него в параметрах выбираем уже не только обводку(если она Вам нужна) но и заливку..Цвет подбираете на своё усмотрение И теперь рисуем небольшой прямоугольник поверх звезды, чтобы спрятать ее. [показать]17. Теперь создаем новый слой(нажимаем на "документик с плюсиком" под палитрой слоёв, и встаем на первый кадр этого слоя,под названием [показать]18. Теперь берем инструмент текст ( щелчок по значку в панели инструментов,слева.) [показать]19. На поле мы видим наш "прямоугольник" который мы рисовали в начале создания кнопки теперь удерживая левую кнопку мыши выделяем прямо по всей фигурке этого "прямоугольника" область для текста, получится так... ЕСЛИ ВДРУГ "ЗАЕХАЛИ" НА ЛИШНЕЕ ПРОСТРАНСТВО то просто зажмите кружочек на рамке для текста и подредактируйте размер что-бы совпадал с созданным "прямоугольником" кнопки ![]() 20. Пишем в этом получившемся окошке нужный нам текст. Название кнопки.."воспроизведение"..."PLАY" Я вот написала "ЖМИ")) Потом выделяем текст ( удерживая левую кнопку мыши ведем курсор от начала слова до последней буквы, если кто не знает) [показать]21. Сделаем настройки текста в открывшихся параметрах этого инструмента.. ТИП выбираем СТАТИЧНЫЙ..выбираем цвет..шрифт..размер его [показать]22. Написали, поставили в нужное место на кнопке. Теперь щелкаем по четвертому кадру нашего второго слоя,под названием "HIT"..по делению-отрезок и он станет чёрного цвета наш текст который писали исчезнет но появится квадратик которым мы закрывали звезду(помните? [показать]23. и потом жмите правой кнопкой мышки по нашему кадру..по его чёрному активному цвету и выбираете в списке "ВСТАВИТЬ КАДР"(или жмем "F5") вот наш текст и появился на кнопочке (Когда открытка будет готова то нажимая на эту кнопочку будет появляться звёздочка))..и начнётся воспроизведение анимации и музыки,установленных при создании открытки) [показать]24. Над слоями жмите кнопку-раздел "СЦЕНА-1" [показать]25. Нам вновь откроется наша главная сцена..которую мы создавали в начале урока Что-бы не спутать порядок слоёв..активируем слой №2 [показать]26/ Теперь нам нужно перенести-добавить в нашу сцену,кнопочку воспроизведения которую мы сделали. Для этого справа внизу, где мы открыли галерею прелоадеров, переключаемся обратно на "библиотеку" Следите что-бы в слоях ни чего не сбилось..мы находимся на активном втором слое [показать]27. Теперь, встаем на 3-ий кадр(жмём на третье деление) 3-его слоя ( клик левой кнопкой мыши),деление окрасится в чёрный цвет и жмем "F6" либо правой кнопкой мышки по чёрному делению и в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР Проверяем, что стоим на активном третьем слое и на третьем кадре этого слоя(активное чёрное деление), и переносим на рабочее поле нашу кнопку воспроизведения. Для этого в правой стороне программы..раздел БИБЛИОТЕКА..находим сивол "КНОПКА"(в окне предпросмотра видим содержимое кнопки) Зажимаем левой кнопкой мышки этот символ и тянем удерживая на рабочее поле и отпускаем,расположив в нужном месте я установила в левом нижнем углу рабочей области [показать]28. Но теперь создаёте кнопку Так-же отправляетесь в верхнее меню.. Создаёте кнопку с тестом "СТОП" Выполняйте внимательно по пунктам..шаг за шагом..повторяйте как при создании кнопки воспроизведения.. Не суетитесь.. 29. Создали кнопку..вернулись на главную сцену,создания-сборки нашей открытки музыкальной Теперь нам нужно эту кнопку то-же перетянуть на рабочую область будущей открытки(как мы и переносили кнопку воспроизведения) Для этого уже встаем-активируем слой №4..жмём и он будет синего цвета и уже Проверяем, что стоим на третьем Для этого так-же в правой стороне программы..раздел БИБЛИОТЕКА..находим сивол "КНОПКА" Но это у нас уже есть один символ КНОПКА..это для кнопки воспроизведения Ищите второй символ КНОПКА и в окне предпросмотра проверьте..что-бы была именно кнопка СТОП [показать]Зажимаем левой кнопкой мышки этот символ и тянем удерживая на рабочее поле и отпускаем Располагаем ее там, где хотим:-) У меня в правом нижнем углу 30. используя шаблонные эффекты программы. В моем случае это - Идём в верхнее меню и выбираем ВСТАВКА-НОВЫЙ СИМВОЛ а в выпавшем окошке выбираем-"Видеоролик" и жмём "ОК" [показать]31. Нам откроется наше окошко редактирования клипа. Теперь берем инструмент текст ( щелчок по значку в панели инструментов,слева.) [показать]32. Удерживая левую кнопку мыши выделяем на белом поле область для текста, получится так... ![]() 33. Пишем в этом получившемся окошке нужный нам текст. Потом выделяем его ( удерживая левую кнопку мыши ведем курсор от начала слова до последней буквы, если кто не знает) 34. Сделаем настройки текста в открывшихся параметрах этого инструмента.. ТИП выбираем СТАТИЧНЫЙ..выбираем цвет..шрифт..размер его [показать]35. Теперь берем инструмент по стрелке.. [107x277]36. [показать]37. Вылезет окошко со списком эффектов. Слева щелкаем один раз по эффекту,- справа смотрим как это будет выглядеть: Если всё устраивает то жмём и применяем эффект [показать]37-а В выпавшем уведомлении просто соглашаемся..жмём "ДА" 38. Всё..надпись создали.. Возвращаемся к нашей сцене создания-сборки открытки Для этого над слоями жмите кнопку-раздел "СЦЕНА-1" (мы так уже делали когда создавали кнопки) 39. Раскрылась наша рабочая сцена Активируем Проверяем, что стоим на Так-же как и переносили кнопки Зажимаем в библиотеке символ "видеоролик" и тянем на рабочую область. Располагаем в нужном месте [показать]40. Теперь сделаем анимацию растущего- уменьшающегося сердца. Для начала подберем картинку ( лучше в png..фон прозрачный). Подобрали картинку, скачиваете ее себе на компьютер. Если она очень большая,- уменьшаем ее с помощью фотошопа до нужного нам размера. Теперь ее надо импортировать в программу. Для этого отправляемся в меню [показать]41. Нам откроется окошко со списком папок на компьютере. Находим наше сердечко и жмем "открыть" ( все как обычно): Все, картинка в программе. Теперь ее надо Вверху программы жмем кнопочку пункт В выползшей табличке выбираем пункт [показать]Нам откроется окно редактирования графического объекта. 42 Теперь просто переносим нашу картинку из списка в библиотеке на рабочее поле: Символ-РИСУНОК..(нажав на него Вы увидите в окне предпросмотра..выше в библиотеке..свой объект. У нас это сердечко Следим что-бы в редакторе этого объекта был активен слой..он единственный-первый И как уже делали..находим наш СИМВОЛ-РИСУНОК и зажимая левой кнопкой мышки,удерживая..тянем на рабочее поле [показать]43 А теперь...Вверху жмем кнопочку "ВСТАВКА", пункт "НОВЫЙ СИМВОЛ". В выползшей табличке выбираем пункт "ВИДЕОРОЛИК". Как всегда откроется окно редактирования Активируете слой Переносим на рабочее поле наш только что созданный графический объект:..(СЕРДЕЧКО).. СИМВОЛ-ГРАФИКА..(уже не РИСУНОК а именно ГРАФИКА) Как это делать уже знаете)) Теперь отцентрируем его задав ему нулевые координаты. Щелкните мышкой по сердечку если оно у вас не выделено. Смотрим справа, (трансформация) в окошки вписываем нули: (Мы это уже делали когда центрировали прямоугольник,овал,звезду..при создании кнопок) [показать]44. Далее переходим к линейке кадров. Встаем на Будет выглядеть так.. [показать]45. Для этого щелкните по сердечку один раз, чтобы оно было выделено. Теперь смотрим справа раздел трансформации( там же, где координаты проставляли): [показать]Вместо этих показателей вписываете показатели 46 Возвращаемся на линейку кадров. Щелкаем по любому кадру между Я выбрала кадр №13 [показать]47 Сразу после этого,- должна протянуться вот такая прямая линия,стрела, между кадрами: [показать]48 Теперь возвращаемся ко второму кадру(слой выделен)..жмём что-бы кадр выделился,стал чёрного цвета и потом жмем правой кнопкой мыши по этому чёрному второму кадру и выбираем пункт "КОПИРОВАТЬ КАДРЫ": [показать]49 Далее жмем по [показать]Повторяем процедуру,- щелкаем по любому кадру между Увидите так-же как появилась прямая линия,стрела между этими кадрами Анимация готова:-)) 50 Отправляемся Жмите над слоями пункт "СЦЕНА 1" [показать]51 Активируем слой №6 (станет синего цвета) и потом жмякаем на его кадр №4(деление станет чёрного цвета)и потом жмём "F6" либо правой кнопкой мышки , в выползшем окошке пункт "ВСТАВИТЬ КЛЮЧЕВОЙ КАДР"..или "ПРЕОБРАЗОВАТЬ В КЛЮЧЕВОЙ КАДР" Проверяем, что стоим на Как это делать Вы уже знаете.. Зажимаете в библиотеке СИМВОЛ-ВИДЕОРОЛИК (но в предпросмотре смотрите что-бы был выбран правильный ролик.. Видите сердечки наши? Значит верно..именно нужный ролик) и удерживая тянете его по полю на рабочую область.. Отпускаете и располагаете в нужном месте [показать]52 Уфф..осталось чуть-чуть и открытка будет готова Выбираем подходящий файл, скачиваем при необходимости его из интернета:-) Импортируем его в программу точно также, как делали с картинкой, сердечком. Через пункт верхнего меню программыФАЙЛ-ИМПОРТИРОВАТЬ В БИБЛИОТЕКУ Находите нужную музыку и добавляете ( импортирование большого муз файла займет некоторое время, но недолго) НО лучше грузить не большой отрезок музыки..примерно Всё..загрузили музыку и она у нас в списке библиотеки появилась Смотрите по названию свой файл [показать]53. Далее.. АКТИВИРУЕМ нажатием Далее..нажмите опять на строку слоя что-бы активировались параметры слоя в нижней части программы после как нажали строку слоя,выглядеть всё должно так.. [показать]Обратили внимание что и кнопочки наши появились))..мы их то-же делали на кадре №3..и музыка у нас на кадре №3..а значит нажав ВОСПРОИЗВЕДЕНИЕ..начнёт проигрываться музыка 54 Далее Теперь смотрим вниз окна программы и ставим такие же настройки как у меня: [показать]
55. Теперь смотрим справа в нашу библиотеку объектов. Вот там наша песенка:(у вас своё название) Нажимаете два раза на эту музыку [показать]В выпавшем окне обращаете внимание на этот пункт и запоминаете его целое число(то что до запятой) [показать]56 Это продолжительность нашей песенки в секундах. Теперь щелкаем по рабочему полю,в свободном месте,что-бы раскрылись СВОЙСТВА рабочей области и смотрим какая у нас стоит частота кадров ( по умолчанию, обычно 12): [показать]57 Как видите у меня стоит 12 кадров в секунду:-) Умножаем длину песни на частоту кадров. Возвращаемся к линейке кадров, к нашему слою №7(куда вставляли песенку) Песня начинается(добавляли) на третьем кадре. Значит берем то наше число и прибавляем к нему "2". У меня это число "516" (у вас своё) Значит 516+2= Не забываем активировать строку слоя №7(станет синего цвета) и "бегунком" продвигаем шкалу кадров дальше(в правую сторону)и находим число или порядковое деление соответствующее вашему числу которое вывели У меня число Не забывайте что каждое отрезочек-деление это то-же кадры К примеру есть кадр 515..а дальше просто деления до 520 кадра..то значит от 515 я и отсчитаю ещё три деления..это и будет мой кадр "518"(ну это теория..далее к делу Проверим что находимся на У меня это на [показать]58 Сразу после этого [показать]Далее..нажмите на строку слоя №7..активный синий цвет и увидите как строка кадров с музыкой окрасилась в чёрный цвет Вернём бегунок на место..к началу кадров(в левую сторону)(которым продвигали шкалу кадров,когда искали конечный кадр музыки) [показать]59 Теперь нам надо прописать скрипты:-)) Находим на нашей сцене,в слоях нашу кнопку ВОСПРОИЗВЕДЕНИЯ..у меня она с текстом "ЖМИ", делали мы её
В нижней части программы выбираем вкладку в окне "ИМЯ" вписываете англ. [показать]60 Далее..переходим во вкладку [показать]
Для того что-бы вписать скрипт делаем следующее... Сейчас нажмите левой кнопкой мышки в начале текста символов скрипта и удерживая обведите мышкой ВЕСЬ текст до последнего символа предоставленного скрипта..что-бы текст скрипта выделился.,потом правой кнопкой мышки и в списке выбираете on (release)61. Далее находим кнопку Кнопка "СТОП" находится на слое №4(активируем этот слой)и кадр этого слоя №3.. далее как и с кнопкой воспроизведения нажимаем точно так же ее,инструменто выделяем, даем ей точно так же имя,во вкладке "СВОЙСТВА" в разделе "ИМЯ" но на этот раз англ. а во вкладке "ДЕЙСТВИЯ" вписываем вот этот скрипт on (release)и так-же жмём галочку для подтверждения того что ОШИБОК НЕ ОБНАРУЖЕНО и применяем нажатием на "ОК" [показать]62 Теперь встаем,активируем слой №8(станет синего цвета), и жмём кадр №1..на цифру кадра(окрасится в красный цвет) и потом на деление ниже(деление окрасится в чёрный цвет) В нижней части программы,параметры,во вкладке ifFrameLoaded(518)( где [показать]63 Далее встаем на как всё делать вы уже знаете потом жмем по нему правой кнопкой мыши и выбираем пункт "ВСТАВИТЬ ПУСТОЙ КЛЮЧЕВОЙ КАДР". Во вкладке "ДЕЙСТВИЕ" (этого кадра).. вписываем такой скрипт: Как всё это делать Вы уже знаете и как скопировать и вставить скрипт,то-же gotoAndPlay(1);и так-же нажимаете на галочку а потом в выпавшем окошке в котором уведомляют что ОШИБКИ НЕ ОБНАРУЖЕНО жмём "ок"
если в поле,вкладки "ДЕЙСТВИЯ"..есть запись что "нет действий для данного..." то нажмите на строку слоя №8 а потом на верхнее деление кадра №2(на котором и работали),оно будет красного цвета а потом на нижнее деление кадра №2 и оно окрасится в чёрный цвет и уже потом вставляйте скрипт который скопировали 64 Далее встаем на Во вкладке "ДЕЙСТВИЕ" этого кадра вписываем такой скрипт: btnstop._visible = false;Как всё это делать и как копировать-вставлять скрипт,Вы уже знаете..Не забывайте нажать галочку для применения и проверки скрипта 65 Теперь добавим общий фон открытки Тут просто. Подбираем подходящую картинку для фона нашей флешке. Делаем в фотошопе,нужный размер ширины и высоты этой картинке Запоминаем показатели размеров Точно так же как уже делали,(когда добавляли изображение сердечек)- импортируем Вашу фоновую картинку в программу,(ФАЙЛ-ИМПОРТИРОВАТЬ В БИБЛИОТЕКУ) Всё..картинка оказалась в библиотеке Делаем из нее графический объект. Для этого как и делали уже (с сердечками) Вверху программы жмем кнопочку "ВСТАВКА", в выползшем окне выбора задачи мы выбираем пункт "НОВЫЙ СИМВОЛ". В следующей выползшей табличке выбираем пункт "ГРАФИКА". Нам откроется окно редактирования графического объекта. Просто переносим нашу картинку из списка в библиотеке на рабочее поле: Как это делать уже знаете Активируете слой(он там единственный) Находите в библиотеке своё изображение символ-РИСУНОК..жмёте..проверяете в предпросмотре что именно нужный рисунок..и зажав левой кнопкой мышки-удерживая тянете по полю на рабочую область и отпускаете [показать]66 возвращаетесь на главную сцену Нажимаете над слоями пункт [показать]67 и переносим этот объект на Для этого..
[показать]68 Теперь "подгоним" размеры рабочей области и размеры нашей фоновой картинки.. Они должны быть одинаковы..т.к всё что будет "за границами" рабочей области не вписавшееся..не будет показано в итоговом выходе.. а что-бы всё было хорошо делаем следующее.. *Смотрим в правой части программы..раздел "ТРАНСФОРМАЦИЯ"..а там указаны размеры добавленного графического объекта..Нашей фоновой картинки.. *На скрине я обозначила эти показатели. *Моя картинка имеет [показать]69 *Далее..Жмите мышкой по свободному полю рабочей области и смотрите параметры в нижней части программы во вкладке *В показателях [показать]*Далее..Нажимаете мышкой по самому изображению фоновой картинки и она активируется и если нужно стрелками клавиатуры продвиньте в нужное положение картинку что-бы "точно вписалась" в рабочую область 70 Ну и в завершение..последние действия. Вспоминаем о слое №7 на котором мы добавляли музыку У нас слой с песенкой заканчивается кадром номер таким-то) у меня это Теперь надо встать на |