问题:如何操作缩放外部加载的图片?
步骤:第一,加载外部的图片。第二,使用它的scaleX 和scaleY属性来实现他们的比例缩放,第三通过鼠标点击事件进行比例缩放
- package
- {
- import flash.display.MovieClip;
- import flash.events.*;
- import flash.display.Loader;
- import flash.net.URLRequest;
- import flash.display.Bitmap;
- public class Example extends MovieClip
- {
- public function Example()
- {
- init();
- }
- private function init():void
- {
- var _loader:Loader=new Loader();
- _loader.load(new URLRequest("1.jpg"));
- _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadhander);
- _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,Iohander);
- }
- private function loadhander(e:Event):void
- {
- trace("加载成功");
- trace(e.target.content);
- var image:Bitmap= e.currentTarget.content as Bitmap;
- //var bitmap:BitmapData=image.bitmapData;
- var mc:MovieClip=new MovieClip();
- mc.addChild(image);
- addChild(mc);
- mc.scaleX=0.2; //设置加载后的比例为0.2
- mc.scaleY=0.2; //设置加载后图片的比例为0.2
- mc.rotation=-30; //将它的角度转-30度
- mc.x=stage.stageWidth/2-100;//设置x坐标
- mc.y=stage.stageHeight/2-100;//设置y坐标
- mc.addEventListener(MouseEvent.CLICK,onClick);
- }
- private function Iohander(e:IOErrorEvent):void
- {
- trace("加载错误");
- }
- private function onClick(e:MouseEvent):void
- {
- trace("你点击了我");
- e.currentTarget.scaleX=1; //回复原来的比例
- e.currentTarget.scaleY=1;
- }
- }
- }
根据多媒体应用基础8的代码,在原有基础上增加一个比例缩放的代码。这样一个图片缩放就能够完成,但是这样的效果并不是单调乏味,没有一点动感,为了能够实现其动感效果,我们加入缓冲使之交互效果更加精彩
输出结果:
问题二:如何为图片加入缓冲效果?
步骤:第一使用缓冲函数 导入两个包
import fl.transitions.Tween;
import fl.transitions.easing.*;
官方文档参考:
Tween 类使您能够使用 ActionScript,通过指定目标影片剪辑的属性在若干帧数或秒数中具有动画效果,从而对影片剪辑进行移动、调整大小和淡入淡出操作。
Tween 类还使您能够指定各种缓动方法。 “缓动”是动画运行期间的渐进加速和渐进减速效果,有助于使动画显得更逼真。 fl.transitions.easing 包提供了很多缓动方法(包括这种加速和减速的等式),它们会相应地更改缓动动画。
fl.transitions.easing 包中包含可与 fl.transitions 类一起用来创建缓动效果的类。“缓动”是指动画过程中的渐进加速或减速,它会使您的动画看起来更逼真。此包中的类支持多个缓动效果,以加强动画效果。
- package
- {
- import flash.display.MovieClip;
- import flash.events.*;
- import flash.display.Loader;
- import flash.net.URLRequest;
- import flash.display.Bitmap;
- import fl.transitions.Tween;
- import fl.transitions.easing.*;
- public class Example extends MovieClip
- {
- private var key:Boolean=true;
- public function Example()
- {
- init();
- }
- private function init():void
- {
- var _loader:Loader=new Loader();
- _loader.load(new URLRequest("1.jpg"));
- _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadhander);
- _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,Iohander);
- }
- private function loadhander(e:Event):void
- {
- trace("加载成功");
- trace(e.target.content);
- var image:Bitmap= e.currentTarget.content as Bitmap;
- //var bitmap:BitmapData=image.bitmapData;
- var mc:MovieClip=new MovieClip();
- mc.addChild(image);
- addChild(mc);
- mc.scaleX=0.2;
- mc.scaleY=0.2;
- mc.rotation=-30;
- mc.x=stage.stageWidth/2-100;
- mc.y=stage.stageHeight/2-100;
- mc.addEventListener(MouseEvent.CLICK,onClick);
- }
- private function Iohander(e:IOErrorEvent):void
- {
- trace("加载错误");
- }
- private function onClick(e:MouseEvent):void
- {
- trace("你点击了我");
- if (key)
- {
- var myTween:Tween = new Tween(e.currentTarget, "scaleX", Elastic.easeOut, 0.2, 1, 3, true);
- var myTween2:Tween = new Tween(e.currentTarget, "scaleY", Elastic.easeOut, 0.2, 1, 3, true);
- key=false;
- } else
- {
- var myTween3:Tween = new Tween(e.currentTarget, "scaleX", Elastic.easeOut, 1, 0.2, 3, true);
- var myTween4:Tween = new Tween(e.currentTarget, "scaleY", Elastic.easeOut, 1, 0.2, 3, true);
- key=true;
- }
- }
- }
- }
使用Tween这个类 实现了图片缓冲效果,设置初始缩放比例是0.2 点击后就可以还原比例实现一些效果。
同样可以修改Elastic.easeOut, 让其产生更多效果。这样看情况使用.来实现效果。
输出结果: