вторник, 22 апреля 2008 г.

Эффекты с материалами.

Очередной этап состоит в изменении свойств материалов, из которых состоят примитивы, используя известные эффекты, такие как размытие, сияние и прочие. Для рассмотрения примеров будем пользоваться немножко измененным примером с плоскостью, залитую однородным красным цветом.
package
{
import flash.display.Sprite;
import flash.events.*;
import flash.utils.Timer;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.scenes.MovieScene3D;

[SWF(width='400',height='400',backgroundColor='0x000000',frameRate='30')]

public class ExampleTransformationRotate extends Sprite
{
private var container: Sprite;
private var scene: MovieScene3D;
private var camera: Camera3D;
private var plane:Plane;
private var myTimer:Timer = new Timer(100);

public function ExampleTransformationRotate()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );
scene = new MovieScene3D( container );
camera = new Camera3D();
camera.z = -500;
camera.zoom = 5;

var material:ColorMaterial = new ColorMaterial();
material.doubleSided = true;
material.fillColor = 0xFF0000;
material.smooth = true;
plane = new Plane( material, 300, 300, 1, 1 );
scene.addChild( plane );
myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, timerHandler);

}

private function timerHandler( ev:TimerEvent ): void
{
plane.rotationX += 5;
plane.rotationY += 2;
plane.rotationZ += 7;
scene.renderCamera( camera );

}
}
}

Этот пример немного отличается от использованного ранее. Здесь вращение плоскости осуществляется не на событие enterFrame, а по тику таймера.


  • Эффект изменения прозрачности.
    Для реализации нам понадобится изменить одно свойство материала, а именно fillAlpha. Если после подчеркнутой строки добавить material.fillAlpha = 0.1; , то вместо вращающегося ярко-красного квадратика перед нами окажется тусклый квадратик. Зачение свойства fillAlpha позволяет регулировать прозрачность заливки. Значение 0 соответствует полной прозрачности, а значение 1 - полной непрозрачности.
    Для WireframeMaterial (провоочного каркаса) эффекта можно добиться при помощи изменения пары свойств материала: material.lineColor = 0xFF0000; - отвечает за цвет каркасных линий, material.lineAlpha = 0.1; - задает их прозрачность.
    Для BitmapFileMaterial и для MovieAssetMaterial (он тоже на основе BitmapData вроде как) я пока не пойму, возможно ли изменение прозрачности заливки.
  • Эффекты с фильтрами.
    Поскольку никто не отменял использование фильтров, посмотрим, как это может улучшить результат. Для реализации, во-первых, необходимо сделать импорт соответствующей библиотеки: import flash.filters.*;. Во-вторых, в любом месте после вызова конструктора переменной container нужно сформировать набор фильтров. Например, рассмотрим эффекты сияния:

    var filter:Array = new Array();
    filter.push(new GlowFilter(0x00FF00, 0.5, 20,20, 2, BitmapFilterQuality.HIGH, false, false));
    filter.push(new GlowFilter(0x00FF00, 1, 40, 40, 2, BitmapFilterQuality.HIGH, true, false));

    Я не объясняю принцип формирования массива фильтров, считаю, что это хорошо известно и понятно написано в хелпе для Flash. После того, как массив фильтров заполнен, можно его применять: container.filters = filter;. Отличный красный квадратик с зеленым сиянием - это то, что должно было получиться. Замечу, что фильтры применяются именно к контейнеру. Такой подход работает и для WireframeMaterial, и для битмапов.

четверг, 17 апреля 2008 г.

Примитивы в Papervision

В предыдущих примерах мы рассмотрели различные материалы, натягиваемые на один и тот же графический примитив - плоскость. Оказывается, возможности этим далеко не ограничены.
Во-первых, все прообразы допустимых фигур находятся в org.papervision3d.objects. Поэтому нужно делать импорт : import org.papervision3d.objects.*.

