Nicolas Prof blog http://blog.nicolasprof.com Flash блог Thu, 06 May 2010 17:08:16 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 SimplePreloader for Animator http://blog.nicolasprof.com/simplepreloader-for-animator http://blog.nicolasprof.com/simplepreloader-for-animator#comments Thu, 06 May 2010 17:05:34 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=510 Специально для людей, которые не очень «дружат» с AS3. Сделал простенький preloader.
Ради интереса воспользовался ByteTween.

Все что нужно, это иметь под рукой preloader.fla, в котором, на сцене должен находиться MovieClip, будущий preloader.
Preloader может состоять из 100 фреймов, каждый фрейм соответствует проценту загрузки, а так же может содержать текстовое поле (Dynamic) с именем ‘txt’, для отображения статуса загрузки.
Все что нужно произвести, это небольшие изменения в файле Settings.as, где нужно указать путь к файлу, который нужно загружать, если preloader.swf и загружаемый файл находятся в одной папке, то просто укажите название файла. А так же в Settings.as, необходимо указать имя MovieClip preloader’а, находящегося на сцене. По умолчанию, ’stagePreloader’.

Download Source Files

P.S.
ByteTween ужасный Tween Engine, не пользуйтесь им, в серьезных проектах, он не стоит сэкономленных 1,5кб.
Старался максимально доходчиво написать…

]]> http://blog.nicolasprof.com/simplepreloader-for-animator/feed 1 Quadratic Bézier – Segment http://blog.nicolasprof.com/quadratic-bezier-segment http://blog.nicolasprof.com/quadratic-bezier-segment#comments Fri, 15 Jan 2010 20:13:28 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=459 Сейчас работаю над еще одним очень важным компонентом пользовательского интерфейса – подсказка (Tooltip).
Так как компонент будет поддерживать закругление углов (Rounded corners), необходимо разработать полноценную логику рисования части кривой Безье, после пересечения с «усиком» подсказки.

Смотреть в действии

P.S.
Всегда хотел иметь компонент такого рода под рукой. Так что, PROFGUI в скором времени обзаведется 5-ым компонентом.

]]> http://blog.nicolasprof.com/quadratic-bezier-segment/feed 0 Happy New Year 2010 http://blog.nicolasprof.com/happy-new-year-2010 http://blog.nicolasprof.com/happy-new-year-2010#comments Wed, 06 Jan 2010 11:52:23 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=413 cup2010

Всегда хотел себе такую чашку. И вот, на новый год, мне подарили такую. Всех с наступившим праздником!

]]> http://blog.nicolasprof.com/happy-new-year-2010/feed 3 PathFinder : Benchmark http://blog.nicolasprof.com/pathfinder-benchmark http://blog.nicolasprof.com/pathfinder-benchmark#comments Mon, 04 Jan 2010 15:50:29 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=411 После внесения серьезных изменений в алгоритм «А» звезда (удалось отказаться полностью от списков, и тем самым операций splice), решил сделать тест производительности алгоритмов.
На время влияет расстояние между начальной и конечной точками(длина пути).

Смотреть в действии

P.S.
На практике, нерационально использовать алгоритм Дейкстры, где граф имеет вид сетки.

]]> http://blog.nicolasprof.com/pathfinder-benchmark/feed 1 PathFinder : Demo http://blog.nicolasprof.com/pathfinder-demo http://blog.nicolasprof.com/pathfinder-demo#comments Sun, 03 Jan 2010 09:02:38 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=409 Предлагаю вашему вниманию, собственную реализацию вспомогательного framework по обнаружению минимального пути в графе. На данном этапе разработки, PathFinder, поддерживает два алгоритма: алгоритм Дейкстры и «А» звезда. Алгоритмы изрядно изменены, для максимальной совместимости с framework, за основу взяты лишь идеи этих алгоритмов.

Достоинства и недостатки реализованных алгоритмов.

