{"id":2129,"date":"2012-10-26T03:33:51","date_gmt":"2012-10-26T07:33:51","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=2129"},"modified":"2012-10-26T03:33:51","modified_gmt":"2012-10-26T07:33:51","slug":"masking-the-images-on-action-script-using-flash-cs4","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/masking-the-images-on-action-script-using-flash-cs4\/","title":{"rendered":"Masking The Images On Action Script Using Flash cs4"},"content":{"rendered":"

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

Step1: open a new flash file. Set the width to 465 pixels and the height to 232 pixels. And set frame rate to 24fps.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2130\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 2: By using the rectangle tool draw a rectangle. And import the image for background (file ->import -> import to stage) set as background image.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2131\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 3: Now, we need to place the buttons on left-side of the background image to perform action controls. Import the images from file menu. Place 4 buttons as figure shown below
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2132\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 4: Name the buttons for its relevant actions as shown below
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2133\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 5: To convert the image into a MOVIE CLIP (Movie Clip Symbol) called “background”, by pressing F8.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2134\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 6: Now we need to mask the feature for visually cropping display objects within a shape as image shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2135\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 7: To convert the image into a MOVIE CLIP (Movie Clip Symbol) called “background”, by pressing F8.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2136\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 8: From the cropping image to mask the layer and perform some actionscript towards the masking as image shown below
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2137\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 9: The image should now be masking the image, as shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2138\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 10: create a timeline to demonstrate the following function.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2139\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 11: now we need to focus on second button i.e. mask. The process involves creating a shape and applying it to the “mask” property of another display object.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2140\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 12: Masks can stay stationary while the object is being masked move or masks can animate above the object to create transitions and special effects as shown below
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2141\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 13: Now, create a new MOVIE CLIP (Insert > New Symbol) called “thumb0” and create 2 layers called “image” and “mask”. Drag the thumbnail thumb_0 on to the “image” layer, placing it at the position shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2142\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 14: then the image will mask the two layers with the movie clip that has been shown in the following image.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2143\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 15: Right click on the “mask” layer and chose “mask”.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2144\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 16: On the mask layer two layers have combined to perform the mask function as figure shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2145\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 17: Then the image Holder MC and delete the image Movie Clip inside of it. This is because we will be adding the image dynamically with action script.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2146\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 18: Then the image Holder MC and delete the image MC inside of it. This is because we will be adding the image dynamically with action script as shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2147\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 19: When all the thumbnails have been added, go back to the Movie Clip and give the thumb Holder Movie Clip the instance name “background”.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2148\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 20: Now we need to drag the mask on the right window. By using this drag mask we can able to drag the mouse cursor on the screen as figure shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2149\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 21: Now we need to make spiral movie clip on the right window to mask the two given layer as the figure shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2150\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 22: To create the mask frame to function the mask frame on the layer style as figure shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2151\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 23: To rotate the thumbnails with action script, the thumb Holder MC will be rotate so that each thumbnail doesn’t have to be rotated individually. Setting the registration point to the center makes sure the MC will rotate from the center. Press F8 to perform the action as figure shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2152\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 24: Setting the registration point to the center makes sure the MC will rotate from the center. Press F8 to perform the action as figure shown below.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2153\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 25: Last layer to perform no function to be done to make the screen idle.
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2154\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 26: Now we will use some action script. To make the thumbnails function and to rotate them around the main image.
\nCode 1:
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2155\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

code 2:
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2156\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Code 3:
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2157\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Code 4:
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2158\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Code 5:
\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2159\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

There are three types of masks which is displayed above flash file. Click the buttons to see the different effects.<\/p>\n","protected":false},"excerpt":{"rendered":"

Step1: open a new flash file. Set the width to 465 pixels and the height to 232 pixels. And set frame rate to 24fps.               Step 2: By using the rectangle tool draw a rectangle. And import the image for background (file ->import -> import to stage) set as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[22,29,39,116,48,33],"class_list":["post-2129","post","type-post","status-publish","format-standard","hentry","category-flash","category-web-design","tag-animation-in-flash","tag-flash-2","tag-flash-action-script","tag-flash-actionscript","tag-flash-actionscript-gallery","tag-zooming-effect-in-flash"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2129","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=2129"}],"version-history":[{"count":8,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2129\/revisions"}],"predecessor-version":[{"id":2169,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2129\/revisions\/2169"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}