Ondřej Brichta 9.1.2006
Dnes se zaměříme na možnosti kreslení objektů s výplněmi. Vyzkoušíme si možnosti nastavení jednotlivých parametrů přechodové výplně objektu pomocí příkazů AS a nakonec vytvoříme aplikaci pro kreslení čtyřúhelníků s možností dynamické změny polohy vnitřní výplně pomocí kurzoru myši.
Abychom mohli použít výplň k jakémukoliv objektu, musíme vymezit oblast, na kterou budeme výplň aplikovat. Pokud jsme pochopili kreslení čar a křivek z minulých dílů, bude pro nás otázkou chvilky, abychom pochopili konstrukci výplně objektu.
Při kreslení čar a křivek jsme nejdříve určili, v jakém stylu bude kreslená čára zobrazená, poté jsme už jen umisťovali body, které se příslušnou čarou spojili. Naprosto stejnou konstrukci má i tvorba výplně, pouze s tím rozdílem, že místo definice stylu čáry použijeme definici výplně. Drobný rozdíl bude v tom, že na konec musíme vždy umístit příkaz pro ukončení kreslení.
Máme-li například MC s názvem „kresba“, pak červený čtverec nakreslíme takto:
kresba.beginFill(0xFF0000);
kresba.moveTo(0, 0);
kresba.lineTo(100, 0);
kresba.lineTo(100, 100);
kresba.lineTo(0, 100);
kresba.lineTo(0, 0);
kresba.endFill();
Velmi jednoduché použití metody pro tvorbu výplně. Ale naštěstí nejsme odkázáni na tvorbu pouze jednobarevných výplní, ale můžeme pomocí příkazů AS vytvářet i přechodové výplně.
Metoda, umožňující kresbu přechodových výplní má název „beginGradientFill“ a na rozdíl od své jednodušší kolegyně, obsahuje mnohem větší množství parametrů, které si nyní vysvětlíme:
Ale dost teorie, podíváme se na praktickou ukázku kreslení přechodové výplně. Kód je psán pro Flash8, starší verze s tím budou mít problémy, především co se týče filtrů a nových parametrů přechodové výplně.
Nejdříve si připravíme funkci pro přidání filtrů kreslenému objektu. V novém dokumentu začneme v prvním snímku skriptem:
import flash.geom.*;
import flash.filters.DropShadowFilter;
import flash.filters.BevelFilter;
prostorDef = function (cil) {
var distance:Number = 3;
var angleInDegrees:Number = 45;
var highlightColor:Number = 0xFFFFFF;
var highlightAlpha:Number = 0.8;
var shadowColor:Number = 0x000000;
var shadowAlpha:Number = 0.8;
var blurX:Number = 5;
var blurY:Number = 5;
var strength:Number = 2;
var quality:Number = 3;
var type:String = "inner";
var knockout:Boolean = false;
var filterb:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
var filterArrayb:Array = new Array();
filterArrayb.push(filterb);
cil.filters = filterArrayb;
vzdalenost = 5;
uhel = 45;
barva = 0x000000;
pruhlednost = 1;
rozmazX = 5;
rozmazY = 5;
sila = 1;
kvalita = 2;
var filter:DropShadowFilter = new DropShadowFilter(vzdalenost, uhel, barva, pruhlednost, rozmazX, rozmazY, sila, kvalita);
var filterArrayc:Array = new Array();
filterArrayc.push(cil.filters[0]);
filterArrayc.push(filter);
cil.filters = filterArrayc;
};
Naprosto stejnou funkci jsme použili při generování grafů, není nutné se podrobněji zabývat jejím popisem.
Následuje hlavní část kódu, kde kreslíme objekt čtyřúhelníku s přechodovou radiální výplní:
this.createEmptyMovieClip("ctyruhelnik", this.getNextHighestDepth());
ctyruhelnik.onMouseDown = function() {
if (ctyruhelnik.hitTest(_root._xmouse, _root._ymouse, true) != true) {
startX = _root._xmouse;
startY = _root._ymouse;
startPaint = true;
} else {
startPaint = false;
}
};
ctyruhelnik.onMouseMove = function() {
wd = ctyruhelnik._width;
hg = ctyruhelnik._height;
if (startPaint) {
ctyruhelnik.clear();
fillType = "radial";
colors = [0xFF6600, 0xFF6600];
alphas = [100, 10];
ratios = [0, 255];
spreadMethod = "reflect";
interpolationMethod = "RGB";
focalPointRatio = 0.3;
matrix = new Matrix();
matrix.createGradientBox(wd, hg, 0, startX, startY);
ctyruhelnik.lineStyle(2, 0xFF6600, 100);
ctyruhelnik.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
ctyruhelnik.moveTo(startX, startY);
ctyruhelnik.lineTo(_root._xmouse, startY);
ctyruhelnik.lineTo(_root._xmouse, _root._ymouse);
ctyruhelnik.lineTo(startX, _root._ymouse);
ctyruhelnik.lineTo(startX, startY);
ctyruhelnik.endFill();
fillX = startX;
fillY = startY;
prostorDef(ctyruhelnik);
} else if (startMove) {
ctyruhelnik.clear();
fillType = "radial";
colors = [0xFF6600, 0xFF6600];
alphas = [100, 10];
ratios = [0, 255];
spreadMethod = "reflect";
interpolationMethod = "RGB";
focalPointRatio = (_root._xmouse-startX-wd/2)/(wd/2);
startFillX = fillX+_root._xmouse-pomX;
startFillY = fillY+_root._ymouse-pomY;
matrix = new Matrix();
matrix.createGradientBox(wd, hg, 0, startFillX, startFillY);
//matrix.createGradientBox(wd, hg, 0, startX, startY);
ctyruhelnik.lineStyle(2, 0xFF6600, 100);
ctyruhelnik.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
ctyruhelnik.moveTo(startX, startY);
ctyruhelnik.lineTo(finX, startY);
ctyruhelnik.lineTo(finX, finY);
ctyruhelnik.lineTo(startX, finY);
ctyruhelnik.lineTo(startX, startY);
ctyruhelnik.endFill();
}
};
ctyruhelnik.onMouseUp = function() {
if (ctyruhelnik.hitTest(_root._xmouse, _root._ymouse, true) == true && startMove != true) {
finX = _root._xmouse;
finY = _root._ymouse;
startPaint = false;
}
};
ctyruhelnik.onPress = function() {
pomX = _root._xmouse;
pomY = _root._ymouse;
startMove = true;
};
ctyruhelnik.onRelease = function() {
fillX = fillX+_root._xmouse-pomX;
fillY = fillY+_root._ymouse-pomY;
startMove = false;
};
ctyruhelnik.onReleaseOutside = function() {
fillX = fillX+_root._xmouse-pomX;
fillY = fillY+_root._ymouse-pomY;
startMove = false;
};
Filosofie kódu je následující. Máme MC pojmenovaný „ctyruhelnik“ ve kterém kreslíme čtyřúhelník tažením myši. Pokud na nakreslený objekt klikneme, můžeme se stisknutou myší posouvat výplní v objektu.
V kódu používáme několik pomocných proměnných, především se jedná o proměnné „startX“ a „startY“, které detekují místo, kam jsme umístili kurzor před započetím kreslení čtyřúhelníku. Tyto proměnné jsou nutné pro kresbu objektu, jehož jedna souřadnice představuje již zmíněné proměnné a druhý roh objektu je vypočten podle polohy kurzoru myši.
Další proměnná „startPaint“ slouží pro spuštění kreslení objektu. Její „kolegyně – startMove“ nám pro změnu slouží pro začátek/ukončení pohybu s výplní objektu.
Kreslení a pohyb výplně se provádí pomocí akcí, které jsme umístili do události detekující pohyb myši. V obou případech neustále překreslujeme původní objekt. Pokud bychom zde nepoužili metodu „clear()“, měli bychom na ploše místo jednoho čtyřúhelníku mnohem větší množství jeho alternativ.
Parametry metody pro kreslení výplně jsme si na začátku vysvětlili, z kódu je navíc zřejmá jejich funkce, pouze se zastavíme nad objektem matice „Matrix“. V našem případě jsme použili metodu „createGradientBox“ objektu třídy „Matrix“, které jsme předali celkem 5 hodnot parametrů.
První dva (hodnoty „wd“ a „hg“) určují šířku a výšku barevného přechodu výplně, následuje hodnota rotace celé výplně, my jsme zvolili „0“. Poslední dva parametry určují souřadnice levého horního bodu celé výplně.
Pokud se podíváme na druhou část kódu, kde pomocí proměnné „startMove“ začneme s posouváním výplně, všimneme si části, kde používáme proměnné „startFillX“ a „startFillY“. Jedná se právě o body levého horního rohu výplně. Jejich hodnotu měníme podle polohy kurzoru myši a tímto pak posouváme celou výplní objektu.
Zbytek událostí slouží pouze pro přepínání mezi jednotlivými módy (kreslení/přesouvání) a pro aktualizaci pomocných proměnných.
Výslednou animaci si můžete prohlédnout zde. Zdrojový soubor ukázky je k dispozici zde.
