{"id":566,"date":"2011-03-14T00:50:34","date_gmt":"2011-03-14T04:50:34","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=566"},"modified":"2011-03-14T01:27:57","modified_gmt":"2011-03-14T05:27:57","slug":"create-a-magnifying-effect-using-flash-actionscript-3-0","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/create-a-magnifying-effect-using-flash-actionscript-3-0\/","title":{"rendered":"Create a Magnifying Effect using Flash actionscript 3.0"},"content":{"rendered":"

Final View: <\/strong><\/p>\n

\n<\/embed><\/object><\/p>\n

Step-1: Open a new document in flash in the size of 690X390px.<\/p>\n

Step-2: Import (ctrl+r) an image in the same size of document size to the stage in layer-1.<\/p>\n

\"magnifying-effect-using-Flash-a\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-567\"\r\n <\/div><\/a><\/p>\n

Step-3: Select the image and convert it into movieclip (F8) and name it as \u201cbg_mc\u201d.<\/em><\/p>\n

Step-4: create a layer-2 and draw a square fill it with gradient as below. Convert it into movieclip and name it as \u201cmap_mc\u201d.<\/em><\/p>\n

\"magnifying-effect-using-Flash-b\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-568\"\r\n <\/div><\/a><\/em><\/p>\n

Make a double click on <\/em>map_mc and inside the <\/em>map_mc symbol create layer-2. Draw the gradient rectangle in green as like below and change it to movieclip.<\/em><\/p>\n

\"magnifying-effect-using-Flash-c\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-569\"\r\n <\/div><\/a>
\n<\/em><\/p>\n

Step-5: In layer-3 import one image like magnifying lens (I created this lens in Photoshop).. Convert it into movieclip and name it as \u201clens_mc\u201d. <\/em><\/p>\n

\"magnifying-effect-using-Flash-d\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-570\"\r\n <\/div><\/a>
\n<\/em><\/p>\n

Step-6: In layer-4, select key frame one and press F9 to write the following actionscript:<\/p>\n

<\/em><\/strong><\/p>\n

var dPoint:Point = new Point(0, 0);<\/p>\n

var dMap:BitmapData = new BitmapData(map_mc.width, map_mc.height, true, 0x808080)<\/p>\n

dMap.draw(map_mc);<\/p>\n

removeChild(map_mc);<\/p>\n

var dFilter:DisplacementMapFilter = new DisplacementMapFilter ();<\/p>\n

dFilter.scaleX \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0= 60\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ pixel displacement force on X
\ndFilter.scaleY \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0= 50\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ pixel displacement force on Y
\ndFilter.componentX \u00a0\u00a0 \u00a0= 2\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ or BitmapDataChannel.RED
\ndFilter.componentY \u00a0\u00a0 \u00a0= 4\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ or BitmapDataChannel.GREEN
\ndFilter.mode\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0= “color”\u00a0\u00a0 \u00a0\/\/ or DisplacementMapFilterMode.COLOR \/ WRAP \/ CLAMP \/ IGNORE
\ndFilter.color\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0= 0x000000\u00a0\u00a0 \u00a0\/\/ color of pixels when source is empty
\ndFilter.alpha \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0= 0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ alpha of colored pixels when source is empty
\ndFilter.mapPoint\u00a0\u00a0 \u00a0= dPoint;\u00a0\u00a0 \u00a0\/\/ position of the filters effect area
\ndFilter.mapBitmap\u00a0\u00a0 \u00a0= dMap;\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ map of colored pixels that controls the displacement<\/p>\n

bg_mc.filters = [dFilter]<\/p>\n

bg_mc.addEventListener(Event.ENTER_FRAME, onFrame)<\/p>\n

function onFrame(e:Event){
\ndPoint.x += ((mouseX-map_mc.width\/3)-dPoint.x)*0.4
\ndPoint.y += ((mouseY-map_mc.height\/3)-dPoint.y)*0.4
\nlens_mc.x = dPoint.x-8
\nlens_mc.y = dPoint.y-8
\ndFilter.mapPoint = dPoint
\nbg_mc.filters = [dFilter]
\n}<\/p>\n

Now run the program.<\/p>\n","protected":false},"excerpt":{"rendered":"

Final View: Step-1: Open a new document in flash in the size of 690X390px. Step-2: Import (ctrl+r) an image in the same size of document size to the stage in layer-1. Step-3: Select the image and convert it into movieclip (F8) and name it as \u201cbg_mc\u201d. Step-4: create a layer-2 and draw a square fill […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[34,32,33],"class_list":["post-566","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript-3-0","tag-magnifying-effect-using-flash","tag-zooming-effect-in-flash"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":7,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/566\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/566\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}