{"id":362,"date":"2009-07-30T10:30:20","date_gmt":"2009-07-30T17:30:20","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1872"},"modified":"2009-07-30T10:30:20","modified_gmt":"2009-07-30T17:30:20","slug":"parallax-fp10","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=362","title":{"rendered":"Parallax fp10"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(backgroundColor=0x000000, width = 800, height = 600)]\r\n\r\n\/\/ this is a trick to keep the 3D texture quality up... \r\n\/\/ try setting it right off the bat and you&#039;ll notice that the\r\n\/\/ Shapes look pixilated\r\nsetTimeout(function():void{ stage.quality=&quot;low&quot;}, 500);\r\n\r\nvar matrix:Matrix = new Matrix();\r\nmatrix.createGradientBox(600, 600, 0, -450, -450);\r\n\r\nvar boxNum:int = 30;\r\nvar boxes:Array = &#x5B;];\r\nfor (var i:int = 0; i&lt;boxNum; i++) boxes&#x5B;i] = makeBox();\r\n\r\nvar dx:Number = 0, dy:Number = 0;\r\nonLoop();\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\n\r\nfunction onLoop(evt:Event=null):void {\r\n\tdx += (mouseX - dx) \/ 4;\r\n\tdy += (mouseY - dy) \/ 4;\r\n\tfor (var i:int = 0; i&lt;boxNum; i++){\r\n\t\tvar box:Shape = boxes&#x5B;i];\r\n\t\tbox.z = 400 - i * 20;\r\n\t\tbox.x = dx;\r\n\t\tbox.y = dy;\r\n\t\tbox.rotation = i + getTimer() \/ 10;\r\n\t}\r\n}\r\n\r\nfunction makeBox():Shape{\r\n\tvar box:Shape = Shape(addChild(new Shape()));\r\n\tbox.x = stage.stageWidth\/2;\r\n\tbox.y = stage.stageHeight\/2;\r\n\tbox.z = 1;\r\n\twith (box.graphics){\r\n\t\t beginGradientFill(GradientType.RADIAL, &#x5B;0xFFFFFF, 0x333333], &#x5B;1,1], &#x5B;0, 255], matrix, SpreadMethod.PAD);\r\n\t\tdrawRect(-100, -100, 200, 200);\r\n\t\tdrawRect(-70, -70, 140, 140);\r\n\t}\r\n\treturn box;\r\n}\r\n<\/pre>\n<p>This snippet draws 30 gradient box shapes, gives them different z values and then moves them based on the mouse. This technique is good if you just want a few layers of parallax motion &#8211; I got carried away and you&#8217;ll notice that if you add more boxes it begins to slow down pretty quick.<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"https:\/\/actionsnippet.com\/swfs\/para_fp10.html\" target=\"blank\"><br \/>\nHave a look at the swf&#8230;.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/para_box.jpg\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/para_fp10.swf&quot;,&quot;title&quot;:&quot;para fp10&quot;,&quot;width&quot;:800,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#000000&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: para fp10<\/span><\/button><\/span><br \/>\n<a data-asruffle-linked=\"true\" href=\"https:\/\/actionsnippet.com\/swfs\/inverted_face.html\" target=\"blank\"><br \/>\nI first used this technique for this small interactive drawing&#8230;<br \/>\n<img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/inverted_face.gif\" \/><\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/inverted_face.swf&quot;,&quot;title&quot;:&quot;inverted face&quot;,&quot;width&quot;:800,&quot;height&quot;:600,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: inverted face<\/span><\/button><\/span><\/p>\n<p>Something interesting I noticed about fp10 3D DisplayObjects is that if you set the stage.quality to low right off the bat, the display objects look pixelated&#8230; but if you wait a few milliseconds, you end up with less pixelation and you still get a speed boost from the low quality &#8211; I think it must have something to do with the way the 3D textures are handled by the player&#8230;<\/p>\n<p>Tomorrow I think I&#8217;ll post a version of this that uses IGraphicsData and Utils.projectVectors()&#8230; should be a huge speed boost&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(backgroundColor=0x000000, width = 800, height = 600)] \/\/ this is a trick to keep the 3D texture quality up&#8230; \/\/ try setting it right off the bat and you&#039;ll notice that the \/\/ Shapes look pixilated setTimeout(function():void{ stage.quality=&quot;low&quot;}, 500); var matrix:Matrix = new Matrix(); matrix.createGradientBox(600, 600, 0, -450, -450); var boxNum:int = 30; var boxes:Array [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101,13],"tags":[3,14,4],"class_list":["post-362","post","type-post","status-publish","format-standard","hentry","category-3d","category-motion","tag-actionscript","tag-as3","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=362"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/362\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}