Какие же существуют примитивы и как с ними общаться?

  • Уже знакомая нам плоскость Plane. останавливаться подробно на ней не буду, ее мы видели уже неоднократно.
  • Примитив сфера Sphere. Конструктор выглядит как new Sphere( material, 100, 8, 6). При этом первым параметром в него передается радиус сферы. Следующие два параметра определяют количество полигонов, из которых собирается сфера, по горизонтали и вертикали. Чем больше эти числа, тем более "гладкой" будет поверхность сферы.
  • Примитив куба Cube. Для него существует определенная специфика. Во-первых, вместо одного материала, для него указывается целый список, персонально для каждой грани. Например, у вас есть два материала. Material - оставшийся с прошлого раза портрет кота, material1 - просто проволочный каркас. И вы хотите сделать куб из фотографий кота, но одна сторона этого куба будет представлять собой проволочку, чтобы можно было заглянуть внутрь куба. Тогда:
    var material1:WireframeMaterial = new WireframeMaterial(0xFF0000);
    var material:BitmapFileMaterial = new BitmapFileMaterial("texture.jpg");
    material.doubleSided = true;
    material.smooth = true;
    var materiallist:MaterialsList = new MaterialsList();
    materiallist.addMaterial(material1,"top");
    materiallist.addMaterial(material,"bottom");
    materiallist.addMaterial(material,"front");
    materiallist.addMaterial(material,"back");
    materiallist.addMaterial(material,"left");
    materiallist.addMaterial(material,"right");

    И для создания самого примитива нужно вызывать конструктор new Cube( materiallist, width, depth, height, a, b, c). width, depth, height - это переменные, отвечающие соответственно за ширину, глубину и высоту куба. А a, b, c - это, как и в предыдущем случае, параметры, регулирующие количество примитивов. Попробуйте установить любой фигуре полностью проволочный каркас и поизменять эти параметры. Сразу станет ясно, какова их роль.
  • Цилиндр Cylinder. Для создания его нужно вызвать new Cylinder( material, radius, height, a, b). Radius - радиус донца цилиндра, heigth - высота фигуры, a и b - уже знакомые регуляторы числа полигонов.

На сегодняшний день это все, что мне известно о графических примитивах в ПВ. Или, по крайней мере, то, что у меня работает :)

пятница, 11 апреля 2008 г.

Материалы в Papervision: работа с внешними файлами изображений.

Для того, чтобы подгружать текстуры извне в Papervision имеется специальный класс BitmapFileMaterial. Прелесть этого материала очевидна: любой, лежащий рядом с флешкой рисунок может стать текстурой.
И нужно всего-то ничего. Изменяем материал:
var material:BitmapFileMaterial = new BitmapFileMaterial("texture.jpg");
material.doubleSided = true;
material.smooth = true;
и вот уже у меня на квадратике вращается сонная мордашка кота :)

В ПВ есть возможность в качестве материала использовать flv-видео. Я пока не сталкивалась с необходимостью это делать, но руководство на английском с примером и кодом тут.

Продолжение: материалы в PaperVision. Проблемы с Bitmap Material.

Следующим материалом, который я хотела рассмотреть, был Bitmap Material. Я честно вставляла код из туториалсов, которые нашла в вики. Но к результату это не привело.
Нужно было сделать дополнения в раздел объявления переменных:
[Embed(source="texture.jpg")]
private var File:Class;
И заменить материал:
var material:BitmapMaterial = new BitmapMaterial((new File() as Bitmap).bitmapData);
material.doubleSided = true;
material.smooth = true;
Но почему-то к какому-либо эффекту у меня это не привело. То есть ошибок нету, но в сгенерированной свф-ке просто белый экран.
Я грешу на 2 вещи:
  1. Пример писан для ПВ 1.3, а у меня уже Papervision3D Beta 1.7 (20.08.07) .
  2. Возможно, я неправильно приембедила файл с текстурой. Я его и просто рядом в каталоге клала, и в библиотеку импотрировала, и даже linkage ему давала. Ничего не помогает :(

И тогда я решила: а зачем мне битмап, если его можно засунуть в мувиклип и поступить по последнему рассмотренному примеру? Эта мысль меня крайне успокоила, и я решила продолжать дальше.

вторник, 8 апреля 2008 г.

Papervision 3d: изменяем материал.

Теперь очередь дошла и до материала. Позволим себе несколько вольностей все с тем же самым, первым примером. Кроме ColorMaterial в ПВ имеется целый набор классов (загляните в ...\src\org\papervision3d\materials). В качестве примера возьмем, скажем, проволочный карскас из WireframeMaterial.
Переделки, которые потребуются в коде, выделены жирным:
public function ExampleTransformationRotate()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );
scene = new MovieScene3D( container );
camera = new Camera3D();
camera.z = -500;
camera.zoom = 5;
var material:WireframeMaterial = new WireframeMaterial();
material.doubleSided = true;
//material.fillColor = 0x00FF00;
//material.fillAlpha = 1.0;
plane = new Plane( material, 100, 100, 1, 1 );
scene.addChild( plane );
stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
Запустив переделанный пример, пронаблюдаем уже не полностью залитый квадрат, а его проволочное подобие с одной диагональю.

