Тоновый контраст. Цвет, контраст в композиции кадра

Четверг, 04 Декабря 2014 г. 13:01 + в цитатник

Программное вращение 3-d во флеш. Урок для Flash CS 6. Action Script 3.

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

Вращать можно нарисованные в программе фигуры, картинки png, текст. Но прежде всё это необходимо модифицировать во Фрагменты ролика.

Итак, открываем программу и создаём новый Action Script 3.0 любых необходимых вам размеров с частотой кадров 24 - 30 кадров/секунду.
Чем выше частота кадров, тем быстрее будет крутится картинка, фигура или текст.

Сохраняем наш проект в формате FLA в какую нибудь папку под названием "Вращение 3d".

В дальнейшем не забываем периодически сохранять изменения внесённые в проект в ходе работы над ним.

Импортируем в Библиотеку картинки, которые будут использованы в работе.

Я взяла вот такие.

На Временной шкале нашего Рабочего поля сейчас один слой. Переименуем его в "фон" и на нём, если это необходимо, разместим фоновую картинку.

Выше слоя фон размещаем слои для картинок, текста и фигур, которые будут вращаться. То есть для каждого элемента создаём отдельный слой.

Кроме двух картинок я ещё написала текст - "2015" и нарисовала фигуру "Звёздочка".

На этом этапе проект выглядит следующим образом

Выделяю слой "картинка 1" и на него инструментом "Стрелка" перетаскиваю на Рабочее поле из Библиотеки изображение картинка 1. Устанавливаю его в нужном месте и с помощью инструмента "Свободное преобразование" задаю ему нужные размеры.

Затем, не снимая выделения с "картинка 1", нажимаем в меню на вкладку "Модификация" и выбираем пункт "Преобразовать в символ". Далее преобразовываем изображение "картинка 1" в символ Фрагмент ролика. Даём название ролику

Mc_картинка 1

В панели "Свойства" для созданного Фрагмента ролика в графе "Назначить имя экземпляру" прописываем

Точно также поступаем со всеми картинками и фигурами. Сначала перетаскиваем их на соответствующим им слой,если необходимо трансформируем размеры картинки и затем, не снимая выделения, модифицируем в Фрагмент ролика. Фрагментам ролика даем соответствующие названия. Здесь, в принципе, названия роликов при создании символов значения особого не имеют. Важно имя заданное ролику в графе "Назначить имя экземпляру" в панели "Свойства".

Так следующему созданному Фрагменту ролика "mc_картинка 2" в панели "Свойства" в графе "Назначить имя экземпляру" прописываем

Обратите внимание, что между словом rotations и цифрой 2 нет пробела. Это важно.

Для Фрагмента ролика "mc_звёздочка" в панели "Свойства", в графе "Назначить имя экземпляру" прописываем

Для создания текста щелкаем по слою "текст" и на этом слое на Рабочем поле в нужном месте инструментом "Текст" разворачиваем текстовое поле, пишем текст. В панели "Свойства" задаём все атрибуты текста и обязательно внедряем его.

Щелкаем инструментом "Стрелка" по созданному тексту, выделив его.
Модифицируем созданный текст во Фрагмент ролика.

Для Фрагмента ролика "mc_текст" в панели "Свойства" в графе "Назначить имя экземпляру" прописываем

Открываем вкладку "Действия" этого слоя и в блокнот вкладки вставляем следующий скрипт

code:
import flash.events.Event;

Var angle:Number = 0;

Var speed:Number = 4;

Stage.addEventListener(Event.ENTER_FRAME, start3DRotate)
function start3DRotate(e:Event):void
{
angle<360? angle+=speed: angle = 0;
rotations1.rotationY = angle;



}

Если вы берёте для вращения картинок меньше чем 4 картинки, то необходимо удалить лишние строчки из скрипта.

Так, например, если вы используете в своей работе только одну картинку для вращения, то строчки
12, 13, 14
rotations2.rotationY = angle;
rotations3.rotationY = angle;
rotations4.rotationY = angle;

Из скрипта необходимо удалить.

Если используете в своей работе два элемента для вращения, то необходимо удалить из скрипта строчки
13 14
rotations3.rotationY = angle;
rotations4.rotationY = angle;

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

Так например, если у вас будет 6 элементов, то соответственно после того как вы модифицируете каждый из этих элементов во Фрагменты ролика и в панели "Свойства" присвоите им имена соответственно

