как делают 3D флешки

[sfumato]

Есть пара флешек с музыкой "рам ца-цы-цаца" там девица с луком порей. на вид сочная такая. обычные флешки плоские, а эта вроде как 3D. как её сделали ?

[Каханбунда]

Флэш - технология, прямо-таки напрашивающаяся на работу с трехмерной графикой. С растром работает, с вектором работает, с математикой в порядке, программируй что хочешь, и даже ООП есть...
Однако стандартного трехмерного "движка" для Флэш нет. И, наверно, не будет, пока производители видеокарт не смекнут разработать и встроить Flash-ускоритель в свои изделия. Что то ли будет, то ли нет - а трехмерки в Flash хочется уже сегодня, сейчас. Потому что эффектно, красиво... стоит ли описывать преимущества 3D, да еще и с возможностью "привинтить" к нему потенциально любую интерактивность?

Итак, приступим.

Есть три принципиально разных способа работы с 3D в Flash:
1) Рисование "под 3D" в самом Flash, шейпинг-анимация с целью получить имитацию трехмерного пространства. Собственно, к трехмерной технологии это не относится - это т.н. "псевдо-3D". Дело, надо сказать, крайне кропотливое, долгое и не всегда дающее качественный результат. Но зато оставляет всю художественную свободу, какую только можно представить, а иногда позволяет решить "на скорую руку" задачки, которые импортом-экспортом решались бы долго и неэффективно.
2) Программирование 3D-графики средствами Action Script. Вообще говоря, решение почти идеальное. Когда есть время и смысл решать задачу именно так, особенно - когда нужна именно трехмерная интерактивность.
Однако дело это сложное и, надо сказать, нудное. Единого "движка" нет, поэтому под каждую маленькую задачку вроде "повертеть кубик" приходится писать целый мини-3D-движок, а это далеко не каждому даже и подготовленному флэшеру по силам.
С одной стороны, индивидуальный "мини-движочек" под каждую задачку позволяет при программировании учитывать особенности именно этой задачи. Если не нужно текстурирование - то флэшка и не будет "волочь в себе" программную часть для этой не самой тривиальной задачки. С другой - все-таки AS "не проворачивает" что-либо серьезное в 3D и даже без особых "наворотов", на простеньких задачках "Flash-рендер" тормозит нещадно.
3) Конвертация из других форматов. Собственно, кроме внутрифирменных наработок разных компаний и всяких приблуд, от которых траты времени больше, чем пользы, есть одно средство толковой конвертации 3D => Flash: это программа Swift3D, о которой дальше и пойдет разговор. Ибо тратить время на описание редкоупотребимых извращений вроде рендера в контуры -> покадрового трейсинга -> покадрового импорта, думаю, не стоит.

Такой "способ конвертации 3D в Flash", как рендер и последующий импорт полученного тоже не имеет смысла обсуждать, ибо это имеет мало отношения к конвертации, а импорт последовательности видеокадров или avi-шки ничем не отличается от обычного импорта видео.

Итак, Swift3D.
Вообще говоря, это даже не конвертер - это 3D-редактор, снабженный векторным рендерером. Собственно, он и рендерит не в формат flash или swf, а в собственный формат swft, а для флэш в комплект входит фильтр импорта этого формата. Есть, кстати, и растровый рендерер, но к чему оно... А вот векторный рендер - штука уникальная в своем роде.
Редактировать 3D-анимацию в нем, конечно, неудобно: инструменты далеки от интуитивной понятности, несмотря на цветастые иконки, набор их довольно-таки ограничен, да и к навигации по 3d-пространству нужно, скажем так, привыкнуть. Однако джентльменским набором из примитивов, масштабирований, трансляции, кручений-верчений, анимации кейфреймами, источников света, камер и т.п. и даже вполне сносным редактором материалов этот редактор располагает - чего при задачах Flash-трехмерки вполне достаточно. Есть и навигация по дереву сцены, и даже отдельный режим для работы с Lathe-моделями, и регулировка параметров камер...
Но - главное! - есть импорт формата 3ds. И это настоящее чудо, ибо избавляет от необходимости моделировать в Swift3D, а позволяет все сложности этого процесса вынести в другие редакторы - тот же 3DMax, напр.
Правда, на больших моделях импорт сбивается. Например, заимпортить полученную из Poser-а модель вряд ли получится, даже лысую. Многовато полигонов... Но с каким-нибудь TorusKnot-ом десятизавитушечным справится вполне. И крутить его будет вполне прилично.

