Warpův blog nejen o Flexu

Fotky jsou k dispozici zde, pokud nějakou z nich chcete použít, dejte mi vědět.

[Show as slideshow]

123►

Martin Boháč Život

Včera jsem se na chvíli poněkud zaseknul na super chybě v Internet Exploreru, konrétně veri pro Windows Vista – IE7 7.0.6001.1800. Projevuje se tak, že Flashový objekt má po načtení celého obsahu nulovou výšku a šířku i když samozřejmě tyto velikosti nulové nemá.

Číst více …

Martin Boháč Adobe Flash

V dnešním článku si ukážeme, jak vyrobit  web, který v sobě spojuje jak Flex 3, tak normálni Flash v Actionscriptu 3. Je totiž velmi výhodné toto umět spojit, jelikož pak člověk může používat Flex na formuláře a komunikaci s backendem a přitom využívat animačních metod a nástrojů, které nám zase nabízí Flash CS3 a CS4. Takže pojďme na to.

Číst více …

Martin Boháč Adobe Flash

Tak konečně je to tu. Flash umí 3D!! Zní to super, že? Nicméně není to až tak zásadní, jak by člověk čekal. Pod pojmem 3D si totiž většina lidí představí plně 3D renderovanou scénu, něco, na co jsou již zvyklí z počítačových her dnešních dnů. Tady přichází zklamání, opravdové 3D se nekoná.

Druhá vlastnost toho, co vnímá většina lidí jako „pravé“ 3D, je to, že vše je počítáno přes 3D chip na grafické kartě. To má nesporné výhody, zpracování dat a jejich zobrazení je mnohem rychlejší, procesor není zatížen a chip samotný je navržený tak, aby silně optimalizoval početní operace, které jsou při počítání 3D potřeba.

Ani jednou z těchto vlastností nový Flash player 10 neoplývá, nicméně nevadí to zas tak moc, jak by člověk čekal. Prvně je třeba si uvědomit cenu, kterou za to „pravé“ 3D platíme. První položkou je přenositelnost mezi platformami. Srovnejme si třeba Windows a Linux. Pod Windows máte možnost drtivou většinu her hrát pouze přes DirectX, což je sice skvělá technologie na vývoj her, ale není vůbec přenositelná pod Linux / Mac, jelikož je to technologie Microsoftu a není otevřená. Otevřený standart 3D renderování nabízí například OpenGL, přes který také běží všechny hry, co například pod Linuxem spustíte. Pokud by tedy Flash player 10 implementoval něco na způsob DirectX a spoléhal při tom na ovladače 3D karty, fungovaly by vám 3D aplikace jen na některých počítačích a celá pointa Flash playeru, jako cross-platform řešení by byla v tahu. Proto je jen dobře, že Adobe sáhla po tomto řešení. Někdo může namítat, že například MS SilverLight nabízí v očekáváné verzi 3 plnou HW podporu a to jak pro Windows tak pro MACy, ale mě, uživatele OS Linux, tím opravdu nezaujme.

Druhý trade-off je fakt, že ve Flash playeru 10 se nejedná o klasické 3D. Nově umožnuje provádět 3D transformace 2D objektů. Ale to není tak zlé, pokud si uvědomíme, že Flash umí vnořovat věci do sebe, takže při vnoření několika MovieClipů do sebe můžeme udělat víceméně 3D scénu srovnatelnou například s DOOMem a podobně. V DOOMovi na vás také neběhaly 3D postavičky, ale 2D potvory ve 3D prostředí. Proto nebudeme stahovat kalhoty před brodem a radši si to nové CS4 třidéčko vyzkoušíme v praxi, shall we?

Základ projektu

Otevřete si Flash Professional CS4, pokud ho nemáte, trial stáhnete tady https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash&loc=en

Vytvoříme si nový projekt a to rovnou AIR projekt, aspoň si procvičíme i AIR. Kód zde ukázaný samozřejmě můžete používat i v normální neAIR aplikacích, pouze si ho musíte upravit pro třídu, kterou budete používat. V AIRu je vždy jedna Document Class, tzn. třída dokumentu, která je spuštěna ve chvíli, kdy se nainicializuje váše aplikace. Jelikož se pohybujeme na desktopu, tak uvažovat v intecích preloaderů nemá smysl, vše máme již na disku a spouštíme to jako jakoukoliv jinou aplikaci. Tzn. jakmile spustíme AIR aplikaci, má zcela jistě nataženu hlavní třídu a žádný preloader není potřeba.

