[ActionScript 3.0] 翻牌效果,运用语法rotationY,PerspectiveProjection

  1 package
  2 {
  3     import com.tweener.transitions.Tweener;
  4
  5     import flash.display.Bitmap;
  6     import flash.display.BitmapData;
  7     import flash.display.Sprite;
  8     import flash.events.MouseEvent;
  9     import flash.geom.PerspectiveProjection;
 10     import flash.geom.Point;
 11     import flash.utils.getDefinitionByName;
 12     import flash.utils.setTimeout;
 13
 14     /**
 15      * @author Frost.Yen
 16      * @E-mail [email protected]
 17      * @create 2015-7-29 下午4:53:03
 18      *
 19      */
 20     [SWF(width="1024",height="768",backgroundColor = "0x000000")]
 21     public class FlipCard extends Sprite
 22     {
 23         [Embed(source="card.png")]
 24         private var _card:Class;
 25         [Embed(source="back.jpg")]
 26         private var _back:Class;
 27         public function FlipCard()
 28         {
 29             initViews();
 30         }
 31         private function initViews():void
 32         {
 33             var cardClass:Class = getDefinitionByName("FlipCard__card") as  Class;
 34             var backClass:Class = getDefinitionByName("FlipCard__back") as  Class;
 35             var cardBitmap:Bitmap = new cardClass();
 36             var backBitmap:Bitmap = new backClass();
 37
 38             for(var i:int = 0;i<18;i++){
 39                 var card:Card = new Card();
 40                 var backBmp:Bitmap = new Bitmap();
 41                 var cardBmp:Bitmap = new Bitmap();
 42                 var backBmpd:BitmapData = new BitmapData(backBitmap.width,backBitmap.height);
 43                 var cardBmpd:BitmapData = new BitmapData(cardBitmap.width,cardBitmap.height);
 44                 backBmpd.draw(backBitmap);
 45                 cardBmpd.draw(cardBitmap);
 46                 backBmp.bitmapData = backBmpd;
 47                 cardBmp.bitmapData = cardBmpd;
 48                 cardBmp.width = backBmp.width = 79;
 49                 cardBmp.height = backBmp.height = 115;
 50                 card.getCard(cardBmp,backBmp);
 51                 card.x = 200 + i%6*110+79*0.5;
 52                 card.y = 100 + Math.floor(i/6)*140+115*0.5;
 53                 this.addChild(card);
 54                 var perspective:PerspectiveProjection = new PerspectiveProjection();
 55                 perspective.projectionCenter = new Point(card.x,card.y)
 56                 card.transform.perspectiveProjection = perspective;
 57             }
 58             setTimeout(turnTheCard,1000*2);
 59         }
 60         private function onCardClick(e:MouseEvent):void
 61         {
 62             turnTween(e.currentTarget as Card);
 63         }
 64         private function turnTheCard():void
 65         {
 66             for(var i:int = 0;i<this.numChildren;i++){
 67                 turnTween(this.getChildAt(i) as Card);
 68                 this.getChildAt(i).addEventListener(MouseEvent.CLICK,onCardClick);
 69             }
 70         }
 71         private function turnTween(card:Card):void
 72         {
 73             Tweener.addTween(card,{rotationY:90,time:0.3,transition:"linear",onComplete:onComplete,onCompleteParams:[card]});
 74             function onComplete(obj:Card):void
 75             {
 76                 obj.swapCard();
 77                 Tweener.addTween(obj,{rotationY:180,time:0.3,transition:"linear",onComplete:function():void{obj.rotationY = 0;obj.setRotationY();}});
 78             }
 79         }
 80     }
 81 }
 82 import flash.display.Bitmap;
 83 import flash.display.Sprite;
 84
 85 class Card extends Sprite{
 86     private var _back:Sprite;
 87     private var _card:Sprite;
 88     private var _rotationY:Number;
 89     public function Card(){
 90         _back = new Sprite();
 91         _card = new Sprite();
 92         this.addChild(_back);
 93         this.addChild(_card);
 94     }
 95     public function getCard(card:Bitmap,back:Bitmap):void
 96     {
 97         card.x = back.x = -back.width*0.5;
 98         card.y = back.y = -back.height*0.5;
 99         _card.addChild(card);
100         _back.addChild(back);
101     }
102
103     public function swapCard():void
104     {
105         this.swapChildren(_card,_back);
106         setRotationY();
107     }
108     public function setRotationY():void
109     {
110         if(this.rotationY == 90){
111             _card.rotationY = _back.rotationY = 180;
112         }else if(this.rotationY == 0){
113             _card.rotationY = _back.rotationY = 0;
114         }
115     }
116 }
时间: 2024-10-05 09:37:18