То в скрипт после строчки 14 необходимо вставить строчки для новых элементов

Rotations5.rotationY = angle;
rotations6.rotationY = angle;

Тестируем флешку и если всё сделали правильно, то увидите, что все элементы, которым вы задали скриптом 3d вращение вращаются.

На этом основная работа закончена и остаётся только добавить некоторые дополнительные детали к нашим вращающимся элементам.

Так, я прикреплю к "изготовленным" ёлочным игрушкам ниточки на которые они будут подвешены к гирлянде и колечки к которым эти ниточки будут крепится.

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

Импортируем нужный клипарт в Библиотеку программы

Далее заходим в режим редактирования символа "mc_картинка 1", дважды щелкнув по
этому символу в Библиотеке.
Ниже слоя "Слой 1", который имеется в символе на момент открытия, создаём ещё два слоя. Называем их "ниточка" и "колечко".

На слой "колечко" я из Библиотеки инструментом "Стрелка" на Рабочее поле перетащила колечко. Инструментом "Свободное преобразование" уменьшила размер этого колечка и установила в подходящее место. На слой "ниточка" перетащила из Библиотеки красную ленточку и также уменьшив её размеры "прикрепила" к колечку.
Элементы эти мелкие и, чтобы с ними легче было работать, можно увеличить масштаб на Рабочем поле в окошечке масштабирования.

Точно также поступаю с символом "mc_звёздочка". Захожу в режим редактирования этого символа, создаю вниз под "Слой 1" новые слои - "ниточка" и "колечко". Только в этом случае слой "ниточка" опускаю ниже слоя "колечко" и вместо красной ленточки использую желтую ниточку, которую предварительно импортирую в Библиотеку.
Перетащив клипарт на Рабочее поле редактирования символа "mc_звёздочка" на соответствующие слои, уменьшаю размеры и приспосабливаю клипарт в нужное место.

С остальными символами поступаем аналогично

Ещё я перенесла слой "фон", на котором у меня разместился клипарт гирлянды, выше всех слоёв с элементами вращения. Если же у вас на этом слое размещена фоновая картинка в формате jpg, то этого делать, естественно не надо.

Тестируем то, что получилось

Если всё устраивает, то сохраняем флеш ролик.

Файл - Экспорт - Экспортировать ролик

Вследствие того, что CSS развивается стремительными темпами и создавать анимацию стало еще проще без использования Javascript на многих сайтах появились очень интересные элементы, которыми нельзя не заинтересоваться. В сегодняшнем уроке мы посмотрим как можно создавать анимацию с помощью ключевых кадров (это еще интереснее чем просто с помощью CSS преобразований). Также наша анимация будет находится не просто в одной плоскости, а будет с эффектом 3D. Если вы не знаете для чего и где можно применить такой эффект — переходите в полную новость и там я вам об этом расскажу.

Если CSS преобразований из предыдущей серии уроков работали в браузерах Firefox, Chrome, Safari и Internet Explorer 10+, то в при создании 3D анимации она будет работать только в WebKit браузерах и браузере Mozilla. Самые простые преобразования будут работать и в IE10, но что-то более сложное — нет, так как этот браузер не поддерживает параметр preserve-3d для создания 3D слоев.

Анимация CSS

Анимация, которую мы создадим будет содержать в себе изображение, которое вращается вокруг оси Y:

Классно?!

Для тех, у кого нет анимации 😉 :

Немного HTML

Всё понятно и просто в HTML структуре:

Ключевые кадры CSS

Что такое ключевые кадры?

В блоке @keyframes находится ряд правил, которые называются ключевыми кадрами. Ключевые кадры содержат свойства, которые применяются в определенный момент времени при анимации. При анимации значения интерполируются («плавно переходят» от одного значения к другому) и мы видим лишь плавный переход.

Вам это может показаться сложным, но это один из самых простых примеров.

Определим начальный и конечный ключевой кадр:

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

Создаем сцену

Нам нужен элемент, в котором наша анимация обрела бы объем и появился эффект объема. Сцена, в отличие от вращающегося изображения, зафиксирована на странице.

Для сцены мы будем использовать новое для нас свойство perspective , которое придает глубину. Значение задается в пикселях. Оно определяет расстояние от пользователя до элементов в перспективе. Знаю, это сложно сразу понять 🙂 . Давайте уменьшим с 1200px до 300px и взгляните на результат ниже:

