December 2008

Dostal jsem se do situace, kdy pro mě bylo vhodné a pohodlné rozdělit projekt na více celků. Hned zpočátku jsem zjistil, že nejde volat metody Doc Class nahraného swf tak, jak jsem byl zvyklý z AS2 tj.

AS3 považuje nahrané swf jako nezavislý objekt, proto musíme použít External API. Práce …

Další bleskový tip, který mě ale na chvíli potrápil.
Pokud chcete, aby datagrid přesně určoval svou velikost a přizpůsoboval se počtu řádků stačí do mxml přidat k datagridu volaní

updateComplete="dg.height=dg.measureHeightOfItems(0,gridData.length)+dg.headerHeight+2;"

přičemž dg je id našeho datagridu.

Podezřele často se objevuje dotaz, proč nefunguje embed fontu ve Flexu v případě tlačítek. Dejme tomu, že si font embedujete takto:

@font-face {
src: url("assets/snell-roundhand.swf");
fontFamily: "SnellRoundhand CE Script";
fontStyle: normal;
}

Flex ovšem u tlačítek má standardně nastaveno fontWeight:bold; Jednoduché řešení je nastavit si v css u tagu Button, fontWeight:normal; a je po starostech.

Minule jsme úspěšně vložili komponentu Google Maps do naší aplikačky. V té základní podobě toho mapa příliš nepředvede. Jakým způsobem tedy nastavit další vlastnosti mapy? Seznámíme se s událostma (events) a s nimi souvisejícími handlery.
Navazuji na článek Google Maps API ve spojení s Adobe Flex 3.
Handlery událostí
Jedna z variant, jak spravovat průběh aplikace, jsou události. [...]

V prvním tutorialu jste se měli možnost seznamit s omáčkou kolem práce s pv3d, vybrat si vhodné nástroje a seznámit se s vhodnými idoly. Dnes se vrhneme rovnou do nestojatých vod virtualního světa pv3d jakoby se Flash 10 nechumelil a zobrazíme svou první “Hello world!” krychli.

Setup FLEXu

Otevřete si FLEX a založte si nový ActionScript Project. V prvním dialogovém okně vyplňte jméno, umístění projektu a klikněte na Next (ne horkokrevně na Finish). V dalším okně máte možnost nasměrovat FLEX na složku, do které jste si umístili vaší working copy z SVN repozitáře papervision (tedy její src složku, pokud jste si exportovali vše i s dokumentací). Klikněte na Add folder a směle tak učiňte. Nyní již jen Finish a FLEX vás víta s prvním předpřipraveným kódem. Můj projekt jsem pojmenoval _pv3d_01 takže úvodní obrazovka vypadá nějak takhle.

package {
	import flash.display.Sprite;
 
	public class _pv3d_01 extends Sprite
	{
		public function _pv3d_01()
		{
		}
	}
}

Setup PV3D, krychle na scénu!

Pro inicializaci pv3d dnes již potřebujeme pouze BasicView, které nám připraví základní scénu samu. Deklarujeme si tedy veřejnou proměnnou view jakožto BasicView. Chystáme se vyrábět krychli, deklarujme si tedy proměnnou krychle jakožto Cube. Poslední předpřípravou je deklarace materialu, tedy povrchu naší krychle. Do startu nám postačí ColorMaterial, tedy jednobarevná plocha. Jelikož pv3d umí hravě zobrazit na každé straně krychle něco jiného budeme k ní muset ještě nadefinovat seznam materiálů krychle, tedy MaterialsList a tím naše základní příprava končí. Přehled našich proměnných teď tedy vypadá takto (FLEX vám k nim automaticky dopíše importy relevantních knihoven):

public var view:BasicView;
public var krychle:Cube;
public var material:ColorMaterial;
public var seznamMaterialu:MaterialsList;

Přejděme do hlavní funkce a definujme si tedy novou scénu, na které se bude odehrávat naše divadlo.

view = new BasicView();

BasicView lze inicializovat s parametry BasicView(sirka=640, vyska=480, scale=true, interaktivita=false, camera=”target”); Jak vidíte standardně je povolené scale, takže se velikost pv3d přizpůsobuje velikosti okna browseru. Povšimněte si pro budoucnost, že interaktivita je v základu vypnutá, často toto přehlédnutí stojí za nepochopitelnou neklikatelností scény. My tedy inicializujeme bez parametrů a využíváme vlastních pv3d funkcí hlídajících změny velikostí obrazovky.

V dalším kroku si vytvoříme materiály krychle. Stačí nám tedy rudý povrch přes celou krychli.

material = new ColorMaterial(0xFF0000,.5);
 
seznamMaterialu = new MaterialsList();
seznamMaterialu.addMaterial(material,"all");

Jednoduchý ColorMaterial je možné inicializovat s parametry ColorMaterial(šestnáctková hodnota barvy, průhlednost, interaktivita=false); Naše krychle je tedy napůl průhledná, červená a standardně neklikatelná. V seznamu materialu jsme jen přidali naší rudou s parametrem “all” tedy přes všechny strany.