[ActionScript 3.0] 翻牌效果,运用语法rotationY,PerspectiveProjection的相关文章

[ActionScript 3.0] 幻灯片效果实例

package com.fylibs.components.effects { import com.fylibs.utils.LoaderQueues; import com.tweener.transitions.Tweener; import com.views.LoadingView; import flash.display.Bitmap; import flash.display.Sprite; import flash.utils.clearTimeout; import flas

[ActionScript 3.0] 正则表达式

正则表达式: 正则表达式最早是由数学家Stephen Kleene在对自然语言的递增研究成果的基础上,于1956提出来的.具有完整语法的正则表达式,主要使用在字符串的格式的匹配方面上,后来也逐渐应用到信息技术领域.不同的编程语言对于正则表达式有细微的不同,ActionScript 3.0是按照ECMAScript第3版语言规范(ECMA-262)中的定义实现正则表达式. 熟悉windows操作系统读者,应该知道windows中是怎样查找文件的.不错,使用通配符“*”用来匹配任意字符,“?”用来匹

在 Flash ActionScript 2.0 中调用 Javascript 方法

本篇文章由:http://xinpure.com/call-the-javascript-method-in-flash-actionscript-2-0/ 在 Flash ActionScript 2.0 中调用 Javascript 方法 最近在工作中,有个这样的需求: 要从 Flash ActionScript 2.0 中调用网页上的 Javascript 方法 这是一个关于 Flash 和 Javascript 交互的问题. 在 ActionScript 2.0 中调用外部 javasc

【JQuery插件】扑克正反面翻牌效果

里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[JQuery插件]扑克正反面翻牌效果</ti

ActionScript 3.0日期与时间管理(Date类)

/*Flash中,Date类管理着日期和时间信息.要获取   当前日期,可以新建一个Date对象   */var now:Date =new Date();trace (now);     /*输出当前时间和日期,格式如:                  Sun Jul 27 19:45:57 GMT+0800 2014  */ /*以上代码中,Date对象中包括了当前的秒.分.小时.  星期数.日.月.年.时区等信息...如果仅需要返  回星期值和日期值,而不返回时间或时区,可以使用Date

【Cocos2d-x】实现翻牌效果

翻牌效果可以使用CCOrbitCamera实现,这是一个CCAction,使精灵视角按照球面坐标轨迹 围绕屏幕中心进行旋转.[关于CCOrbitCamera] 翻牌需要两个精灵,一个表示牌的正面,一个表示牌的背面.当执行翻牌动作的时候:初始化正面的角度为向左90度.背面为0度--背面向右旋转90度--正面向右旋转90度,这就实现了一个翻牌的效果. api说明: t:动作时长 radius:球的半径 deltaRadius:球半径偏移量 angleZ:开始时z轴角度 deltaAngleZ:z轴角

HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相冊之后都能够尝试下,哈~ 效果图: 实例用到的一些CSS3的新属性:  a.-webkit-perspective: 800px; perspective (透视,视角):属性定义 3D 元素距视图的距离.以像素计.该属性同意您改变 3D 元素查看 3D 元素的视图. 决定了你

使用JS与CSS3的翻转实现3D翻牌效果

之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用--3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名viewport-flip或者直接添加如下CSS: -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective的中文意思是:透视,视角!该属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2

Cocos2d-x实现简易翻牌效果

翻牌效果网上找了好多,复杂点的有自己重写一个sprite类来实现,简单的就利用引擎自带的动作CCOrbitCamera来实现,但是存在一些问题,图片旋转之后变反了. 我在用的只是一个简单的翻牌效果,点击之后图片翻牌,翻到一半之后图片切换到另外一面,再继续剩下的旋转. 注:下面的代码只能翻牌一次,第二次就会乱了,当然,我需要的也只是翻牌一次而已. 简单的加载图片: pSprite = CCSprite::create("iv_card_1.png"); pSprite->setPo