окт 302014
 

FLASH MAHER

 

Adobe Flash Professional – Univerzalna knjiga

ACTION SCRIPT 3.0

 

FILTERI

 

FLASH MAHER - FILTERI

FLASH MAHER – FILTERI

 

Adobe Flash Professional  ima razne filtere koje možemo da iskoristimo da bi poboljšali izgled teksta, statičnih slika ili animacija. Filteri mogu da se primene na bilo koji objekat ili instancu. Mogu da se aktiviraju iz prozora PROPERTIES/FILTERS, ili pomoću AS3.0 koda. Spisak filtera koji su dostupni je sledeći:

1. Bevel filter (BevelFilter class)
2. Blur filter (BlurFilter class)
3. Drop shadow filter (DropShadowFilter class)
4. Glow filter (GlowFilter class)
5. Gradient bevel filter (GradientBevelFilter class)
6. Gradient glow filter (GradientGlowFilter class)
7. Color matrix filter (ColorMatrixFilter class)
8. Convolution filter (ConvolutionFilter class)
9. Displacement map filter (DisplacementMapFilter class)
10. Shader filter (ShaderFilter class)

Neke filtere je moguće aktivirati dizajniranjem bez programiranja, dok se neki mogu aktivirati samo kodiranjem. Pored naziva filtera u malim zagradama su prikazani nazivi klasa kojima filteri pripadaju.

1. Bevel filter bi mogao da se shvati kao dodavanje efekta kosina objektu, tako da može da se iskoristi za stvaranje efekta trodimenzionalnog izgleda. Klasa BevelFilter ima sledeća svojstva:

BevelFilter(distance:Number = 4.0, angle:Number = 45, highlightColor:uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:uint = 0x000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = “inner”, knockout:Boolean = false)

U opisu klase su navedena svojstva koja mogu da se podese programski zajedno ili pojedinačno. To su: razdaljina filtera, ugao, prva boja, providnost prve boje, druga boja, providnost druge boje, zamućenje po ‘x’, zamućenje po ‘y’, jačina filtera, kvalitet filtera, tip filtera i nokaut filtera. Pojedinačno definisanje svojstava filtera se radi na sledeći način:

import flash.filters.BevelFilter;
var Bevel:BevelFilter = new BevelFilter();
Bevel.distance = 20;
Bevel.type = “outer”;
BevelInstance.filters = [Bevel];

U primeru su programski definisani kvadrati kao instance klase ‘Sprite’ u niz ‘Square’, na kojima se aktiviraju filteri. Square[0] je osnovni kvadrat bez primene filtera, dok se ostali indeksi niza instanci ‘Square’ poklapaju sa rednim brojem filtera.

import flash.filters.*;

import flash.display.*;

import flash.events.*;

import flash.text.*;

import flash.geom.*;

import flash.net.*;

var Square:Array = new Array();

for(var Id:int = 0; Id < 10; Id ++) {

Square[Id] = new Sprite();

Square[Id].graphics.lineStyle(20, 0x006600, 1);

Square[Id].graphics.beginFill(0x0033ff, 1);

Square[Id].graphics.drawRect(Id * 100 + 20, 20, 60, 60);

Square[Id].graphics.endFill();

stage.addChild(Square[Id]);

}

var Bevel:BevelFilter = new BevelFilter(5, 45, 0xffffcc, 1, 0x000000, 1, 5, 10, 1, 3, “inner”, false);

/* Bevel.distance = 20;

Bevel.type = “outer”; */

Square[1].filters = [Bevel];

Ovim filterom mogu da se izaberu dve boje – jedna sa jedne, a druga sa druge strane objekta, pomoću kojih može da se stvori iluzija da je sa jedne strane objekt osvetljen, a da se sa druge strane pojavljuje tamna oblast.

2. Blur filter je filter pomoću koga se objekti zamagljuju, uz čiju pomoć može da se dobile efekat kao da se posmatra kroz polumatirano staklo. Zamagljenjem objekata može da se stvori iluzija blizine i daljine objekta. Klasa BlurFilter ima sledeća svojstva:

