Flash Experts Blog Aggregator.
Posts by author:
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.
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.
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() { } } }
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?
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/
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.
Vývoj pv3d je v sympaticky aktivní fázi překotného rozvoje a prakticky každý den vzniká nový web, vychází nová featura od core týmu nebo z komunity kolem. Budu tu hlavně pro svoje archivační účely dělat pravidelný výcuc z novinek hned jak se nahromadí víc zajímavostí najednou.
Dvě největší změny poslední doby jsou rozhodně. Sebův memory leak bug fix (za který mohlo definovaní vztahu objekt <> materiál pomocí Dictionary) a opět jeho opravení dirty boxu neboli obdelníku, který FLASH překresluje při každém enterFramu. Ideální stav je samozřejmě, aby se překreslovala jen ta část stránky, která se opravdu hýbe. Pv3D se bohužel donedávna překreslovalo celé. Chyba byla v tom, že Pv3D pravidelně upravuje z depth vrstev na obrazovce příkazem setChildIndex. Pokud pak vrstvě přidělíte její index, ve kterém se již nachází, tak i když se doopravdy nic neděje, je vrstva zahrnuta do překreslovacího boxu. Eh…
Vylepšení a ne bug fix :) měsíce je pro mně určitě zupkův Quadrant Render Engine. Tahle krásna věc umožňuje rozdělit objekt na vícero trojúhelníků v místech dotyku dvou objektů. Funguje to jako zahušťění sítě, které jste mohli obdivovat v Alternativa platformě.
Používám ve svých projektech BasicView jako základní classu. Hezká rozšířitelnost umožnila vznik jednodušší reflexe v podobě ReflectionView, násobící negativně matici bodů. Autor se vrhl do výroby fall-offu (postupného vymizení zrcadleného obrazu jednotlivých objektů). Držím palce.
Zajímavý zdroj informací a novinek blog Exeje z Ruska zveřejnil bezier křivku i s detekcí nárazu. Dokážu si představit využití v jednoduchých 3D hrách prolnuté s třídou 3D Ribbons..
Zmiňoval jsem ho v úvodním textu, ještě se k němu vrátím v celém příspěvku, ale Grdenův XRay, došel docela dobrých změn. Doporučuji jako základní debug tool k pv3d.
Zrovna jsem pracoval na jednoduchém binárním stromu pro web kamaráda ilustrátora, když jsem narazil na interpret jazyka Logo s hezkou ukázkou. Nesnáším dělat něco, co už je dávno hotové.
Pokud potřebujete něco ohýbat modifikovat, či měnit je tu pro vás AS3Mod. Začalo to u classy Bend na ohýbání objektů a momentálně podporuje všechny 3D engins na scéně. Věnuji mu vlastní příspěvek, ale zatím alespoň zmínkou (ať na to nezapomenu).
Save your sensible. Vtipná reklamní site využívající PV3D a importované 3D animace v COLLADA formátu.
Ve zlepšeních kódu jsem mluvil o QuadTrees. Podívejte se na ekvalizér v praxi.
Rozhodl jsem se, že přeci jen nemám tak málo času, jak se mi zdálo. Došlo mi, že už docela dlouho intenzivně pracuji s něčím, co jsem se naučil od jiných, a že je pomalu na čase vracet nazpět. Vedu po emailu několik debat s lidmi, kteří se začínají prodírat pralesem “Papervision 3D” a už teď se na začátku se opakují stále stejné dotazy. A vůbec - nemusí být všechny tutorialy a návody jenom anglicky - je třeba povzbudit naší domácí scénu a obratem pak společně ukázat světu jak vypadají zlaté české ručičky verze 2.0 pro jedenadvacáté století.
Rozhodl jsem se tedy neskromně, že začnu předávat část svých skromných znalostí tady v rámci svého blogu. Tolik k úvodnímu příspěvku, a aby jeho hodnota nebyla jen veskrze nulová, začneme rovnou od podlahy seznamem nezbytného náčinní, zdrojů a inspirace.
Dokumentace Papervision 3D je díky množství verzí mírně řečeno neuspořádaná, bude lepší si tedy ujasnit základní terminologii. V tomto blogu se budu věnovat Papervision3D verzi 2.0 (dále jen pv3d). Ta byla před svým zveřejněným známa jako beta verze code-name “Great White“. Na starších blozích se tedy můžete setkat i s tímto dvojslovným názvem.
Prvním krokem na cestě k jednoduché krychli umístěné na scéně je stažení zdrojů. Pv3D využívá služeb SVN, takže pohodlnější to už být nemůže. Zvolte si oblíbeného klienta (tady v OS X u mně vítězí SVNX) a jako repozitář, cestu ke zdrojům, uveďte:
http://papervision3d.googlecode.com/svn/trunk/
Pak už jen checkout do připravené složky kam si dáváte třídy, nastavit cestu ve FLASHi a je to. Záměrně se tady vyhýbám detailům, všechno je to už mnohokrát popsané v Googlu. Na dané cestě najdete kromě kýžené složky AS3 i složku AS2 a složku Branches obsahující v danou chvíli odštěpené větve vývoje.
Časem jistě využijete třídu Tweener či TweenLite podle složitosti animací, takže doporučuji když už jsme v té downloadovací náladě stáhnout i je.
Jako vývojové prostředí všem, kdo pracují s FLASH IDE, důrazně a vřele doporučuji Flex Builder. Ve všem překonává možnosti editace kódu ve FLASHovském prostředí rozdílem několika tříd a obzvlášť pro pv3D se Vám budou jeho debugovací schopnosti hodit nastokrát. Možností je samozřejmě víc, profesionální nástroj FDT za všechny
Základní sadu nástrojů máme pohromadě…
Pv3D prochází v současné době poměrně živelným rozvojem, řada postupů se mění a jediná možnost jak se zorientovat je nahodit svoji RSS čtečku, založit složku PV3D a naplnit ji odkazy na blogy pionýrů a průkopníků, kteří posunují aktuální vývoj dopředu a nebojí se vkročit ani na území tak divoká jako je frustrum culling a falloff v reflection vrstvách. Tady je krátký seznam do začátku. Pokud máte někdo další linky, přihoďte je do komentářů, rád je doplním…
Tak to je na seznámenou zatím dost až moc. Příště už budeme inicializovat scénu, umisťovat svůj první objekt a dojde i na trochu úsporné animace.
Yes. Algebraic studies are slowly paying off and I can try to work with little bit more advanced stuff. And I totally forgot to write in the previous post - sorry for my English. I know I use too many words meaning of which I don’t know - but that’s just so much like me :DBack to the job. We have balls, we have movement, we have collisions, we have vectors, mass and friction - hhoorraayy! We don’t have that nice and working rotation yet - work in progress. But I made a nice class extending Sphere in PV3D - let me clean it up and comment it - and it goes public.Kudos to Michael Battle, his class and tutorial was such a big help to me!Click more to see it embeded…
| Title: | Balls3D |
| Description: | First ball movement and collision detection. |
Well this still ain’t much, but… starts to be promising. To brag about how happy does papervision3D makes me feel would be like supplying the ancient city of Rome with Owls.. This tool is so wonderfull, it just tickles me to think about all those possibilites. So while I was doing some offline studing - i never had algebraic matrixes of vectors in school :(, getting ready for some real stuff - I started to work on some lightweight movement.
First time FPS from lifeztream .
First time Tweener usage
First time dynamic data. This demo loads gif file 16×10px, parses the image data and creates this field of planes with simple Color Textures. Click and hold the mouse button to make it go compact.
My logo again… starts to be narcistic :D
| Title: | Papers and cuts |
| Description: | Hover your mouse, click your buttons |
Yes, textures from Maya -> Papervision3D as a step number 2. Still nothing much to be proud of, but it’s the end of the first week of flirting with it. Again click the Title to be redirected.
| Title: | Spitfire. |
| Description: | Getting ready for game development |
Well well it’s been a while since I stumbled upon this piece of Joy, so I decided to document - and if the code will be sexy enough - also to publish source of my experimenting. This blog is mainly Czech language written, but English is the universal language, so sorry my Heart-of-the-Europe fellows - posts about Flash experimenting will be in English. It’s the least I can do for the allmighty community - the source of all of my skills harvesting… maybe somebody will find these docs helpfull - be it just one - mission accomplished!
First steps were quite a fun, click to see.
| Title: | First splash screen logo |
| Description: | Imported model from Maya, applied Flash filter effect for the rollOver glowing. |
Eh… :D