окт 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

окт 302014
 

FLASH MAHER

 

Adobe Flash Professional – Univerzalna knjiga

ACTION SCRIPT 3.0

 

DOGAĐAJI

 

FLASH MAHER – DOGAĐAJI

 

Za savladavanje događaja najpre se moraju znati funkcije. AS3.0 nam nudi programiranje funkcija koje se izvršavaju klasičnim pozivanjem i funkcija koje se izvršavaju kada se desi neki događaj.
Događaji su osnova formiranja dinamičkog sadržaja. U zavisnosti od toga šta se desi – pritisak na neko slovo tastature, klik mišem i slično, programiraju se odgovarajuće akcije. Najviše su u upotrebi događaji koji se izvršavaju posle određenog vremena (TimerEvent), događaji izazvani tastaturom (KeyboardEvent), i događaji izazvani mišem (MouseEvent). Za njihovo korišćenje potrebno je da programu damo informaciju da prati – sluša kada se desi događaj, i kada se to desi da izvrši predviđenu akciju – funkciju. Svako kodiranje događaja ima sličan postupak, ali svaki događaj ima svoj kod gde je opisan tip događaja, tip osluškivanja i ime funkcije koja se izvršava kada se događaj desi.
Događaj koji se izvršava posle određenog vremena je najviše u upotrebi. U narednom primeru koristimo pomeranje kruga na svakih 30 ms za 2 piksela levo ili desno.

import flash.display.Sprite;

import flash.events.TimerEvent;

var Step:int = 2;

var Circle:Shape = new Shape();

Circle.x = Circle.y = 200;

Circle.graphics.beginFill(0x000000);

Circle.graphics.drawCircle(0, 0, 100);

Circle.graphics.endFill();

stage.addChild(Circle);

var NewTimer:Timer = new Timer(30);

NewTimer.addEventListener(TimerEvent.TIMER, MoveCircle);

NewTimer.start();

function MoveCircle(event:TimerEvent):void {

if(Circle.x == 100 || Circle.x == 450) {

Step *= -1;

}

Circle.x += Step;

event.updateAfterEvent();

}

Kada u radu treba da prekinemo izvršavanje bilo kog događaja, kao što smo ga uključili, potrebno je i da ga isključimo. Naredba za to je ’removeEventListener’, koja se koristi isto kao i ’addEventListener’. Za ’TimerEvent’ je poželjno upotrebiti i ’NewTimer.stop()’ za zaustavljanje tajmera iz gornjeg primera.

Primer 3: Analogni i digitalni sat!

import flash.text.TextField;

import flash.utils.Timer;

import flash.events.TimerEvent;

import flash.display.MovieClip;

import flash.filters.GlowFilter;

import flash.filters.DropShadowFilter;

import flash.text.TextFormat;

var Now:Date;

var NewTextFormat:TextFormat = new TextFormat(“courier”, 20, 0x000000, true, false, false, null, null, “center”);

var Glow:GlowFilter = new GlowFilter(0x000000, 0.5, 10, 10);

var Shadow:DropShadowFilter = new DropShadowFilter(5, 45, 0x000000, 0.7);

var DigitalClock:TextField = new TextField();

DigitalClock.width = 550;

DigitalClock.defaultTextFormat = NewTextFormat;

DigitalClock.filters = [Glow];

stage.addChild(DigitalClock);

var AnalogClok:MovieClip = new MovieClip();

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

AnalogClok.graphics.lineStyle(2, 0x000000, 1);

var BodyMatrix:Matrix = new Matrix(1, 0, 0, 1, 0, 0);

BodyMatrix.createGradientBox(20, 20, 0, 275 – 150 * Math.cos(360 / 12 * Id * Math.PI / 180)-10, 200 – 150 * Math.sin(360 / 12 * Id * Math.PI / 180)-10);

AnalogClok.graphics.beginGradientFill(“radial”, [0xdddddd, 0x333333], [1, 1], [0, 255], BodyMatrix, “repeat”, “rgb”, 0);

AnalogClok.graphics.drawCircle(275 – 150 * Math.cos(360 / 12 * Id * Math.PI / 180), 200 – 150 * Math.sin(360 / 12 * Id * Math.PI / 180), 10);

AnalogClok.graphics.endFill();

