flash特效原理:图片滑动放大效果(1) http://blog.csdn.net/hero82748274/archive/2009/10/22/4715312.aspx

最近看了一些关于动态注册点更加的办法,顺手牵羊把他下载了,感觉挺好用。再把一个倒影类给下载了,结合上次一个做法,做了一个简单demo 。这一次,我们采用外部加载的办法来制作。这样更加合理的。鉴于这只是一个简单demo ,只是知道了原理就能够把握到的东西,所以这样只是希望讨论怎样优化这种效果。下面的一个代码是加了一点倒影类的影子,效果看起来很不错,至于性能就有待改进。在这里只是提出一种demo,如果有心人能够完善,也可以发表一下意见,共同完成这个事情。事不宜迟,讲解怎样外部导入多张图片。

我们不使用那些开源的类,内部类就可以简单解决这个问题。

加载多张图片:Loader 是一个容器,可以加载外部的图片,但是多张图片的时候,我们就需要进行多次线性循环。计算多少个loader 装放我们的图片。下面采用一中不确定的像无限参数的形式来写。这种是一种偷懒的做法,所以不需要见怪,至于好不好见仁见智。为加载的容器安装两个监听器,如果出错就报告,完成了就去除一部分的监听,将加载到的内容,保存在数组里面。可以是Vector 也可以是Array. 在cs4两种都可以。鉴于图片数很少,所以这种做法也勉强的完成了加载外部图片的功能。

private function addImages(...args):void{}

private function addImages(...args):void { count=args.length; for(var i:int=0;i<args.length;i++) { var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError); loader.load(new URLRequest(args[i])); } } private function onComplete(event:Event):void { var bitmap:Bitmap=event.currentTarget.content as Bitmap; imageList.push(bitmap); event.currentTarget.removeEventListener(Event.COMPLETE,onComplete); count--; if(count==0) { trace(imageList.length); createObj(imageList); } } private function onError(event:Event):void { throw new Error("路径错误"); }

完成之后,我们对图片使用容器安装,并且分布其位置。和其他交互等的设置。创建一些空白的影片剪辑容器,也有利于创建倒影效果。

