Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Создание анимированных GIF-файлов: Photoshop vs Flash

Примечание. Этот пост не о сравнении Photoshop и Flash (оба они являются отличными инструментами для разных целей), а просто о том, как сравнивать их при создании анимированных GIF-файлов.

Давайте начнем с простой цели - создать анимированный GIF-баннер. Вот базовый дизайн:

Теперь давайте добавим немного анимации, перемещая «облака» на заднем плане в бесконечном цикле.

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

Мы постараемся сделать так, чтобы Photoshop и Flash сделали работу за нас.

Чтобы сделать облака движущимися в бесконечном цикле, мы создали форму с повторяющимся участком, которая вписывается в рамку нашего баннера. Самый простой способ - создать исходную форму, затем скопировать ее и сместить повторяющуюся часть вправо. Мы использовали векторную форму в Photoshop - ее легко изменять и изменять размер (для второго облака).

Вот как выглядит форма:

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

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

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

Это первый и последний кадры для нашей будущей анимации. Теперь позвольте Photoshop создать анимацию для нас: выберите оба кадра на временной шкале, затем используйте «Таймлайн»> «Твин» (верхнее правое меню на временной шкале). Выберите меньшее количество кадров для более плавной анимации и позвольте Photoshop сгенерировать все кадры между начальным и конечным кадрами. Вот и все. Мы сделали то же самое со вторым облаком, и вот результат:

Мы сделали то же самое со вторым облаком, и вот результат:

Небольшой совет: после того, как вы сгенерируете анимацию, удалите последний кадр, так как он совпадает с первым и создаст небольшой «удар» в анимации.

Да, да, если это реалистичный эффект параллакса, то облако сзади должно двигаться медленнее, чем облако впереди. Хорошо, если вы заметили ... 🙂

Теперь давайте создадим ту же анимацию во Flash. Flash - король, когда дело доходит до анимации - он был создан для нее. Его функция Tween намного превосходит функцию Photoshop.

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

С Flash у нас гораздо больше контроля над анимацией. Мы можем легко изменить длину анимации, например, просто добавив больше пустых кадров между первым и последним кадрами (в Photoshop мы должны заново сгенерировать кадры Tween, если мы хотим изменить их количество). Мы даже можем делать трюки с ActionScript, например, помещая goToPlay (1) в последний кадр, чтобы заставить его пропустить этот кадр, избегая анимации «удара»…

НО, когда дело доходит до экспорта анимации в GIF, Flash сильно борется. Вот результат:

Вот результат:

У нас есть большие белые артефакты и другие проблемы, независимо от того, как мы играем с настройками экспорта.

Конечно, если мы просто экспортируем баннер как Flash (SWF), мы получим плавный результат, который также займет намного меньше места, чем эквивалентный GIF - 14,2 КБ против 181,8 КБ! Не говоря уже о том, что он не имеет ограничения GIF в 256 цветов, поддерживает альфа-прозрачность и так далее ... Вы можете проверьте Flash баннер здесь , но смысл заключался в создании баннера GIF, и мы не будем вдаваться в тему «SWF vs animated GIF».

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

Не стесняйтесь поделиться своими примерами и советами по созданию анимированных GIF-файлов.

Похожие

Создание рекламного баннера Flash от начала до конца
В этом углубленном учебном пособии вы узнаете, как сделать типичный рекламный баннер Flash размером 468 x 60 от начала до конца, с подробным объяснением каждого шага. Вы узнаете, как: сделать невидимую кнопку, которая действует как ссылка оптимизировать свой баннер для предыдущих версий Flash Player изучите основы о событиях и обработчиках событий во Flash какие требования вы можете ожидать от своего клиента 1 Откройте новый шаблон рекламного
Создание сайтов Лодзи, создание флеш страниц, позиционирование страниц.
СОЗДАНИЕ ВЕБ-САЙТОВ создание сайтов для частных лиц и частных компаний системы управления сайтом на сайте со стороны клиента мы создаем интернет магазины позиционирование сайта в Google покупка домена веб - хостинг Мы создаем сайты, используя PHP, HTML, JAVA SCRIPT, FLASH. Мы пишем код сайта вручную,
Создайте сложную 3D-фантастическую сцену в Blender
Создание апокалиптической научной фантастической городской сцены в 3D арт это то, что художники могут уклоняться от выполнения из-за огромной сложности предмета, 3D модели и текстуры нужны. Но с умными способами справиться с этим, это, безусловно, выполнимо. Есть много разных путей, которые вы можете выбрать для получения окончательного
FAQ - CleverVox
Создание учетной записи и первый вход в систему Портал Clever4CARE - это инструмент для управления всеми телекоммуникационными и хостинговыми услугами в вашей учетной записи - эта статья посвящена VoIP. Вы можете редактировать все настройки сервиса, от создания учетной записи, настройки SIP до установки ограничений безопасности и подключения и т. Д. Простой процесс активации, шаг за шагом: а) Создание учетной записи Создайте аккаунт,
12 Удивительных результатов теста А / Б, чтобы вы не делали предположений
[ 12 тестов ниже были использованы с разрешения WhichTestWon ] В моей последней статье критика целевых страниц для конверсии Я закончил со страницей, которая работала, но нарушала все правила. Из этого вы можете сделать вывод, что правила не имеют значения, но это не так. Иногда правила не имеют значения, но только когда вы проверили страницу, чтобы