hlavní stránka # o tento web se stará Lukáš Havrlant # lukas.havrlant@gmail.com
Na této stránce se budu zabývat problémem, jak nakreslit nějaký objekt bez použití panelu Tools/Nástroje. Všechny příkazy zde uvedené jsou metodami objektu Movie clip a vkládejte je na první snímek hlavní časové osy.
Takže ze všeho nejdříve musíme vytvořit prázdný movieclip, do kterého se nakreslený objekt vloží:
_root.createEmptyMovieClip( "ctverec", 1 ); with (_root.ctverec)
Nový movieclip se tedy jmenuje "ctverec" a bude umístěn v hloubce 1. Abychom nemuseli při každém příkazu psát cestu, použili jsme příkaz with, který zajistí, že všechny další příkazy budou aplikovány na movieclip "ctverec".
Jako první musíme použít příkaz lineStyle, tedy styl čáry. Tento příkaz má tři parametry, z nichž povinný je pouze první - tloušťka čáry. Druhý parametr je barva čáry (zapsaná hexadecimálně) a poslední je Alpha (průhlednost čáry).
_root.createEmptyMovieClip( "ctverec", 1 );
with (_root.ctverec)
{
lineStyle( 5, 0xff0000, 100 );
Takže naše čára bude tlustá pět pixelů, bude mít červenou barvu a bude zcela neprůsvitná. Nyní musíme určit výchozí bod, kde chceme s kreslením začít. K tomu slouží příkaz moveTo. Má pouze dva parametry, x-ovou souřadnici a y-ovou souřadnici.
moveTo(200, 200);
Náš čtverec tedy bude začínat na těchto souřadnicích - x:200 a y:200. Nyní už pouze povedeme jednotlivé čáry, hrany čtverce. Ke kreslení čar slouží další příkaz lineTo. Opět má pouze dva parametry - x-ovou a y-ovou souřadnici. těmito souřadnicemi určíte druhý bod a program Flash tyto dva body spojí úsečkou.
lineTo (200, 300);
Nyní máme určeny dva body - první x:200 a y:200 a druhý bod - x:200 a y:300. Tyto dva body nyní Flash spojí úsečkou. Další čáru vytvoříme dalším příkazem lineTo, není třeba již používat moveTo, Flash začne s vykreslováním další čáry tam, kde končí předchozí čára.
lineTo(300,300); lineTo(300,200); lineTo(200,200);
Celý skript tedy bude vypadat takto:
_root.createEmptyMovieClip("ctverec",1) ;
with (_root.ctverec)
{
lineStyle(5,0xff0000,100);
moveTo(200,200);
lineTo(200,300);
lineTo(300,300);
lineTo(300,200);
lineTo(200,200);
}
Stejně jako můžete ohnout čáru nakreslenou nástrojem Line Tool, můžete také kreslit křivky přes ActionScript. Slouží k tomu další příkaz curveTo. Tento příkaz má celkem čtyři parametry, všechny povinné. První dva parametry jsou souřadnice bodu zakřivení a druhé dva parametry jsou souřadnice bodu, kde má křivka končit.
V praxi to tedy vypadá takto:
_root.createEmptyMovieClip( "krivka", 1 );
with (_root.krivka)
{
lineStyle(2, 0x00FF00);
moveTo(0,0);
curveTo(100,100,200,0);
}
Opět nejprve vytvoříme prázdný movie clip, do kterého se bude křivka vkládat. Čára bude hrubá dva pixely a bude mít zelenou barvu.
Kurzor nejprve přesuneme na souřadnice x:0 a y:0. Tady tedy bude křivka začínat. Končit bude na souřadnicích x:200 a y:0 (poslední dva parametry v příkazu curveTo). Nejdůležitější jsou ale první dvě souřadnice - x:100 a y:100. Podle tohoto bodu se zatím rovná čára zkroutí a vznikne konečná křivka (pozor na to, že křivka nikdy neprochází bodem zakřivení, viz dále - pokud se vám tedy nepovede místo křivky nakreslit úsečku).
Ve skutečnosti však metodou curveTo nekreslíte jednu křivku, ale hned tři. První křivka je normální čára, která by vznikla kdybyste neuvedli bod zakřivení (neboli kdybyste spojili úsečkou bod, kde má křivka začínat a bod kde má křivka končit). Druhá křivka vznikne zkroucením té první čáry tak, že střed úsečky posuneme do souřadnic bodu zakřivení. A výsledná křivka vznikne vektorovým součtem těchto dvou křivek.
Zatím jsme však kreslili pouze křivky, jejichž bod zakřivení ležel uprostřed úsečky (respektive ležel na její ose) a tak bylo vcelku jasné, jak se křivka vykreslí. Pokud však bude bod zakřivení ležet mimo osu, křivka se musí dále deformovat.
Vezmeme si třeba tuto křivku (ta černá tečka představuje pozici bodu zakřivení):
_root.createEmptyMovieClip("krivka",1);
with(_root.krivka) {
lineStyle(1,0x0000ff);
moveTo(0,0);
curveTo(100,200,200,0);
}
V tomto případě leží bod zakřivení na ose úsečky a křivka je tak osově souměrná. Pokud však bod zakřivení posuneme, křivka se vykreslí jinak:
_root.createEmptyMovieClip("krivka",1);
with(_root.krivka) {
lineStyle(1,0x0000ff);
moveTo(0,0);
curveTo(0,200,200,0);
}
Vrchol křivky se posunul do středu úsečky spojující bod zakřivení a střed původní čáry. Názorná ukázka bude asi lepší. Černé tečky představují (z vrchu) - střed původní úsečky, vrchol křivky a bod zakřivení.
K barvení výplně objektu slouží jednoduchý příkaz beginFill. Tento příkaz má dva paramentry, z nichž je povinný pouze ten první - barva. Druhý příkaz je opět Alpha (průhlednost). Jenom pozor na to, že tento příkaz musíte napsat ještě před samotným vykreslováním objektu:
_root.createEmptyMovieClip("ctverec",1) ;
with (_root.ctverec)
{
lineStyle(5,0xff0000,100);
beginFill(0x0000ff);
moveTo(200,200);
lineTo(200,300);
lineTo(300,300);
lineTo(300,200);
lineTo(200,200);
endFill();
}
Výplň čtverce nyní bude modrá. K ukončení výplně slouží příkaz endFill.
Pomocí výše zmíněných příkazů se dají dělat docela zábavné kousky, ale musíte mít ty nervy si s tím pohrát. Takže já vám tady ukážu poměrně jednoduchý příklad na vykreslení kruhu. Opět budeme potřebovat pár goniometrických funkcí, přesněji sinus a cosinus.
Takže ze všeho nejdříve musíme vytvořit nějaký movieclip, do kterého se bude vykreslovat. Takže na první snímek vložte tento skript:
_root.createEmptyMovieClip("kruh",1);
Teď bude potřeba vytvořit nějakou funkci, kterou poté budeme volat příkazem setInterval. Tato funkce bude mít za úkol postupně za sebou poskládat množinu bodů tak, aby z toho nakonec vznikla kružnice. Takže začneme deklarací funkce a příkazem with:
vykresli=function(){
with(_root.kruh){
Teď přijdou na řadu goniometrické funkce. Abychom docílili postupného vykreslení, musíme použít jak sinus, tak cosinus (samozřejmě můžeme cosinus vyjádřit přes sinus, ale nemá to smysl). Funkce sinus nám zajístí horizontální pohyb bodu. Naopak funkce cosinus zajistí vertikální pohyb bodu. Když se tyto dvě funkce spojí (a nebudeme předchozí body mazat), bude se vykreslovat kružnice.
Takže popořadě (tyto dva řádky vložte za předchozí skript):
x=Math.sin(++a*Math.PI/180)*50+200; y=Math.cos(++a*Math.PI/180)*50+200;
Takže nejlepší bude začít od prostředka:-) Tento zápis ++a*Math.PI/180 převádí stupně na radiány, abychom pak s nimi mohly dále počítat. Zápis ++a pokaždé zvýší proměnnou "a" o jedničku, takže se také pokaždé změní úhel.
Dále se provedou funkce sinus a cosinus. Už teď by se bod pohyboval po křivce, ale po malé křivce. Kružnice má nyní poloměr jedna. To je trochu málo, takže abychom tento poloměr zvýšili, jednoduše tyto proměnné vynásobíme novým poloměrem, v mém případě tedy *50. Další (poslední) zápis už jen k souřadnicím přičítá 200, čímž posouváme střed kružnice, který je momentálně v bodě o souřadnicích [0,0].
Další skript už je poměrně jednoduchý, už pouze nastavujeme příkazům moveTo a lineTo vypočítané souřadnice:
lineStyle(2,0xff0000); moveTo(x-1,y-1); lineTo(x,y); } }
Nejprve tedy nastavíme tloušťku a barvu čáry. Potom určíme počátek a konec čáry. Vzhledem k tomu, že jsou od sebe vzdáleny přibližně jeden pixel, vykreslí se de facto pouze bod.
Nyní vytvoříme interval, v jakém se bude funkce "vykresli" volat (tento příkaz už nevkládejte do předchozí deklarace funkce, ale až za ni):
int=setInterval(vykresli,50);
První argument je název funkce, která bude volána, druhý parametr je interval v milisekundách.
Už teď příklad funguje jak má, kružnice se vykreslí jak má, ale má to jeden háček - interval se stále opakuje, takže se stále vykreslují další body. Vy to sice nevidíte, protože jen překrývají předchozí body, ale zdržuje to počítač. Takže ještě budeme muset po vykreslení kružnice interval zrušit. K tomu slouží příkaz clearInterval(). Takže tento skript vložte opět do deklarace funkce "vykresli":
if(a==360) {
clearInterval(int);
}
Nyní, jakmile se bude proměnná "a" rovnat třista šedesáti, bude interval zrušen a už nebude pokračovat ve vykreslování. Když zvolíte například sto osmdesát, vykreslí se pouze půlkružnice.
Takže pro rekapitulaci celý skript:
_root.createEmptyMovieClip("kruh",1);
vykresli=function(){
with(_root.kruh){
x=Math.sin(++a*Math.PI/180)*50+200;
y=Math.cos(++a*Math.PI/180)*50+200;
lineStyle(2,0xff0000);
moveTo(x-1,y-1);
lineTo(x,y);
if(a==360) {
clearInterval(int);
}
}
}
int=setInterval(vykresli,50);