BlurFilter(blurX:Number = 4.0, blurY:Number = 4.0, quality:int = 1)

Nastavak prethodnog koda sa dodatkom Blur filtera sledećem elementu bi bio:

var Blur:BlurFilter = new BlurFilter(10, 10, 1);

Square[2].filters = [Blur];

3. Drop shadow filter je filter koji dodaje senku objektima. Senke stvaraju iluziju da postoji izvor svetlosti koji ih stvara, a mi imamo mogućnost da kroz svojstva filtera podesimo intenzitet senke, poziciju, boju… Klasa DropShadowFilter ima sledeća svojstva:

DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1, inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false)

var Drop:DropShadowFilter = new DropShadowFilter(10, 45, 0x333333, 0.7, 5, 10, 1, 3, false, false, false);

Square[3].filters = [Drop];

4. Glow filter je filter koji dodaje efekat odsjaja objektima. Klasa GlowFilter ima sledeća svojstva:

GlowFilter(color:uint = 0xFF0000, alpha:Number = 1.0, blurX:Number = 6.0, blurY:Number = 6.0, strength:Number = 2, quality:int = 1, inner:Boolean = false, knockout:Boolean = false)

var Glow:GlowFilter = new GlowFilter(0xffff00, 1, 10, 20, 2, 3, false, false);

Square[4].filters = [Glow];

5. Gradient bevel filter fukcioniše kao i Bevel filter s tim da možete da primenite gradijent (prelaz) boja, umesto po jedne boje predviđene Bevel filterom. Boje, vidljivosti i raspored boja su zapisani u nizovima (treba da budu svi iste dužine) koji nisu ograničeni brojem članova. Ako želite možete da napravite prelaz i od 10 ili više boja. Klasa GradientBevelFilter ima sledeća svojstva:

GradientBevelFilter(distance:Number = 4.0, angle:Number = 45, colors:Array = null, alphas:Array = null, ratios:Array = null, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = “inner”, knockout:Boolean = false)

var GradientBevel:GradientBevelFilter = new GradientBevelFilter(10, 45, [0xffffff, 0x0000ff, 0xff0000], [1, 0.5, 1], [0, 128, 255], 5, 10, 1, 3, “inner”, false);

Square[5].filters = [GradientBevel];

6. Gradient glow filter takođe slično funkcioniše kao običan Glow filter s tim da možete da primenite gradijent (prelaz) boja. GradientGlowFilter klasa ima sledeća svojstva:

GradientGlowFilter(distance:Number = 4.0, angle:Number = 45, colors:Array = null, alphas:Array = null, ratios:Array = null, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = “inner”, knockout:Boolean = false)

var GradientGlow:GradientGlowFilter = new GradientGlowFilter(0, 0, [0x9932ff, 0x0000FF, 0x9900FF, 0xFF0000, 0xFFFF00], [1, 1, 1, 1, 1], [0, 32, 64, 128, 225], 10, 10, 2, 3, “outer”, false);

Square[6].filters = [GradientGlow];

7. Color matrix filter Vam dopušta da primenite matricu transformacije dimenzija 4×5 na RGBA (RedGreenBlueAlpha) vrednosti svakog piksela ulazne slike da bi proizveli nov set RGBA vrednosti. ColorMatrixFilter klasa ima samo svojstvo matrice:

ColorMatrixFilter(matrix:Array = null)

var ColorMat:ColorMatrixFilter = new ColorMatrixFilter([1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0]);

Square[7].filters = [ColorMat];

U dodatnom primeru je prikazana primena Color matrix filtera na istu sliku koja se učitava programski, sa posebno setovanom crvenom, zelenom i plavom.

var ColorMatrixMovie:MovieClip = new MovieClip();

ColorMatrixMovie.x = 450;

stage.addChild(ColorMatrixMovie);

BuildChild(null, 0, 0);

BuildChild(ApplyRed, 130, 50);

BuildChild(ApplyGreen, 260, 100);

BuildChild(ApplyBlue, 390, 150);

function BuildChild(LoadHandler:Function, PositionX, PositionY):void {

var PictureLoader:Loader = new Loader();

PictureLoader.x = PositionX;

PictureLoader.y = PositionY + 130;

PictureLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, IOErrorHandler);

if (LoadHandler != null) {

PictureLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadHandler);

}

PictureLoader.load(new URLRequest(“Picture.jpg”));

ColorMatrixMovie.addChild(PictureLoader);

}

function ApplyRed(event:Event):void {

var Child:DisplayObject = DisplayObject(event.target.loader);

var MyMatrix:Array = new Array();

MyMatrix = MyMatrix.concat([1, 0, 0, 0, 0]); // red

MyMatrix = MyMatrix.concat([0, 0, 0, 0, 0]); // green

MyMatrix = MyMatrix.concat([0, 0, 0, 0, 0]); // blue

MyMatrix = MyMatrix.concat([0, 0, 0, 1, 0]); // alpha

ApplyFilter(Child, MyMatrix);

}

function ApplyGreen(event:Event):void {

var Child:DisplayObject = DisplayObject(event.target.loader);

var MyMatrix:Array = new Array();

MyMatrix = MyMatrix.concat([0, 0, 0, 0, 0]); // red

MyMatrix = MyMatrix.concat([0, 1, 0, 0, 0]); // green

MyMatrix = MyMatrix.concat([0, 0, 0, 0, 0]); // blue

MyMatrix = MyMatrix.concat([0, 0, 0, 1, 0]); // alpha

ApplyFilter(Child, MyMatrix);

}

function ApplyBlue(event:Event):void {

var Child:DisplayObject = DisplayObject(event.target.loader);

var MyMatrix:Array = new Array();

MyMatrix = MyMatrix.concat([0, 0, 0, 0, 0]); // red

MyMatrix = MyMatrix.concat([0, 0, 0, 0, 0]); // green

MyMatrix = MyMatrix.concat([0, 0, 1, 0, 0]); // blue

MyMatrix = MyMatrix.concat([0, 0, 0, 1, 0]); // alpha

ApplyFilter(Child, MyMatrix);

}

function ApplyFilter(Child:DisplayObject, MyMatrix:Array):void {

var ColorFilter:ColorMatrixFilter = new ColorMatrixFilter(MyMatrix);

Child.filters = [ColorFilter];

}

function IOErrorHandler(event:IOErrorEvent):void {

trace(“Unable to load image…”);

}

8. Convolution filter primenjuje matricu konvolucije za proizvođenje specijalnog spiralnog efekta.Filter kombinuje piksele u ulaznoj slici sa susednim pikselima i na taj način stvara novi izgled. ConvolutionFilter klasa ima sledeća svojstva:

ConvolutionFilter(matrixX:Number = 0, matrixY:Number = 0, matrix:Array = null, divisor:Number = 1.0, bias:Number = 0.0, preserveAlpha:Boolean = true, clamp:Boolean = true, color:uint = 0, alpha:Number = 0.0)

var Convolution:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, 1, 0, 1, 0, 0, 0, 0, 1], 1, 0, true, true, 0xff0000, 0);

Square[8].filters = [Convolution];

U dodatnom primeru je prikazana primena na sliku koja se posebno učitava:

var ConvolutionMovie:MovieClip = new MovieClip();

ConvolutionMovie.y = 350;

stage.addChild(ConvolutionMovie);

var ImageLoader:Loader = new Loader();

ImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, ApplyFilter);

ImageLoader.load(new URLRequest(“Picture.jpg”));

ConvolutionMovie.addChild(ImageLoader);

function ApplyFilter(event:Event):void {

ImageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, ApplyFilter);

var ConvolutionMatrix:Array = [1, 0, 0, 0, 0, 1, 0, 0, 0];

var Convolution:ConvolutionFilter = new ConvolutionFilter();

Convolution.matrixX = 3;

Convolution.matrixY = 3;

Convolution.matrix = ConvolutionMatrix;

Convolution.divisor = 1;

