多媒体交互应用基础(9)

 

问题:如何操作缩放外部加载的图片?

 

步骤:第一,加载外部的图片。第二,使用它的scaleX 和scaleY属性来实现他们的比例缩放,第三通过鼠标点击事件进行比例缩放

  1. package  
  2.     import flash.display.MovieClip; 
  3.     import flash.events.*; 
  4.     import flash.display.Loader; 
  5.     import flash.net.URLRequest; 
  6.     import flash.display.Bitmap; 
  7.     public class Example extends MovieClip 
  8.     { 
  9.         public function Example() 
  10.         { 
  11.             init(); 
  12.         } 
  13.         private function init():void 
  14.         { 
  15.             var _loader:Loader=new Loader(); 
  16.             _loader.load(new URLRequest("1.jpg")); 
  17.             _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadhander); 
  18.             _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,Iohander); 
  19.         } 
  20.         private function loadhander(e:Event):void 
  21.         { 
  22.             trace("加载成功"); 
  23.             trace(e.target.content); 
  24.             var image:Bitmap= e.currentTarget.content as Bitmap; 
  25.             //var bitmap:BitmapData=image.bitmapData; 
  26.             var mc:MovieClip=new MovieClip(); 
  27.             mc.addChild(image); 
  28.             addChild(mc); 
  29.             mc.scaleX=0.2; //设置加载后的比例为0.2
  30.             mc.scaleY=0.2; //设置加载后图片的比例为0.2
  31.             mc.rotation=-30; //将它的角度转-30度
  32.             mc.x=stage.stageWidth/2-100;//设置x坐标
  33.             mc.y=stage.stageHeight/2-100;//设置y坐标
  34.             mc.addEventListener(MouseEvent.CLICK,onClick); 
  35.               
  36.         } 
  37.         private function Iohander(e:IOErrorEvent):void 
  38.         { 
  39.             trace("加载错误"); 
  40.         } 
  41.         private function onClick(e:MouseEvent):void 
  42.         { 
  43.             trace("你点击了我"); 
  44.             e.currentTarget.scaleX=1; //回复原来的比例
  45.             e.currentTarget.scaleY=1;
  46.         } 
  47.     } 
  48. }

根据多媒体应用基础8的代码,在原有基础上增加一个比例缩放的代码。这样一个图片缩放就能够完成,但是这样的效果并不是单调乏味,没有一点动感,为了能够实现其动感效果,我们加入缓冲使之交互效果更加精彩

 

输出结果:

多媒体交互应用基础(9)_第1张图片

 

 

问题二:如何为图片加入缓冲效果?

 

步骤:第一使用缓冲函数 导入两个包

 import fl.transitions.Tween;
 import fl.transitions.easing.*;

 

官方文档参考:

Tween 类使您能够使用 ActionScript,通过指定目标影片剪辑的属性在若干帧数或秒数中具有动画效果,从而对影片剪辑进行移动、调整大小和淡入淡出操作。

 

Tween 类还使您能够指定各种缓动方法。 “缓动”是动画运行期间的渐进加速和渐进减速效果,有助于使动画显得更逼真。 fl.transitions.easing 包提供了很多缓动方法(包括这种加速和减速的等式),它们会相应地更改缓动动画。

 

fl.transitions.easing 包中包含可与 fl.transitions 类一起用来创建缓动效果的类。“缓动”是指动画过程中的渐进加速或减速,它会使您的动画看起来更逼真。此包中的类支持多个缓动效果,以加强动画效果。

  1. package 
  2. {
  3.     import flash.display.MovieClip;
  4.     import flash.events.*;
  5.     import flash.display.Loader;
  6.     import flash.net.URLRequest;
  7.     import flash.display.Bitmap;
  8.     import fl.transitions.Tween;
  9.     import fl.transitions.easing.*;
  10.     public class Example extends MovieClip
  11.     {
  12.         private var key:Boolean=true;
  13.         public function Example()
  14.         {
  15.             init();
  16.         }
  17.         private function init():void
  18.         {
  19.             var _loader:Loader=new Loader();
  20.             _loader.load(new URLRequest("1.jpg"));
  21.             _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadhander);
  22.             _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,Iohander);
  23.         }
  24.         private function loadhander(e:Event):void
  25.         {
  26.             trace("加载成功");
  27.             trace(e.target.content);
  28.             var image:Bitmap= e.currentTarget.content as Bitmap;
  29.             //var bitmap:BitmapData=image.bitmapData; 
  30.             var mc:MovieClip=new MovieClip();
  31.             mc.addChild(image);
  32.             addChild(mc);
  33.             mc.scaleX=0.2;
  34.             mc.scaleY=0.2;
  35.             mc.rotation=-30;
  36.             mc.x=stage.stageWidth/2-100;
  37.             mc.y=stage.stageHeight/2-100;
  38.             mc.addEventListener(MouseEvent.CLICK,onClick);
  39.         }
  40.         private function Iohander(e:IOErrorEvent):void
  41.         {
  42.             trace("加载错误");
  43.         }
  44.         private function onClick(e:MouseEvent):void
  45.         {
  46.             trace("你点击了我");
  47.             if (key)
  48.             {
  49.                 var myTween:Tween = new Tween(e.currentTarget, "scaleX", Elastic.easeOut, 0.2, 1, 3, true);
  50.                 var myTween2:Tween = new Tween(e.currentTarget, "scaleY", Elastic.easeOut, 0.2, 1, 3, true);
  51.                 key=false;
  52.             } else
  53.             {
  54.                 var myTween3:Tween = new Tween(e.currentTarget, "scaleX", Elastic.easeOut, 1, 0.2, 3, true);
  55.                 var myTween4:Tween = new Tween(e.currentTarget, "scaleY", Elastic.easeOut, 1, 0.2, 3, true);
  56.                 key=true;
  57.             }
  58.         }
  59.     }
  60. }

使用Tween这个类 实现了图片缓冲效果,设置初始缩放比例是0.2 点击后就可以还原比例实现一些效果。

同样可以修改Elastic.easeOut, 让其产生更多效果。这样看情况使用.来实现效果。

输出结果:

多媒体交互应用基础(9)_第2张图片

你可能感兴趣的:(多媒体交互应用基础(9))