AnalogClok.filters = [Glow, Shadow];

stage.addChild(AnalogClok);

}

function CreateClockWise(ClockWiseName, WiseColor, Length, Width):void {

ClockWiseArray[ClockWiseName] = new MovieClip();

ClockWiseArray[ClockWiseName].graphics.lineStyle(2, 0x000000, 1);

var BodyMatrix:Matrix = new Matrix(1, 0, 0, 1, 0, 0);

BodyMatrix.createGradientBox(2 * Width, Length, 0, -Width, 0);

ClockWiseArray[ClockWiseName].graphics.beginGradientFill(“linear”, [0xaaaaaa, WiseColor, 0xaaaaaa], [1, 1, 1], [40, 128, 215], BodyMatrix, “repeat”, “rgb”, 0);

ClockWiseArray[ClockWiseName].graphics.drawEllipse(-Width / 2, 0, Width, -Length);

ClockWiseArray[ClockWiseName].graphics.drawCircle(0, -Length, Width);

ClockWiseArray[ClockWiseName].graphics.endFill();

ClockWiseArray[ClockWiseName].x = 275;

ClockWiseArray[ClockWiseName].y = 200;

ClockWiseArray[ClockWiseName].filters = [Shadow];

stage.addChild(ClockWiseArray[ClockWiseName]);

}

var ClockWiseArray:Array = new Array();

CreateClockWise(“HoursWise”, 0x0000ff, 80, 30);

CreateClockWise(“MinutesWise”, 0x00ff00, 110, 20);

CreateClockWise(“SecondsWise”, 0xff0000, 140, 10);

var FastTimer:Timer = new Timer(30);

FastTimer.addEventListener(TimerEvent.TIMER, ShowTime);

FastTimer.start();

function ShowTime(event:TimerEvent):void {

Now = new Date();

DigitalClock.text = Now.date > 9 ? String(Now.date) + “.”: “0” + String(Now.date) + “.”;

Now.month + 1 > 9 ? DigitalClock.appendText(String(Now.month + 1)): DigitalClock.appendText(“0” + String(Now.month + 1));

DigitalClock.appendText(“.” + Now.fullYear + “. “);

Now.hours > 9 ? DigitalClock.appendText(String(Now.hours) + “:”): DigitalClock.appendText(“0” + String(Now.hours) + “:”);

Now.minutes > 9 ? DigitalClock.appendText(String(Now.minutes) + “:”): DigitalClock.appendText(“0” + String(Now.minutes) + “:”);

Now.seconds > 9 ? DigitalClock.appendText(String(Now.seconds)): DigitalClock.appendText(“0” + String(Now.seconds));

Now.hours > 12 ? ClockWiseArray[“HoursWise”].rotation = (Now.hours – 12) * 360 / 12: ClockWiseArray[“HoursWise”].rotation = Now.hours * 360 / 12;

ClockWiseArray[“HoursWise”].rotation += Now.minutes / 60 * 360 / 12;

ClockWiseArray[“MinutesWise”].rotation = Now.minutes * 360 / 60 + Now.seconds / 60 * 360 / 60;

ClockWiseArray[“SecondsWise”].rotation = Now.seconds * 360 / 60;

event.updateAfterEvent();

}

Događaji vezani za tastaturu mogu pratiti pritisak tastera i otpuštanje testera. Kada se desi ovakav događaj, Flash šalje informaciju u kojoj su podaci o tome koji je taster u pitanju, funkciji koja je navedena.

import flash.events.KeyboardEvent;

import flash.text.TextField;

var ShowTextField:TextField = new TextField();

ShowTextField.width = stage.stageWidth;

ShowTextField.height = stage.stageHeight;

stage.addChild(ShowTextField);

ShowTextField.addEventListener(KeyboardEvent.KEY_DOWN, KeyIsPressed);

function KeyIsPressed(event:KeyboardEvent):void {

ShowTextField.text = event.charCode.toString();

ShowTextField.appendText(“\nkeyDownHandler: ” + event.keyCode);

ShowTextField.appendText(“\nctrlKey: ” + event.ctrlKey);

ShowTextField.appendText(“\nkeyLocation: ” + event.keyLocation);

ShowTextField.appendText(“\nshiftKey: ” + event.shiftKey);

// ShowTextField.appendText(“\naltKey: ” + event.altKey.toString()); // Error

}