Классно?!

А также видео:

Связываем анимацию с элементом

Сейчас вы увидите еще несколько новых свойств. И я даже не хочу вас сразу заставлять их запоминать сразу и разбираться в значениях. Можно поступить иначе: вы просто на них посмотрите и что поймете, то поймете. На самом деле, изучая дальше уроки вы будете встречать их часто и начнете понимать для чего они. Поэтому не волнуйтесь на счет того, что их много и вы не знаете и не понимаете что-то!

А свойства следующие:

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

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

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

Я использовал в качестве поворотного стола популярный тренажер, диск "Здоровье".

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

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

Чем больше будет фотографий, тем более плавным получится эффект вращения. Но делать несколько сотен снимков не стоит, вполне достаточно 36 – 48.
Затем полученные фотографии нужно пакетно обработать, сначала в конвертере, затем, при необходимости, в графическом редакторе. В данном случае мне хватило кадрирования и тоновой коррекции в Camera Raw. Также необходимо уменьшить размер изображения до нужного.

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

Одним из таких сервисов является сайт http://megavisor.com или

Для того, чтобы воспользоваться полноценным сервисом, необходима регистрация.

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

Скажем, вы хотите повернуть вектор или точку на θ, тогда тригонометрия утверждает, что новые координаты

X" = x cos θ − y sin θ y" = x sin θ + y cos θ

Чтобы продемонстрировать это, давайте возьмем кардинальные оси X и Y; когда мы поворачиваем ось X на 90 ° против часовой стрелки, мы должны получить ось X, преобразованную в ось Y. Рассматривать

Unit vector along X axis = <1, 0> x" = 1 cos 90 − 0 sin 90 = 0 y" = 1 sin 90 + 0 cos 90 = 1 New coordinates of the vector, = <0, 1> ⟹ Y-axis

Когда вы понимаете это, создание матрицы для этого становится простым. Матрица - это всего лишь математический инструмент, позволяющий выполнять это удобным, обобщенным образом, чтобы различные преобразования, такие как вращение, масштабирование и перемещение (перемещение), можно было объединить и выполнить за один шаг, используя один общий метод. Из линейной алгебры, чтобы повернуть точку или вектор в 2D, матрица должна быть построена

|cos θ −sin θ| |x| = |x cos θ − y sin θ| = |x"| |sin θ cos θ| |y| |x sin θ + y cos θ| |y"|

Вращение в 3D

Это работает в 2D, а в 3D нам нужно учесть третью ось. Поворот вектора вокруг начала координат (точки) в 2D означает просто поворот его вокруг оси Z (линии) в 3D; поскольку мы вращаемся вокруг оси Z, его координату следует поддерживать постоянной, то есть 0 ° (вращение происходит на плоскости XY в 3D). В 3D вращение вокруг оси Z будет

|cos θ −sin θ 0| |x| |x cos θ − y sin θ| |x"| |sin θ cos θ 0| |y| = |x sin θ + y cos θ| = |y"| | 0 0 1| |z| | z | |z"|

вокруг оси Y будет

| cos θ 0 sin θ| |x| | x cos θ + z sin θ| |x"| | 0 1 0| |y| = | y | = |y"| |−sin θ 0 cos θ| |z| |−x sin θ + z cos θ| |z"|

вокруг оси X будет

|1 0 0| |x| | x | |x"| |0 cos θ −sin θ| |y| = |y cos θ − z sin θ| = |y"| |0 sin θ cos θ| |z| |y sin θ + z cos θ| |z"|

Примечание : ось, вокруг которой выполняется вращение, не имеет элементов синуса или косинуса в матрице. Я надеюсь, что это делает случай вращения ясным.

Состав

Вышеупомянутые матрицы вращают объект так, как если бы он находился на расстоянии r = √ (x² + y²) от начала координат; ищите полярные координаты, чтобы знать почему. Это вращение будет относительно мирового космического происхождения. Обычно нам нужно вращать объект вокруг его собственной рамки/оси, а не вокруг мира. Поскольку не все объекты имеют мировое происхождение, вращение с использованием этих матриц не даст желаемого результата вращения вокруг собственной рамки объекта. Следовательно, вам нужно узнать и о переводе . Сначала вы должны перевести (переместить) объект в начало мира (чтобы источник объекта выровнялся с миром, тем самым сделав r = 0), выполнить вращение с одной (или более) из этих матриц, а затем снова перевести его обратно. на прежнее место. Порядок, в котором применяются преобразования, имеет значение .

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

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

