多媒体交互应用基础（9）

 

问题：如何操作缩放外部加载的图片？

 

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

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

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

 

输出结果：

 

 

问题二：如何为图片加入缓冲效果？

 

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

 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();
17.         }
18.         private function init():void
19.         {
20.             var _loader:Loader=new Loader();
21.             _loader.load(new URLRequest("1.jpg"));
22.             _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadhander);
23.             _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,Iohander);
24.         }
25.         private function loadhander(e:Event):void
26.         {
27.             trace("加载成功");
28.             trace(e.target.content);
29.             var image:Bitmap= e.currentTarget.content as Bitmap;
30.             //var bitmap:BitmapData=image.bitmapData; 
31.             var mc:MovieClip=new MovieClip();
32.             mc.addChild(image);
33.             addChild(mc);
34.             mc.scaleX=0.2;
35.             mc.scaleY=0.2;
36.             mc.rotation=-30;
37.             mc.x=stage.stageWidth/2-100;
38.             mc.y=stage.stageHeight/2-100;
39.             mc.addEventListener(MouseEvent.CLICK,onClick);
41.         }
42.         private function Iohander(e:IOErrorEvent):void
43.         {
45.             trace("加载错误");
47.         }
48.         private function onClick(e:MouseEvent):void
49.         {
51.             trace("你点击了我");
52.             if (key)
53.             {
54.                 var myTween:Tween = new Tween(e.currentTarget, "scaleX", Elastic.easeOut, 0.2, 1, 3, true);
55.                 var myTween2:Tween = new Tween(e.currentTarget, "scaleY", Elastic.easeOut, 0.2, 1, 3, true);
56.                 key=false;
57.             } else
58.             {
59.                 var myTween3:Tween = new Tween(e.currentTarget, "scaleX", Elastic.easeOut, 1, 0.2, 3, true);
60.                 var myTween4:Tween = new Tween(e.currentTarget, "scaleY", Elastic.easeOut, 1, 0.2, 3, true);
61.                 key=true;
62.             }
63.         }
64.     }
65. }

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

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

输出结果：