private function createObj(images:Array):void { for (var i:uint=0; i<images.length; i++) { var bit:MovieClip=new MovieClip();//空白影片剪辑 bit.addChild(images[i]); bit.buttonMode=true; bit.x=i*(bit.width+8); bit.y=150; var r1:Reflect = new Reflect({mc:bit, alpha:30, ratio:60, distance:0, updateTime:-1, reflectionDropoff:0}); array.push(bit);//数组管理 list.addChild(bit);//容器管理 Contain.RegPoint(bit,new Point(50,140));//重新更改注册点 bit.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); } stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler); }

完成之后,我们还需要对其进行倒影设置,这次采用网上一些倒影类的做法,辅助我们完成这个功能

var r1:Reflect = new Reflect({mc:bit, alpha:30, ratio:60, distance:0, updateTime:-1, reflectionDropoff:0});

Reflect类就是一个倒影的类,在adobe 核心类库当中也存在的。效果也不错。第一个参数指定影片剪辑,第二是透明度,第三个显示的多少,第四个距离。其他是一个偏移等。日后有时间会补充这种讲解。

完成之后,也会发现这个类其实不一定适合我们这种效果,因为我们所做的并不是希望注册点在左上角,而是希望在其底部。这样会造成这个类本身设计一些缺陷,不得不最后设置他的位置。因此需要通过更改他的注册点,否则会看不到效果

下面代码清单:

其中import com.image.RollPhoto;
      import com.image.Reflect;
      import com.image.tool.Contain;
  这一次和上次做法差不多,增加我们使用了Reflect 这个类。Contain类当中,有一个更加注册点的做法,来源于6DN的做法。效果很不错。拼合了就可以出现上面的图片效果。

总的代码:主要分为加载图片的部分,这一部分可以单独分开出去的。创建图片的部分,还有运算部分。

package { import flash.display.MovieClip; import flash.events.*; import flash.geom.*; import flash.system.*; import flash.text.*; import flash.display.BitmapData; import flash.display.Bitmap; import flash.display.DisplayObject; import flash.display.Loader; import flash.net.*; import com.image.RollPhoto; import com.image.Reflect; import com.image.tool.Contain; public class Main extends MovieClip { private var array:Array= new Array();//用于管理的数组 private var list:MovieClip=new MovieClip();//图片容器 private var myphoto:RollPhoto;//图片滚动对象 private var count:int=0;//图片加载的计数器 private var imageList:Array=new Array(); public function Main() { init(); } private function init():void { myphoto=new RollPhoto(stage);//初始化对象 myphoto.setPorperty(1.4,0.0025,8);//设置属性 addEventListener(Event.ENTER_FRAME,Run); addImages("./image/1.png","./image/2.png","./image/3.png","./image/4.png","./image/5.png","./image/6.png","./image/7.png");//外部加载图片 addChild(list); list.y=60; list.x=20; } //创建列表物体 private function createObj(images:Array):void { for (var i:uint=0; i<images.length; i++) { var bit:MovieClip=new MovieClip();//空白影片剪辑 bit.addChild(images[i]); bit.buttonMode=true; bit.x=i*(bit.width+8); bit.y=150; var r1:Reflect = new Reflect({mc:bit, alpha:30, ratio:60, distance:0, updateTime:-1, reflectionDropoff:0}); array.push(bit);//数组管理 list.addChild(bit);//容器管理 Contain.RegPoint(bit,new Point(50,140));//重新更改注册点 bit.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); } stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler); } private function Run(event:Event):void { memory.text=String(System.totalMemory/1024)+"/kb";//内存监控 } private function mouseMoveHandler(e:MouseEvent):void { if (list.hitTestPoint(mouseX,mouseY) && mouseY<300) { myphoto.ZoomX(array);//以x轴为例 } else { System.gc(); myphoto.Rest(array,"x");//复位 } } private function mouseDownHandler(event:MouseEvent):void { trace(event.currentTarget); } //加载外部图片 private function addImages(...args):void { count=args.length; for(var i:int=0;i<args.length;i++) { var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError); loader.load(new URLRequest(args[i])); } } private function onComplete(event:Event):void { var bitmap:Bitmap=event.currentTarget.content as Bitmap; imageList.push(bitmap); event.currentTarget.removeEventListener(Event.COMPLETE,onComplete); count--; if(count==0) { trace(imageList.length); createObj(imageList); } } private function onError(event:Event):void { throw new Error("路径错误"); } } }

不足地方:

目前来讲,感觉到计算的效率并不是很理想。需要效果能够出来,但依旧希望有所提高。任何计算都需要付出代价。因为个人能力有限,只能日后如果能够想到就继续完善这种做法。可以对其代码进行修改,要是要更加好的做法 可以留言告诉我

下载地址:

下载地址请先点击进去:在这里

转载于:https://www.cnblogs.com/guoyiqi/archive/2010/01/28/2069230.html

flash特效原理:图片滑动放大效果(2)相关推荐

  1. flash特效原理 图片滑动放大效果 2

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! flas ...

  2. flash特效原理 图片滑动放大效果

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 这几天, ...

  3. flash特效原理:图片滑动放大效果

    这几天,都在无所事事,唯一寄托就是在这里记录一下自己研究出来的东西.趁现在有点时间,就把最近看过的一种常用的flash特效记录一下,flash 做特效不是为做特效而做,在make thing move ...

  4. flash特效原理 图片切换滚动

    今天,我们来试玩一样东西,这个东西叫图片切换滚动,其实贴切一点应该叫图片轮播.时下图片轮播作为web方面在各大网站已经非常流行,这种图片轮播非常经典,前段时间花了两天写了像一个QQ视频网站看到的效果. ...

  5. Android仿今日头条图片滑动退出效果

    资源下载(2C币) 逛CSDN的时候,看到几篇写仿今日头条图片滑动退出效果的文章,闲着无聊便想着也给自己项目加上,实现的思路有很多种,本着就近原则选了一篇与自己思路相近的文章结合自己的实践总结一下. ...

  6. JavaScript 图片滑动展示效果javascript

    javascript 图片滑动展示效果 更新版本:slideview 图片滑动(扩展/收缩)展示效果 看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...

  7. JavaScript 图片滑动切换效果

    序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 序二(09/03/ ...

  8. JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻

    新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...

  9. 手机端图片滑动切换效果

    最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...

最新文章

  1. [Lua]50行代码的解释器,用来演示lambda calculus
  2. python3 tkinter
  3. 让product description 成为mandatory field
  4. 优秀博客链接(linux c/c++ java go php android ios 前端 j2ee windows linux 算法 ACM 深度/机器学习 AI opencv nlp)
  5. gridview 默认编辑按钮改成图片
  6. 关于ASP访问ACCESS数据的错误80004005的解决方法
  7. java cache组件_组件之Cache篇
  8. LeetCode(237)——删除链表中的节点(JavaScript)
  9. dmf nmf_SQL Server 2019 –新的DMF sys.dm_db_page_info
  10. java终止程序语句总结 System.exit(1)、System.exit(0)、return;break;continue;
  11. 鸿蒙系统下载地址_华为鸿蒙系统下载
  12. Android各版本号及其英文别名
  13. 市场营销方式详尽客户调查报告:Inbound vs. Outbound
  14. 更好用的冒泡排序、双向冒泡排序,拓展荷兰国旗问题
  15. amd显卡Linux查看显存,通过软件查看显存参数_显卡_显卡技术应用-中关村在线
  16. 顺丰科技运维开发工程师二面面经
  17. 哲学家是如何思考问题的-2.0版
  18. xdp 程序如何挂载
  19. Golang 内置函数
  20. m基于ESN+BP神经网络的数据预测算法matlab仿真,测试数据为太阳黑子变化数据

热门文章

  1. 2019蓝桥杯Java决赛题答案_2019第十届蓝桥杯JavaB组省赛真题详解
  2. 悟空php微信复制的东西在哪找,微信收藏的文件在哪?从哪里能看到?
  3. c语言函数大全语法下载,C语言函数大全(语法).doc
  4. java 德生读卡器对接程序_德生TSW-F4 社保卡读卡器.rar
  5. java填空题 在非静态成员方法中_成本加成定价法的优点有
  6. (多线程)leetcode1195. 交替打印字符串 最简单解法一个变量搞定
  7. leetcode303 区域和检索
  8. epoll的内核实现
  9. jenv java_mac 上使用jenv 管理的多个java 版本
  10. 中科大 计算机网络3 网络边缘Edge