Довольно интересен movieAssetMaterial. Для того, чтобы пронаблюдать его в действии, придется создать в библиотеке специальный мувиклип.
Итак, создаем новый пустой мувиклип в библиотеке главного fla-файла. Назовем его myClip и сделаем настройку экспорта с тем же самым именем. Внутри него нарисуем квадратик со стороной 100 (такой же размер, как и размер летающего квадрата). Сделаем в нем простейшую анимацию. В моем случае, это светло-желтый круг, который в течение 50-и кадров увеличивается и уменьшается в размере.
Теперь видоизменим код, чтобы дать понять фильму, какой материал будет использован: public function ExampleTransformationRotate()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );
scene = new MovieScene3D( container );
camera = new Camera3D();
camera.z = -500;
camera.zoom = 5;
var material:MovieAssetMaterial = new MovieAssetMaterial("myClip", false);
material.doubleSided = true;
material.animated = true;
plane = new Plane( material, 100, 100, 1, 1 );
scene.addChild( plane );
stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}

Я не освоилась еще с этим блогом, поэтому не пойму, как здесь выложить архив с примером. Опишу словами: летает квадратик, на который натянут ваш клип из библиотеки. При этом клип проигрывается. Примеры можно скачать с этой англоязычной странички: http://content.madvertices.com/articles/PV3DTraining/default.htm#I.

Допишу свой тернистый путь завтра. А пока - вот ссылки, по которым я копалась. http://wiki.papervision3d.org/index.php?title=Main_Page http://wiki.papervision3d.org/index.php?title=Examples http://www.madvertices.com/2008/01/papervision-3d-training-videos.html http://pv3d.org/2008/03/26/dynamic-parenting/ http://papervision2.com/ http://osflash.org/tutorials

Туториалс - http://www.webdesignermag.co.uk/tutorial_files.html

Papervision 3d: очевидные пояснения.

Пока что все изменения будут касаться файла ExampleTransformationRotate.as.
Сначала очевидное:

  1. Чтобы получить из красного квадратика зеленый нужно модифицировать строчку:
    material.fillColor = 0xFF0000;
    Изменив цвет на 0x00FF00. Перепубликуем и любуемся на зеленый квадрат :).

  2. Размер квадратика регулируется во втором и третьем параметрах конструктора:
    plane = new Plane( material, 128, 128, 1, 1 );
    Измените их на 300 и 300. Теперь любуемся на большой зеленый квадрат :)
    NB: Посмотреть, что означают последние два параметра.

  3. За то, насколько близко вы разглядываете квадратик, отвечает строчка:
    camera.zoom = 5;
    Попробуйте выставить зум в 1 и увидите эффект.

  4. Из очевидных вещей остались координаты квадратика относительно точки (0;0) главного фильма:
    container.x = 200;
    container.y = 200;

Papervision 3d: может, познакомимся?

