A闪的 BLOG 技术与人文
这篇文章中我为大家带来了一个极其混乱的demo,说极其混乱是因为他的效果,你看上图就非常明白了。OK,下面我们来说一说实现这400个logo同屏的具体混乱运动的具体办法。首先我要感谢Starling框架,是它让我非常容易的创建了这样一个demo来向大家展示stage3D的惊人效率。
因为在这个demo中没有任何交互的内容,所以我选了Starling中一个比较轻量级的类Image来作为我图像的承载器,同时为了方便的记录每个logo的运动参数,我对Image类进行了小小的修改。仅仅是一个扩展而已,打开来看一下这个ImageBox类。
package { import starling.display.Image; import starling.textures.Texture;在这个类中,我仅仅是扩展了两个属性,也仅仅是为了记录他们的X,Y轴偏移量。这样我就方便了后面动画的操作。然后我们来编写这个demo中最重要的一个类GameMain。你会发现这个名字或许有些眼熟,因为我在上一篇文章《Starling启动方式》中用到过这个类。这次我们就将这个类来完整的编写好。代码如下:public class ImageBox extends Image { public var _speedX:Number = 0; public var _speedY:Number = 0; public function ImageBox(texture:Texture,_x:Number,_y:Number) { super(texture); this._speedX = _x; this._speedY = _y; } }
}
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.Shape; import flash.events.Event; import flash.net.URLRequest;这段代码未作任何的优化及修改,你看到的是我最原始的代码编写内容。我在这里想告诉你的有两点,第一,你可以继续使用addChild这样的方法来制作你的程序,这样的接口也是和原生方法相近。第二,我希望你注意这段代码中的Event事件,因为用到了原生系统级Event和Starling中的Event事件。所以你要对此有所不同的处理。至于其他的逻辑,我想你可能在flashplayer 9的时代早已写过。import starling.display.Image; import starling.display.Sprite; import starling.events.EnterFrameEvent; import starling.events.Event; import starling.textures.Texture; public class GameMain extends Sprite { private var _texture:Texture; private var _imageBox:Vector.<ImageBox> = new Vector.<ImageBox>; private var _max_box:uint = 0; public function GameMain() { var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, load_complete,false,0,true); loader.load( new URLRequest("20px.jpg") ); } private function load_complete(evt:flash.events.Event):void { var bd:BitmapData = (LoaderInfo(evt.currentTarget).content as Bitmap).bitmapData; // this._texture = Texture.fromBitmapData( bd ); var i:uint = 0; var t:uint = 400; while( i < t ) { var sx:Number = 6 * Math.random() -3; var sy:Number = 6 * Math.random() -3; var imagebox:ImageBox = new ImageBox(this._texture, sx, sy); imagebox.x = 440 * Math.random(); imagebox.y = 440 * Math.random(); this.addChild( imagebox ); this._imageBox.push( imagebox ); imagebox = null; // i++; } this._max_box = this._imageBox.length; stage.addEventListener(starling.events.Event.ENTER_FRAME,onFrame); } public function onFrame(evt:EnterFrameEvent):void { var i:uint = 0; while( i < this._max_box ) { this._imageBox[i].x += this._imageBox[i]._speedX; this._imageBox[i].y += this._imageBox[i]._speedY; if(this._imageBox[i].x < 0 || this._imageBox[i].x > 440 ) { this._imageBox[i]._speedX *= -1; } if(this._imageBox[i].y < 0 || this._imageBox[i].y > 440 ) { this._imageBox[i]._speedY *= -1; } // i++; } } }
}
最后我们通过文档类来启动我们这个小小的demo。
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Loader; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.net.URLRequest;OK!当你将所有的代码全部编写好之后你就可以测试你的内容了。具体的效果大家可以下载源码看一看。点击下载源码import starling.core.Starling; [SWF(width="460", height="460", frameRate="60", backgroundColor="#000000")] public class starlinggame extends Sprite { private var _myStarling:Starling; public function starlinggame() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; // Starling.multitouchEnabled = false; this._myStarling = new Starling(GameMain,stage); this._myStarling.antiAliasing = 16; this._myStarling.enableErrorChecking = false; this._myStarling.start(); // addChild( new Stats() ); } }
}