package { import flash.display.Sprite; import flash.text.TextField; import flash.text.textformat; public class Card extends Sprite { private var label:String; private var color:uint; private var _width:int; private var _height:int; public var posX:Number; public var posY:Number; public var newPosX:Number; public var newPosY:Number; public function Card(label:String,color:uint,width:int,height:int) { this.label = label; this.color = color; this._width = width; this._height = height; createChildren(); } private function createChildren():void { var shape:Sprite=new Sprite(); shape.graphics.beginFill(color); shape.graphics.drawRect(0,_width,_height); shape.graphics.endFill(); addChild(shape); var labelTxt:TextField=new TextField(); labelTxt.defaulttextformat=new textformat(null,25,null,true); labelTxt.text=label; shape.addChild(labelTxt); } public function move(x:Number,y:Number):void { this.x = x; this.y = y; this.posX = x; this.posY = y; this.newPosX=x; this.newPosY=y; } } }
开始实验了,我们会先创建一个图形类,名为Card类,你也可以根据自己喜欢定义自己喜欢的类,而这里是会尽量简单,减少其他没必要干扰。Card定义只是公开了一个move的方法,这个方法目的是移动图形类的位置,并且记录对象所在的位置。
创建完毕后,同样你如果使用flash ide的话,创建一个文档,并绑定文档类Main,在Main 类里面 实现的思路过程,一般首先为创建一组图形,然后利用我们之前定义好的链式模式结构存储起来,接下来就是书写进行交互事件。
基础思路 : 创建图形----》记录在结构里面---》进行交互体现。
package { import flash.display.Sprite; import com.greensock.TweenLite; import flash.events.MouseEvent; public class Main extends Sprite { private var listLink:LinkList=new LinkList(); public function Main() { init(); } private var colors:Array = [0xFF0000,0xFF8000,0xFFFF00,0x80FF00]; private function init():void { for (var i:int=0; i<4; i++) { var card:Card = new Card(i.toString(),colors[i],100,200);//创建卡片 addChild(card); card.move(i*105+80,100); trace("测试数值"+(i*105+80)); listLink.insert(card); } stage.addEventListener(MouseEvent.CLICK,onClick); } private function onClick(event:MouseEvent):void { for (var i:int=0; i<4; i++) { var linkNode:LinkNode = listLink.source[i]; var sprite:Sprite = linkNode.data as Sprite; var nextPosX:Number = linkNode.next.data.posX; listLink.source[i].data.newPosX=nextPosX; TweenLite.to(sprite,0.5,{x:nextPosX}); } //重置新位置 for (var j:int=0; j<4; j++) { listLink.source[j].data.posX = listLink.source[j].data.newPosX; } } } }
我们书写一个卡片类来实现这种滚动切换的效果。设计这个类目的是辅助实验这种效果,第一个实验效果是在平面上移动到每一张图片,这些图片是跟随着它指向的节点进行移动缓冲移动。当你完成这个实验后,可以尝试做一些改变以其改变每一张图片的位置和缩放大小。有了这个基础后,我们可以进一步扩展为圆形分布的效果。后续会有很多介绍,利用这些基础类实现我们想要的效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。