Flash AS3教程:制作鼠标感应图片转动-Flash实例教程

苦B青年奋斗史

苦B青年奋斗史

2016-03-18 15:33

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的Flash AS3教程:制作鼠标感应图片转动-Flash实例教程,手机电脑控们准备好了吗?一起看过来吧!

poluoluo核心提示:Flash AS3教程:制作鼠标感应图片转动.

  实例效果是图片在一个水平面上绕Y轴一圈,并用鼠标控制这些图片绕轴旋转.

  图片排列状况

  具体步骤:

  首先建立一个影片,然后创建一个2帧的影片剪接元件picBox,在第一帧设置stop()代码,并为该影片创建连接类名 picBox . 如下图

   

  好,完成上面后在同目录下新建一个脚本文件picBox.as

  package {

  import flash.display.MovieClip;

  import flash.display.Loader;

  import flash.net.URLRequest;

  import flash.events.Event;

  import flash.events.MouseEvent;

  import flash.net.navigateToURL;

  //定义类picBox:这是一个画框,实现了三维坐标转化为二维坐标,还支持鼠标事件

  public class picBox extends MovieClip {

  //定义属性

  public var tx:Number; //三维空间之x坐标

  public var ty:Number; //三维空间之y坐标

  public var tz:Number; //三维空间之z坐标

  public var angle:Number; //对象在圆周上分布的弧度

  public var radius:uint; //圆弧的半径

  private var loadPic:Loader; //用于导入外部图像

  //构造函数:导入图像

  public function picBox(picURL:String) {

  loadPic = new Loader();

  var url:URLRequest = new URLRequest(picURL);

  loadPic.contentLoaderInfo.addEventListener(Event.COMPLETE,loaded);

  loadPic.load(url);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //导入图像,注册画框对象上的鼠标事件

  private function loaded(e:Event){

  //调整图像大小,稍小于画框

  e.target.content.width = 100;

  e.target.content.height = 120;

  //定位图像

  loadPic.x -= 100/2;

  loadPic.y -= 120/2;

  this.addChild(loadPic);

  //注册画框对象上的鼠标事件

  loadPic.addEventListener(MouseEvent.MOUSE_OVER,overHd);

  loadPic.addEventListener(MouseEvent.MOUSE_OUT,outHd);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //滑过画框,边框变色

  private function overHd(e:MouseEvent){

  this.gotoAndStop(2);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //滑出画框,边框恢复

  private function outHd(e:MouseEvent){

  this.gotoAndStop(1);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //根据变换后的角度和焦距计算二维的舞台坐标

  public function displayPane(spin,focalLength) { //参数:角度偏移量,焦距

  //计算新角度,并求新的空间坐标

  var currAngle:Number = angle - spin;

  tx = Math.cos(currAngle)*this.radius;

  tz = Math.sin(currAngle)*this.radius;

  //计算比率:画框对象离观察者由近~远-(-150,150),scaleRatio取值-[500/350,500/650]

  var scaleRatio:Number = focalLength/(focalLength + tz);

  //根据比率计算并设置平面坐标位置、大小比例

  this.x = tx * scaleRatio;

  this.y = ty * scaleRatio;

  this.scaleX = this.scaleY = scaleRatio;

  //控制画框在y=0的位置翻转

  this.scaleX *= Math.sin(currAngle);

  //再次翻转,使图片位于前面时不是反图

  this.scaleX *= Math.sin(currAngle);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  然后再新建一个main.as,并在影片文件设置文档类名 main

  package {

  import flash.display.Sprite;

  import flash.events.Event;

  //定义文档类:创建画框对象,均匀分布在虚拟的y=100平面上并根据鼠标位置发生旋转

  public class main extends Sprite {

  //定义属性

  private var picnum:uint=8 //画框数量

  private var pics:Sprite=new Sprite(); //容纳画框,在其中虚拟的y=100平面上分布

  private var picBoxArr:Array=nwww.Tulaoshi.comew Array(); //画框的引用数组

  private var spin:Number=0; //角度偏移量

  private var focalLength:uint=500; //焦距

  private var angleStep:Number=2 * Math.PI / picnum; //画框分布时,间距角度

  private var zArr:Array = new Array(); //暂存画框对象及tz值,用于重新调整位置索引

  //构造函数:在大容器pics内创建画框,并分配初始值

  public function main() {

  //定位大容器到舞台

  pics.x=270;

  pics.y=80;

  addChild(pics);

  //创建画框对象并添加到大容器内

  for (var i:uint; i picnum; i++) {

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //画框上待显示的图像路径

  var pic:String="pic\image" + i + ".jpg";

  //创建画框对象

  var newBox:picBox=new picBox(pic);

  //初始化对象的属性

  newBox.angle=angleStep * i;

  newBox.radius=150;

  newBox.tx=Math.cos(newBox.angle) * newBox.radius; //使用圆的参数方程计算坐标

  newBox.tz=Math.sin(newBox.angle) * newBox.radius;

  newBox.ty=100;

  //将新对象引用保存在数组

  picBoxArr.push(newBox);

  pics.addChild(newBox);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //在大容器上注册ENTER_FRAME事件,随时改变角度从而发生旋转

  pics.addEventListener(Event.ENTER_FRAME,panCamera);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //ENTER_FRAME事件处理函数,调用画框对象的displayPane方法,改变自身位置

  private function panCamera(e:Event) {

  //根据鼠标位置调节角度偏移量

  spin+= (mouseX - stage.stageWidth/2) / 2000;

  //改变画框对象的坐标

  for (var i:uint; i picBoxArr.length; i++) {

  picBoxArr[i].displayPane(spin,focalLength);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //重新排列对象的位置索引

  replace();

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //重新排列对象的位置索引

  private function replace() {

  //暂存各对象引用及z轴位置信息

  for (var i:uint; i picBoxArr.length; i++) {

  zArr[i]={p:picBoxArr[i],pz:picBoxArr[i].tz};

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  //根据z轴位置,按数字排序,数字大者靠后

  zArr.sortOn("pz",Array.NUMERIC);

  //重新排列对象的位置索引,数字小的离观察近,索引号较大

  for (i=0; i picBoxArr.length; i++) {

  pics.setChildIndex(zArr[i].p,picBoxArr.length-i-1);

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)

  最终效果:

 

展开更多 50%)
分享

猜你喜欢

Flash AS3教程:制作鼠标感应图片转动-Flash实例教程

FLASH flash教程
Flash AS3教程:制作鼠标感应图片转动-Flash实例教程

Flash AS3实例教程:简单的转动的星星-Flash actionscript

FLASH flash教程
Flash AS3实例教程:简单的转动的星星-Flash actionscript

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash AS3简单制作跟随鼠标缓动运动的圆-Flash实例教程

FLASH flash教程
Flash AS3简单制作跟随鼠标缓动运动的圆-Flash实例教程

Flash AS2实例教程:鼠标感应放大缩小图片效果

flash教程
Flash AS2实例教程:鼠标感应放大缩小图片效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Flash教程:火苗跟随鼠标-Flash实例教程

FLASH flash教程
Flash教程:火苗跟随鼠标-Flash实例教程

Flash实例教程:3D旋转图片-Flash实例教程

FLASH flash教程
Flash实例教程:3D旋转图片-Flash实例教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop给外景美女加上柔美的冷调青蓝色教程

Photoshop给外景美女加上柔美的冷调青蓝色教程

Flash as入门(20):制作时钟的实例教程-Flash actionscript

Flash as入门(20):制作时钟的实例教程-Flash actionscript
下拉加载更多内容 ↓