{"id":2352,"date":"2011-08-13T12:19:43","date_gmt":"2011-08-13T12:19:43","guid":{"rendered":"http:\/\/premiumcoding.com\/?p=2352"},"modified":"2017-08-31T06:30:17","modified_gmt":"2017-08-31T06:30:17","slug":"flash-as3-tutorial-3d-flip-effect","status":"publish","type":"post","link":"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/","title":{"rendered":"Flash AS3 Tutorial: 3D Flip effect Part I"},"content":{"rendered":"

This is first part of our Flash 3D Flip tutorial<\/strong>. In this part we will make a simple 3D flip<\/strong> accross X axis. Next part will involve creation of a simple but convenient 3D engine that will be able to rotate your objects along all axis. You will simply enter rotation values via XML file. Similar 3D engine is used in our WordPress 3D Banner Plugin<\/strong>.<\/p>\n

TABLE OF CONTENTS<\/h3>\n
    \n
  1. Flash AS3 Tutorial: 3D Flip effect Part I<\/a><\/li>\n
  2. Flash AS3 Tutorial: 3D Blur Fix<\/a><\/li>\n
  3. Flash AS3 Tutorial: Unlimited 3D rotations<\/a><\/li>\n
  4. Flash AS3 Tutorial: Rolling Newspaper effect<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    STEP 1: PREPARING ASSETS IN FLASH<\/h3>\n

    Open Flash and create a new document in AS3. Go to File\/Import\/Import to stage and import two images. They should be of the same size to achieve a smooth effect<\/strong>. Convert them both to MovieClips<\/strong> (right click and then Convert to Symbol). Name first one adNumber1 and second one adNumber1. Be sure to name instances of movie clips also. You can name them with your names also but these are the names used in source files.<\/p>\n

    \"Flash<\/p>\n

    Leave both images on the stage as they are, no positioning<\/strong> is needed since we will do that with actionscript<\/strong>.<\/p>\n

    STEP 3: POSITIONING<\/h3>\n

    It is time to put our 3D flip effect<\/strong> to life. First you have to import\u00a0Tweenlite<\/a><\/strong> classes that will take care of our animation.
    \n


    \nimport com.greensock.*;
    \nimport com.greensock.easing.*;
    \n<\/div>
    \nWhen you import images, rotation point<\/strong> is set at 0 (both x and y coordinates). That means our rotation wouldn’t be around the center like we would like but around left border of the image. To move rotation point to the center we will create new sprite objects<\/strong> and add images into them. Apply the following code:
    \n

    \nvar imageC:Sprite = new Sprite();\/\/containers for rotation X and Y
    \nvar imageD:Sprite = new Sprite();\/\/containers for rotation X and Y
    \naddChild(imageC);
    \naddChild(imageD);
    \nimageC.addChild(adNumber1);
    \nimageD.addChild(adNumber2);
    \n<\/div>
    \nWe have defined two sprite objects<\/strong>, add them to stage and then inserted both images into them. Now we have to move our images<\/strong> along x and y axis for half of their width and height<\/strong> to set the rotation point to the center of the sprite:
    \n

    \nadNumber1.x =\u00a0 – adNumber1.width\/2;
    \nadNumber1.y =\u00a0 – adNumber1.height\/2;
    \nadNumber2.x =\u00a0 – adNumber2.width\/2;
    \nadNumber2.y =\u00a0 – adNumber2.height\/2;
    \n<\/div>
    \nSet inital rotation for both images to 0:
    \n

    \nimageC.rotationX = 0;
    \nimageD.rotationX = 0;
    \n<\/div>
    \nTo set the position of your images on the stage (the exact position that you actually see) you have to apply x and y to sprite objects (not images):
    \n

    \nimageC.x = stage.stageWidth – imageC.width;
    \nimageC.y = stage.stageHeight –\u00a0 imageC.height\/2
    \nimageD.x =\u00a0 stage.stageWidth – imageC.width;
    \nimageD.y = stage.stageHeight –\u00a0 imageC.height\/2;
    \n<\/div>
    \nPlease note that this can be anything you like, in our example we set them to the center of the stage. Both sprites<\/strong> have to be set at the same position<\/strong>.<\/p>\n

    \u00a0STEP 4: APPLYING THE 3D EFFECT<\/h3>\n

    We are finally at the fun part. We will implement two functions<\/strong> that will take care of our 3D effect<\/strong>.<\/p>\n

    We will first define two more variables that will take care of animation time<\/strong> and time each image is in still position (time that image is not moving):
    \n


    \nvar animationTime:Number = 2;
    \nvar imageOnStage:Number = 3;
    \n<\/div>
    \nWe will now set initial position<\/strong> for second image. It has to be set at 90 or -90 degrees and opacity set to 0. First function will rotate first image for 90 degrees (until it is not visible anymore) and then set it’s opacity value to 0. After first part of rotation is completed second one begins. Animation of the second image rotates it to 0 degrees (note that starting position of second one was set to -90). First function has now done it’s job. Second function now sets initial position of first image to -90 degrees and sets opacity to 0. Tweenlite animations<\/strong> now do exactly the same job as in first function (only images are now in different order). After first part of tween is completed we call first function again and so on. Functions will keep calling each other and our 3D flip<\/strong> will repeat infinitely<\/strong>.
    \n

    \nfunction flip3D(){
    \nimageD.rotationX = -90;
    \nimageD.alpha = 0;
    \nTweenLite.to(imageC, animationTime, {alpha:1,delay:imageOnStage,rotationX:90,ease:Quint.easeIn, onComplete:flip3DSecond, overwrite:0})
    \nTweenLite.to(imageD,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, ease:Elastic.easeOut, overwrite:0})
    \n}<\/p>\n

    function flip3DSecond(){
    \nimageC.alpha = 0;
    \nimageC.rotationX = -90;
    \nTweenLite.to(imageD, animationTime, {alpha:1,delay:imageOnStage, rotationX:90,ease:Quint.easeIn, onComplete:flip3D, overwrite:0})
    \nTweenLite.to(imageC,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0,delay:0, ease:Elastic.easeOut,overwrite:0})
    \n}
    \n<\/div><\/p>\n

    CONCLUSION<\/h3>\n

    Our 3D flip effect<\/strong> is now completed but we’re far from done. If you look carefully you will notice that images are a bit blurry. That happens because of the way Flash renders 3D<\/strong>. In second part of our tutorial I will show you how to solve this issue. Third part of the tutorial will implement a simple 3D engine<\/strong> that will rotate images along all three axis (x,y,z). So stay tuned for more 3D effects<\/strong>! If 3D rotation is not working check if you have Flash player version 10 set as export player. Go to File\/Publish Settings and select tag named Flash. Set player to version 10 if it is currently set to 9.<\/p>\n

    [download id=”51″]<\/p>\n","protected":false},"excerpt":{"rendered":"

    This is first part of our Flash 3D Flip tutorial. In this part we will make a simple 3D flip accross X axis. Next part will involve creation of a simple but convenient 3D engine that will be able to rotate your objects along all axis. You will simply enter rotation values via XML file. …<\/p>\n","protected":false},"author":1,"featured_media":1233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[301,270],"yoast_head":"\nFlash AS3 Tutorial: 3D Flip effect Part I - PremiumCoding<\/title>\n<meta name=\"description\" content=\"This is first part of our Flash 3D Flip tutorial. In this part we will make a simple 3D flip accross X axis. Next part will involve creation of a simple\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flash AS3 Tutorial: 3D Flip effect Part I - PremiumCoding\" \/>\n<meta property=\"og:description\" content=\"This is first part of our Flash 3D Flip tutorial. In this part we will make a simple 3D flip accross X axis. Next part will involve creation of a simple\" \/>\n<meta property=\"og:url\" content=\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"PremiumCoding\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-13T12:19:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-31T06:30:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/premiumcoding.com\/#organization\",\"name\":\"PremiumCoding\",\"url\":\"https:\/\/premiumcoding.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2013\/12\/premiumcoding-wordpress-themes-logo@2x.png\",\"width\":400,\"height\":134,\"caption\":\"PremiumCoding\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/premiumcoding.com\/#website\",\"url\":\"https:\/\/premiumcoding.com\/\",\"name\":\"PremiumCoding\",\"description\":\"WordPress Themes, Tutorials & Articles\",\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/premiumcoding.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#webpage\",\"url\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/\",\"name\":\"Flash AS3 Tutorial: 3D Flip effect Part I - PremiumCoding\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#primaryimage\"},\"datePublished\":\"2011-08-13T12:19:43+00:00\",\"dateModified\":\"2017-08-31T06:30:17+00:00\",\"description\":\"This is first part of our Flash 3D Flip tutorial. In this part we will make a simple 3D flip accross X axis. Next part will involve creation of a simple\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#webpage\"},\"author\":{\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\"},\"headline\":\"Flash AS3 Tutorial: 3D Flip effect Part I\",\"datePublished\":\"2011-08-13T12:19:43+00:00\",\"dateModified\":\"2017-08-31T06:30:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#primaryimage\"},\"keywords\":\"flash 3d flip,flash as3 tutorial\",\"articleSection\":\"Tutorials\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/premiumcoding.com\/flash-as3-tutorial-3d-flip-effect\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\",\"name\":\"Ales\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5b70a6c161b959988486ba65abb4653?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ales\"},\"sameAs\":[\"https:\/\/premiumcoding.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/2352"}],"collection":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/comments?post=2352"}],"version-history":[{"count":0,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/2352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media\/1233"}],"wp:attachment":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media?parent=2352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/categories?post=2352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/tags?post=2352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}