Алгоритм Дейкстры:
+ точное обнаружение минимально пути в графах любой сложности;
+ позволяет обнаруживать путь в сложных/запутанных графах;
- в 3 раза медленнее, чем алгоритм «А» звезда;

Алгоритм «А» звезда:
+ быстрый метод обнаружения пути;
+ идеально подходит для графов с принципом построения как у «королевского» графа;
- некорректно находит путь в сложных/запутанных графах;

Смотреть в действии

]]> http://blog.nicolasprof.com/pathfinder-demo/feed 3 Fastest Iteration http://blog.nicolasprof.com/fastest-iteration http://blog.nicolasprof.com/fastest-iteration#comments Sat, 26 Dec 2009 09:28:25 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=406 Небольшой наглядный тест, сравнения итераций. Очень много дискуссий в интернете по поводу, что та или иная итерация быстрее другой.
Самое интересное, что при очень большом количестве итераций (1 000 000 000), разница между различными методиками For, полностью исчезает.

Результаты теста при 1 000 000 000 итераций:

4103 ms
5340 ms
4087 ms
4089 ms
4090 ms
4090 ms

Смотреть в действии

P.S.
Постарайтесь подобрать такое количество итераций, что бы время на тип итерации выходило в районе 500мс.
На хорошем процессоре, это примерно 100 000 000 итераций.
Так же нужно понимать, что самая медленная итерация, это когда в конструкции For, i и len имеют разные типы, к примеру int и uint, про Number вообще не стоит говорить.

]]> http://blog.nicolasprof.com/fastest-iteration/feed 1 Tips & Tricks 3 http://blog.nicolasprof.com/tips-tricks-3 http://blog.nicolasprof.com/tips-tricks-3#comments Mon, 07 Dec 2009 20:05:26 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=302
  • Papervision: При использовании 3Д на сайте, в 90% случаев необходимы 3D объекты в масштабе 1:1 к 2D объектам. В последнем проекте необходимо было сделать куб как элемент навигации, при этом текстуры на гранях не должны были масштабироваться:

    PLAIN TEXT
    Actionscript:
    1. _camera.z = (_camera.zoom - 1) * _camera.focus + _cubeSide * 0.5;

    куб находится в нулевых координатах.

  • Если есть XML дерево, в котором, одно и тоже XML property может присутствовать не во всех элементах дерева. И при применении фильтра:

    PLAIN TEXT
    Actionscript:
    1. myXML..item.(@id == someID)

    вы получаете ReferenceError о том, что переменная @id не определена. Используйте другой фильтр:

    PLAIN TEXT
    Actionscript:
    1. myXML..item.(attribute('id') == someID)

  • При разработке сайта, на котором будет функционал требующий работы с SharedObject, приходится поверять логику работы, когда человек впервые на сайте, и не только. Самый простой способ, это удалить файл .sol. Если вы думаете, что очистка кэша в браузере поможет вам, то вы ошибаетесь. Так же вы конечно можете сделать программную кнопку, при нажатии на которую, будет происходить удаление SharedObject. Но все же, пару раз удалить файл из системы, как по мне, проще. Более подробно, где их искать в различных системах, можно почитать в Wikipedia
  • Timer отрабатывает не сразу после вызова метода start(), а лишь через значение delay, которое вы указали в конструкторе. Что бы заставить отработать сразу, правильнее всего сделать вот так:

    PLAIN TEXT
    Actionscript:
    1. _someTimer.dispatchEvent(new TimerEvent(TimerEvent.TIMER));
    2. _someTimer.start();

    PLAIN TEXT
    Actionscript:
    1. this.someTimerListener(null);

    Вызвать сразу listener, плохо тем, что вы не сможете использовать updateAfterEvent

  • Маска с поддержкой прозрачности с помощью BlendMode. Хорошая вещь, как для программистов, когда требуется создать полупрозрачную маску, и при этом контент под маской анимируется, так и для аниматоров, так как не нужно никакого кода.
    Техника очень проста:
    есть контейнер в котором все объекты, маска и содержимое, которое нужно поместить под маску. Для этого контейнера устанавливаем BlendMode.LAYER.

    PLAIN TEXT
    Actionscript:
    1. _container.blendMode = BlendMode.LAYER;

    Все размещается по слоям. Маска обязательно находится выше содержимого. Для маски устанавливаем BlendMode.ALPHA.

    PLAIN TEXT
    Actionscript:
    1. _gradMask.blendMode = BlendMode.ALPHA;

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

    PLAIN TEXT
    Actionscript:
    1. _content.mask = _mask;

    В итоге, все будет выглядеть где то так:

    PLAIN TEXT
    Actionscript:
    1. _container.addChild(_content);
    2. _container.addChild(_gradMask);
    3. _container.addChild(_mask);
    4.            
    5. _gradMask.mouseEnabled = false;
    6. _gradMask.blendMode = BlendMode.ALPHA;
    7. _container.blendMode = BlendMode.LAYER;
    8. _content.mask = _mask;

    P.S.
    Более подробно для аниматоров. Создаем Movieclip, меняем ему BlendMode на Layer, помещаем в него 3 Movieclip'a: Нижний слой - Содержимое, Средний слой - маска, делаем ее маской для содержимого, Верхний слой - полупрозрачная маска, меняем ей BlendMode на Alpha (не нужно полупрозрачную маску совать под маску, или пытаться ее тоже сделать маской).

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

    PLAIN TEXT
    Actionscript:
    1. _mask.cacheAsBitmap = true;
    2. _content.cacheAsBitmap = true;
    3. _content.mask = _mask;

    Те же кто думал, что нужно BlendMode + cacheAsBitmap, то исправляйте код. Разве что вы могли использовать cacheAsBitmap для сложного вектора.

    • ]]>     http://blog.nicolasprof.com/tips-tricks-3/feed 0     Powered by Alternativa3D http://blog.nicolasprof.com/powered-by-alternativa3d http://blog.nicolasprof.com/powered-by-alternativa3d#comments Thu, 02 Jul 2009 15:30:15 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=292 Реализация моего портфолио прошла долгий и тернистый путь, от маленькой трешовой флешки с кровью и рваной бумагой с звуками из игры «Носферату», до достойного 3D приложения.
    Первая 3D реализация использовала Papervision Great White Alpha, т.е. самая первая и сырая версия Papervision 2.0. Движек выдавал в среднем 24 fps на «игровом» компьютере. Следующая версия портфолио уже использовала Away3D, интерактивность немножко прихрамывала, и API несильно отличалось, и все так же была возможность использовать Sprite материалы. Так же, кубики уже не вращались все время, а только когда пользователь использовал интерактивные возможности, т.е. сцена рендерилась при изменениях. FPS при рендеринге все так же «проседало».

    И вот 4.0 версия портфолио, которая использует Alternativa3D. Вся навигация на сайте построена на мыши: левая, правая клавиши и колесико. Пропал МР3 плеер. На сайте два режима навигации, как вам идея? Почему не предоставить пользователю несколько режимов навигации, и пусть он выбирает более удобный для него. Так и появилась альтернативная навигация.
    Производительность у нового движка отличная. Разработчики создали свою отображаемую модель, начав все с нуля (Object3D extends Object). Все бы хорошо, но вот очень нехватает параметра alpha и visible. Так же есть некоторые косяки, после масштабирования объектов, иногда начинают появляться артефакты в виде дополнительных треугольников на поверхности. Так же есть баг с рендерингом текстуры: если объект масштабируется, при этом происходит анимация вершин, и все это происходит за видом камеры, то текстуры не обновляются, и имеем обычный белый объект. Из всех 3-ёх 3D движков, Alternativa3D имеет самый «приятный» API и самую высокую производительность. Если разработчики еще добавят возможность использования DisplayObjectContainer как текстуры, то это будет самый лучший движек для создания Pure 3D Flash сайтов.

    P.S.
    Посвящается RSS Reader'ам.

    ]]>     http://blog.nicolasprof.com/powered-by-alternativa3d/feed 1     Tips & Tricks 2 http://blog.nicolasprof.com/tips-tricks-2 http://blog.nicolasprof.com/tips-tricks-2#comments Thu, 02 Jul 2009 15:00:42 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=250 1. Быстрое получение значения после запятой.

    PLAIN TEXT
    Actionscript:
    1. public function getDecimal($value : Number) : Number {
    2.     return $value - ($value>> 0);
    3. }

    2. Что бы не было проблем с получением DisplayObject'а после использования myMovieClipHolder.gotoAndStop(). Используйте Event.ENTER_FRAME, до того как событие отработает один раз. Использование MovieClip распространено в многоязычных версиях сайтов, сделав лэйблы: ru, en, ua.

    PLAIN TEXT
    Actionscript:
    1. private function onChangelanguage(e : Event) : void {
    2.     if(_k> 0){
    3.         this.removeEventListener(Event.ENTER_FRAME, onChangelanguage);
    4.         registerMC();
    5.     }
    6.     _k++;
    7. }

    3. Являюсь ярым поклонником TweenLite разрабатываемого Jack Doyle. Не так давно, проект стал платформой для программной анимации, и легко расширяется плагинами. Я с вами поделюсь двумя плагинами, один из которых я использую в 40% всех программных анимаций - AutoDeletePlugin. ShortRadianRotationPlugin - позволяет работать с радианами, как это сделано в Alternativa 3D. AutoDeletePlugin - применяется только для DisplayObject. По завершению анимации, больше не нужно использовать onComplete, что бы удалить DisplayObject.

    4. Быстрый и удобный, но не самый надежный способ убрать интерактивность с элементов интерфейса. Допустим есть некая форма, элементы которой содержатся в одном контейнере, пусть он будет называться formHolder.

    PLAIN TEXT
    Actionscript:
    1. private function toggleForm($state : Boolean) : void {
    2.     formHolder.mouseChildren = $state;
    3. }

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

    PLAIN TEXT
    Actionscript:
    1. private function toggleForm($state : Boolean) : void {
    2.     formHolder.mouseChildren = $state;
    3.     formHolder.alpha= ($state) ? 1 : 0.6;
    4. }

    5. Разрабатывая Pure AS3 проект, вы не сможете использовать «плюшку» Flash Player 10 для работы с текстом. Так как новый фреймворк для работы с текстом использует совсем другой тип встроенного текста, обычный встроенный текст в проекте имеет тип EMBEDDED, когда необходим EMBEDDED_CFF. Решить эту проблему сможет лишь новый Flex SDK 4 версии с расширенным метатэгом Embbed. Но учтите, шрифт будет встроен дважды.

    ]]>     http://blog.nicolasprof.com/tips-tricks-2/feed 2     Необъятный Blur http://blog.nicolasprof.com/neobyatnyj-blur http://blog.nicolasprof.com/neobyatnyj-blur#comments Fri, 12 Jun 2009 12:06:43 +0000 Nicolas Prof http://blog.nicolasprof.com/?p=252 Были ли у вас случаи, когда ограничения Flash не позволяли использовать фильтр?
    Есть очень простой обходной путь. Если нам не разрешают применить фильтр к самому объекту, значит применим к его детям. Метод работает быстро, так как применение фильтра довольно таки быстрая операция. В этом можете убедиться в примере. Так же есть зависимость, что количество детей фильтруемого объекта прямо пропорционально кратности замедления процесса, т.е. если 100 детей, то время применения фильтра будет в 100 раз медленней. Вместо 10мс, будет 1сек при 10 000 итераций, согласитесь, что столько итераций в секунду в работающем проекте невозможно, так что у нас в запасе хорошие резервы, и мы вполне вольны использовать такую технику с каким либо Tween движком.

    Смотреть в действии

    P.S.
    Кнопка Broke Holder, изменяет габариты спрайта на 5000 рх.

    ]]>     http://blog.nicolasprof.com/neobyatnyj-blur/feed 0