Dále si vytvoříme naší dokumentovou třídu, ale nejprve musíme vytvořit balíček, tzn. package. Použití packages není téma tohodle tutoriálu, proto stačí použít prázdné package name.

package
{
	// sem patri definice tridy
}

Dále si naimportujeme vše, co budeme pro tento příklad potřebovat. Pomocí klauzule „import“ říkáme Flashi, že má přidat do zkompilovaného swf i tyto třídy:

	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.geom.Point;

Jak vidíme, ve verzi 10 nám přibyly některé nové třídy, které budeme používat, takže si je postupně projdeme.

flash.display.Loader
Tuto třídu používáme pro načítání externích swf, obrázků a dalších komponent, které při práci používáme.

flash.display.Sprite
Sprite je základní stavební jednotkou každého Display Listu, tzn. něco jako MovieClip, ale s tím rozdílem, že neobsahuje vlastní časovou osu (timeline).

flash.display.StageAlign
Tato třída předává vlastnosti hodnot pro stage.align. Bez ní bychom nemohli zarovnávat na hlavní stage.

flash.display.StageScaleMode
Podobně jako předchozí třída, StageScaleMode obsahuje hodnoty konstant pro scaling hlavní stage.

flash.events.Event
Event je generickou událostí. Ve Actionscriptu 3 je velmi záhodno budovat všechny aplikace na událostech, než přímých voláních metod. Docílíte tím lepší architektury aplikace. Event je základní třída, pokud potřebujete k události přidat nějaké další informace, provede její rozšíření pomocí nové třidy, která bude třídu Event rozširovat „.. class MyEvent extends Event …“.

flash.events.MouseEvent
Klasickým případem rošíření třídy Event je například tato třída, odpovídá události, která bude vyvolána při nějaké akci s myší: posunutí, kliknutí atd.

flash.net.URLRequest
Instance této třídy se používá jako parametr pro volání metody load() například na Loaderu nebo URLStreamu a dalších.

Dále si nadefinujeme vlastní třídu dokumentu.

	public class ThreeD extends Sprite

Sobour s tímto kódem se tedy musí jmenovat ThreeD.as a ve Flashi musíte mít jako document třídu nastavenou ThreeD.

Dále si nadefinujeme některé proměnné a konstantu, se kterými budeme dále pracovat.

		// obsahuje cestu k obrázku, který budeme otáčet
		public static const FLASH_PLAYER:String = "images/flash_player.jpg";
 
		// tímto si připravíme ukazatele na instance tříd, které teprve vytvoříme
		public var img:Loader = null;
		public var pivot:Point = null;
		public var holder:Sprite = null;

Nyní je třeba vytvořit konstruktor této třídy:
Zde vytvoříme EventListener, který bude čekat na událost ADDED_TO_STAGE a spustí funkci doAdded().

		public function ThreeD()
		{
			addEventListener( Event.ADDED_TO_STAGE, doAdded );
		}

Dále si připravíme metodu, kterou budeme „uklízet“ scénu do viditelné podoby.

		public function layout():void
		{
			holder.x = stage.stageWidth / 2;
			holder.y = stage.stageHeight / 2;
		}

Nyní již můžeme vytvořit metodu doAdded(). Jejím parametrem je objekt třídy Event, který jí bude předán EventListenerem, který jsme vytvořili v konstruktoru.

		public function doAdded( event:Event ):void
		{
			// nastavíme zarovnání celé scény na horní levý roh
			stage.align = StageAlign.TOP_LEFT;
			// dále říkáme, že scéna se nemá resizovat podle velikosti zobrazení Flash playeru
			stage.scaleMode = StageScaleMode.NO_SCALE;
			// na hlavní stage přidáme listener, který při změně velikosti stage zavolá doResize
			stage.addEventListener( Event.RESIZE, doResize );
 
			// vytvoříme vlastní objekt pro obrázek
			holder = new Sprite();
 
			// vložíme holder do display listu hlavní stage, na které právě pracujeme
			addChild( holder );
 
			// vytvoříme novou instanci Loaderu pro natažení obrázku do holderu
			img = new Loader();
			// zde přidáme listender na instanci třídy LoaderInfo, který nám poskytuje informace o počtu stažených bajtů atd. dokud se objekt stahuje, potom je ten samý objekt přístupný přes img.loaderInfo
			img.contentLoaderInfo.addEventListener( Event.COMPLETE, doComplete );
			// stáhneme obrázek pomocí load() metody Loaderu img
			// v rámci parametru také vytvoříme novou instanci URLRequestu!
			img.load( new URLRequest( FLASH_PLAYER ) );
			// zatím stahující se obrázek přidáme do display listu našeho Sprite holder
			holder.addChild( img );
 
			// nakonec si uklidíme
			layout();
		}

