Листание страниц, Урок Опции

[HALFORD]

Недавно арсенал классических трюков Flash пополнился новым и модным эффектом "Листания" страниц.



Рисунок 1

Рисунок даёт полное представление об идее, на которой базируется весь эффект. Да, эффект действительно очень сложный и реализовать такую идею не каждому флешеру по плечу, даже хорошему. Прежде всего было ясно, что эффект "Листания страниц" был как-то связан с принципом листания страниц (надо же!).
Далее: В большинстве сценарных эффектов в том или другом виде - используется симметрия. Треугольник (угол изгиба), изображающий перелом страницы, является зеркальным, но некоторые делают отдельную картинку для обратной стороны, находящегося под ним. Два треугольника относительно симметричны пунктирной линии. В конце анимации с переворачиваемой страницей появляются две страницы (обе стороны), симметричные относительно "корня" книги, ну т.е. к чему листы прикреплены, вот как раз туда... Ось симметрий точка "А", и перемещается в положение "В". Сценарий анимации переворота страницы сводится к перемещению оси симметрии во время анимации.

Симметрия встречается в природе, и при работе с фракталами.

Wikipedia:

Фрактал (лат. fractus — дроблёный) — термин, введённый Бенуа Мандельбротом в 1975 году для обозначения множеств с дробной размерностью Хаусдорфа — Безиковича (HB). Для самоподобных множеств, типа канторового множества, HB-размерность совпадает с размерностью подобия.


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

Так, теперь надо разъяснить как это будет работать в реале.

Процесс анимации:

Теперь смотрим на второй рисунок с четыремя листкмми слева направо.
Изменяется прежде всего ось симметрии, гнущегося листа. Сначало угол будет 45° в правом нижнем углу, переворачиваемой страницы (но можно и сверху, правда так никто не перелистывает, да и идею саму прийдётся реконструировать), а потом только переходит на положение 90°, т.е. страница уже лежит перевёрнутая. Ось симметрии - всего лишь концепция, заложенная в основу, а не сам еффект естественно. Главное помнить об этом процессе обобщения! Чтобы создать такой эффект, надо разбить его на легко-реализуемые составляющие. Пример показан на третьем рисунке.



Рисунок 2

Так, анимация этого эффекта основана на перемещении двух клапов вокруг оси. Один клип - "зеркало" переворачиваемой страницы, для узнаваемости назовём его reverse_ms. В начальном положени он повёрнуть на 90°, и, находится на позиции пунктирного прямоугольника рисунка Три. Клип reverse_mc стремится совместить свой правый край с осью (симметрии). А другой клип - это маска. пусть это будет maskReverse_mc. В начальном положении клип положен на 45°, а в конечном он должен быть как реверс_мс. Это значит, что в конце анимации клип реверс_мс виден полностью, т.к. ни одна ни одна из его частей не скрывается под маской.



Рисунок 3

Открываемый клип остается неподвижным, но его маска ведёт себя почти так же, как maskReverse_mc: она двигается аналогично, но симметрично относительно оси. На четвёртом рисунке маска обазначена maskNew_mc (новая маска).



Рисунок 4

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

- найти и выделить основные базовые элементы, из которых самым распространённым является симметрия, но могут встречаться и другие типа фракталов и других эффектов частиц. Лучше нарисовать диаграммы с указанием места этих концепций в эффекте;
- чтобы развить свою идею, лучше всего сделать какие-нибудь наброски, описывающие действия, в данном случае переход от базовой идеи к её реализации во Flash. Если вы не понимаете как создаётся такой эффект или другой, то скорее всего там используется маска. Помните, маски в сочитании со сценариями обычно создают самые необычные и неочевидные эффекты. Блин, "страшное это оружие" я вам скажу;
- не пытаётесь быстро всё переводить в математические формулы, т.к. простое визуальное представление во многом упрощает работу, да и конфликтов будет меньше. Несмотря на математические особенности, мат. уравнения плохо подходят под преобразование в визуальную форму. Они скорее будут абстрактны, чем визуальные.

]]>Blog]]>



Вот мой старый пост, по этой теме:


В помощь абоненту!



]]>Смотрим>>]]>

[vtm]

а не проще то же сделать а АЕ и сохранить как флешку? :_)

[HALFORD]

Что за АЕ?

[HALFORD]

Да пално таких, хоть какие хочешь, хоть флэш-галереи или листалки) тема то создана аж в ноябре 2006

ps. спасибо что хоть её поднял

[indiobobr]

слушайте, народ... наткнулся тут в рунете на товарищей, которые продают такую прогу, которая собсна и делает эффект листания, вот эти ]]>http://luxedition.ru]]>

что скажете?

[Maxell12]

AE- это Adobe After Effects
Отличная программа для создания спецэффектов, в ней кстати можно сделать 3d альбом с эффектом перелистывания страниц, например как этот
]]>http://video-effects.at.ua/index/3d_album_after_effect/0-353]]> можно и получше сделать если повозиться, Я свой альбом в этой программе делал,альбом правда большой получился 86 фото всего 42 страницы по два фото на странице