Несмотря на то, что можно анимировать модель прямо в 3DMAX, экспортировать ее вместе с анимацией в 3ds-формат и заимпортировать в Swift3d - лучше этого не делать, а анимировать уже в Swift. Ибо один Свифт знает, как именно он преобразует точки привязки и мировые координаты - во всяком случае, результат импорта анимации может быть настолько неожиданным, что проще отанимировать все в самом Свифте. И осветить тоже.

Итак, процесс следующий:
- в каком-либо редакторе изготавливаем нашу 3d-модель, получаем на выходе 3ds-файл - без текстур, без источников света, без анимации.
- импортируем ее в Swift
- "раскрашиваем", т.е., если нужно, работаем с материалами
- расставляем источники света, регулируем их, ставим камеру[ы], фоны и пр. - т.е. фактически работаем со сценой так же, как в любом другом 3d-редакторе.
- анимируем объекты
- настраиваем векторный рендеринг.
Это, собственно, то, ради чего мы возимся со всем этим Свифтом. Настроек у него много, и возможности радуют. Можно установить количество цветов, степень точности, включить/выключить рендер контуров, отрегулировать блики и мн. другое. Результат, как и при обычном рендеринге, зависит от тщательности настройки.
Стоит проверить на отдельных кадрах настройки рендеринга, и лучше - в нескольких точках анимации.
- рендерим, получая на выходе swft-файл.
- импортируем swft-файл в флэш.
- правим, если это необходимо. И правка эта тоже может дать очень интересные результаты, поскольку сам по себе swft-шник - весьма разумно и правильно сделанная штука: контуры, заливки, тени и освещение "разбросаны" в нем по отдельным слоям и "правильно" сгруппированы.

А дальше - по желанию и задаче: можно просто получить флэшку с 3D-картинками, а можно понарендерить т.о., напр., какую-нибудь навороченную 3D-панель управления и заскриптовать ее...

Автор урока Des arttower.ru

Добавлено через 2 минуты
Еще может помочь эта прога но она на англ.
http://www.gfxworld.org/ebooks/flash_3d_cheats_most_wanted.html

[Каханбунда]

У меня стоит полный пакет CS3 –Официальная русская версия, поэтому извините, но говорить будем на русском По возможности буду давать английские термины

Более сложные методы имитации 3D можно посмотреть здесь и здесь

Что еще интересного можно сделать во flash смотрите на этом же форуме здесь здесь и здесь

