Domů > Adobe Flash > Jak propojit Adobe Flex 3 a document class based Flash v Actionscript 3.0

Jak propojit Adobe Flex 3 a document class based Flash v Actionscript 3.0

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.

První je třeba si připravit kostru aplikace, budeme potřebovat Flash CS3 swf soubor a Flexový holder, který do sebe bude Flash natahovat. Nejprve si tedy připravíme Flashovou aplikaci, která bude dělat nějakou jednoduchou věc, třeba změní barvu pozadí.

Otevřete si Flash CS3 nebo 4 a vytvořte nový Actionscript 3.0 soubor typu .fla. Soubor pojmenujte ClassTest.fla. K němu si připravte také soubor ClassTest.as, který bude obsahovat třídu s testovacími metodami.

Do souboru ClassTest.as vložíme následující kód.

package {
 
	// importy trid potrebnych pro beh programu
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ClassTest extends MovieClip {
 
		// promenna pro ulozeni odkazu (pointeru) na Flexovou aplikaci
		private var main;
 
		// graficke promenne
		private var circle:Sprite = new Sprite();
		private var square:Sprite = new Sprite();
 
		public function ClassTest():void {
			// konstruktor tridy
 
			// pomoci super() zavolame construktor extendovane tridy, tzn. defakto volame MovieClip();
			super();
 
		}
 
		public function getParentPointer(parentPointer):void {
 
			// ulozime si odkaz na hlavni movieclip
			main = parentPointer;
 
		}
 
		private function callParent(e:MouseEvent):void {
 
			// zavolame metodu na Flexu
			main.testMethod("Test String");
 
		}
 
		public function createSquare():String {
 
			// metoda, kterou lze volat z Flexu, jelikoz je public
 
			// kreslilme ctverec
			addChild(square);
			square.graphics.lineStyle(3,0x00ff00);
			square.graphics.beginFill(0x0000FF);
			square.graphics.drawRect(0,0,100,100);
			square.graphics.endFill();
			square.x = stage.stageWidth/2-square.width/2;
			square.y = stage.stageHeight / 2 - square.height / 2;
 
			// pridame listener pro zavolani callbacku do flexu
			square.addEventListener(MouseEvent.CLICK, callParent);
 
			// navratova hodnota
			return "Square Drawn";
 
		}
 
		private function createCircle():String {
 
			// metoda, kterou volat nelze, jelikoz je private
 
			addChild(circle);
			circle.graphics.lineStyle(3,0x00ff00);
			circle.graphics.beginFill(0x0000FF);
			circle.graphics.drawCircle(0,0,100);
			circle.graphics.endFill();
			circle.x = stage.stageWidth/2-circle.width/2;
			circle.y = stage.stageHeight/2-circle.height/2;
 
			return "Circle Drawn";
		}
 
	}
 
}

Důležité je zde pochopit několik věcí:

Abyste mohli volat metody Flashe, když bude vložený ve Flexu, musíte je mít jako public metody. Private metody dle OOP lze volat pouze v rámci té samé třídy.
Pokud chcete volat metodu ve Flexu, musíte si nejprve do Flashe uložit referenci, to musíte prvně udělat z Flexu, jinak se v třídě Flashe nemáte na co odvolávat.
Můžete předávat zcela normálně parametry při volání metod a také získávat návratové hodnoty, jen pozor na to, aby byly správného typu.

Dále pak ve Flexu vytvoříme následující aplikaci:

A k ní přiložíme tento as3 soubor.

// ActionScript file
 
// importy
import flash.display.MovieClip;
import flash.events.*;
import mx.controls.Alert;
 
// definice promenne, ktera bude obsahovat odkaz na flash v podobe movieclipu
private var mc:MovieClip;
 
private function inicApp():void {
 
	// listener ktery zaruci, ze budeme volat funkce flashe az potom, co se cely nacte do pameti
	SWFMovie.addEventListener(Event.COMPLETE, registerSWF);
 
	trace("Loading Main SWF");
 
	// nacteme SWF
	SWFMovie.load("ClassTest.swf");
 
}
 
private function registerSWF(e:Event):void {
 
	trace("Registering Main SWF");
 
	// POZOR, toto je dulezite, zde vytvorime odkaz na obsah SWFLoaderu potom, co je nacteny a to pres konstruktor MovieClipu
	mc = MovieClip(SWFMovie.content);
 
	storeReferenceInChildSWF();
 
}
 
private function storeReferenceInChildSWF():void {
 
	// ulozime odkaz na instanci teto tridy do pameti vlozeneho swf, probiha to az pri runtime
	mc.getParentPointer(this);
 
	// a vyzkousime, jestli nam to funguje, povsimnete si, ze volame funkci primo z tridy flashe!
	var returnText:String = mc.createSquare();
 
	// ukazeme uspesne okenko
	Alert.show(returnText,"Result", mx.controls.Alert.OK);
 
}
 
public function testMethod(text:String):void {
 
	// reakce na zavolani medoty testmethod z flashe
	Alert.show("Metoda testMethod byla zavolana z flashe s parametrem:"+text,"Result", mx.controls.Alert.OK);
 
}

Důležité věci ve Flexu jsou tyto:

Používáme koponentu SWFLoader, ale její obsah načítáme ručně, je to tak pohodlnější, samozřejmě to jde udělat vše i pouze v MXML, ale není to tak popisné.
Nejprve musíme uložit odkat na flex do flashe, než můžeme po flashi něco chtít, takže je dobré mít flash postavený tak, že čeká na externí spuštění z flexu a díky tomunám pak událost applicationComplete spustí úplně všechno. Pokud to tak neuděláte, mohou se vám dít neočekávané chyby, které se budou pouze velmi špatně ladit.

Toto by vám mělo stačit na to, abyste mohli samizačít plodit aplikace používající jak flash, tak flex. Tutoriál jsem napsal proto, že i když je o vlastně celé logické, tak ě to prvně vůbec logické nepřišlo a musel jsem na to poněkud zdlouhavě přicházet cestou pokus omyl. Doufám, že tímto někomu ušetřím dost času.

Použítí v praxi můžete vidět třeba na http://www.golf6.cz, kvůli tomuto webu jsem to řešil. Vlastní web je ve Flexu, ale vnitřky, co se načítají, jsou ve Flashi.

Ať vás provází síla a pokud máte dotaz, tak se ptejte.

Projekt je ke stažení zde.

Martin Boháč Adobe Flash

  1. Bez komentářů.
  1. Žádné zpětné odkazy
Musíte být přihlášen k poslání komentáře.