Pure AS3 magnifying effect using Displacement Map Filter
2009-10-18 00:00:00 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閹冣挃闁硅櫕鎹囬垾鏃堝礃椤忎礁浜鹃柨婵嗙凹缁ㄧ粯銇勯幒瀣仾闁靛洤瀚伴獮鍥敍濮f寧鎹囬弻鐔哥瑹閸喖顬堝銈庡亝缁挸鐣烽崡鐐嶆棃鍩€椤掑嫮宓佸┑鐘插绾句粙鏌涚仦鎹愬闁逞屽墰閹虫捇锝炲┑瀣╅柍杞拌兌閻ゅ懐绱撴担鍓插剱妞ゆ垶鐟╁畷銉р偓锝庡枟閻撴洘銇勯幇闈涗簼缂佽埖姘ㄧ槐鎾诲礃閳哄倻顦板┑顔硷工椤嘲鐣烽幒鎴旀瀻闁规惌鍘借ⅵ濠电姷鏁告慨顓㈠磻閹剧粯鈷戞い鎺嗗亾缂佸鏁婚獮鍡涙倷閸濆嫮顔愬┑鐑囩秵閸撴瑦淇婇懖鈺冪<闁归偊鍙庡▓婊堟煛鐏炵硶鍋撻幇浣告倯闁硅偐琛ラ埀顒冨皺閺佹牕鈹戦悙鏉戠仸闁圭ǹ鎽滅划鏃堟偨缁嬭锕傛煕閺囥劌鐏犻柛鎰ㄥ亾婵$偑鍊栭崝锕€顭块埀顒佺箾瀹€濠侀偗婵﹨娅g槐鎺懳熺拠鑼舵暱闂備胶枪濞寸兘寮拠宸殨濠电姵纰嶉弲鎻掝熆鐠虹尨宸ョ€规挸妫濆铏圭磼濡搫顫嶇紓浣风劍閹稿啿鐣烽幋锕€绠婚悹鍥у级瀹撳秴顪冮妶鍡樺鞍缂佸鍨剁粋宥夋倷椤掍礁寮垮┑鈽嗗灣閸樠勭妤e啯鍊垫慨妯煎亾鐎氾拷

I’ll show you how to create a magnifying effect, yes, the same old effect you see in the web since Actionscript was AS1, but this time is AS3 only and will give you some hints about Bitmap, BitmapData and DisplacementMapFilter classes.
The photo in the example comes from Flickr. Should this infringe some copyright, it wasn’t me.
First, let me show you the movieclips I’m exporting to Actionscript:
on the left side, a photo exported as malecon (that’s the name of the avenue), on the right side a movieclip exported as displace_movie. red_map and green_map are just two movieclips combined to achieve the gradient sphere.
You can find all information about the displacement filter and the meaning of that gradient sphere on a grey background at Understanding Flash displacement map filter.
It’s an old AS2 example but the theory is still the same.
Now let’s take a look at the script:
package {
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.events.Event;
public class as3displace extends Sprite {
// creating a new Bitmap variable
var the_bitmap:Bitmap = new Bitmap();
// creating a variable to store "malecon" image.
// notice you MUST specify width and height or you'll get an error
// 1136: Incorrect number of arguments. Expected 2.
var the_image=new malecon(500,373);
// creating a variable to store the "displace_movie" movieclip
var the_displace:displace_movie=new displace_movie();
// creating a point at the upper left corner
var starting_point:Point=new Point(0,0);
// creating a 100x100 bitmap data, that will contain the gradient movieclip
var displacement_map:BitmapData=new BitmapData(100,100,true,0x808080);
// creating the displacement map filter
var displacement_filter:DisplacementMapFilter=new DisplacementMapFilter(displacement_map,starting_point,1,2,50,50,"color",0x000000,1);
public function as3displace() {
// assigning the "the_image" data (the photo) as bitmapData of "the_bitmap" variable
the_bitmap.bitmapData=the_image;
// in the displacement map, draw (copy) the content of "the_displace" movieclip
// (the gradient sphere)
displacement_map.draw(the_displace);
// placing "the_bitmap" on the stage
addChild(the_bitmap);
// listener that triggers at every frame
addEventListener(Event.ENTER_FRAME, onFrame);
}
public function onFrame(e:Event) {
// changing the starting point of the displacement map filter according to mouse position
starting_point.x=mouseX-50;
starting_point.y=mouseY-50;
displacement_filter.mapPoint=starting_point;
// applying the displacement filter to "the_bitmap" (the photo)
the_bitmap.filters=[displacement_filter];
}
}
}
And this is the result…
Tags:Pure AS magnifying
编辑录入:爽爽 [复制链接] [打 印]- ››asp.net页面弄成伪静态页面
- ››Asp.net 中将汉字转换成拼音的方法
- ››ASP.NET及JS中的cookie基本用法
- ››ASP.NET获取MS SQL Server安装实例
- ››asp.net实现调用百度pai 在线翻译英文转中文
- ››ASP.NET页面选项进行提示判断
- ››Asp.net定时执行程序
- ››ASP.NET中利用DataList实现图片无缝滚动
- ››ASP.NET验证控件RequiredFieldValidator
- ››ASP.NET中使用System.Net.Mail发邮件
- ››ASP.NET中获取用户控件中控件的ID
- ››ASP.NET中FileBytes写成文件并存档
更多精彩
赞助商链接