Isti je postupak i za pisanje koda za događaj kada se taster pusti:

SomeTextField.addEventListener(KeyboardEvent.KEY_UP, KeyIsReleased);

Primer 4: Pomeranje objekta strelicama!

import flash.text.TextField;

import flash.events.KeyboardEvent;

import flash.display.MovieClip;

var KeyTarget:MovieClip = new MovieClip();

KeyTarget.graphics.lineStyle(2, 0x000000, 1);

KeyTarget.graphics.beginFill(0xff00ff, 1);

KeyTarget.graphics.drawCircle(0, 0, 30);

KeyTarget.graphics.endFill();

KeyTarget.x = 275;

KeyTarget.y = 200;

stage.addChild(KeyTarget);

var Left:int = 0;

var Right:int = 0;

var Up:int = 0;

var Down:int = 0;

var InputField:TextField = new TextField();

InputField.addEventListener(KeyboardEvent.KEY_DOWN, KeyDown);

InputField.addEventListener(KeyboardEvent.KEY_UP, KeyUp);

function KeyDown(event:KeyboardEvent):void {

switch(event.keyCode) {

case 37:

Left = 1;

break;

case 39:

Right = 1;

break;

case 38:

Up = 1;

break;

case 40:

Down = 1;

break;

default:

break;

}

}

function KeyUp(event:KeyboardEvent):void {

switch(event.keyCode) {

case 37:

Left = 0;

break;

case 39:

Right = 0;

break;

case 38:

Up = 0;

break;

case 40:

Down = 0;

break;

default:

break;

}

}

var FastTimer:Timer = new Timer(20);

FastTimer.addEventListener(TimerEvent.TIMER, StageFocus);

FastTimer.start();

function StageFocus(event:TimerEvent):void {

stage.focus = InputField;

InputField.text = “”;

KeyTarget.x += Right – Left;

KeyTarget.y += Down – Up;

event.updateAfterEvent();

}

U ovom primeru je pokazano lako razumljivo kodiranje za pamćenje svakog tastera posebno, i to je iskorišćeno za koso pomeranje objekta.

Primer klika levim tasterom miša na ’stage’ je najprostiji za shvatanje korišćenja događaja. Informacije koje se ovde šalju su i pozicija miša na objektu preko koga je kliknuto.

import flash.events.*;

stage.addEventListener(MouseEvent.CLICK, ClickOnStage);

function ClickOnStage(event:MouseEvent):void {

trace(“New click.”);

trace(“x=” + stage.mouseX + ” y=” + stage.mouseY);

}

Ovo je očigledan primer kako se izvršavaju događaji. Kada ponovo kliknete na ’stage’ funkcija će se ponovo izvršiti. Ako želite da se ne izvršava ponovo potrebno je isključiti osluškivač, kao u sledećim linijama.

import flash.events.*;

stage.addEventListener(MouseEvent.CLICK, ClickOnStage);

function ClickOnStage(event:MouseEvent):void {

stage.removeEventListener(MouseEvent.CLICK, ClickOnStage);

trace(“Event is removed.”);

}

Događaji koje inicira miš su mnogobrojni. Moguć je klik mišem ’CLICK’ na neki objekt, pritisak dugmeta ’MOUSE_DOWN’, otpuštanje dugmeta ’MOUSE_UP’, pomeranje miša ’MOUSE_MOVE’, rotiranje točkića ’MOUSE_WHELL’ preko objekta, dolazak kursora preko objekta ’MOUSE_OVER’ i ’ROLL_OVER’, izlazak kursora van objekta ’MOUSE_OUT’ i ’ROLL_OUT’, i dvostruki klik mišem preko objekta ’DOUBLE_CLICK’. Na primeru se vidi kako se koriste neki od događaja, čija se izvršne funkcije odnose na menjanje izgleda kruga. Pored ovih moguće je kontrolisati i klik na centralni i desni taster miša.

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.filters.DropShadowFilter;

var CurrentColor:uint = 0x000000;

var CurrentSize:int = 100;

var Shadow:DropShadowFilter = new DropShadowFilter(10, 45, 0x888888, 0.5);