Na konci příprav si ještě nadefinujeme metodu, kterou listener zavolá po dokončení stahování našeho obrázku.

		public function doComplete( event:Event ):void
		{
			// listenery pro pohyb myší
			stage.addEventListener( MouseEvent.MOUSE_DOWN, doDown );
			stage.addEventListener( MouseEvent.MOUSE_UP, doUp );
 
			// vycentrujeme obrázek na střed scény
			img.x = 0 - ( img.width / 2 );
			img.y = 0 - ( img.height / 2 );
 
			// uklidíme
			layout();
		}

Jako předposlední věc vytvoříme metodu, která bude reagovat na změnu velikosti stage, jelikož aplikace beží v rámci AIR a lze zvětšovat a zmenšovat okno.

		public function doResize( event:Event ):void
		{
			layout();
		}

Teď se již můžeme věnovat vlastním akcím, které se mají stát při pohybu myši, celá scéna je totiž již připravena. Komentáře u jednotlivých instrukcí vysvětlují zbytek.

		public function doDown( event:MouseEvent ):void
		{
			// po stisku myši vytvoříme listener pro pohyb myši
			stage.addEventListener( MouseEvent.MOUSE_MOVE, doMove );
 
			// vytvoříme nový bod otáčení
			pivot = new Point( event.stageX, event.stageY );
		}
 
		public function doUp( event:MouseEvent ):void
		{
			// zrušíme listener na pohyb myši po uvolnění tlačítka myši
			stage.removeEventListener( MouseEvent.MOUSE_MOVE, doMove );
 
			// nastavíme původní hodnoty otočení holderu
			holder.rotationX = 0;
			holder.rotationY = 0;
		}
 
		public function doMove( event:MouseEvent ):void
		{
			// zde si vytvoříme bod ve 3d scéně, okolo kterého objekt otáčíme, použijeme pro něj hodnoty z události aktuálního pohybu myši
			var current:Point = new Point( event.stageX, event.stageY );
 
			// nastavíme rotace v rámci osy X a Y jako modulo 360 rozdílu mezi bodem, kde jsme kliknuli a bodem na kterém nyní máme ukazatel myši
			holder.rotationY = ( current.x - pivot.x ) % 360;
			holder.rotationX = ( current.y - pivot.y ) % 360;
		}

