Rysowanie obiektów, wypełnianie i transformacja wypełnień

Rysowanie obiektów, wypełnianie i transformacja wypełnień
Zadania do samodzielnego wykonania
Zadanie 1 – Rysowanie prostych obiektów
Oto kod, który narysuje prosty obiekt graficzny - prostokąt o wymiarach stołu montażowego:
var bgshape:Sprite;
var default_bg_color:uint = 0x000000;
bgshape = new Sprite();
bgshape.graphics.beginFill(default_bg_color);
bgshape.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);
addChild(bgshape);
Przycisk do zmiany
koloru tła (zadanie 2)
Narysowany
prostokąt
Można dodać też kod, który będzie dopasowywał wielkość prostokąta do aktualnej wielkości stołu
montażowego:
stage.addEventListener(Event.RESIZE, resizeBGWithStage);
function resizeBGWithStage(e:Event){
try {bgshape.width = stage.stageWidth;
bgshape.height = stage.stageHeight;
} catch(e){}
}
Zadanie 2
Dodaj do projektu przycisk i nadaj mu nazwę instancji (np. red_btn). Napisz kod, który będzie powodował
zmianę koloru wypełnienia dużego prostokąta na kolor eksponowany na przycisku – w tym przykładzie jest
to kolor czerwony. Są dwie możliwości. W obydwu wykorzystywany jest obiekt ColorTransform:
1: Pierwsza możliwość powoduje zmianę koloru z wykorzystaniem tylko właściwości color obiektu
ColorTransform.
Kod:
function colorBase(event:MouseEvent):void{
var myColorTransform = new ColorTransform();
myColorTransform.color = 0xCC0000;
bgshape.transform.colorTransform = myColorTransform;
}
1
red_btn.addEventListener(MouseEvent.CLICK,colorBase);
2: Druga możliwość powoduje zmianę koloru z wykorzystaniem właściwości redOffset, blueOffset
lub greenOffset obiektu ColorTransform.
function colorBase(event:MouseEvent):void{
var myColorTransform = new ColorTransform();
myColorTransform.color = default_bg_color;
myColorTransform.redOffset = 200;
bgshape.transform.colorTransform = myColorTransform;
}
red_btn.addEventListener(MouseEvent.CLICK,colorBase);
Zadanie 3
Dodaj do projektu modyfikację polegającą na płynnej zmianie koloru wypełnienia prostokąta. Zadanie to
umożliwi obiekt Timer().
Propozycja rozwiązania tego zadania na bazie już istniejącego kodu z poprzednich zadań:
Całkowitej zmianie ulega funkcja colorBase, która określa to co stanie się po kliknięciu przycisku. Ta
funkcja nie będzie już bezpośrednio odpowiedzialna za transformację koloru, tak jak dotychczas, tylko
będzie uruchamiała obiekt Timer (uruchamiała odliczania kroków, które przebiegają w określonych
okresach czasowych) oraz wywoła funkcję timerHandler, która to od momentu kliknięcia przycisku
wykona się tyle razy ile przewiduje wyjściowy parametr repeat.
Parametr repeat określa ile interwałów czasowych ma upłynąć do zatrzymania licznika. Ilość interwałów
będzie wykorzystana do uzyskania efektu krokowej zmiany koloru – z każdym krokiem zmiana będzie coraz
bardziej widoczna. Długość trwania interwału (okresu) określa pierwszy z parametrów wyjściowych obiektu
Timer(), podawany jest w milisekundach.
Ilość kroków transformacji koloru wykorzystywana jest w funkcji timerHandler. Wiemy już, że dzięki
repeat licznik obiektu Timer zliczy 20 wykonań. Ponieważ zakładamy transformację wypełnienia z koloru
czarnego do czerwonego to wiemy też, że przesunięcie koloru musi nastąpić w obrębie składowej czerwonej
z wartości 0 na około 200. Dzięki wykorzystaniu obiektu Timer możemy przy każdym okresie trwającym
milisekundę (lub dłużej jeśli zwiększymy wartość) zwiększać udział barwy czerwonej np. o 10. Przy 20-tym
okresie całkowite przesunięcie w obrębie czerwieni wynosić będzie 200. Pozostaje jeszcze rozwiązać
zagadkę: skąd wiadomo kiedy licznik obiektu Timer zakończy odliczanie i jak w ogóle wykorzystać ten
obiekt dla naszych celów, czyli do stopniowej zmiany koloru? Tu z pomocą przychodzi właściwość
currentCount obiektu zdarzenia TimerEvent. Obiekt Timer wywołuje obiekt zdarzenia
TimerEvent za każdym razem po upływie zadanego przedziału czasu, a wtedy wartość currentCount
zwiększa się iteracyjnie.
Kod do rozwiązania zadania:
//powołanie dodatkowej zmiennej, która zapobiega nieoczekiwanej zmianie koloru
var statusBlack:Boolean;
statusBlack = true;
2
function colorBase(event:MouseEvent):void{
if(statusBlack==true){
myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
statusBlack=false;}
}
var
var
var
var
delay:Number = 1;
repeat:uint = 20;
myTimer:Timer = new Timer(delay, repeat);
transformLoop:Number;
function timerHandler(event:TimerEvent):void{
transformLoop = event.target.currentCount;
var myColorTransform = new ColorTransform();
myColorTransform.color = default_bg_color;
myColorTransform.redOffset = transformLoop*10;
bgshape.transform.colorTransform = myColorTransform;
}
Zadanie 4 - Płynna zmiana koloru z udziałem wielu przycisków.
Dodaj do projektu więcej przycisków, które będą służyć do zmiany koloru prostokąta, oczywiście zmiana
koloru tak jak poprzednio ma przebiegać w płynny sposób. Przyciski muszą mieć nazwy instancji. Należy
dobrze określić kolory, jakie chcemy wykorzystać i zapamiętać, lub zapisać wartość składowych RGB danego
koloru, np. kolor czerwony (250,0,0).
Potrzebne będą dodatkowe zmienne, które przechowają wartość każdej składowej koloru aktualnego (kp) i
każdej składowej koloru, do którego dążymy (kk) – łącznie będzie to 6 zmiennych:
var
var
var
var
var
var
kkRed:uint;
kkGreen:uint;
kkBlue:uint;
kpRed:uint;
kpGreen:uint;
kpBlue:uint;
Potrzebne będą także trzy zmienne do przechowywania wartości całkowitej koloru (dwie z nich są całkiem
nowe, a jedna towarzyszy nam już od pierwszego zadania – zapisuje kolor wypełnienia zainicjalizowany przy
tworzeniu prostokąta):
var default_bg_color:uint = 0x000000;
var current_bg_color:uint; //kolor bieżący
var new_bg_color:uint;
//kolor, do którego dążymy
Znacznie zmieni się funkcja colorBase, która uzyskuje teraz rozgałęzioną instrukcję warunkową
odpowiedzialną przede wszystkim za właściwe przydzielenie wartości zmiennym określającym wartość
koloru docelowego i jego składowych (new_bg_color, kkRed, kkGreen, kkBlue). To, jaką wartość przyjmą te
zmienne zależy od klikniętego przycisku, wszak funkcja colorBase musi być przypisana do wszystkich
3
„kolorowych” przycisków jako odpowiedź na zdarzenie kliknięcia. Poza tym w tej funkcji pojawia się także
nasłuchiwanie zdarzeń obiektu Timer:
- zdarzenie TIMER wywołuje funkcję timerHandler odpowiedzialną za płynną transformację koloru;
- zdarzenie TIMER_COMPLETE wywoła funkcję bgHandler odpowiedzialną za „utrwalenie” wartości
koloru tła i jego składowych po zakończeniu każdej transformacji – kolor ten będzie stanowił kolor
wyjściowy dla kolejnej transformacji.
function colorBase(event:MouseEvent):void{
myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, bgHandler);
if(event.target==red_btn){
new_bg_color = 0xCC0000; kkRed=200; kkGreen=0; kkBlue=0;}
else if(event.target==blue_btn){
new_bg_color = 0x0000CC; kkRed=0; kkGreen=0; kkBlue=200;}
else if(event.target==violet_btn){
new_bg_color = 0x643264; kkRed=100; kkGreen=50; kkBlue=100;}
else if(event.target==orange_btn){
new_bg_color = 0xFF6600; kkRed=250; kkGreen=100; kkBlue=0;}
else{current_bg_color = default_bg_color; kpRed=0; kpGreen=0; kpBlue=0;}
}
function timerHandler(event:TimerEvent):void{
transformLoop = event.target.currentCount;
var myColorTransform = new ColorTransform();
myColorTransform.color = current_bg_color;
myColorTransform.redOffset = kpRed + Math.floor((kkRed - kpRed)/repeat) *
transformLoop;
myColorTransform.blueOffset = kpBlue + Math.floor((kkBlue - kpBlue)/repeat)
* transformLoop;
myColorTransform.greenOffset = kpGreen + Math.floor((kkGreen –
kpGreen)/repeat) * transformLoop;
bgshape.transform.colorTransform = myColorTransform;
}
function bgHandler(event:TimerEvent):void{
myTimer.reset();
current_bg_color = new_bg_color;
kpRed=kkRed; kpGreen=kkGreen; kpBlue=kkBlue;
}
4