Page Flip/ TweenEvent.MOTION_FINISH problem...

  • FlyHigh5
  • Newbie
  • Newbie
  • User avatar
  • Posts: 14

Post 3+ Months Ago

Hi,

I tried following this tutorial on youtube: "Adobe flash cs4 tutorial: 3d page flip"

Here's the original code:

Code: [ Select ]
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import fl.transitions.TweenEvent;
import flash.events.Event;


con.sidea.flip.addEventListener(MouseEvent.CLICK, onFlip);
con.sideb.flip.addEventListener(MouseEvent.CLICK, onFlip);

addEventListener(Event.ENTER_FRAME, loop);

var isStill: Boolean=true;
var arrayTween: Array = new Array;

function onFlip(e:Event){
    if (isStill) {
        arrayTween.push(new Tween(con, 'rotationY', Strong.easeOut, con.rotationY, con.rotationY+180, 1, true));
        arrayTween[0].addEventListener(TweenEvent.MOTION_FINISH, reset);
        isStill = false; 
    }
}


function reset(e:Event) {
    isStill = true;
    arrayTween = [];
}

function loop(e:Event) {
    if (con.rotationY >= 90 && con.rotationY<=270) {
        con.addChild(con.sideb);
        con.scaleX=-1;
    }
    else {
        con.addChild(con.sidea);
        con.scaleX=1;
    }
    if (con.rotationY >=360) {
        con.rotationY = 0
    }
}
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.Strong;
  3. import fl.transitions.TweenEvent;
  4. import flash.events.Event;
  5. con.sidea.flip.addEventListener(MouseEvent.CLICK, onFlip);
  6. con.sideb.flip.addEventListener(MouseEvent.CLICK, onFlip);
  7. addEventListener(Event.ENTER_FRAME, loop);
  8. var isStill: Boolean=true;
  9. var arrayTween: Array = new Array;
  10. function onFlip(e:Event){
  11.     if (isStill) {
  12.         arrayTween.push(new Tween(con, 'rotationY', Strong.easeOut, con.rotationY, con.rotationY+180, 1, true));
  13.         arrayTween[0].addEventListener(TweenEvent.MOTION_FINISH, reset);
  14.         isStill = false; 
  15.     }
  16. }
  17. function reset(e:Event) {
  18.     isStill = true;
  19.     arrayTween = [];
  20. }
  21. function loop(e:Event) {
  22.     if (con.rotationY >= 90 && con.rotationY<=270) {
  23.         con.addChild(con.sideb);
  24.         con.scaleX=-1;
  25.     }
  26.     else {
  27.         con.addChild(con.sidea);
  28.         con.scaleX=1;
  29.     }
  30.     if (con.rotationY >=360) {
  31.         con.rotationY = 0
  32.     }
  33. }

I used text on my pages, instead of images. I noticed that every time I click on the flip button, my text gets more out of focus. I tried to put some trace statement to see
what could be wrong. I noticed that as I enter frame, since the value of con.rotationY is 0, the function "loop", keeps looping and keeps adding the "sidea" to the stage(con.addChild(con.sidea);).

I decided to try something new. Keep in mind I am just learning AS3.

Here's the code I tried:

Code: [ Select ]
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.events.Event;

// Add side a, as we start
con.addChild(con.sidea);

// listen to see which flip side is clicked
con.sidea.flip.addEventListener(MouseEvent.CLICK, onFlipa);
con.sideb.flip.addEventListener(MouseEvent.CLICK, onFlipb);

var onSidea: Boolean=true;
var onSideb: Boolean=false;
var arrayTween: Array = new Array;
var rotationVal: Number = 180;

function onFlipa(e:Event){
    
        arrayTween.push(new Tween(con, 'rotationY', Strong.easeOut, con.rotationY, con.rotationY+rotationVal, 1, true));
        
        arrayTween[0].addEventListener(TweenEvent.MOTION_FINISH, reset);
        
        trace("outside reset");
        
        con.addChild(con.sidea);
        con.addChild(con.sideb);
        rotationVal = -180;
        con.scaleX=-1;
}
    
