Filters

Привет. :)

Один из минусов Graphics перед Movieclip и Button - это невозможность применять фильтры.

Так. Постой. Что такое фильтры?
Лучше я покажу пример:

Довольно симпатично смотрится, да?


Фильтры можно применить к любому Movieclip или Button. То есть это может быть не только круг, любая форма.

Как это сделать?
Выделяем символ. В Properties находим вкладку FILTERS:

Управление фильтрами я выделил красным прямоугольником, т.к. я сам не с первого раза нашел его. :)

Далее играемся с параметрами, накладываем несколько фильтров, чтобы получить красивую картинку.

Может, расскажешь что означают эти параметры?

Blur X : На сколько пикселей разнесет ваш фильтр по X.

Blur Y : На сколько пикселей разнесет ваш фильтр по Y.

Strength : На сколько плотный ( насыщенный ) будет фильтр.

Quality : Число применений фильтра. Low - 1, Medium - 2, High - 3. Программно можно применять числа до 15. Чем больше число, тем мягче фильтр, но это занимает больше времени на прорисовку. Чтобы добиться похожего эффекта с меньшими затратами ресурсов, можно увеличить Blur X и Blur Y вместо Quality.

Color : Hex-цвет. Ваш Кеп. :)

:D

Knockout : Делать ли прозрачной заливку символа.

Inner glow : Внутренне свечение.

Понятно. Что дальше?

Теперь нужно научиться создавать фильтры из кода.

var glowFilter : GlowFilter = new GlowFilter( 0xFFFFFF, 1.0, 30, 30, 1, 1, false, false );
var blurFilter : BlurFilter = new BlurFilter( 10, 10, 1 );

Создать-то мы их создали, но что дальше? Нужно применить к Movieclip.

Фильтры хранятся в качестве массива в свойстве filters. АХТУНГ!!1 Тем не менее, мы не можем написать что-то такое:

symbol.filters.push( myFilter );

Это не будет работать. Почему? Видимо, Movieclip слушает изменение свойства filters и только тогда применяет фильтры. Об этом я расскажу позже.

Это легко можно обойти:

var symbolFilters : Array = symbol.filters;
symbolFilters.push( myFilter );
symbol.filters = symbolFilters;

Вот так-то.

Теперь, как тру-программисты, напишем самый первый пример ( где 8 кругов ) полностью из кода.
Рисуем белый круг, конвертируем в Movieclip, называем его Circle, ставим галочку Export for ActionScript.

На этот раз запихнем все в один класс.

Main.as:

package
{
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.filters.GlowFilter;
    import flash.filters.BitmapFilterType;
    import flash.filters.BlurFilter;
    import flash.filters.DropShadowFilter;
    import flash.filters.BevelFilter;
    import flash.filters.GradientBevelFilter;
    import flash.filters.GradientGlowFilter;
    
    public class Main extends MovieClip
    {
        
        private const
        FILTER_NAME_LABEL_WIDTH : Number = 200.0;
        
        public function Main () : void
        {
            this.init();
        }
        
        private function init () : void
        {
            this.createFilterExamples();
        }
        
        private function createFilterExamples () : void
        {
            this.createFilterExample( {
                x : 100,
                y : 100,
                textFieldYDistance : 70,
                filterName : "Glow",
                filters : [ new GlowFilter( 0xFFFFFF, 1.0, 30, 30, 1, 1, false, false ) ]
            } );
            this.createFilterExample( {
                x : 200,
                y : 100,
                textFieldYDistance : 70,
                filterName : "Blur",
                filters : [ new BlurFilter( 10, 10, 1 ) ]
            } );
            this.createFilterExample( {
                x : 300,
                y : 100,
                textFieldYDistance : 70,
                filterName : "Drop Shadow",
                filters : [ new DropShadowFilter( 4.0, 45.0, 0x000000, 1, 8.0, 8.0, 1.0, 1, false, false, false ) ]
            } );
            this.createFilterExample( {
                x : 400,
                y : 100,
                textFieldYDistance : 70,
                filterName : "Bevel",
                filters : [ new BevelFilter() ]
            } );
            this.createFilterExample( {
                x : 100,
                y : 230,
                textFieldYDistance : 70,
                filterName : "Gradient Bevel",
                filters : [ new GradientBevelFilter( 4.0, 45.0, [ 0x46D9FF, 0x0000FF ], [ 1.0, 1.0 ], [ 0, 255 ], 10, 10, 1, 1 ) ]
            } );
            this.createFilterExample( {
                x : 200,
                y : 230,
                textFieldYDistance : 70,
                filterName : "Gradient Glow",
                filters : [ new GradientGlowFilter( 0, 45.0,
                [ 0xFF0000, 0xFF7F00, 0xFFFF00, 0x00FF00, 0x5BA1FF, 0x6D41FF, 0x9154FF ],
                [ 0, 0.2, 0.2, 0.4, 0.5, 0.6, 0.7 ],
                [ 0, 20, 40, 60, 80, 100, 120 ],
                35, 35, 1, 1, BitmapFilterType.OUTER ) ]
            } );
            this.createFilterExample( {
                x : 300,
                y : 230,
                textFieldYDistance : 70,
                filterName : "Glow & Blur",
                filters :
                [
                     new GlowFilter( 0xFFFFFF, 1.0, 30, 30, 0.5, 1, false, false ),
                    new GlowFilter( 0x7BC4FF, 1.0, 20, 20, 1, 1, false, false ),
                    new GlowFilter( 0x4A8CFF, 1.0, 10, 10, 1, 1, false, false ),
                    new BlurFilter( 4, 4, 1 )
                ]
            } );
            this.createFilterExample( {
                x : 400,
                y : 230,
                textFieldYDistance : 70,
                filterName : "Glow & Blur №2",
                filters :
                [
                     new GlowFilter( 0xFFFFFF, 1.0, 30, 30, 0.5, 1, false, false ),
                    new GlowFilter( 0xFFBF15, 1.0, 20, 20, 1, 1, false, false ),
                    new GlowFilter( 0xFFBD15, 1.0, 10, 10, 1, 1, false, false ),
                    new BlurFilter( 4, 4, 1 )
                ]
            } );
        }
        
        private function createFilterExample ( options : Object ) : void
        {
            // Create a circle
            var circle : MovieClip = new Circle();
            circle.x = options.x;
            circle.y = options.y;
            
            // Apply filters
            circle.filters = options.filters;
            
            stage.addChild( circle );
            
            // Create a TextField
            var filterNameLabel : TextField = new TextField();
            filterNameLabel.multiline = false;
            filterNameLabel.selectable = false;
            filterNameLabel.width = FILTER_NAME_LABEL_WIDTH;
            filterNameLabel.x = options.x - FILTER_NAME_LABEL_WIDTH * 0.5;
            filterNameLabel.y = options.y - options.textFieldYDistance;
            filterNameLabel.text = options.filterName;
            
            // Create a TextFormat
            var textFormat : TextFormat = new TextFormat();
            textFormat.color = 0xFFFFFF;
            textFormat.font = "Arial";
            textFormat.align = TextFormatAlign.CENTER;
            
            // Apply the textFormat to the filterNameLabel
            filterNameLabel.setTextFormat( textFormat );
            
            stage.addChild( filterNameLabel );
        }
    }
}

Надеюсь, код получился понятным. Единственное, что там может вызвать вопросы - это параметры у фильтров, но всех их я в одном посте не опишу.

Исходник.