var Circle:Sprite = new Sprite();

Circle.x = Circle.y = 200;

Circle.graphics.beginFill(0x000000);

Circle.graphics.drawCircle(0, 0, CurrentSize);

Circle.graphics.endFill();

Circle.doubleClickEnabled = true;

stage.addChild(Circle);

Circle.addEventListener(MouseEvent.CLICK, ChangeColor);

Circle.addEventListener(MouseEvent.MOUSE_WHEEL, ChangeSize);

Circle.addEventListener(MouseEvent.DOUBLE_CLICK, Animation);

Circle.addEventListener(MouseEvent.MOUSE_OUT, RemoveShadow);

Circle.addEventListener(MouseEvent.MOUSE_OVER, ShowShadow);

function ChangeColor(event:MouseEvent):void {

CurrentColor = Math.random() * 256 * 256 * 256;

Circle.graphics.clear();

Circle.graphics.beginFill(CurrentColor);

Circle.graphics.drawCircle(0, 0, CurrentSize);

Circle.graphics.endFill();

}

function ChangeSize(event:MouseEvent):void {

CurrentSize += event.delta; // default: event.delta = 3

Circle.graphics.clear();

Circle.graphics.beginFill(CurrentColor);

Circle.graphics.drawCircle(0, 0, CurrentSize);

Circle.graphics.endFill();

}

function Animation(event:MouseEvent):void {

Circle.x += 10;

}

function RemoveShadow(event:MouseEvent):void {

Circle.filters = [];

}

function ShowShadow(event:MouseEvent):void {

CurrentColor = Math.random() * 256 * 256 * 256;

Circle.filters = [Shadow];

}

Primer 5: Pogađanje slučajnog celog broja od 1 do 99!

import flash.display.*;

import flash.text.*;

var AllTextFormat:TextFormat = new TextFormat(“Geogia”, 20, 0x000000, true, false, false, null, null, TextFieldAutoSize.CENTER, null, null, null, null);

var StaticTextField:TextField = new TextField();

StaticTextField.x = 100;

StaticTextField.y = 50;

StaticTextField.width = 350;

StaticTextField.height = 50;

StaticTextField.defaultTextFormat = AllTextFormat;

StaticTextField.text = “Click on stage to start…”;

stage.addChild(StaticTextField);

var AnswerTextField:TextField = new TextField();

AnswerTextField.x = 100;

AnswerTextField.y = 250;

AnswerTextField.width = 350;

AnswerTextField.height = 150;

AnswerTextField.multiline = true;

AnswerTextField.defaultTextFormat = AllTextFormat;

stage.addChild(AnswerTextField);

var InputTextField:TextField = new TextField();

InputTextField.x = 225;

InputTextField.y = 150;

InputTextField.width = 100;

InputTextField.height = 50;

InputTextField.border = true;

InputTextField.borderColor = 0x0000ff;

InputTextField.defaultTextFormat = AllTextFormat;

InputTextField.restrict = “0-9”;

InputTextField.maxChars = 2;

InputTextField.type = TextFieldType.INPUT;

stage.addChild(InputTextField);

var MyNumber:int;

var YourMove:int;

stage.addEventListener(MouseEvent.CLICK, Start);

function Start(event:MouseEvent):void {

stage.removeEventListener(MouseEvent.CLICK, Start);

MyNumber = int(Math.random() * 98.99 + 1);

YourMove = 0;

StaticTextField.text = “Find my random number (1-99)!”;

InputTextField.text = “?”;

AnswerTextField.text = “Insert number in box…\n And press ‘ENTER’…”;

InputTextField.addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);

}

function KeyDownHandler(event:KeyboardEvent):void {

if(event.keyCode == 13) {

CheckAnswer();

}

}

function CheckAnswer():void {

YourMove ++;

AnswerTextField.text = “Move: ” + String(YourMove) + ” => ” + InputTextField.text + “\n”;

if(int(InputTextField.text) == MyNumber) {

InputTextField.removeEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);

AnswerTextField.appendText(“Bravo!\nYou have found my number…”);

StaticTextField.text = “Click on stage to play again…”;

stage.addEventListener(MouseEvent.CLICK, Start);

}

