Adobe flash повернуть изображение

Обновлено: 08.07.2024

В усовершенствованном API-интерфейсе рисования представлена концепция «закручивания» пути: направления пути. Поворот контура может быть положительным (по часовой стрелке) или отрицательным (против часовой стрелки). Поворот определяет порядок, в котором средство визуализации интерпретирует координаты, предоставленные вектором для параметра data.

Б. Положительный поворот (по часовой стрелке)

В. Отрицательный поворот (против часовой стрелки)

Кроме того, метод Graphics.drawPath() имеет дополнительный третий параметр winding.

В данном контексте третий параметр является строкой или константой, указывающей поворот или правило заливки для пересекающихся контуров. (Константы определяются в классе GraphicsPathWinding как GraphicsPathWinding.EVEN_ODD или GraphicsPathWinding.NON_ZERO .) Правило поворота играет важную роль при пересечении контуров.

Правило «четный-нечетный» является стандартным правилом поворота, используемым всеми предыдущими API рисования. Правило «четный-нечетный» также является правилом по умолчанию для метода Graphics.drawPath() . Согласно правилу поворота «четный-нечетный» пересекающиеся контуры чередуют открытые и закрытые заливки. При пересечении двух квадратов с одинаковой заливкой область пересечения остается без заливки. Как правило, одна из рядом стоящих областей заполнена заливкой, а другая — нет.

С другой стороны, правило «ненулевого значения» учитывает поворот (направление рисования) при определении необходимости заполнения заливкой области, ограниченной пересекающимися контурами. При пересечении контуров с противоположным поворотом, определенная область остается незаполненной как при использовании правила «четный-нечетный». Для контуров с одинаковым поворотом, незаполняемая область заполняется заливкой.

Б. Правило поворота «ненулевого значения»

Имена правил поворота

Имена ссылаются на более конкретное правило, определяющее способ управления заливками. Контурам с положительным поворотом присваивается значение +1; а контурам с отрицательным поворотом — значение -1. Требуется выбрать точку, находящуюся в замкнутой области фигуры, и нарисовать бесконечную линию с началом в этой точке. Заливка определяется в соответствии с числом пересечений линии с контуром, а также с учетом объединенных значений этих контуров. При использовании правила поворота «четный-нечетный» учитывается число пересечений линии с контуром. При нечетном числе область заполняется заливкой. При четном числе область остается без заливки. При использовании правила «ненулевого значения» учитываются значения, присвоенные контурам. Если объединенные значения не равны нулю, область заполняется заливкой. Если объединенное значение равно нулю, область не заполняется заливкой.

Б. Правило поворота «ненулевого значения»

Применение правил поворота

Несмотря на сложность правил заливки, в некоторых ситуациях они необходимы. Например, требуется нарисовать звезду. Согласно стандартному правилу «четный-нечетный», для построения фигуры требуется десять разных линий. Согласно правилу поворота «ненулевого значения» вместо десяти линий используется только пять. Следующий код ActionScript рисует звезду с использованием пяти линий и правила поворота «ненулевого значения».

На рисунке представлена полученная звезда.

Звезда, нарисованная с использованием разных правил поворота

Б. «Четный-нечетный»: 5 линий

В. «Ненулевое значение»: 5 линий

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

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом

Немного исторического экскурса и терминов

Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».

Примерно столько же лет я верстаю сайты, в том числе на «современном» языке HTML5, который, как говорят, умеет всё. Нет, реально, иногда упоротые дизайнеры присылали такие интерфейсы, которых в природе не существовало, их нужно было выдумать, прикрываясь фразой «на HTML5 же можно написать всё!».

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

За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.

Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.

Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.

Интерфейс

Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.

* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.

Движок отрисовки

Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением

ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.

Приятно, что хоть предупредили. Видимо, это нереальная задача — отнимать по единичке от того кадра, на который нужно перейти.

Таймлайн и рабочая область

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

Теперь перейдем к тому, чем я постоянно пользуюсь:

Стандартные фильтры во Flash

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

Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:

Flash	CreateJS

Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.

Редактор	Результат

При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…

Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется

Свечение

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

Flash	CreateJS

В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:

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

Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет

Flash	CreateJS	В редакторе

Размытие

Без комментариев. Размытие доступно только для статичных объектов, так что использовать этот фильтр для появления текстов невозможно

Flash	CreateJS

Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.

Проблемы экспорта и упаковки

Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.

Резиновые баннеры

По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона

Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.

При вращении (рис, 7,4) объект поворачивается вокруг точки регистрации, По умолчанию точка регистрации находится в центре объекта, но ее можно перемещать. Можно вращать объект при помощи команды Rotate (Вращение), перетаскивания, а также задавая значение угла поворота в панели Transform (Преобразование).

Рис. 7.4. Вращение объекга

Для того чтобы вращать объект перетаскиванием:

Выделите объект.
Выполните один из следующих шагов:
- выберите инструмент Arrow (Стрелка) и щелкните на модификаторе Rotate (Поворот) в наборе инструментов;
- выберите команду Modify (Изменить) Þ Transform (Преобразовать) Þ Rotate (Вращать).
Зацепите и перетащите один из угловых маркеров.
Щелкните на незаполненной области Стола или выберите команду Modify (Изменить) Þ Transform (Преобразовать) Þ Rotate (Вращать), чтобы скрыть маркеры вращения.

Для того чтобы повернуть объект на 90 градусов:

Выделите объект.
Выберите команду Modify (Изменить) Þ Transform (Преобразовать) Þ Rotate 90CW, чтобы повернуть объект по часовой стрелке, или Rotate 90CCW, чтобы повернуть объект против часовой стрелки.

Для того чтобы вращать объект с помощью панели Transform (Преобразование):

1. Выделите объект.
2. Выберите команду Window (Окно) Þ Panels (Панели) Þ Transform (Преобразовать).
3. Выберите опцию Rotate (Вращать).
4. Укажите величину угла поворота.
5. Нажмите клавишу <Enter> (Windows) или <Return> (Macintosh), чтобы повернуть объект на указанный угол.

Для того чтобы одновременно вращать и масштабировать объект'

Зеркальное отражение объектов

Можно зеркально отражать объекты (рис. 7.5) относительно вертикальной или горизонтальной оси, не меняя их положения на Столе.

Рис. 7.5. Зеркальное отображение объема

Для того чтобы зеркально отразить объект:

Выделите объект.
Выберите команду Modify (Изменить) Þ Transform (Преобразовать) Þ Flip Vertical (Отразить вертикально) или Flip Horizontal (Отразить горизонтально).

Существует возможность наклонить объкт (рис. 7.6.) по одной или по обим его осям. Можно наклонять объкт перетаскиванием или задавая значения впанели Transform (Преобразование).

Рис. 7.6. Наклон объекта

Для того чтобы наклонить объект перетаскиванием:

Выделите объект.
Выполните один из следующих шагов:
- выберите инструмент Arrow (Стрелка) и щелкните на модификаторе Rotate (Вращение) в наборе инструментов;
- выберите команду Modify (Изменить) Þ Transform (Преобразовать) Þ Rotate (Вращать).
Зацепите курсором и перетащите центральный маркер.
Щелкните на незаполненной области на Столе или выберите команду Modify (Изменить) Þ Transform (Преобразовать) Þ Rotate (Повернуть), чтобы скрыть маркеры вращения.

Для того чтобы наклонить объект с помощью панели Transform (Преобразование):

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