Софт для flash анимации. Создание флеш анимации
Бесплатная программа для создания флеш-анимации с помощью готовых апплетов.
Многие из Вас, я думаю, когда-нибудь пытались создавать свои собственные сайты (а может быть, Вы даже являетесь обладателем весьма популярного портала).
Так или иначе, каждый сталкивался с проблемой эффектного оформления своих web-страничек. И, поскольку статический HTML-код постепенно уходит в прошлое, многие сегодня обращают свое внимание на такие популярные технологии, как JavaScript и Flash. Они позволяют создавать красивые анимированные динамические странички с расширенной функциональностью.
Выберите «Короткие» в меню. Чтобы увидеть больше фреймов на временной шкале, мы также можем выбрать параметр «Малый», но пока этого не стоит делать, потому что мы будем работать главным образом в первых кадрах наших слоев. К сожалению, выбор этой опции, безусловно, не помогает сохранить пространство экрана. Итак, давайте начнем рисовать нашего героя. Не забудьте разместить каждый объект и, в основном, фигуру, которую мы создаем, на отдельном слое в первом кадре. Итак, давайте начнем с общей схемы персонажей.
На панели «Инструменты» выберите инструмент «Оваль», выключите границу, установите цвет заливки оранжевым и вокруг середины рабочей области. Нарисуйте овал, похожий по размеру на форму вашего персонажа и близкий к форме. Теперь выберите инструмент «Выделение», поместите курсор на край ниже левой половины нашей формы, возьмите край и перетащите, чтобы создать форму как можно ближе к нужной. Повторите ту же процедуру на противоположной стороне.
Для специалиста не составит особого труда сделать небольшой анимированный flash-баннер, однако, что делать остальным непосвященным? Если скрупулезное изучение языков программирования не входит в Ваши ближайшие планы, то можно как всегда прибегнуть к помощи специализированного софта. Сегодня мы ознакомимся с основами работы в программе Advanced Effect Maker .
Вы должны добиться такого же эффекта. Щелкните правой кнопкой мыши на выбранном объекте и выберите «Распространять слои». В ключевых кадрах каждого слоя у вас теперь одинаковая форма. Заблокируйте верхний слой и измените цвет нашего объекта на черный. Если вы преуспели, вы не заметите этого изменения. Теперь щелкните правой кнопкой мыши по нашей фигуре и в раскрывающемся меню выберите «Свободное преобразование». Теперь немного экспериментируйте и используйте курсоры, чтобы слегка переместить черную фигуру, чтобы получить правильный эффект.
Эта утилита позволяет создавать всевозможные flash и JavaScript эффекты, причем как свои собственные «с нуля», так и на основе готовых шаблонов! Advanced Effect Maker существует в нескольких редакциях, которые отличаются количеством готовых эффектов и степенью свободы пользователя. Сравним максимальную и бесплатную конфигурации:
Сравнение бесплатной версии флеш-редактора Advanced Effect Maker Free Edition с коммерческой версией Commercial Edition
Самый большой недостаток бесплатной версии программы — наличие своеобразного преаплодера, который позволяет перейти к просмотру некоторых готових эффектов только после клика на созданном баннере. На этом все различия в принципе и заканчиваются:).
Другие элементы нашего характера были сделаны аналогичным образом. На площади у нас есть способность трансформировать обе стороны и рога. Создайте новый слой, выберите инструмент «Прямоугольник», а затем в палитре «Инструмент», в параметрах, доступных для выбранного инструмента, щелкните значок. Установите цвет заливки немного темнее цвета, который вы использовали ранее.
Для этого щелкните значок заливки и разверните окно с доступными цветами, выберите в правом верхнем углу значок. Теперь измените цвет с помощью ползунка - слегка сдвиньте его. Цвета, которые вы создаете таким образом, позже доступны в нижней части палитры заливки. Теперь нарисуйте квадрат квадрата в тень, которую вы хотите получить. Теперь возьмите правые углы квадрата и поверните их к краю фигуры, как на изображении.
Установка программы
Установка Advanced Effect Maker происходит стандартным образом, поэтому перейдем сразу к непосредственной работе с программой:
При первом запуске нам предложат ознакомиться с лицензионным соглашением. Чтобы принять его нажмите кнопку «I agree». После этого можно приступать к изучению интерфейса утилиты:
Выровняйте другие края и стороны квадрата, чтобы получить правильный эффект. Некоторые из них кажутся более сложными, чем крылья или грива, но на самом деле их создание - это всего лишь вопрос обучения. Кроме того, всегда работайте как можно больше. Это обеспечит вам большой контроль и точность в том, что вы делаете. Вы уже знаете технику создания подобного персонажа. Этот метод требует немного тренировки, поэтому не ожидайте прямолинейных эффектов сразу. Попытайтесь улучшить свою технику, упорядочивайте новые идеи.
Вскоре вы создадите интересную коллекцию персонажей, которая является личным сокровищем каждого аниматора. Вы также узнаете, как лучше рисовать персонажей таким образом, чтобы их можно было анимировать позже. Вы заметили, например, почему у большинства героев Ханны-Барберы есть видимый элемент, отделяющий голову от ствола? Это позволяет аниматорам легко перемещать голову персонажа, не перемещая остальную часть тела персонажа.
Интерфейс и работа с редактором
Несмотря на английский язык, здесь все просто и наглядно. Окно Advanced Effect Maker разделено на две части. В левой находится всего две большие кнопки: первая для входа в галерею доступных эффектов, а вторая — для добавления дополнительных апплетов (это если Вы захотите купить их;)). В правой же части мы видим каталог доступных шаблонов с подразделами и окном предпросмотра, а также область редактирования эффекта.
Без йоги голова плюшевого медведя Йоги выглядела бы неестественно! После того, как вы подготовили свой персонаж, перед преобразованием вы должны превратить каждый элемент нашего героя в символ. В доступных вариантах выберите Графический символ. Их основное преимущество заключается в том, что перетаскивание из библиотеки на основную сцену не требует тестирования фильма, чтобы увидеть анимацию, содержащуюся в них. В следующий раз вы сможете создавать символы «на лету», работая с фигурами. Важно, чтобы все элементы на сцене были закрыты в символах.
Чтобы начать редактировать нужный шаблон, достаточно нажать на его изображение, а если хочется просто посмотреть, как он работает, тогда жмите надпись «Preview» под картинкой:
При открытии нужного эффекта может появиться сообщение об уже существующем файле. Если такое произошло, то просто игнорируем его, нажимая кнопку «Ok»:
Есть несколько причин, почему вы должны это делать. Прежде всего, когда вы закрываете фигуру в символе, она идет в библиотеку. Наконец, хорошо организованная библиотека помогает нам сохранять порядок, и с большими проектами, состоящими из множества отдельных элементов, невозможно сохранить всех на основной временной шкале. Важно, чтобы вы разработали хорошую привычку называть оба символа и соответствующие слои. На временной шкале вы также можете отображать информацию в виде комментариев, добавленных в отдельные кадры.
С помощью этой опции вы можете ввести любой текст в поле метки рамки, а затем указать, будет ли это имя фрейма, комментарий или так далее. якорь. Стоит создать систему именования и придерживаться ее в каждом проекте. Вы можете считать это банальным, но это связано с последствиями использования имен, которые работают намного быстрее и легче. Особенно при создании персонажей вам придется использовать десятки символов. Вы также будете использовать параметр «Обмен свопами» на панели «Свойства», где вы можете поменять один символ за раз в любом временном интервале.
Если шаблон открылся успешно, мы сможем увидеть несколько вкладок, которые содержат всевозможные настройки:
Настройки программы и создание анимации
Первая вкладка — «General». Здесь содержатся общие настройки проекта. Обычно это размеры (ширина — width и высота — height), имя (file name), качество будущего файла (quality), а также режим окна флеш-ролика (window mode).
Это бесценно при анимации, когда в библиотеке есть несколько разных позиций, таких как рука или нога. Затем просто используйте параметр «Подстановочный знак», чтобы заменить соответствующие элементы. При правильном именовании соответствующие символы будут расположены рядом друг с другом и легко заменять их, не копая всю библиотеку. Другим удобным способом организации содержимого вашей библиотеки и слоев на временной шкале являются папки. Мы создаем папки в библиотеке, щелкнув правой кнопкой мыши в свободном поле библиотеки и выбрав опцию «Новая папка» в раскрывающемся меню.
Вторая вкладка — «Color», как видно из названия, отвечает за цвета, используемые в проекте. Здесь все предельно ясно, поэтому перейдем к следующей — «Messages»:
Здесь у нас имеется два поля. В первое поле (слева) вводим текст, который нам нужно вывести со спецэффектом, а во втором — ссылку, по которой пользователь перейдет, кликнув по нашему баннеру. Плюс Advanced Effect Maker в том, что ввести мы можем неограниченное количество строк текста (равно как и ссылок), но главный минус — отсутствие поддержки русского языка:(.
Теперь мы можем переименовать нашу папку и поместить в соответствующие символы и другие объекты, присутствующие в библиотеке. Используя аналогичную операцию, мы можем создать папку на временной шкале, в которой мы будем размещать соответствующие слои.
Для этого вы можете выбрать и скопировать все кадры на временной шкале, а затем создать новый символ и вставить его туда. Теперь перетащите наш символ на сцену и на вкладку «Эффекты», установите «Цвет в оттенок» и выберите один из серых цветов. Если символ анимирован, просто повторите ту же операцию, скопировав все кадры или дублируя символ в библиотеке, а затем выполните ту же операцию.
Последующие две вкладки служат для управления шрифтами (Fonts) и свойствами анимации (Others), соответственно. Один нюанс: если Вы хотите использовать альтернативные TTF-шрифты, их придется предварительно конвертировать для совместимости с Advanced Effect Maker. Для этого следует из меню «Tools» вызвать инструмент «Convert Fonts» и, выбрав нужный шрифт, нажать кнопку «Convert»:
Фильтры доступны на панели «Свойства» и могут использоваться для видеоклипов, текста и кнопок. Фильтры добавляются после выбора объекта и выбора вкладки «Фильтры» «Свойства» на панели «Свойства». Мы увидим выпадающее меню, из которого мы можем выбрать фильтры. Теперь сделаем аналогичную операцию для нашей тени. Выберите объект, затем щелкните вкладку «Фильтры» и выберите фильтр «Размытие».
Чтобы скрыть конкретный клип, просто выберите параметр «Скрыть объект» на вкладке «Фильтры». По-прежнему стоит изменить цвет или установить черный на 50%. В обоих случаях мы должны получить аналогичный эффект. Это бесценный инструмент для любого аниматора. Это полезно при редактировании и позиционировании объектов анимации, особенно при создании анимации с временной задержкой.
Когда все изменения будут внесены, мы можем нажимать кнопку «Create Applet». После чего в папке назначения проекта будет создано два файла: SWF (непосредственная анимация) и HTML (содержит инструкции по внедрению полученной анимации в код Вашей странички:
Когда мы это сделаем, мы увидим выделенную серой область заголовка. Эта область может быть растянута свободно, щелкнув один из ее углов и перетащив ее в любую сторону. Другие объекты в других кадрах анимации исчезают. Это представлено следующим образом. Включение этой опции делает путь нашего объекта более прозрачным. Лук 5 - отображает пять кадров на каждой стороне изображения, которое мы выбираем. Отображает все кадры с каждой стороны выбранного кадра. Лук на каждой стороне нашего выбранного изображения. . Теперь перейдите к 20 кадрам и сдвиньте шар вниз с помощью курсора.
Сохранение результатов работы
Однако это еще не все. С Advanced Effect Maker Вы можете создать свой собственный эффект на базе уже существующего, либо полностью «с нуля»! Для этого следует перейти в меню «Tools» и активировать пункт «Plugin Maker»:
Здесь сначала потребуется задать имя для нового проекта, а также некоторые другие параметры (не обязательно). После этого можно будет нажимать кнопку «Create Applet», и мы перейдем непосредственно в окно редактора эффектов:
Отметьте первый кадр щелчком. На панели «Свойства» теперь доступна опция «Простота», которую мы будем использовать сразу. Наша цель - создать плавное движение шара, которое должно отскакивать от поверхности. Принимая во внимание земной закон гравитации, шар, выброшенный вверх, имеет высокую начальную скорость, которая затем уменьшается и достигает 0, когда мяч находится в самой высокой точке. Затем он начинает медленно падать, ускоряясь. Если вы хотите посмотреть нашу анимацию сейчас, это не будет выглядеть реалистично.
Для кадра 20 мы повторяем операцию, введя значение. Вы можете ввести это значение с клавиатуры или использовать ползунок. Проверьте свою анимацию сейчас. Мяч выглядит намного реалистичнее - сначала движется медленнее - падает и ускоряется. Теперь мы сделаем так же, как мяч. Посмотрите, как выглядит наша анимация.
Здесь присутствует несколько кнопок, которые позволяют ввести в сценарий будущего эффекта некоторые стандартные функции. Проблема состоит только в том, что все нужные переменные и значения придется вписывать вручную самостоятельно, а здесь уже требуются кое-какие навыки программирования на ActionScript или JavaScript:(.
Этот инструмент намного более точен и предлагает несравненные большие возможности. В новом слое или новом документе снова нарисуйте аналогичный шар в первом кадре. Ваши глаза будут видеть ось и линию, похожую на линейный график. Вертикальная ось указывает процент времени анимации, тогда как горизонтальная ось сообщает нам о кадре, в котором мы сейчас находимся. Как только вы нажмете на простую анимацию, вы заметите, что на ней появился черный квадрат - этот панк можно легко вытащить, изменив нашу анимационную кривую.
Как вы можете видеть, изменяется изменение между временем воспроизведения и отдельными кадрами. Давайте проанализируем его на примере. Вы уже должны точно знать, что происходит на оси. Как вы можете видеть, кривая иллюстрируется тем фактом, что наша анимация изначально ускоряется, чтобы замедляться в последних кадрах.
Выводы
Advanced Effect Maker может прийтись по вкусу начинающим веб-дизайнерам, поскольку позволяет без особых усилий создавать довольно эффектные баннеры, анимированные меню, слайдшоу, и даже небольшие игры (типа пятнашек). Недостаток же в виде преаплодера (если он имеется в выбранном эффекте) можно устранить, используя специальные программы-декомпиляторы SWF-файлов (в том числе и бесплатные) ;).
С помощью этой опции мы можем реализовать интересные и реалистичные эффекты, такие как постепенное затачивание объекта. Мы сделаем каждый отскок, а затем вернемся к первоначальной форме. Для этого предположим несколько кластеров до и после отражения. Вероятно, вы помните первые «анимации», которые вы создали на бумаге. На краю определенного количества карт вы рисовали персонажей, позиции которых отличались незначительно, а затем, перемещая карты, вы наблюдали за эффектом движения. Именно на этой основе созданы все анимации.
Он должен выглядеть примерно в 20 кадрах. На этом этапе все происходит так быстро, что наш глаз не будет регистрировать «прыжок» даже при значительном изменении формы. В раме 21 растяните наш шар вертикально и используйте курсоры, чтобы расположить вас.
Удачи Вам во всех начинаниях и творческих успехов!
P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.
Бесплатная программа для создания флеш роликов практически любой степени сложности! Включает в себя практически все необходимые инструменты для повседневной работы с flash и может быть использована как новичками, так и профессионалами. Основным отличием и достоинством данной программы является поддержка ActionScript 2.0, без которого просто нельзя представить создание профессионального флеш-контента.
Кажется, Дима Билан прав, говоря, что невозможное - возможно:). Еще совсем недавно веб-разработчикам приходилось либо пиратствовать, либо платить довольно большие деньги за возможность работать с флеш-анимацией. И вот, наконец, настал тот час, когда появился третий полноценный вариант - использовать бесплатный flash-редактор.
Ранее на нашем сайте уже была одна подобная программа , но ее минус был в некоторой устарелости, ограниченном наборе инструментов и отсутствии поддержки языка программирования ActionScript, который так нужен для создания сколь-нибудь функциональных сайтов, игр и т.п.
Сегодня же я Вас познакомлю с вполне современным флеш-редактором, который может практически на равных соперничать с именитым Adobe Flash - Vectorian Giotto .
Сравнение Vectorian Giotto с платным аналогом
Как видим, разработчики Vectorian Giotto постарались на славу и попытались вместить в свою программу максимально возможный набор функций, аналогичных Adobe Flash. Кроме того, большинство «горячих» клавиш тоже совпадают, поэтому тем, кто привык работать с Эдобовским редактором, не составит особого труда перейти на бесплатную платформу Vectorian Giotto!
Ну, а на «десерт» в бесплатном редакторе есть еще и то, чего иногда так не хватает «старшему брату» - встроенная библиотека анимационных эффектов, которые придутся по вкусу особенно тем, кто создает флеш-баннеры.
Подготовка к работе
Для начала работы с Vectorian Giotto нам потребуется скачать архив с инсталлятором, который весит, между прочим, всего 8 мегабайт! Когда архив будет загружен, откройте его и запустите файл VectorianGiotto.exe .
Несмотря на то, что установка (да и сама программа, как ни прискорбно:)) англоязычная, затруднений она вызвать не должна, поскольку менять что-либо в предложенных по умолчанию настройках необязательно. Просто кликаем кнопку «Next» несколько раз и дожидаемся окончания процесса инсталляции;).
Первое знакомство с интерфейсом
По окончанию установки, если мы ничего не меняли в стандартных настройках, перед нами появится во весь экран рабочее окно Vectorian Giotto:
Как я уже говорил, интерфейс программы англоязычный, поэтому во избежание недоразумений и кривотолков при выполнении дальнейших действий, описанных в статье, я бы хотел ввести кое-какой понятийный аппарат:). Начнем, как обычно, сверху вниз и слева направо.
Строка меню. Это панель, на которой находятся все менюшки программы Vectorian Giotto. При работе с анимацией Вам могут понадобиться такие разделы, как «File» (для сохранения и экспорта в SWF своей анимации), «View» (для настройки параметров отображения рабочей области), «Modify» (для управления параметрами текущего документа и работы с библиотекой эффектов) и «Window» (для настройки отображаемых модулей и панелей программы).
Основная панель инструментов. Сюда вынесены кнопки управления действиями проекта и панель воспроизведения анимации.
Панель рисования (занимает всю левую часть окна программы). Здесь находятся все необходимые инструменты для создания любых желаемых объектов Вашей анимации, а также кнопки, позволяющие настраивать параметры нужных инструментов.
Раскадровка (или таймлайн). Позволяет управлять ячейками для кадров и созданными слоями.
Панель управления цветом. С ее помощью Вы сможете быстро менять цвет ранее созданных фигур. Также служит для выбора типа заливки объектов Вашей анимации (сплошная, градиентная и т.п.).
Рабочая область. Представляет собой виртуальный лист «бумаги», предназначенный для рисования Ваших анимаций:).
Редактор ActionScript. Если Вам нужно создавать не простые баннеры, а нечто более сложное, включающее кнопки и всевозможные интерактивные объекты, то без редактора скриптов Вам не обойтись.
Панель структуры клипа. Отображает все фигуры, находящиеся «в кадре» и позволяет быстро переключаться между ними и управлять их последовательностью.
Панель свойств. У каждого объекта во флеше есть определенные свойства. Для управления ими и служит данная панель.
Панель трансформации. Позволяет быстро изменять размеры и положение выделенного элемента анимации.
Библиотека элементов. Представляет собой список созданных или импортированных объектов, которые могут быть (и неоднократно!) вставлены в анимацию.