else {

if(int(InputTextField.text) < MyNumber) {

AnswerTextField.appendText(“My number is greater than ” + InputTextField.text + “\nTry again…”);

}

else {

AnswerTextField.appendText(“My number is less than ” + InputTextField.text + “\nTry again…”);

}

}

}

Zapamtite da kada radite bilo koji program, kada završite sa nekim događajem obavezno isključite njegov osluškivač. Ako ovo zaboravite mogu nastati greške koje se obično javljaju kada se isti delovi programa pozivaju više puta.

U ovom primeru je ostvaren naizmenični transfer informacija između korisnika i programa, što vezuje korisnika da posveti neko vreme ovom programu. Međutim dizajn je veoma loš, tako da ako želimo da ukrasimo naše animacije, potrebno je da savladamo filtere i rad sa simbolima za početak.

 

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

окт 282014
 

FLASH MAHER

 

Adobe Flash Professional – Univerzalna knjiga

ACTION SCRIPT 3.0

 

OSNOVNI PODACI

 

FLASH MAHER – OSNOVNI PODACI

 

U AS3.0 postoje promenljivi i kostantni podaci. Njihovo obeležavanje je logično: ’var’ i ’const’, a i upotreba je prema nazivu predviđena – konstante možete definisati samo jednom u toku izvršavanja programa. Za svaki podatak u programiranju je predviđeno da se sastoji iz 3 različita dela:
1. Ime podatka – počinje uglavnom na slovo
2. Tip podatka – definiše ostale njegove osobine
3. Trenutna vrednost – zapisuje se u memoriji
Najvažniji tipovi podataka koje morate razumeti su: String, int, Number, uint i Boolean.
Tip ’String’ formira alfanumeričku promenljivu koja je predstavljena kao niz karaktera.
var NewString:String = “Example…”;
Tip ’int’ formira promenljivu tipa Integer – celobrojnu 32-bitnu vrednost sa rasponom od -2 ↑ 31 do 2 ↑ 31 – 1 (-2.147.483.648 do 2.147.483.647).
var FirstIntegerNumber:int = 237;
var SecondIntegerNumber:int = -123.456;
Tip ’Number’ formira numeričku promenljivu opsega od približno 4.94 * e ↑ -324 do skoro 1.8 * e ↑ +308 (sa ’e’ se zapisuju brojevi u eksponencijalnom obliku t.j. e=10). U AS3.0 se koristi decimalna tačka ’.’ a ne zarez ’,’ kada se radi sa decimalnim brojevima.
var FirstNumber:Number = 3.456;
var SecondNumber:Number = -1.234e10;
const ConstantNumber:Number = 3.14;
Tip ’uint’ formira celobrojnu pozitivnu promenljivu u 32-bitnom zapisu sa rasponom od 0 do 2 ↑ 32 – 1 (4294967295).
var PositiveNumber:uint = 456;
Najčešća upotreba ovog tipa promenljive je za definisanje boja u heksadecimalnom zapisu kao ARGB zapis (Alpha, Red, Green, Blue su vrednosti od 0-255 tj. od 00-ff).
var ColorNumber:uint = 0xff3377aa;
Tip ’Boolean’ formira logičku promenljivu koja ima vrednost ’true’ ili ’false’.
var TrueVariable:Boolean = true;
var FalseVariable:Boolean = false;
Pored ovih osnovnih tipova podataka, naredbom ’var’ možete da definišete ogroman broj podataka. Flash podržava rad sa nizovima, vremenskim podacima, xml zapisom, objektima, grafikom, muzikom, videom…
var NewArray:Array = [1, 2, 3];
var FirstNumberFromArray:int = NewArray [0];
Iz ovog primera se vidi da se za odabir članova niza koriste uglaste zagrade ’[’ i ’]’, dok male zagrade ’(’ i ’)’ i velike zagrade ’{’ i ’}’ imaju drugačiju primenu.
Ja sam se oduševio specijalnom osobinom koju nam nudi AS3.0 kada je reč o nizovima (indeks niza može biti i string):
NewArray [“SomeString “] = “YourChoice”;
Još neki primeri podataka:
var CurrentTime:Date = new Date();
var CurrentYear:int = CurrentTime.fullYear;
var XmlData:XML = 1.23;
var ValueFromXmlData:Number = XmlData.SomeNumber;
var MyObject:Object = new Object();
Objekti su srce AS3.0. Sve što kreiramo, svaka promenljiva, svaka funkcija, svaka klasa i bilo šta drugo može biti objekt. Može se tumačiti i da pri prikazivanju sadržaja prikazujemo razne tipove objekata.
var DataForAll:* = 3.45;
var DataForAll:* = true;
Znak ’*’ menja bilo koji tip podatka. Ovaj opis podataka je koristan kada se radi sa nizovima.
Kada neki podatak nije definisan, AS3.0 pri pozivanju istog daje osnovnu vrednost toga podakta. U narednoj tabeli su prikazane osnovne vrednosti podataka:

 