Для этого урока мне пришлось сделать эту кнопку заново, причем я значительно увеличила размер для лучшей видимости и убрала несколько эффектов. Рассмотрим относительно простой способ создания 3D эффекта , используя только фотошоп. Только маленькое примечание для начала – в реале для создания такого меню в фотошопе я рисовала только верхнюю часть кнопки- белое свечение и сами иконки внутри, причем иконки были попроще , все остальное делалось исключительно во флеше ( что , как известно, задачка не для слабонервных . В данном случае я просто импортировала почти все изображения из ФШ, поэтому объем флешки такой большой- в реале полный объем шапки с пятью иконками и еще кучей наворотов составил всего 380 кб . Но мы с вами сейчас рассмотрим только эффект 3D , поэтому объем оставим в стороне.

Архив всех картинок для этой флешки здесь

Исходник PSD полный здесь

Исходник ( полный ) FLA этой флешки - здесь
Часть 1 – подготовка в ФШ

Сначала готовим иконки. Открываем ФШ и рисуем иконку.



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



Но я предполагаю что у вас такого плагина ( скачанного или записанного лично ) нет, поэтому быстро пройдемся по процессу.
1 масштабируем картинку по ширине до 90%, высоту не трогаем
2 Редактирование-Трансформирование-Искажение и после растягивания левой стороны примените искажение – и не забудьте поставить направляющие, нужны будут.



Снова Искажение, но теперь опускаем правую сторону вот до такой степени и применяем



Должна получится вот такая картинка



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



Это еще не все – для начала сохраните все ваши 8 картинок в отдельную папку через Ctrl-Alt-Shift-S, после чего удалите все слои , кроме первого, через Редактирование-Трансформирование-Отразить по горизонтали переверните вашу картинку, перекрасьте ее в желтый цвет и повторите все шаги , описанные выше. Сохраните эти 8 картинок в ту же папку, где у лежат первые 8. Таким образом у нас получилось 16 иконок, 8 синих и 8 желтых . И осталось сделать еще 8 – тоже желтых, но опять переверните по горизонтали исходную желтую иконку. ( в реальной работе я во флеше меняла цвет уже имеющейся синей иконки, то есть желтые и не рисовала ) В папке будет 24 иконки, 8 синих и 16 желтых. Причем 1 будет лишняя- это одно из 2 ребер желтой иконки, которое просто удалите.

Часть 2 – делаем ролик

Открываем флеш, создаем новый документ- 375х275, AS2 , фон черный, частота кадров 32 и переносим наши картинки в библиотеку, для этого Файл-Импорт-Импортировать в библиотеку , после чего увидим в библиотеке все наши картинки



Мышкой тянем в рабочую область первую картинку и сразу преобразуем ее в символ- жмем F8 – Фрагмент ролика (movie clip) или просто в мувик



Теперь дабл-клик по мувику, который теперь в синей рамке, и попадем в новое окно, будем делать как бы ролик в ролике. Таймлайн на этот момент



Обратите внимание, что после дабл-клика по мувику мы попали из сцены (stage) 1 в новое окно, которое расположено внутри сцены. В первом кадре у вас будет расположена та картинка, по которой мы кликали в сцене, то есть картинка номер 1. Наша задача расположить в кадрах последовательно наши картинки, которые расположены в библиотеке, со 2 по 16. Для этого просто жмем F6 – то есть создаем ключевой кадр в седующем, втором кадре. Но наша картинка , которая расположена в 1 кадре, тоже попадет во второй. Ее нужно заменить. Для этого смотрим вниз, и на панели слоев жмем на кнопку Замена



И в окрывшемся окне выбираем картинку 2



Таким образом, в первом кадре у нас картинка 1, а во втором теперь картинка 2. Далее снова F6-Замена-Картинка 3 и так далее до 8 картинки. Погоняйте бегунок по таймлайну, проверьте, правильно ли все сделано. Наша иконка должна поворачиваться на 90 градусов, последний , восьмой кадр – ребро иконки. Поехали дальше. Снова F6 и заменяем картинку на желтую иконку, у меня это картинка22 ( смотрите исходник)
. НО!!!! Нам ее надо теперь отразить по горизонтали, для этого выбираем инструмент ( Q ) и перетягиваем квадратик справа налево ( или слева направо )



Снова F6 , заменяем на картинку 21 , причем ничего переворачивать уже не надо, при активном ( Q ) все наши картинки будут сами переворачиваться. Когда дойдете до 16 кадра, в котором должна быть картинка 16 , но в перевернутом виде, снова проверьте что получилось- ваша иконка должна повернуться на 180 градусов, при этом поменяв цвет с синего на желтый . Но мы пока получили только половину мувика- надо же на 360 повернуть. Я думаю вы уже догадались что делать дальше- продолжать теми же шагами сделать еще половину цикла, но уже с картинками желтой иконки – с 9 по 23. В итоге у вас должен получиться 31 кадр. Выходим в сцену 1, для этоко клик по значку Сцена 1 внизу таймлайна ( смотрим скриншот в начале урока ). У нас получился 31 кадр? Отлично, клик по 31 кадру слоя 1 и ставим там ключевой кадр- F6.


Все , мувик готов. Но для просмотра вам теперь придется нажать F12.


И еще немного до кучи- если посмотрите на окно библиотеки, увидите там ваш мувик –Символ 1.



Так вот, если теперь создадите новый слой и перетащите мувик мышкой в любое место рабочей области, получите 2 крутящиеся иконки, а если сделать третий слой – то 3



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


Архив с исходником ЭТОЙ флешки и сам SWF здесь

И уж совсем напоследок – я намеренно не коснулась остальных эффектов кнопки, уж очень они стандартные, но если вы обратите внимание на то, как синий круг меняется на желтый , причем делает это по окружности- это интересный момент, он делается при помощи маски слоя и инструмента ( R, O, R, O ), причем с помощью второго ( O ) . А также прячущуюся надпись - будут силы и ваш интерес- опишу в 3 части


Автор Tommira ArtTower.ру

[rex1101]

wow~ what a cool tut !

really cool stuff.

[select555]

моделю в 3D MAx потом прогоняю через Swift3D