Jak vidíme, celý trik je v nových parametrech rotationY a rotationX, které má nyní každý sprite. Jejich hodnoty mohou být od -180 do 180, tzn. pokrývají celých 360 stupňů. Dále máme ještě novou property rotationZ, která se váže k ose Z (nečekaně . O té zase něco přístě.

Ať vás provází síla…

Zde si můžete stáhnout komplet projekt.

Martin Boháč Adobe Flash

Přináším několik desítek cvaknutí z Milána. Cvaknutí mám přirozeně mnohem více, ale většina z nich jsou slajdy z přednášek, takže ty vám nejprve zpracuju, ať to máte s celou parádou v rámci tutoriálů.

Omluvte sníženou kvalitu fotek s mým obličejem, někdo se tak už holt narodí

[Show as slideshow]

Martin Boháč Adobe Flash

Uff…

Sedím v poloprázdné hale, kolem mě ještě pár desítek lidí využívá konečně rychlý wifi internet a jinak se už všude balí. MAX byl super, žádný zasadnější problém mě tu nepotkal mimo “badge”, který díky UTF NEkompatibilitě obsahoval pouze “Martin Bohá”. Ale to se stává i v lepších rodinách, fixa to hned spravila. Nejsem příliš ve stavu, kdy bych mohl plodit sáhodlouhé články, nicméně chci vás aspoň informovat o tom, co můžete od mé maličkosti v příštích týdnech a měsících čekat.

První začnu rovnou jednou z nejlepších věcí, tutoriály a prezentacemi nové CS4 sady, konkrétně tím, co můžete dělat nově ve Flashi (pravděpodobně začnu hned v pátek první lekcí o 3D ve Flash Playeru 10) a Flexu.

Dál se podíváme na programovaní ve Flash Lite pro novou řadu telefonů NOKIA s toolkitem S60, pro navnadění uvedu jen pár perliček: GPS pozice , přístup do kalendáře, kontaktů a třeba i pohybové senzory!!! Záviděli jste ájfouňákům jejich hry? Napište si lepší sami.

Také se podíváme na různé přístupy k testování Flex aplikací již při vývoji, psaní testovacích skriptů a využití času betatesterů na věci, kde jsou opravdu potřeba.

Fanoušky Papervison3D určitě potěsí video s ukázkami toho, na čem se právě pracuje, uvidíte to, co bude k mání možná až za rok!!! Bohužel nahrané pouze na můj telefon, HD kamera nebyla v tu chvíli k dispozici, ale pokusím se sehnat i lepší video v lepší kvalitě, stojí to totiž opravdu za to.

Plus to mám v plánu rozjet malý seriál tutoriálů na Flex pro začátečníky, hezky od píky.

A na hromadu věcí si teď uz prostě nemůžu vzpomenout, foťák a zápisník mi ale určitě pomůžou, takže…

…be prepared a udržte nám pozornost, celá česká usergroup je tu jen pro vás.

Warp

Martin Boháč Adobe Flash

Tak jsem jednoho krasného dne zkusil pustit AIR aplikaci pod Linuxem. Jaké bylo moje prvnotní zklamání, když instalace neproběhla a slibné okno s “Install NOW” skončilo errorem. Nicméně na to už je asi každý uživatel Linuxu zvyklý, takže mi to nedalo, jelikož jsem si nový Tour De Flex chtěl prostě vyzkoušet. Vy máte také tu možnost a to zde => http://theflashblog.com/?p=477

Již po prvním vyzkoušení mi bylo jasné, že AIR aplikace zaměňuje “Installing” a “Downloading”, AIR se sice stáhne, ale tím to také skončí.

První zagooglení ukázalo, že v současné době AIR beží na těchto distribucích:

• Fedora Core 8
• Ubuntu 7.10
• Open Suse 10.3

Potud je všechno v pořádku, můj notebook okupuje právě Kubuntu 7.10, takže směle do instalace. Ono to bohužel s portováním aplikací pod Linux není tak jednoduché, v létě jsem o tom na konferenci s Flex vývojáři z Adobe konající se na FELu (ČVUT) diskutoval a problém je hlavně v tom, že naportovat něco pro jednu verzi MacOS je mnohem jednodušší, než pro desítky (stovky?) různých distribucí a jejich verzí, co nám jich Linus Torvalds seslal.

Co ovšem potěší, je distribuce jako RPM nebo DEB balíčky, takže teoreticky by měl AIR šlapat pod vším odvozeným z Debianu, což je skvělá zpráva. Bohužel po ruce podobnou instalaci nemám, takže nemohu otestovat.

Dále je třeba splnit několik podmínek, musíte používat podporovaný okenní manažer, tzn. Metacity nebo KWin a na něm mít nainstalován 3D nadstavbu jako je Beryl nebo compiz-fusion. V mém případě compiz-fusion.

Pokud jste již nainstalovali AIR a potřebujete ho odstranit, provedete to následovně:

RPM

$ rpm –e AdobeAIR_enu

DEB

$ dpkg –r adobeair-enu

Instalace samotná

Zde si stáhněte aktuální verzi AIR pro Linux.

http://labs.adobe.com/downloads/air_linux.html

Souboru přirozeně musíme dovolit spuštění, takže

$ chmod +x jmeno_instalatoru.bin

Dále instalace pokračuje velmi příjemně.

Po ukončení instalace přijde lehčí zklamání. Přes browser AIR aplikaci nenainstalujete. Tadadam dam. I po restartu Firefoxu se nic nezmění a AIR aplikace pořád hlásí chybu a tvrdošíjně odmítá cokoliv dělat.

Není ale třeba házet flintu do žita, stačí si ve stránce najít patřičný IFRAME a v něm odkaz, pro vás zde:

http://download.macromedia.com/pub/developer/air/TourDeFlex.air

(ehm, Macromedia?? )

Až se aplikace stáhne na disk, stačí ji potom již poměrně jednoduše nainstalovat.

Teď se pomodlíme k našemu oblíbenému božstvu či odříkáme nějaké mantry a voala…

Máme nainstalováno

Ani to moc nebolelo.

Je asi možné, že AIR jde rozběhat i přes browser, nicméně choroba, která na mě dolehla, mě zase posílá do postele, takže si jestě proklikám svojí první AIR aplikaci pod Linuxem a půjdu spát. Doufám, že tento zcela jistě nevyčerpávající návod někomu pomůže vyzkoušet si AIR pod nejlepším OS

Pěkný večer.

Martin Boháč AIR - Adobe Integrated Runtime, Linux

Jak možná víte, od 1. prosince se koná v Itálii konference pro vývojáře v produktech Adobe, tzv. MAX. I moje maličkost se zůčastní, nahraje videa, napíše reporty. Těšte se a hlavně…

provázej vás síla .:)