Vrsta podatka Osnovna vrednost
String null
int 0
Number NaN
uint 0
Boolean false
Object null
Nedefinisan podatak undefined
Ostale klase null

 

Često se javlja potreba da ispitamo da li član niza postoji, pa moramo da znamo kako to da utvrdimo.
Ključne reči i rezervisane reči se ne mogu koristiti za definisanje imena podataka, već samo na neki od načina koji je predviđen. U ovu grupu reči spadaju: as, break, case, catch, class, const, continue, default, delete, do, dynamic, each, else, extends, false, final, finally, for, function, get, if, implements, import, in, include, instanceof, interface, internal, is, namespace, native, new, null, override, package, private, protected, public, return, set, static, super, switch, this, throw, to, true, try, typeof, use, var, void, while i with. Neke od ovih reči AS3.0 dopušta za korišćenje za definisanje podataka na primer ‘each’, ali se preporučuje da se i one ne koriste za imena podataka.
Postoji i grupa rezervisanih reči koje takođe treba izbegavati za davanje imena podacima. To su: abstract, boolean, byte, cast, char, debugger, double, enum, export, float, goto, intrinsic, long, prototype, short, synchronized, throws, to, transient, type, virtual i volatile. Neke od njih su već predviđene za namenu u narednim izdanjima programa.

 

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

окт 282014
 

FLASH MAHER

 

Adobe Flash Professional – Univerzalna knjiga

ACTION SCRIPT 3.0

 

UVOD

 

FLASH MAHER – UVOD

 

Kao što mi razumemo svoj jezik, i kompjuter razume svoj jezik. Cilj programiranja je da napišemo program – kod pomoću koga možemo da prenesemo ono što je nama jasno na našem jeziku, na jezik koji razume računar. Program je niz instrukcija koje računar traba da sprovode. Adobe Flash Professional koristi programski jezik ActionScript 3.0.
ActionScript 3.0 ima pravila koja su veoma lako prihvatljiva. Veoma je sličan engleskom jeziku, ali pošto kompjuter nema mozak kao čovek, da bi program radio onako kako mi želimo, mora se poštovati predviđena sintaksa. Adobe je ugradio nekoliko vrsta pomoći pri pisanju programa – koda, kao i prozore za ispis grešaka (COMPILER ERRORS), izlaznih vrednosti po želji (OUTPUT) i otklanjanje neispravnosti (DEBUG CONSOLE). Sve ovo Vam pomaže da stalno testirate i ispravljate sintaksne greške, a i greške u programiranju u hodu, dok Vam program napreduje. Zato stalno testirajte delove programa koje dodajete, jer se tako lakše otklanjaju moguće greške.

Kako se započinje stvaranje programa u Flash-u? Startovanjem na ikonu Flash.exe otvara se prozor u kome birate šta želite da radite u Flash-u. Za početak izaberite New Document sa ikonom ’Fl’ Action Script 3.0, koji Vam otvara okruženje u kome možete i da dizajnirate – crtate ili animirate na pozornici ’stage’ i da programirate u prozoru u kome se piše AS3.0 kod. Da bi programirali morate da aktivirate (ako nije aktiviran) prozor ’ACTIONS – FRAME’, koji se aktivira pritiskom na ’F9’ ili iz glavnog menija na Window > Actions. Na Window se aktiviraju/deaktiviraju i svi ostali prozori koji Vam pomažu u radu, koje možete razmestiti po ekranu kako Vam odgovara. Kada naučite razmeštanje ovih prozora i dođete do zaključka koji Vam raspored – radni prostor najviše odgovara, možete da snimite ovaj radni prostor na Window > Workspace > New Workspace… i zadate mu ime koje želite. Ovo ime će se pojaviti u listi Window sa ostalim radnim prostorima koje Flash nudi (na primer Developer, Animator, Classic i slično).

