flash开发中如何实现界面代码分离

时间:2022-04-23
本文章向大家介绍flash开发中如何实现界面代码分离,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

“flash开发”发展到今天,大体上已经细分为二个分支:Flash 设计师 和 Flash程序员,然而设计师不懂代码,程序员不懂设计,如何把这二种角色有机结合起来,实现代码、界面分离?可能下面的办法对你有用:

actionscript3允许把外部swf直接用Embed标记嵌入到主类中(当然用UrlLoader动态加载也行),这意味着设计师们可以把一些常用的与代码无关的素材(比如按钮,图片,小动画),以他们喜欢的方式,用Flash CS工具设计好放到库中。

然后程序员把这类包含(皮肤)素材的swf嵌入到程序代码中,用代码创建相应的实例,这样程序员用flash builder/flashdevelop做开发,设计师用flash cs做设计,互不相干。

关键点:

设计师把素材放入到库中时,一定要指定类名,这样代码才能创建这些类的实例。

如上图所示,这里库中放了三种基本的素材(按钮,位图,电影夹),然后在代码中可以这样处理:

package 
{

	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
	import flash.display.BitmapData;
	import flash.display.Bitmap;


	public class Demo extends MovieClip
	{
		[Embed(source = "skin.swf",symbol = "ButtonPause")]
		private var ButtonPause:Class;

		[Embed(source = "skin.swf",symbol = "ButtonPlay")]
		private var ButtonPlay:Class;

		[Embed(source = "skin.swf",symbol = "LogoImage")]
		private var LogoImage:Class;

		[Embed(source = "skin.swf",symbol = "TestMovie")]
		private var TestMovie:Class;


		public function Demo()
		{
			init();
		}

		private function init():void
		{
			var btnTest:SimpleButton = new ButtonPause() as SimpleButton;
			trace(btnTest,btnTest is SimpleButton);//Demo_ButtonPause0,true
			addChild(btnTest);
			btnTest.x = btnTest.y = 50;
			btnTest.addEventListener(MouseEvent.CLICK,btnTestClick);

			var btnTest2:SimpleButton = new ButtonPlay() as SimpleButton;
			trace(btnTest2);//Demo_ButtonPlay1
			addChild(btnTest2);
			btnTest2.y = 50;
			btnTest2.x = 100;
			btnTest2.addEventListener(MouseEvent.CLICK,btnTest2Click);


			var bmd:Bitmap = new LogoImage() as Bitmap;
			trace(bmd);//Demo_LogoImage2
			addChild(bmd);
			bmd.x = bmd.y = 200;

			var testMovie:MovieClip = new TestMovie() as MovieClip;
			addChild(testMovie);
			testMovie.x = testMovie.y = 180;
			trace(testMovie);//Demo_TestMovie3

		}

		private function btnTestClick(e:MouseEvent):void
		{
			trace("btnTest 被点击了!");
		}

		private function btnTest2Click(e:MouseEvent):void
		{
			trace("btnTest2 被点击了!");
		}
	}

}