reklama

Umíme ve Flashi – 14. díl – kreslíme přechodové výplně

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.

Tvorba výplně

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ě.

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:

  • fillType – určení typu výplně, můžeme použít lineární výplň („linear“) a nebo kruhovou („radial“)
  • colors – proměnná, do které vkládáme pole barev přechodové výplně. Je zřejmé, že pole musí mít minimálně dva prvky, maximálně můžeme použít 15 barev přechodové výplně
  • alphas – opět se jako hodnota vkládá pole, které určuje hodnotu průhlednosti jednotlivých barev, které jsme určili v předchozím parametru.
  • ratios – hodnotou je pole, jehož prvky mohou nabývat hodnot 0 až 255. Tyto čísla určují, do jaké vzdálenosti je daná barva původní, tedy od jakého místa se začne barva prolínat se sousední. Minimální hodnota označuje začátek přechodové výplně, hodnota 255 označuje konec. Pokud proto vložíme jako hodnotu pole [0,255], určíme, že se obě barvy začínají prolínat hned od okrajů výplně.
  • matrix – podrobné určení objektu transformační matice přechodové výplně
  • spreadMethod – nepovinný parametr, pomocí kterého můžeme určit, jakým způsobem se budou barvy výplně opakovat. Pokud napíšeme hodnotu „pad“, nebude se přechodová výplň opakovat a případné prázdné oblasti se vyplní nejbližší barvou přechodu. Hodnotou „reflect“ se barevný přechod zrcadlově kopíruje do celé výplně. Poslední možnost „repeat“ zajistí opakované použití přechodu, ovšem bez zrcadlového otočení.
  • interpolationMethod – nepovinný parametr, hodnotou „linearRGB“ určíme, že barevné přechody budou obsahovat i barvu vzniklou smícháním obou barev, hodnota „RGB“ zajistí jednoduché prolnutí obou barev.
  • focalPointRatio – nepovinný parametr, který může nabývat hodnot 0 až 1 případně -1 a určuje, v jaké vzdálenosti od středu objektu se nachází střed přechodové výplně. Jedná pouze o horizontální posuv středu. Hodnota 1(-1) umístí střed výplně na levý nebo pravý okraj objektu, podle znaménka. Hodnota 0 umístí střed výplně ke středu objektu.

Kreslíme výplň pomocí AS

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.

Témata článku: Software, Programování, Matrix, Import, Distance

1 komentář

Nejnovější komentáře

  • gully, gully 9. 1. 2006 5:49:32
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
reklama
Určitě si přečtěte


reklama