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.
Umíme ve Flashi – 14. díl – kreslíme přechodové výplně

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, Start, Fine, Distance

1 komentář

Nejnovější komentáře

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

Pojďme programovat elektroniku: Postavíme si titěrnou Wi-Fi meteostanici s lepším teploměrem než Netatmo

Pojďme programovat elektroniku: Postavíme si titěrnou Wi-Fi meteostanici s lepším teploměrem než Netatmo

** Dnes se podíváme na maličkou Wi-Fi destičku Wemos D1 mini ** A připojíme k ní barometrický a teplotní shield ** Poběží na ní web a nabídne i JSON API

18.  6.  2017 | Jakub Čížek | 28

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

** Na jaké parametry se zaměřit a kde vás výrobci chtějí nachytat ** Monitory se stále více specifikují pro konkrétní určení ** Náročný hráč nebo profesionální grafik mají různé požadavky

20.  6.  2017 | Tomáš Holčík | 31

Dlouhodobý test HTC Vive: co vám recenze o virtuální realitě neřeknou

Dlouhodobý test HTC Vive: co vám recenze o virtuální realitě neřeknou

** Ani hry se sebelepší grafikou vás nevtáhnou tolik, jako ve virtuální realitě ** Pro sledování filmů není VR ani zdaleka ideální ** I první generace je skvělá, stále však působí jako prototyp

20.  6.  2017 | Stanislav Janů | 22

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

** Na černém trhu mohou zaměstnanci továren za kradené součástky inkasovat částku ve výši ročního platu ** Velké množství informací je vyneseno i z centrály Applu ** Díly jsou pašovány v botách, podprsenkách i odpadem

21.  6.  2017 | Stanislav Janů | 22


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky