Как сделать спрайтовую анимацию в adobe flash cs6

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

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

Я буду работать в Adobe Photoshop CS6. Интерфейс у меня русский, поскольку я пишу с работы.

Дома у меня стоит английская версия, и вам я советую учиться на английской версии, вот почему:

Вы легко сможете ориентироваться в программе на любом языке (после английского на русском вы легко сможете находить инструменты, ведь это ваш родной язык, а после русской могут возникнуть проблемы с адаптацией).
Большинство хороших уроков написаны именно на английском.
Локализации программы часто отличаются друг от друга, качество перевода интерфейса иногда оставляет желать лучшего. Некорректный перевод инструментов может запутать начинающего изучать программу человека.

Приступаем к созданию анимации в фотошопе CS6

Создаем новый документ File -New (Ctrl+N).

Создаем фон

Я заранее подбираю материалы, которые буду использовать в работе(фоны, шрифты и т.п.).

Выделяем окно с текстурой, перетаскиваем слой из палитры слоев на слой с баннером.

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

После того, как подогнали текстуру по размеру баннера, переходим к ее цветокоррекции.

Я выставила такие настройки, чтобы добиться яркого, насыщенного цвета:

Пишем текст

Создаем новый слой (Ctrl+Shift+N) либо щелкаем по иконке нового слоя в палитре слоев.

Выбираем шрифт. Я выбрала Lobster (нажмите, чтобы скачать). Как добавить шрифт в фотошоп. Пишем любой текст. Я выбрала размер шрифта 72pt.

Добавляем блеск тексту

Создаем новый слой (Ctrl+Shift+N).

Выбираем инструмент Brush Tool (B).

Загружаем и устанавливаем кисти со звездочками. Как установить кисти читайте здесь.

На новом слое рисуем звездочки в произвольных местах. Чтобы звезды получились поярче, кликаем по несколько раз в одном месте. Вот что получилось у меня:

Делаем дубликат слоя (Ctrl+J). Щелкаем на иконку глаза в палитре слоев, чтобы скрыть видимость предыдущего слоя.

После того, как передвинете все звезды на другое место, создайте дубликат слоя, на котором работали (Ctrl+J), скройте предыдущий слой в палитре слоев, щелкнув на глазик, и снова повторите операцию по перемещению звезд на новые места, вы также можете дорисовать несколько новых звезд.

Таким образом, у нас получится 3 слоя со звездами, в каждом из которых звезды будут находиться на разных позициях.

Переходим к созданию анимации в фотошопе

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

У нас открылась панель покадровой анимации. Сейчас в ней только один кадр, в котором показаны все видимые слои (содержание выделенного кадра показывается в основном окне на мониторе).

Переходим в палитру слоев — F7. Нам необходимо сейчас отключить два верхних слоя со звездами(щелкните по глазу), оставив видимым только один. Это будет первым кадром.

Далее создаем второй кадр, щелкнув на соответствующем значке внизу временной шкалы.

Перейдите в палитру слоев. Отключите первый слой со звездами, включите второй. Таким образом, во втором кадре у нас будут показываться звезды уже в других местах.

Опять кликаем на значок нового кадра. Выключаем второй слой со звездами, включаем третий.

Обратите внимание на время под каждым кадром, это продолжительность показа кадра. 5 сек, которые стоят по умолчанию, для нас очень много — анимация будет тормозить, щелкнем на стрелочку и установим длительность каждого кадра по 0,1 сек.

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

Между первым и вторым ключевыми кадрами у вас появилось 2 промежуточных.

Теперь встаем на 2ой ключевой кадр( теперь он 4ый по счету), опять нажимаем на значок с кружками и создаем еще 2 промежуточных кадра. Теперь нам осталось замкнуть последний и первый кадр для получения плавной анимации.

Представляем вашему вниманию курс, который будет невероятно полезным для всех, кто интересуется классической анимацией. Курс разбит на 6 частей. В итоге вы поймете, как делать мультики в Adobe Flash.

Уроки подойдут как для начинающих, так и для тех, кто в теме

Вот что в итоге получится:

Курс по созданию мультика во Флеш:

1. Настройка проекта

2. Работа с задним фоном

3. Риггинг

4. Анимация лица и мимики

5. Анимация всего тела

6. Подготовка и публикация проекта

Не все знают, что в редакторе Adobe Flash присутствует возможность превратить анимацию, созданную вручную, в код ActionScript 3.0. Полученный AS-код можно затем использовать для анимирования других объектов (потомков DisplayObject-а) или применить в других flash-проектах. Рассмотрим, как это делается.

Жмём по этому пункту. Появляется окно:

Код ActionScript 3.0:

import fl.motion.Animator; var new_mc_xml:XML = ; var new_mc_animator:Animator = new Animator(new_mc_xml, new_mc); new_mc_animator.play();

Как можно видеть из приведённого выше кода, Adobe Flash сохраняет анимационные эффекты в виде XML-а (переменная new_mc_xml). XML очень удобен для хранения и передачи данных. А, кроме этого, он легко читается человеком. При желании в него можно внести изменения.

А для подключения анимационного эффекта к тому или иному объекту на сцене флеш-ролика используется класс Animator. Клнструктор объектов Animator принимает два значения:

1.) XML с описанием эффекта (new_mc_xml).

Конечно, применение описанного в этом посте подхода для создания такого простого эффекта, как изменение координат мувиклипа, является неоправданной роскошью. Но если вам требуется запрограммировать какой-то более сложный анимационный эффект, то умение редактора Adobe Flash генерировать код может очень сильно сэкономить ваши силы и время.