Již od prvního večer…

Martin Boháč Adobe Flash, Flex

Vítaný návštěvníku, buď pozdraven!

Myslím, že je slušné, začít první příspěvek trochou pravdy. Nikdy bych si nepomyslel, že budu také blogovat. Natož pak na doméně, která se shoduje s mým jménem. Vždy jsem považoval lidi, kteří si koupí doménu se svým jménem za poněkud zvláštní, slušně řečeno. A vida, je ze mě také blogger. Naštěstí v roce 2012 má skončit svět, takže tu nebude zabírat drahocenné bajty internetu déle než 4 roky. To je jedna z těch dobrých zpráv.

Důvod stvoření tohoto temného zákoutí českého internetu je prostý. Rozhodl jsem se znovu vydat na cestu učení se novým technologiím a jsem toho názoru, že i ostatní lidé by měli mít možnost se jednoduše něco naučit. Konkrétně se chci věnova Adobe Flex, technologii, která mě postupně začíná pohlcovat. Osobně již s Flashem pracuji od roku 1999, tehdy jsem si poprvé stáhnul tutoriál k animování a jal se učit pracovat s tím tehdy zcela pekelným nástrojem. Když říkám pekelným, mám na mysli Flash 4 s první verzí Actionscriptu a to pekelným je relativní vůči dnešnímu stavu. Pracovat ve Flashi 4 bylo občas opravdu poněkud složité.

Jako programátor jsem začal poprvé pracovat ve firmě Unicorn. Byla to dobrá škola, ale platové podmínky hodné metače silnic mi po roce a půl (v situaci kdy už jsem vedl 4 lidi po sebou) trochu přestaly vyhovovat a náhoda tomu dala, že jsem se dostal k práci na online herním projektu, který kombinoval Flash, Shockwave a C++ server. Nebudu chodit kolem horké kaše a přiznám bez mučení, že herní projekt bylo online casino. To mi dalo šanci pracovat na zajímavém projektu a donutilo mě to se naučit programovat ve Flashi až na hranice jeho možností. A ty ve verzi 4 opravdu nebyly daleko. Každou chvíli se dělo něco divného, hromada věcí nefungovala jak měla a zvlášť spojení Flash+Shockwave bylo zdrojem utrpení vstuktu monumentálního. Zde je asi na místě uvést příklad. Překreslení obrazovky, na kterou někdo nasázel plný stůl žetonů trvalo Flashi i déle jak 5 minut! Ano, vykreslit cca. 100 MovieClipů bylo pomalejší, než si uvařit kafe. Řešením nakonec bylo použití jediné rychlé funkce a to zapisování textové proměnné do TextFieldu. Vytvořili jsme si vlastní font, který obsahoval křivky žetonů po jednotlivých vrstvách a do nich zapisovali textové stringy. Různě barevné proměnné vytvořily dohromady celý žeton, který se tak objevil okamžitě a problém byl vyřešen.

V té době mi můj kamarád, programátor v ASP tvrdil, že Flash je pouze mezifáze, něco, co brzy zanikne, nesmyslný kus softwaru, který nemá smysl zkoumat. Po osmi letech mám tu čest veřejně prohlásit, že se spletl. Flash není mrtvý, ale žije mnohem víc, než kdy před tím. A protože už jsem si k němu za ty léta vytvořil velmi pozitivní vztah, začal jsem psát tento blog. Chci se podělit o informace, které získám. Chci pomoci všem těm, kdo se chtějí naučit pracovat jak ve Flashi, tak Flexu a vrátit světu to, co jsem dostal.

A jestě jednu věc bych rád. Rád bych pomohl převálcovat MS SilverLigth. Microsoft opravdu není můj šálek čaje a jako již několikaletý uživatel Linuxu věřím, že Flex a Flash je ta cesta, kudy se vydat.

Jak tedy zakončit první příspěvek v půl čtvrté ráno? Nijak , pokračování přístě…

Martin Boháč Adobe Flash, Flex