{"id":95,"date":"2007-03-13T13:11:41","date_gmt":"2007-03-13T20:11:41","guid":{"rendered":"http:\/\/labs.zeh.com.br\/blog\/?p=95"},"modified":"2007-10-09T08:12:03","modified_gmt":"2007-10-09T15:12:03","slug":"papervision3d-tweener","status":"publish","type":"post","link":"https:\/\/labs.zeh.com.br\/blog\/?p=95","title":{"rendered":"Papervision3D + Tweener = Cones"},"content":{"rendered":"<p>From the very start, one of the main aspects I wanted to focus on with <a href=\"http:\/\/code.google.com\/p\/tweener\/\">Tweener<\/a> was forgetting about the whole Actionscript\/Flash API, forgetting there were &#8220;MovieClips&#8221; and &#8220;TextFields&#8221; and similar visual class instances. Instead, I wanted Tweener to be an engine focused on tweening any property of any object of any class, as long as it was numeric; it was too often with MC Tween that I had to create &#8220;wrap arounds&#8221; for new classes I created, when I simply wanted to tween a property of it &#8211; say, the .cameraX property of a Stage camera object. Hence why Tweener works by being a separate class that tweens properties of any object, regardless of its type; it&#8217;s meant to work seamlessly with whatever numeric properties you want to tween. So a few days ago I decided to put that flexibility into test with <a href=\"http:\/\/osflash.org\/papervision3d\">Papervision3D<\/a>, the Actionscript 3d renderer that many people are talking about.<\/p>\n<p><!--more--><\/p>\n<p>Now here&#8217;s the fun part: since Papervision3D&#8217;s renderer engine uses some simple objects, each with its own numeric properties, it was pretty easy to create something to test &#8212; with no code adaptation whatsoever to the way Tweener works. Check this example out:<\/p>\n<p><script type=\"text\/javascript\" src=\"\/blog\/f\/swfobject.js\"><\/script><\/p>\n<div id=\"flashcontent_cone\">{}<\/div>\n<p><script type=\"text\/javascript\">\n\tvar fo = new SWFObject(\"\/blog\/f\/papervision3d_cone.swf\", \"index\", \"400\", \"400\", \"9\", \"#000000\", true);\n\tfo.setAttribute('xiRedirectUrl', 'https:\/\/labs.zeh.com.br\/blog');\n\tfo.write(\"flashcontent_cone\");\n<\/script><\/p>\n<p>Clicking each button on the base of the movie slides the free camera to a position I&#8217;ve defined earlier.<\/p>\n<p>It&#8217;s not the most graphically intense Papervision3D demo you might have seen &#8211; just a pair of street cones I&#8217;ve painstakingly modeled in <a href=http:\/\/www.blender.org\/\">Blender<\/a>, with a different texture applied to each cone &#8211; but it does the trick of showing how easing can also be applied to 3d elements. And since Papervision3D uses numeric properties, doing those travels are as easy as:<\/p>\n<pre>import caurina.transitions.Tweener;\r\n...\r\nTweener.addTween(freeCamera, {x:-2967, y:1400, z:16, rotationX:-28, rotationY:90, rotationZ:0, time:1, transition:\"easeinoutexpo\"});\r\n<\/pre>\n<p>I like to believe that&#8217;s pretty straightforward. <a href=\"http:\/\/lawsofsimplicity.com\/\">John Maeda<\/a> would be proud.<\/p>\n<p>Anyhow, download the example with source code <a href=\"http:\/\/tweener.googlecode.com\/svn\/trunk\/examples\/papervision3d_cones_as3_flash9.zip\">here<\/a> (Flash 9, AS 3). It was slightly based on Papervision3D&#8217;s own examples. It does not include Papervision3D renderer source, though, as it&#8217;s not publicly released yet; more information on how to get on the beta <a href=\"http:\/\/wiki.papervision3d.org\/index.php?title=Download_from_SVN\">here<\/a>.<\/p>\n<p><strong>Update:<\/strong> There&#8217;s another example of Tweener playing with Papervision3D <a href=\"http:\/\/aquioux.blog48.fc2.com\/blog-entry-184.html\">here<\/a> (in japanese). Tweener is used to tween the rotation and position of a plane. The <a href=\"http:\/\/aquioux.blog48.fc2.com\/\">blog itself<\/a> also has many other Tweener examples, as well as Papervision3D examples.<\/p>\n<p><strong>Update again:<\/strong> A great resource for finding Papervision3D-specific examples (not related to Tweener) is <a href=\"http:\/\/blog.davr.org\/pv3d-examples\/\">this post<\/a> on Davr&#8217;s blog. It lists all known online Papervision3D examples.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From the very start, one of the main aspects I wanted to focus on with Tweener was forgetting about the whole Actionscript\/Flash API, forgetting there were &#8220;MovieClips&#8221; and &#8220;TextFields&#8221; and similar visual class instances. Instead, I wanted Tweener to be an engine focused on tweening any property of any object of any class, as long [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,10,2,6,21,20,18],"tags":[],"_links":{"self":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/95"}],"collection":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=95"}],"version-history":[{"count":0,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions"}],"wp:attachment":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}