ImageLoader.filters = [Convolution];

}

9. Displacement map filter koristi vrednosti piksela iz specificiranog BitmapData objekta da bi izvršio promenu izgleda objekta. DisplacementMapFilter klasa ima sledeća svojstva:

DisplacementMapFilter(mapBitmap:BitmapData = null, mapPoint:Point = null, componentX:uint = 0, componentY:uint = 0, scaleX:Number = 0.0, scaleY:Number = 0.0, mode:String = “wrap”, color:uint = 0, alpha:Number = 0.0)

var Displacement:DisplacementMapFilter = new DisplacementMapFilter(new BitmapData(100, 100, false, 0xff8800), new Point(10, 10), 20, 20, 0.5, 0.8, DisplacementMapFilterMode.CLAMP, 0xffff88, 1);

Square[9].filters = [Displacement];

U dodatnom primeru je prikazana primena ovog filtera na promenu izgleda objekta i teksta.

var DisplacementMovie:MovieClip = new MovieClip();

DisplacementMovie.y = 130;

stage.addChild(DisplacementMovie);

var BgColor:uint = 0xFFCC00;

var Size:uint = 200;

var DisMatrix:Matrix = new Matrix();

DisMatrix.createGradientBox(Size, Size);

DisplacementMovie.graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000, 0x0000FF], [100, 100], [55, 200], DisMatrix, SpreadMethod.PAD);

DisplacementMovie.graphics.drawRect(0, 0, Size, Size);

DisplacementMovie.graphics.endFill();

var DisField:TextField = new TextField();

DisField.text = “Text example with the displacement map”;

DisField.y = 90;

DisField.width = Size;

DisplacementMovie.addChild(DisField);

var DisFilter:BitmapFilter = GetBitmapFilter();

DisplacementMovie.filters = new Array(DisFilter);

function GetBitmapFilter():BitmapFilter {

return new DisplacementMapFilter(CreateBitMapData(), new Point(0, 0), BitmapDataChannel.RED, BitmapDataChannel.BLUE, 1, -50, DisplacementMapFilterMode.CLAMP, 0, 1);

}

function CreateBitMapData():BitmapData {

var BitMapData:BitmapData = new BitmapData(Size, Size, true, BgColor);

BitMapData.draw(DisplacementMovie, new Matrix());

var BitMap:Bitmap = new Bitmap(BitMapData);

BitMap.x = Size;

DisplacementMovie.addChild(BitMap);

return BitMapData;

}

10. Shader filter je po meni najmoćniji filter od svih filtera, ali i najteži za upotrebu. On može da menja osnovnu sliku na mnogo načina koristeći kao osnovno svojstvo klasu Shader.

ShaderFilter(shader:Shader = null)

Instanca Shader klase se formira dodatnim programiranjem pomoću programa Adobe Pixel Bender. Ovaj softver ima svoj specijalni kernal jezik, sličan programskom jeziku ’C’, sa malim brojem naredbi, koje nije teško naučiti. Korišćenje Pixel Bender-a je strogo licencirano, tako da su objašnjenja koja se odnose na upotrebu ovog filtera ukljonjena.
Sve filtere je moguće kombinovati, t.j. moguće je da se koristi jedan ili više filtera istovremeno na isti objekt.

SomeObject.filters = [Glow, Bevel, Drop];

Ukljanjanje filtera se radi na sledeći način:

SomeObject.filters = [];

 

FLASH MAHER!
FLASH MAHER – UVOD!
FLASH MAHER – OSNOVNI PODACI!
FLASH MAHER – OPERATORI I USLOVNE NAREDBE!
FLASH MAHER – FUNKCIJE!
FLASH MAHER – DOGAĐAJI!
FLASH MAHER – FILTERI!
FLASH MAHER – GRAFIKA!
FLASH MAHER – MASKA!
FLASH MAHER – ANIMACIJA!
FLASH MAHER – OPP – OBJEKTNO ORIJENTISANO PROGRAMIRANJE!
FLASH MAHER – FLASH I PHP!

VojaMaher