Можно использовать 3D-инструменты редактирования для вращения 3D- моделей вокруг оси X, оси Y или оси Z; перемещать модель по осям или изменить масштаб объекта. Во время управления положением 3D-моделью вид камеры осттся неизменным.

Panel Options Info (Информация) и выбрать режим показа справки инструмента (Show Hints ). Выберите инструмент, затем пеместите курсор в окно изображения, чтобы рассмотреть детали инструмента в палитре информации Info (Информация).

1. Выберите в палитре 3D режим 3D-SCENE (3D-сцена).

2. Выберите инструмент навигации, активизируйте его и удерживайте нажатой клавишу Rotate (Поворот), Roll (Прокрутка), Pan (Перетаскивание), Slide (Перемещение) или инструмент Scale (Масштабирование) для движения по прямой линии. Поработайте с трехмеыми инструментами, расположенными на палитре инструментов.

3. Rotate (Поворот). Перетащите или вращайте вниз модель вокруг ее оси X, или в сторону, чтобы создать вращение вокруг ее оси Y. Удерживайте нажатой клавишу (для Windows) или (для Mac OS), чтобы катить модель.

4. Roll (Прокрутка). Перетащите модель в сторону, чтобы создать вращение модели вокруг ее оси Z.

5. Pan (Перетаскивание). Перетаскивайте модель в сторону, чтобы перемеить модель горизонтально, или вверх и вниз, чтобы переместить ее вертикало. Удерживайте нажатой клавишу (для Windows) или (для Mac OS), чтобы при перетаскивании переместиться в X/Z-направлении.

6. Slide (Перемещение). Протаскивайте модель в сторону, чтобы перемеить ее горизонтально, или вверх и вниз, чтобы закрыть ее или возвратиться. Удерживайте нажатой клавишу (для Windows) или (для Mac OS), чтобы при перетаскивании масштабирование выполнялось в X/Y- направлении.

7. Scale (Масштабирование). Тяните вверх или вниз, чтобы масштабировать модель к большему или меньшему размеру. Удерживайте нажатой клавишу

(для Windows) или (для Mac OS), чтобы выполнить масштабование в Z-направлении.

Используйте инструменты редактирования 3D-камеры для просмотра движения камеры, оставляя фиксированным положение 3D-объекта.

Для использования инструментов трехмерной графики следует выбрать Panel Options (Опции панели) из меню вариантов палитры Info (Информация) и режим показа справки (Show Hints ). Выберите инструмент, затем переместите курсор в окно изображения, чтобы рассмотреть детали инструмента в палитре Info (Инфоация).

1. Выберите в палитре 3D режим 3D-MESH (3D-каркас).

2. Выберите инструмент редактирования 3D-камеры, активизируйте его и удеивайте нажатой клавишу при протаскивании инструментов Rotate (Поворот), Pan View (Просмотр перетаскиванием), Walk View (Пошаговый просмотр) для движения по прямой линии.

¿ Rotate (Поворот). Поворачивайте камеру в направлении X или Y. Удерживайте нажатой клавишу (для Windows) или (для Mac OS), когда поворачиваете камеру.

¿ Roll (Прокрутка). Перетащите, чтобы катить камеру.

¿ Pan (Перетаскивание). Перетащите вручную камеру в X- или Y- направлении. Удерживайте нажатой клавишу (для Windows) или

(для Mac OS), когда вы вручную перемещаетесь по документу в X- или Z-направлении.

¿ Walk (Шаг). Перетащите шаг за шагом камеру (Z-преобразование и Y- вращение). Удерживайте нажатой клавишу (для Windows) или

(для Mac OS), когда вы перетаскиваете ее шаг в Z/X направлении (Z-преобразование и Y-вращение).

¿ Zoom (Масштаб). Перетащите камеру, чтобы изменить поле обзора 3D-камеры. Максимальное поле обзора составляет 140°. Выберите вариант ортографического просмотра модели на дисплее, чтобы показать ее в тоом представлении масштаба без любого перспективного искажения.

Источник: Комолова, Н. В., Adobe Photoshop CS5 для всех / Н. В. Комолова, Е. С. Яковлева. - СПб.: БХВ-Петербург, 2011. - 624 с.: ил. + CD-ROM - (В подлиннике)