Přidáme si tedy standardně pomocí addChild pv3d view (obsahující scénu, kameru a vše potřebné, ale o tom podrobněji příště), vytvoříme a do vnořené scény vložíme naší krychli a .. a spustíme render. Pokud jste se světem 3D ještě nikdy nesetkali malé vysvětlení. Naše krychle zatím existuje jako matematicky definovaný objekt kdesi ve virtuálním vesmíru scény pv3D, která je zapouzdřena do našeho view, sloužícího jako správce našeho 3D dění. Aby se z vektorů a abstraktních plošek stal objekt na obrazovce, je potřeba spustit tzv. render - ten spočítá vše potřebné a přetvoří rovnice do pixelů, které se zobrazí návštěvníkovi stránek. Jak jste již určitě vytušili, takovýto krok je potřeba udělat pokaždé, když se něco změní, ideálně tedy na každý onEnterFrame. Jelikož byl problém s překreslováním celé scény nedávno vyřešen, nepřinese to snížení rychlosti v případě, že se nic neděje. Objekty se kterými nebylo šoupáno se nebudou znova přepočítávat.

Náš kód vypadá tedy takto a hurá do prvního testovacího buildu:

package {
	import flash.display.Sprite;
 
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.shaders.GouraudShader;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	public class _pv3d_01 extends Sprite
	{
		public var view:BasicView;
		public var krychle:Cube;
		public var material:ColorMaterial;
		public var seznamMaterialu:MaterialsList;
 
		public function _pv3d_01()
		{
			view = new BasicView();
 
			material = new ColorMaterial(0xFF0000,.5);
 
			seznamMaterialu = new MaterialsList();
			seznamMaterialu.addMaterial(material,"all");
 
			addChild(view);
 
			krychle =  new Cube(seznamMaterialu)
 
			view.scene.addChild(krychle);
 
			view.singleRender();
 
		}
	}
}

Vaše první krychle, gratuluji. Tedy přesněji čtverec. Ono dokud se nezačne 3D objekt hýbat, těžko poznáte, že není 2D :-). Přidáme tedy funkci, která nám bude čtvercem krychlí otáčet dokola a průběžně renderovat výstup.

Do hlavní funkce přidáme volání naší otáčecí funkce:

addEventListener(Event.ENTER_FRAME, otocKrychli);

a k importům přidáme Event - odchytávání událostií, v našem případě tedy ENTER_FRAME..

 import flash.events.Event;

Vytvoříme si jí a přesuneme do ní náš renderer:

public function otocKrychli(e:Event):void {
	krychle.yaw(5);
	view.singleRender();
}

Jak vidíte voláme funkci yaw. Slovnik.cz nám nabízí překlad “plourání” což je jistě zajímavý popis, ale nejde o nic jiného než o rotaci kolem vlastní osy tak, jak ji známe například od zeměkoule.

Výsledek by měl být na světě. Hledíte na svou první krychli v Papervision 3D. Není to moc, ale ani málo. V příštím tutorialu se od tohoto milníku odrazíme k větším výšinám!

Prvního prosince oslavilo Papervision3D 2 roky jako OpenSource projekt. Všechno nejlepší, a pojďme se podívat na novinky “z branže.” Poslední týden byl docela nezvykle vklidu, nevím jestli se všichni vzpamatovávají z Alchemy, testují PixelBender, Gumbo projekt, nebo 3D ve Flashi 10, ale ticho nevěstí nic zlého - naopak v zákulisí se evidentně usilovně pracuje.

A hned zkraje nervózní zprávička. Doom1 ve FLASHi. Přesně tak. Za všechno může Alchemy, magická technologie od Adobe, která umožňuje kompilovat C++ kód do Actionscriptu (!!). A evidentně využívá specielně pro ní vyhrazené funkce flash playeru, ke kterým se s AS3 nedostanete (převážně paměťové operace). Všem nám jde v 3D především o výkon - připravuje se snad Adobe k odchodu k HaXe pryč od ECMA skriptu po debaklu ECMA 4 draftu (AS3 se od něj silně liší)? Máme si myslet, s lehkou nadsázkou, že náročnější operace se nebudou zrychlovat větším využíváním výpočetní síly grafických karet, jak se čekalo, ale přechodem na řekněme optimalizovanější programovací jazyk? 

Zajímavou informaci týkající se 3D, ovšem ve FLASH 10 a ne PV3D, teď zpracovává kolega Viktor. Vypadá to totiž, že s příchodem AS3 přichází i funkční degradace v rámci player verzí. Pokud by se to potvrdilo, znamenalo by to, něco jako funkční degradace AJAX prvků ve webu. Nemáte zapnutý javascript? Nevadí stránka se stejně zobrazí, jen bez efektu. To by bylo super! Konec zakázek ve stylu “udělejte to pro tu a tu verzi browseru.” A když jsme u toho 3D v desítce. Co vy na slona?

Fancy sites

Jestli se zajímáte o Papervision, museli jste zahlédnou augmented reality ohňostroj. Byla jen otázka času, kdy tenhle experiment někdo rozšíří. A teď už je jenom otázka času, než ho někdo použije v praxi. Nemůžu se dočkat!

Něco v duchu nenápadnosti a filmovosti. Australia Movie, prakticky neznatelně okořeněné pv3d. Nemusí to vždycky být o průletu hvězdokupami :)

A ještě něco. Není to nic složitého, nic co by stálo na hraně nože pokroku, ale má to něco do sebe. Ten moment, kdy si kliknete poprvé není úplně mimo… http://markushesper.de/

PS:

A nakonec něco ne PV3Dového - Tour de Flex jste už museli vidět. Jestli ne, tak okamžitě navštivte. Naprostá bomba, profík - neprofík.