В настоящем уроке мы разберем, как создать любительский flash-ролик на 1/3 экрана (хотя та же технология может быть применена и к полноэкранному ролику разница лишь в масштабах). можно просмотреть, как выглядит ролик, который был создан специально для данного урока. В этом уроке рассматривается большая часть эффектов, использованных в вышеприведенном ролике. Таким образом, прочитав данный урок и изучив исходные FLA-файлы, вы сможете создать аналогичный ролик на базе своей фотоколлекции.
Подготовка к созданию ролика
1. Первым этапом создания flash-ролика является подготовка материала. Если вы создаете ролик на 1/3 экрана, вам следует выбрать размер фотографий 480х360 при видимой области 960х360 (то есть на экране поместятся две фотографии указанного размера). Если вы хотите использовать три фотографии, размер каждой из них должен быть 320х360.
2. Выбор музыкального сопровождения играет, пожалуй, одну из важнейших ролей при создании качественного и интересного flash-ролика. Помните, что музыка должна гармонировать с изображениями на экране, поэтому к ее подбору следует отнестись очень серьезно!
3. И наконец, третьим этапом является выбор заднего фона для вашего ролика. Можно, конечно, применить и однотонный (например, черный) фон, но, на наш взгляд, это менее зрелищно. В рассматриваемом примере («Саша и Маша») в качестве фона использовано изображение «облака».
Работа в Macromedia Flash
Выбор параметров рабочей области
1. Создаем новый проект нажатием на File => New или просто на Ctrl+N .
2. В меню Properties (оно находится внизу страницы) нажимаем на кнопку Size , где по умолчанию выставлен размер 550х400 pixels; в появившемся окне выставляем размер 960х360 и в разделе Background Color задаем цвет (черный). Остальные настройки остаются неизменными (рис. 1).
3. В самом первом кадре первого слоя (Layer 1) выставляем следующие настройки:
а) Actions-Frame (находится внизу страницы) => «+» => Actions => Browser\Network => fscommand . В появившемся поле в подменю Commands for standalone player, нажатием на выбираем fullscreen . Этот скрипт автоматически разворачивает ваш ролик на весь экран;
б) проделываем те же шаги, что и в предыдущем пункте, только вместо fullscreen выбираем showmenu ; в подменю Parameters меняем значение true на false. При просмотре ролика нажатием на правую кнопку мыши в появившемся меню мы не увидим следующих параметров: Zoom In, Zoom Out, 100%, Show All, Quality, Play, Loop, Rewind, Forward, Back, Print, то есть ролик нельзя будет остановить и деформировать (увеличить, уменьшить);
в) в третий раз проделывая те же шаги, выбираем скрипт trapallkeys . Он заблокирует клавишу Esc, нажатием на которую вы можете свернуть ролик.
4. Создадим слой Layer 2, нажав на (Insert Layer ) в подменю Timeline .
5. Выберем в панели Tools (в левом верхнем углу) инструмент Rectangle Tool (прямоугольник) или нажатием на клавишу R (следите за раскладкой клавиатуры!). Теперь в созданном слое Layer 2 нажмем на первый кадр и в видимой области экрана при увеличении 25% нарисуем черные прямоугольники сверху и снизу, не заезжая на рабочую область (для иллюстрации на рисунке я выделил ее темно-серым цветом). Теперь внимание: Layer 2 должен быть последним слоем в вашем ролике, и дублировать кадры нужно до конца flash-фильма. Это необходимо для достижения эффекта ролика на 1/3 экрана, чтобы фотографии не заезжали за пределы рабочей области (рис. 2).
Заставка (презентация автора и название ролика)
В начале ролика может идти краткая презентация его автора. В данном примере презентация автора состоит из пяти слоев.
Рассмотрим, как сделана данная презентация:
а) создадим Layer 3. В первом его кадре импортируем музыкальное сопровождение (Nachalo.mp3), нажав на File => Import или просто на Ctrl+R и выбрав нужный файл. Далее в подменю Properties в пункте Sound выбираем наш импортируемый файл Nachalo, а в Sync вместо параметра Event ставим Stream (Поток) (рис. 3).
Итак, в Layer 3 появилась наша музыка. Продублируем кадры до конца композиции, нажав правой кнопкой мыши на 144-й кадр этого слоя и выбрав Insert Frame (не забывайте проделывать эту операцию и с Layer 2);
б) теперь приступим к изображениям. Создав Layer 4, импортируем нужную нам картинку (в данном случае Zastavka_001). Выравниваем ее по вертикали и по горизонтали при помощи панели Align , которую можно выставить, нажав на Windows => Align или просто на Ctrl+K . Продублируем до 97-го кадра;
в) проделав нижеуказанные операции, вы должны получить следующее: Primer_1.swf (исходник: Primer_1.fla).
В Layer 5 рисуем прямоугольник на всю рабочую область. Продублируем до 60-го кадра. Щелкнув правой кнопкой мыши на любом кадре Layer 5, выберем Create Motion Tween . На 60-м кадре щелчком по правой кнопке мыши выбираем Insert Keyframe (ключевой фрейм) (рис. 4).
Нажимаем на первый кадр Layer 5. Придаем этому объекту действие, нажав на Modify => Transform => Free transform . Далее берем за один из квадратиков на углу нашего прямоугольника и, удерживая нажатой клавишу Shift, ведем курсор к центру. Прямоугольник уменьшился. Теперь правой кнопкой мыши нажимаем на название Layer 5 и выбираем Mask. Действия над этими слоями заблокировались, но вы можете их разблокировать, нажав на нужного вам слоя (в данном случае Layer 4 и Layer 5). Таким образом мы только что создали маску;
г) создадим Layer 6. Нажав правой кнопкой мыши на 73-й кадр, вставим ключевой фрейм (Insert Keyframe). В этот кадр импортируем изображение Zastavka_002; продублируем до 144-го кадра, то есть до конца заставки;
д) последний слой рассматриваемой презентации это слой для создания маски (Layer 7). Последовательность та же, что и в пункте «в», за исключением небольших изменений в трансформации объекта (прямоугольника). Итак, в 73-м кадре нарисуем прямоугольник, закрывающий текст; продублируем его до 97-го кадра. На 97-м кадре щелчком на правой кнопке мыши выберем Create Motion Tween и сделаем его ключевым (Insert Keyframe). В 73-м кадре передвинем прямоугольник влево, чтобы он не закрывал текст (рис. 5).
Таким образом мы создали действие: передвижение прямоугольника слева направо. Теперь, чтобы движение прямоугольника происходило относительно появления текста, щелкнем правой кнопкой мыши на названии Layer 7 и выберем Mask .
Если вы выполнили все эти действия правильно, то у вас должно получиться следующее: Primer_2.swf (исходник: Primer_2.fla).
Эффекты, использованные в основной части Flash-фильма
Эффект «Яркое появление»:
Создадим Layer 1, в первый фрейм импортируем задний фон (в данном случае это облака). Продублируем до 20-го кадра. В 1-й кадр Layer 2 вставляем фотографию (foto_001), выравнивая по левому краю (Align left edge). Нажимаем на правую кнопку мыши и выбираем Create Motion Tween ; 20-й кадр делаем ключевым (Insert Keyframe). Создаем действие: нажимаем на 1-й кадр Layer 2, затем на фотографию и в появившемся нижнем подменю Properties в пункте Color вместо None выбираем Advanced (рис. 6).
После щелчка на кнопке Setting появляется окно, где вам нужно выставить параметры, изображенные на рис. 7.
В результате ваша фотография будет эффектно появляться. Те же действия можно проделать и для исчезновения фотографии для этого параметры, изображенные на рис. 7, применяем для 20-го кадра Layer 2.
«Волновой эффект»:
Создадим Layer 1, в первый фрейм импортируем задний фон (в данном случае это облака). Продублируем до 20-го кадра. В 1-й кадр Layer 2 вставляем фотографию (foto_002), выравнивая по центру (Align horizontal center), продублируем до 20-го кадра. Импортируем эту же фотографию в Layer 3, также выравнивая по центру. Нажимаем на правую кнопку мыши на Layer 3 и выбираем Create Motion Tween ; 20-й кадр делаем ключевым (Insert Keyframe). На 1-м кадре Layer 3 нажимаем на Modify => Transform => Free transform . Дальше щелкаем на одном из угловых квадратиков этой фотографии и, удерживая нажатой клавишу Shift , перемешаем курсор немного вверх. В результате данная фотография увеличится. Придадим ей прозрачность так, как изображено на рис. 8.
Таким образом, в подменю Properties в пункте Color вместо параметра None мы выбираем Alpha и вместо значения 100% (которое стоит по умолчанию) выставляем 0%, то есть фотография станет полностью прозрачной. Затем создаем маску, рисуя в Layer 4 прямоугольник размером с фотографию. И наконец, нажав правой кнопкой мыши на названии Layer 4, выбираем Mask .
Эффект «Трансформация»:
В этом пункте мы рассмотрим несколько различных трансформаций фотографии: поворот по горизонтали, по вертикали, поворот под углом и т.д. Итак, создадим Layer 1, в первый фрейм импортируем задний фон (в данном случае это облака). Продублируем до 100-го кадра. В 1-й кадр Layer 2 вставляем фотографию (foto_003), выравнивая по центру (Align horizontal center), продублируем до 100-го кадра. Нажимаем на правую кнопку мыши на Layer 2 и выбираем Create Motion Tween . Затем 10-й кадр делаем ключевым (Insert Keyframe) и создаем действие, нажав на Modify => Transform => Free transform и держа один из квадратиков по краям фотографии, поворачиваем курсор мыши вправо на нужный нам угол (в данном случае приблизительно на 30?). 30-й кадр делаем ключевым; нажимаем на Modify => Transform => Flip horizontal (фотография повернулась по горизонтали). Далее 50-й кадр делаем ключевым, нажимаем на Modify => Transform => Remove transform (все действия, произведенные над фотографией, исчезают). Затем на 50-м кадре осуществляем следующие трансформации: Modify => Transform => Flip horizontal, Modify => Transform => Flip vertical , то есть фотография сначала повернулась по горизонтали, а потом по вертикали. И наконец, 75-й кадр делаем ключевым (Insert Keyframe) и нажимаем на Modify => Transform => Flip vertical (фотография повернулась по вертикали).
1. Для того чтобы ролик смотрелся красиво, музыкальное сопровождение должно соответствовать видеоряду. Пытайтесь передать динамику музыкального сопровождения посредством ритмического представления фотографий, используя для этого различные эффекты.
2. Не бойтесь экспериментировать с эффектами, особенно с использованием маски. Чем больше разнообразия в эффектах, тем удачнее будет ваш ролик.
3. В ролик можно внедрять и текст, содержащий смысловую нагрузку, соответствующую тематике вашего проекта. В ряде случаев это играет важную роль в восприятии flash-фильма.
На данной web странице Вашему вниманию представлены программы для создания и редактирования флеш анимации. С их помощью Вы сможете реализовать собственные идеи в анимированные ролики для Вашего сайта.
Флеш редактор – это программа для создания flash анимации и редактирования уже готовых флеш роликов.
Формат FLA - это исходный документ вашего клипа. Открыв его, вы попадаете в программу Macromedia Flash и можете дальше редактировать клип.
Формат SWF - это исполняемый файл Flash, при "клике" мышью на нем вы имеете возможность просмотреть клип с помощью программы Macromedia Flash Player.
Анимация с помощью Adobe Flash Professional
Adobe Flash Professional CS3 – достоинства и функциональности данной программы можно описывать очень долго. Данная программа является безусловным лидером в среде флеш технологий. Adobe Flash Professional пользуются, как профессиональные разработчики Web-сайтов, так и flash дизайнеры.
С помощью этой программы можно реализовать во флеш даже самую больную фантазию. В общем если Вы решили создавать профессиональные анимированные флеш файлы , то Adobe Flash Professional – это именно та программа, без которой Вам не обойтись.
Объём зависит от версии от 500 Mb.
На данный момент Adobe Flash Professional CS5 - новая версия программы для работы с анимацией и мультимедиа.
ОС: Windows XP/Vista/7
Скриншот программы:
скачать Adobe Flash Professional CS3Возможно, для начинающего web мастера создание флеш анимации с помощью программы Adobe Flash Professional покажется, чем то сложным и не досягаемым.
В этом случаи не стоит отчаиваться и бросать начатое. Попробуйте свои флеш идеи с программой Swishmax.
Swishmax – флеш редактор
SwishMAX – это альтернативная программа с дружественным и простым интерфейсом для создания flash-анимации, которая является менее функциональной, по сравнению с предыдущей, но при этом позволяет получить результат хорошего качества. Главное преимущество донного flash редактора - это простота использования. Даже начинающий пользователь, имея под руками видео уроки, за короткое время сможет создать с ее помощью профессиональные флеш - ролики.
Объём: 9.27 MB.
Язык интерфейса - русский есть.
Операционная система: Windows 98/Me/NT/2000/XP
Скриншот программы:
скачать Swishmax
Alligator Flash Designer
Следующая flash программа является ещё более простой, как по функциональности, так и по содержимому интерфейса. Возможности этого флеш редактора позволяют с лёгкостью за считанные минуты создавать flash баннер для сайта.
Имеется более 130 эффектов: исчезновение, изменение масштаба, вращение. Анимированные рисунки, фигуры или текст, и даже звук без проблем добавляются к Вашей Flash-анимации.
Здесь так же можно указать OnClick или OnOver.
Объём: 5.3 MB.
Язык интерфейса - русский есть.
ОС: Windows XP/Vista/7
Скриншот программы:
скачать Alligator_Flash_Designer_7.0
Ещё одна программа, которая не является flash редактором анимации, но её возможности необходимы для начинающего веб дизайнера.
Flash Decompiler Trillix
Flash Decompiler Trillix – основное предназначение этой программы - экспорта SWF файлов обратно в FLA формат одним нажатием кнопки мыши. Извлекает все объекты Flash из SWF файла и сохраняет их во FLA файл, который в дальнейшем можно редактировать во Flash.
Достоинство Flash Decompiler - редактирование звуков, изображений, цвета, градиента, линий, динамических текстов и ссылок без конвертации во FLA.
Объём: 7.27 MB.
Язык интерфейса - русский есть.
ОС: Windows XP/Vista/7
Скриншот программы:
скачать Flash Decompiler Trillix
October 13, 2014
Исходное сообщение Flash_MagicУрок. Создаём флеш-ролик с помощью программы SWFText
Для того, чтобы создать такую флеш-открытку, нам потребуется сама программа, которую можно скачать SWFText
У кого не получится скачать по этой ссылке, то внизу страницы есть ещё одна ссылка, с помощью неё тоже свободно можно закачать эту программу.
Это значок программы:Открываем программу.
Жмём на верхнюю кнопочку "Ролик", здесь устанавливаются размеры окна флешки, обычно задаются автоматически, но вполне возможно вручную изменить размер флешки в соответствии с вашим желанием.
Жмём на следующую кнопочку "Фон", ставим точку в окне "изображение", далее жмём на "обзор" и находим у себя на компьютере нужное изображение.
Далее выбираем "фоновые эффекты" по своему вкусу.Я выбрала "вращение звезды"
На следующем этапе нажимаем на кнопку "текст", открывается следующее окно:Здесь мы будем писать наш текст, который сопровождает нашу картинку. Для этого нажимаем на кнопку "добавить", в новом открывшемся окне пишем наш текст.
Если у вас текст короткий, то может уместиться в одном окне, ежели он длинный, как у меня, то следует применить несколько окон с написанием текста, при просмотре эти окна будут открываться последовательно, друг за другом, пока не будет открыт весь, написанный мной текст. И так: жмём на кнопку "добавить" и пишем первый столбик нашего текста, далее на "ОК" , текст отобразится в верхнем окне и на просмотре,
Снова жмём кнопку "добавить" и пишем следующий столбик нашего текста, жмём "ОК"
И т. д. пока не будет написан весь нужный нам текст.
Открывается окно с текстовыми эффектами, т.е способ загрузки текста на страницу.
Эффектов достаточно много, выбираем по своему вкусу, я выбрала "Двойной сканер".
Теперь выбираем кнопку "шрифт", откроется окно с настройками шрифта:
В этом окне мы выберем шрифт, цвет шрифта, размер шрифта, текст должен обязательно вписываться в окно, поэтому следует уменьшить или увеличить размер шрифта.
После каждого изменения любого из параметров, предварительный просмотр происходит автоматически.
По сути на этом можно закончить, я сделала именно так. Но можно и продолжить и добавить звуковой файл, а точнее музыкальный файл.
Выбираем команду "Звук", кнопка находится чуть ниже, нажимаем на неё. Откроется окно с настройкой звукового сопровождения.Выбираем музыкальный файл с помощью кнопки "обзор", файл должен быть сжат в размере, как это делается можно посмотреть несколькими постами ниже.
Галочки расставляем как у меня. В этом случае музыкальный файл проиграет только 1 раз.
Внизу справа есть кнопочка "Публикация", жмём на неё и сохраняем наш флеш-роликЗагружаем его к себе в дневник с помощью команды "обзор", как обычно.
Удачи вам, дорогие мои друзья! Будут вопросы, рада буду помочь.
Но чтобы они работали, нужно делать их ссылками. Любой баннер должен при нажатии на него направлять посетителя туда, куда Вам нужно, иначе flash-ролик будет просто картинкой, пусть даже анимированной.
С помощью html-кода это сделать не получится. Поработать придется именно с нашим flash-роликом, в программе Macromedia Flash Professional .
Откройте свой fla файл
в программе Macromedia Flash, и сделайте новый слой на временной ленте с помощью меню Insert — Timeline — Layer
, или с помощью нажатия на иконку создания нового слоя Insert Layer
. Можете переименовать этот новый слой с помощью двойного клика по названию. Назовите его, например, link
. Название, в принципе, большого значения не имеет. Главное, чтобы новый слой располагался выше всех других слоев. Если он ниже — перетаскиваете его вверх.
Затем в этом слое выберите инструмент Rectangle
(прямоугольник), и в окне Color
в закладке Color Mixer
пропишите цвет заливки прозрачный: Alpha 0%
, а цвет линии — без форматирования (белый квадрат, перечеркнутый красной линией). И нарисуйте прямоугольник там, где у Вас будет ссылка. Если ссылка на весь flash-ролик
— рисуйте прямоугольник на весь рабочий лист.
В том, что прямоугольник действительно существует, Вы можете убедиться, если выберете инструмент Selection (выделение), и кликните по рабочей области. Вся рабочая область будет выделена. Убрать выделение Вы можете, щелкнув инструментом Selection за пределами рабочей области, или отменив операцию выделения с помощью меню: Edit — Undo Change Selection .
Теперь откройте закладку Info
в окне Align&Info&Transform
. Если этой закладки у Вас нет, поставьте галочку в пункте Info
в меню Window
. В этом окне Вы сможете подкорректировать размеры прямоугольника. Выделяете его еще раз, и если ссылка у Вас должна быть на весь flash-ролик, делаете в Info
такие же размеры, как размеры Вашего рабочего листа. Кроме того, координаты крайней точки в верхнем левом углу должны быть равны нулю.
После этого выделяете прямоугольник, если он не выделен, и преобразуете в кнопку с помощью меню Modify — Convert to Symbol
, или с помощью нажатия клавиши F8
. В открывающемся окне ставите точку напротив пункта Button
(кнопка).
Нажимаете клавишу F9
, чтобы открыть панель Action
. Выбираете язык программирования Action Script 2,0
. Нажимаете на рабочую область, чтобы выделить кнопку. При этом в заголовке панели Action
появится название: Action — Button
. Проследите, чтобы название было именно таким, а не Action — Frame
(это название появляется при выделении кадра, а не кнопки).
Вставляете следующий код в окно панели Action
:
on (release) {
getURL("
http://сайт
", _blank);
}
В этом коде Вы измените адрес моего блога на тот адрес, куда будет вести Ваша ссылка. Ссылка будет открываться в новом окне. Если Вы хотите, чтобы ссылка открывалась в том же окне, что и flash-ролик , убираете из кода _blank , то есть код в этом случае будет таким:
on (release) {
getURL("
http://сайт
");
}
Когда вставите код, сохраняете как flash-ролик, с расширением .swf , и уже можете этот flash-ролик размещать на своем хостинге с помощью FTP-соединения , FileZilla, или любой другой программы.
После размещения, для того, чтобы ролик отобразился на сайте, или на странице блога, прописываете в соответствующем месте следующий код:
В котором поставите вместо URL-адреса моего flash-ролика свой адрес. Допустим, Вы положили свой flash-ролик в папку mojsajt.ru, в этой папке в папку flash, и название ролика у Вас mojrolik.swf. В этом случае, URL-адрес Вашего flash-ролика будет: http://mojsajt.ru/flash/mojrolik.swf.
Также проставьте свои размеры (ширина и высота в первой строчке кода).
Вот, в принципе, и все. Если flash-ролик сразу не появился, подождите, иногда он появляется не сразу. И в том случае, когда Вы что-то изменили в своем flash-ролике, и закачали новый вариант на хостинг, изменения тоже могут произойти через некоторое время. Подождите минут десять, и тогда уже возможно, сможете эти изменения увидеть.
Видео о том, как сделать flash-ролик баннером в программе Macromedia Flash Professional
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