Dok kreirate u Flash-u vi stvarate program sa ’.fla’ ekstenzijom, i kada snimite svoj program, snima se sa tom ekstenzijom. Ovaj tip fajla zapisuje sve što radite, i animacije i podešavanja i kod, i omogućuje Vam ispravke svega, a njegovim startovanjem se stvara automatski fajl sa ’.swf’ ekstenzijom koji se reprodukuje kroz Flash Player. Startovanje programa ili testiranje se izvršava kada u glavnom meniju kliknete na Control > Test Movie (in Flash Professional) ili (Control + Enter).
Pisanje koda u AS3.0 nije za podcenjivanje. Nije dovoljno samo poznavati sintaksu i pravila, već morate svoju zamisao sprovesti od samog pisanja koda, preko organizacije i povezivanja svih delova u jednu celinu, do objavljivanja krajnjeg rešenja koje se na odgovarajući način izvršava. Kod se unosi u panelu Actions, koji važi za frejm ‘frame’ koji je trenutno selektovan, ili u posebnom prozoru za pisanje AS3.0 koda, o čemu će biti reči kasnije. Svaki frejm može imati svoj kod, koji se izvršava kada prikaz filma koji Flash reprodukuje dođe do njega. Flash Vam nudi kontrolu izvršavanja frejmova uz pomoć naredbi: stop(), gotoAndStop(frame), gotoAndPlay(frame) i druge.
Actions panel je prilagodljiv Vašim potrebama i sastoji se iz vise delova:
– Panel alata (Toolbox) sadrži listu svih metoda, svojstava i događaja koji su organizovani u direktorijume.
– Prozor za izbor skripte sadrži prikaz scena i simbola i nudi nam prečicu ka izboru nosioca skripte.
– Meni sa opcijama služi za formatiranje Actions panela.
– Čarobni štapić, skript asistent i dugme ‘Help’ (pomoć) su veoma korisni za nalaženje gotovog koda i raznih objašnjenja.
– Pomoćne ikone služe za ostvarivanje raznih pomoći (dodavanja koda, pretrage, nalaženja mete, provere sintakse, auto formatiranja, traženja grešaka, sažimanja, komentarisanja i slično).

Na početku će biti dovoljno automatsko prepoznavanje koda koje je ugrađeno u Flash, a vremenom se opcije jedna po jedna razjašnjavaju.
Prilikom korišćenja posebnog prozora za pisanje AS3.0 koda, kada selektujete umesto otvaranja ‘.fla’ dokumenta samo ‘ActionScript File’ koji stvara ekstenziju ‘.as’, rad je ekvivalentan kao sa Actions panelom, s tim da se ovako kodirani fajl snima kao posebni tekstualni podatak, i mora specijalno i da se pozove da bi se izvršio. ‘As’ fajl može da se edituje bilo kojim tekstualnom editorom, i on je veoma bitan jer nam pomaže u stvaranju objektnog programiranja i rasterećivanja glavnog programa na manje delove radi lakše kontrole i preglednosti. ‘As’ fajlovi se kompajliraju automatski u konačni ‘swf’ fajl, tako da ne moraju da se uploaduju na hosting, već služe samo pri pravljenju glavnog ‘swf’ fajla.
AS3.0 ima pravila – sintaksu koja se mora poštovati kada se piše kod. Najmanji problem je ako napravite sintaksnu grešku, jer pri testiranju programa Flash najpre proverava sintaksu, i ako greške postoje ispisuje izveštaj, sa brojem redova u kojima se nalaze greške.
AS3.0 se sastoji od niza izjava, koje stvaraju određene akcije. Najčešće se piše jedna izjava u jednom redu, i na kraju izjave stoji znak ’;’.
Kada je potrebno ubacite komentare u svoj kod uz pomoć ’//’ za jedan red ili ’/*…code…*/’ za komentare delova koda u jednom ili u više redova.
// This is comment
/* And this is comment…
…multi line comment.*/

 

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