function onFlipb(e:Event){
    
        arrayTween.push(new Tween(con, 'rotationY', Strong.easeOut, con.rotationY, con.rotationY+rotationVal, 1, true));
        
        arrayTween[0].addEventListener(TweenEvent.MOTION_FINISH, reset);
        
        con.addChild(con.sideb);
        con.addChild(con.sidea);
        rotationVal = 180;
        con.scaleX=1;
}    

function reset(e:Event) {
    trace("i am inside reset");

    arrayTween = [];
    
    /*if (onSidea == true){
        trace("side a on reset");
        con.addChild(con.sideb);
        rotationVal = -180;
        con.scaleX=-1;
        onSidea = false;
        onSideb = true;
    }
    else {
        trace("side b on reset");
        con.addChild(con.sideb);
        con.addChild(con.sidea);
        rotationVal = 180;
        con.scaleX=1;
        onSidea = true;
        onSideb = false;
        }*/
}
    
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3. import fl.transitions.TweenEvent;
  4. import flash.events.Event;
  5. // Add side a, as we start
  6. con.addChild(con.sidea);
  7. // listen to see which flip side is clicked
  8. con.sidea.flip.addEventListener(MouseEvent.CLICK, onFlipa);
  9. con.sideb.flip.addEventListener(MouseEvent.CLICK, onFlipb);
  10. var onSidea: Boolean=true;
  11. var onSideb: Boolean=false;
  12. var arrayTween: Array = new Array;
  13. var rotationVal: Number = 180;
  14. function onFlipa(e:Event){
  15.     
  16.         arrayTween.push(new Tween(con, 'rotationY', Strong.easeOut, con.rotationY, con.rotationY+rotationVal, 1, true));
  17.         
  18.         arrayTween[0].addEventListener(TweenEvent.MOTION_FINISH, reset);
  19.         
  20.         trace("outside reset");
  21.         
  22.         con.addChild(con.sidea);
  23.         con.addChild(con.sideb);
  24.         rotationVal = -180;
  25.         con.scaleX=-1;
  26. }
  27.     
  28. function onFlipb(e:Event){
  29.     
  30.         arrayTween.push(new Tween(con, 'rotationY', Strong.easeOut, con.rotationY, con.rotationY+rotationVal, 1, true));
  31.         
  32.         arrayTween[0].addEventListener(TweenEvent.MOTION_FINISH, reset);
  33.         
  34.         con.addChild(con.sideb);
  35.         con.addChild(con.sidea);
  36.         rotationVal = 180;
  37.         con.scaleX=1;
  38. }    
  39. function reset(e:Event) {
  40.     trace("i am inside reset");
  41.     arrayTween = [];
  42.     
  43.     /*if (onSidea == true){
  44.         trace("side a on reset");
  45.         con.addChild(con.sideb);
  46.         rotationVal = -180;
  47.         con.scaleX=-1;
  48.         onSidea = false;
  49.         onSideb = true;
  50.     }
  51.     else {
  52.         trace("side b on reset");
  53.         con.addChild(con.sideb);
  54.         con.addChild(con.sidea);
  55.         rotationVal = 180;
  56.         con.scaleX=1;
  57.         onSidea = true;
  58.         onSideb = false;
  59.         }*/
  60. }
  61.     



These are the issues that I have with my version:

1- it of course does not rotate as the original version, which is a bummer, but I could live with it.
2- it still has the issue of loosing the text's sharpness as I keep clicking.
3- (this was the case with the original version as well) when I click fast on the reload button, the value of con.rotationY goes out of sync. (it should always be 0 & 180 in my version). So I thought I would move the code that sets the value of rotationVal to reset function. So I can also combine the functions that I have for each side into one function. But I noticed that every time I am on sidea, when I click the flip button, the TweenEvent.MOTION_FINISH is delayed. Basically my trace statement trace("outside reset") is displayed first before my trace("i am inside reset");

So I am kind of stuck. I don't know how to fix mine, nor how to fix the original version.

Could someone please help?
What I really don't understand is that why the text looses quality each time I click? I thought it's because of the number of addChild that was happening in the original code, but it happens in mine as well.

Thank you!!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.