{"id":1163,"date":"2011-11-24T05:25:12","date_gmt":"2011-11-24T09:25:12","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=1163"},"modified":"2011-11-24T05:28:46","modified_gmt":"2011-11-24T09:28:46","slug":"rotating-object-using-flash","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/rotating-object-using-flash\/","title":{"rendered":"Rotating object using flash"},"content":{"rendered":"<p><object id=\"test\" width=\"465\" height=\"400\" classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"src\" value=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash.swf\" \/><embed id=\"test\" width=\"465\" height=\"400\" type=\"application\/x-shockwave-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash.swf\" \/><\/object><\/p>\n<p>Step-1 Open a new document and set its background color as black.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-1.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-1.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-2 Draw a rectangle line inside the stage as like below. Then pick slider from Windows \u00e0 Components \u00e0User Interface \u00e0 Slider. Drag it to stage. It will be as movieclip. Here we want 4 slider and give its movieclip instance name as fieldOfView, speed, rotatey, rotatex respectively.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-2.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-2.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-3 You can edit the values of sliders by Windows \u00e0 Components Inspector.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-3.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-3.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-4 Bring the pattern in a new layer on stage by imports it to library, arranges it as like below and groups it (ctrl + g). Change it to movieclip and name it as pattern and again change it to movieclip, then name it as container.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-4.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-4.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-5 Draw a rectangle with color fills above the pattern layer and apply mask by right click it on same layer on time line, then click mask.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-5.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-5.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-6 Finally it looks like below.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-6.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-6.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-7 Click out of stage and give code.view in properties box.<\/p>\n<p><a href=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-7.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" title=\"rotating-object-using-flash\" src=\"http:\/\/www.searchenginegenie.com\/web-design\/uploaded_images\/rotating-object-using-flash-7.png\" alt=\"rotating-object-using-flash\" width=\"653\" height=\"567\" \/><\/a><\/p>\n<p>Step-8 Open a new action script file copy and paste the below coding and save it as view inside newly created code folder.<\/p>\n<p>package code<\/p>\n<p>{<\/p>\n<p>import flash.events.Event;<\/p>\n<p>import flash.display.MovieClip;<\/p>\n<p>import flash.geom.PerspectiveProjection;<\/p>\n<p>import flash.geom.Point;<\/p>\n<p>import fl.events.SliderEvent;<\/p>\n<p>public class view extends MovieClip<\/p>\n<p>{<\/p>\n<p>public function view()<\/p>\n<p>{<\/p>\n<p>\/\/ To set default field of view<\/p>\n<p>var pp:PerspectiveProjection = new PerspectiveProjection();<\/p>\n<p>pp.projectionCenter = new Point(container.x, container.y);<\/p>\n<p>pp.fieldOfView = 75;<\/p>\n<p>\/\/ To apply projector and rotation to container clip<\/p>\n<p>container.transform.perspectiveProjection = pp;<\/p>\n<p>container.rotatey = 45;<\/p>\n<p>\/\/ Setup components<\/p>\n<p>fieldOfView.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);<\/p>\n<p>rotatey.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);<\/p>\n<p>rotatex.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/ Animate the pattern at the frame rate&#8230;<\/p>\n<p>addEventListener(Event.ENTER_FRAME, enterFrameHandler);<\/p>\n<p>}<\/p>\n<p>protected function enterFrameHandler(event:Event):void<\/p>\n<p>{<\/p>\n<p>\/\/ Rotate the pattern movie clip inside the object<\/p>\n<p>container.pattern.rotationZ += speed.value;<\/p>\n<p>}<\/p>\n<p>protected function sliderChangeHandler(event:SliderEvent):void<\/p>\n<p>{<\/p>\n<p>switch( event.currentTarget.name )<\/p>\n<p>{<\/p>\n<p>case &#8220;fieldOfView&#8221;:<\/p>\n<p>\/\/ Update projector<\/p>\n<p>var pp:PerspectiveProjection = new PerspectiveProjection();<\/p>\n<p>pp.projectionCenter = new Point(container.x, container.y);<\/p>\n<p>pp.fieldOfView = event.currentTarget.value;<\/p>\n<p>\/\/ Apply projector to object<\/p>\n<p>container.transform.perspectiveProjection = pp;<\/p>\n<p>break;<\/p>\n<p>case &#8220;rotatey&#8221;:<\/p>\n<p>\/\/ Apply rotation to object<\/p>\n<p>container.rotatey = event.currentTarget.value;<\/p>\n<p>break;<\/p>\n<p>case &#8220;rotatex&#8221;:<\/p>\n<p>\/\/ TO move the object in z coordinate space<\/p>\n<p>container.z = event.currentTarget.value;<\/p>\n<p>break;<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>Now run the program.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step-1 Open a new document and set its background color as black. Step-2 Draw a rectangle line inside the stage as like below. Then pick slider from Windows \u00e0 Components \u00e0User Interface \u00e0 Slider. Drag it to stage. It will be as movieclip. Here we want 4 slider and give its movieclip instance name as [&hellip;]<\/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,5],"tags":[79,80],"class_list":["post-1163","post","type-post","status-publish","format-standard","hentry","category-flash","category-web-design","category-web-design-tips","tag-3d-rotating-object-in-flash","tag-rotating-object-using-flash-actionscript"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1163","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=1163"}],"version-history":[{"count":8,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1163\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1163\/revisions\/1170"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=1163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=1163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=1163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}