В связи с тем, что я "провтыкала" уже несколько работ только потому, что не хотела связываться с данным инструментом, вот, назрела необходимость.
1) Откуда взять Papervision?
Лично я брала с googleCodes. Выкачала свн-ом почти 20 мб всякой всячины вот отсюда. И положила на диск С в каталог PaperVision.
2) И что делать со всем выкачанным добром?
Дальше нужно заставить Flash IDE увидеть установленные классы. Для этого нужно ее (Flash) запустить. Создать новый документ. Зайти в Edit->Preferences->ActionScript и там нажать на кнопочку ActionScript 3.0 Settings. В появившемся окошке следует добавить путь к скачанным классам. В моем случае C:\Papervision\googlecode\as3\trunk\src . Сиреневая часть пути зависит от того, куда вы сложите скачанный код. После этой прописи Flash начнет видеть ПВ.
3) Первый пример для Papervision.
Предлагается для ознакомления на http://wiki.papervision3d.org/. В разделе Using Papervision3D -> Tutorials. Это вращающаяся плоскость красного цвета.
Для того, чтобы его посмотреть, нужно сделать следующее:

  • Создать новый Flash документ и сохранить его куда-нибудь. Помните, что благодаря прописыванию путей к классам, наш пример теперь увидит все, что нужно.
  • Создайте as-файл и сохраните его туда же под именем ExampleTransformationRotate.as
  • Во вновь созданном документе на панели Properties в поле для ввода Document Class укажите ExampleTransformationRotate. Обратите внимание, что расширение файла здесь не указывается.
  • В as-файл вставьте код:


    package

    {

    import flash.display.Sprite;
    import flash.events.Event;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.objects.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.scenes.MovieScene3D;
    [SWF(width='400',height='400',backgroundColor='0x000000',frameRate='30')]
    public class ExampleTransformationRotate extends Sprite
    {
    private var container: Sprite;
    private var scene: MovieScene3D;
    private var camera: Camera3D;
    private var plane:Plane;
    public function ExampleTransformationRotate()
    {
    container = new Sprite;
    container.x = 200;
    container.y = 200;
    addChild( container );
    scene = new MovieScene3D( container );
    camera = new Camera3D();
    camera.z = -500; camera.zoom = 5;

    material:ColorMaterial = new ColorMaterial();
    material.doubleSided = true;
    material.fillColor = 0xFF0000;
    material.fillAlpha = 1.0;

    plane = new Plane( material, 128, 128, 1, 1 );
    scene.addChild( plane );
    stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
    }
    private function onEnterFrame( event: Event ): void
    {
    plane.rotationX += 4.35;
    plane.rotationY += 6.55;
    plane.rotationZ += 0.55;
    scene.renderCamera( camera );
    }
    }
    }
    • Сохраните as-файл.
    • Запустите свой fla-исходник.

    Крутится? Лично у меня получился вращающийся плоский красный квадратик. Правда, выкинулось в трейс cообщение:

    Papervision3D Beta RC1 (18.06.07)
    DisplayObject3D: null
    DisplayObject3D: null
    DisplayObject3D: null

    Оно осталось для меня загадкой.

    В общем, можно себя поздравить: хеллоу, ворлд, так сказать, сделан!

    воскресенье, 6 апреля 2008 г.

    Социальный инжениринг

    Так мой любимый муж назвал этот процесс. О начале коего я сообщала еще вчера. Это по поводу критики людей. Муж, видя мою недоуменную физиономию, дал мне один золотой совет. Следует вызвать человека на диалог. Вполне серьезно (как бы в этом самом месте вас ни сжигало желание отправить оппонента в эротическое путешествие) следует поинтересоваться: мол, а что бы вы еще посоветовали? а как мне улучшить свое творчество?
    И тут ключевые слова "вежливо" и "серьезно". Не воспринимайте кавычки как инверсию :). Тогда можно одним махом убить нескольких зайцев:
    1) Есть шанс обратить его в свою веру. То есть, возможно, он проникнется доброжелательным отношением к людям.
    2) Сделать ему приятное. Он в своих собственных глазах вырастет в вашего учителя и ему станет хорошо от того, что его мнение кому-то нужно и небезразлично.
    3) Есть вероятность, что он подскажет со временем действительно что-нибудь полезное.
    4) Следствие из 2. Можно поиметь немножко пиара. Возможно, он расскажет о вас знакомым, станет послеживать за вашим развитием или что-то в этом духе.

    Пункт 4 приключился и со мной. Товарисч накидал в мою статью массу комментов, очевидно, волны желания помочь мне накрывали его неоднократно. От чего я сейчас имею позицию на первой странице по комментируемости.

    Муж говорит, что управлять людьми интересно и весело :).

    Весна

    Spring sign Spring sign
    Вот такая у нас здесь весна :)

    суббота, 5 апреля 2008 г.

    Ну вот. Первая критика в мой адрес как автора сайта и фотографа. Точнее, конечно, не первая, но превая после начала активного его продвижения. На Писали.ру я продублировала свой первый пост. В ответ получила анонимный пост с рекомендацией не высовываться со своими "фотками", когда весь интернет завален профессиональными ресурсами.
    Расстроена? Мне ведь нет смысла здесь врать. Имя вымышлено, никто все равно не прочтет. Нет, не расстроена. Неприятно - есть немного. Но я от нашего среднестатистического человека ничего другого и не ожидаю. Ни в коем случае не вображала, что весь мир падет к моим ногам.
    Но пока что мой ТИЦ скакнул на 30 вверх. Не исключено, что благодаря таким вот анонимам. Мне так и хотелось написать ему: "Поставьте на своем сайте прямую ссылку на мой и напишите рядом, что вот так не надо делать :)". Но я сдержалась. 'Cause my mama taught me better then that.
    Так что сказать, что я прям распереживалась нельзя. Несмотря на то, что я такая чувствительная и могу рыдать от каждого косого взгляда студентов, здесь я словно в небесной броне. И броня моя зовется сапой ;).
    Но вот, тем не менее, считаю необходимым описать случившееся.

    Мой первый пост.

    Прежде всего, привет всем!
    Я намерена посвятить записи этого дневника своему хобби - фотографии. А также результату этого увлечения - моему сайту ФотоСтарт.info. На свет он появился в декабре 2007 года, примерно тогда же, когда я сделала свою первую фотку. Да прибудет со мной сила :).