Привет всем на Zura — Blog сегодняшняя тема будет касаться flash технологий, и flash редакторов, в публикации будут рассмотрены вопросы, что такое флэш-технологии, как сделать обычную флешанимацию с редактором Adobe Flash Professional

Технологии flash получили признание в последние годы, и являются важной частью в сайтостроении, как и любая модная тенденция, flash технологий имеют свои недостатки и преимущества.

Дополняя данную тематику, естественно не обойтись и без самого популярного и наиболее повнофункцонального flash редактора, который представляет компания Adobе.

Особенно если кто-то из вас раньше заходил на блог, то наверное замечал в самом низу левой боковой панели главной страницы, часы. Эти часы созданы с помощью flash редактор Adobe Flash Professional cs5, и написан на языке программирования для разработки flash-документов ActionScript.

В принцыпе от Yandex можно разместить на вид гораздо красивее часы, но эти будет создан лично вами, и хотя сам вид у етих возможно не супер, но создавая подобную анимацию, можно будет лучше узнать о flash–технологиях, о тоже о том как работать в редакторе Adobe Flash Professional cs5, и впоследствии в будущем более усвоив эту технологию, модифицыруя этот скрипт, и сделать вид часов намного красивее.

Чтобы добавить к сайту часы от Yandex, много знаний не потребуется, всего лишь скопировать код и вставить код в выбранное место. Хотя возможно для новичка и такая процедура окажется сложной, но чем чаще самостоятельно работать над различными технологиями, тем все больше приобретается практики. Собственно затем и наступает желание пробовать решать более сложные задачи.

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

в самом низу левой боковой панели главной страницы, часы

Что касается часов, то собственноручно создать такой елемент для сайта значительно сложнее, чем взять готовый код, из какого-то ресурса. Но код на таких часах будет чистый, без всяких лишних ссылок, а бесплатные анимации которые могут предлагать различные ресурсы, конечно могут содержать различные ссылки, в основном ссылки на свои ресурсы.

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

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

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

Зато если должен каких-то пару гривен забыв заплатить, то свет отрежут, и в вас разрешения даже не спросят, отрежут, а в конторе нахамят, намекая что надо вовремя платить, согласен надо, а за то что сжечь человеку технику оказывается платить то не надо. Видимо подобное скотство, вечно будет продолжаться.

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

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

Приступаю к Adobe Flash Professional

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

Для того чтобы скачать демоверсию Adobe Flash Professional необходимо создать учетную запись путем регистрации и получить id.

После того как вы заполните все данные появится страница где необходимо будет выбрать язык и операционную систему которой вы пользуетесь для Adobe Flash Professional. Полная версия будет работать в течение тридцати дней. Вес 900 МГБ.

После загрузки запускаем установку для этого щелкаем на файл setup.exe

Далее после того как программа сделает проверку на совместимость, и для чего им это нужно, если бы не эти проверки цены бы программам от не было. выбираем пробную версию и нажимаем I want to install and use Adobe Flash Professional on a trial basic

Далее опция next затем язык, различные варианты установки, различные пакеты. Выбираем все пакеты по умолчанию и начинаем установку.

После установки начинаем изучать данный редактор методом создания простенькой флэш анимации в виде часов, начнем с изучения интерфейса программы. [/ stextbox]

1.Вибираемо удобный режим работы, их несколько режимов мне больше нравится small skreen

⇑.Вибираемо удобный режим работы

2. Выбираем ActionScript3 в поле Create New и выставляем размер документа 100 на 55. по умолчанию размер документа 500х400.

3. В низу размещена область в которой мы ищем layer1 означает слой переименуйте на text.

5. переименуют динамическую зону в Ceas затем выставляем Dynamic Text шрифт Arial, размер текста 24 цвет текста черный (можно выбрать любой из цветов, цветом будут сказываться цифры на часах).

⇑Ceas

6.После окончания редактирования слоя Text, создаем новый слой с названием actiune. Щелкаем правой кнопкой мыши по уже созданному слоя Text или в самом низу ищем маленькие иконки в виде папок, подводит курсор к первой где появится надпись который будет означать добавить слой. Появится новый слой с названием layer2 где название меняем на actiune.

⇑создаем новый слой с названием actiune

⇑клацаемо кнопку actиons

7.Выделяем слой actiune, дальше или в верхней панели щелкаем на иконку window, из выпадающего списка выбираем actиons F9, или в боковой панели щелкаем кнопку actиons frame, или просто нажимаем клавишу F9 появится окно для того чтобы ввести код.

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

9.Проверяем как у нас получилось ввести данный скрипт, с помощью комбинаций ctrl + Enter если НЕ БУДЕТ Синтактный ошибок но окошко плеера откроется пустым тогда необходимо будет поменять версию ActionScript3 на версию ActionScript2, для этого выбираем File затем Publish Setting или сразу набираем комбинацию клавиш Ctrl + Shift + F12

⇑але окошко плеера откроется пустым

10. Откроется окно Publish Setting в котором нам нужно выбрать Flash а в разделе Script выбрать ActionScript2.0. Кстати в разделе можно выставить версию плеера, хотя у меня была выставлена правильная версия Flash Player 10 если у вас выставлена другая тогда выставьте эту версию Flash Player 10, далее нажимаем Publish а затем Ok. У нас должны появиться числа которые будут показывать час.

⇑вікно Опубликовать Настройка

11.Все что осталось сделать это экспортировать документ Flash. Далее используем File Export Export Movie. Сохраняем файл под названием ceas. swf

⇑File Экспорт Экспорт фильма

Если все сделано правильно тогда должен появиться плеер, в котором будет указан час, и вы создадите простенькую анимацию, в случае неудачи нужно повторить попытку, у меня тоже с первого раза не получилось.

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

Читайте также: