#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0

    Rotating Image Distortion


    Background info: I am using ActionScript 2.0 and Flash CS5

    I was working on a game and I used photoshop to save a little gif image. I imported it into flash, "broke it apart", turned it into a movie clip, and put this bit of code on it. It rotates the image when the mouse is moved around it.

    Code:
    onClipEvent (enterFrame) {
     // find x and y differences
     disx = _root._xmouse-_x;
     disy = _root._ymouse-_y;
     // calculate the angle
     Radians = Math.atan2(disy, disx);
     // convert to degrees and set rotation
     Degrees = (360*Radians/(2*Math.PI))+170;
     _rotation = Degrees;
    }
    This is the result. megaswf(dot)com/serve/1148007

    Move your mouse over the sprite for it to move.

    Then I imported my image, selected it and went to Modify > Bitmap > Trace Bitmap... . Then I converted it to a movie clip and post the code on it again.

    This is the result. megaswf(dot)com/serve/1148009

    This looks a bit better, but its still not as crisp as I would like.

    The differences is that when I use trace bitmap its more blurry than braking the image apart.

    Example: oi56.tinypic(dot)com/2rcquzq.jpg
    Last edited by Nappy; July 17th, 2011 at 12:30 AM. Reason: Added what version of flash.
  2. #2
  3. No Profile Picture
    Gotta get to the next screen..
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2003
    Location
    Legion of Dynamic Discord
    Posts
    6,678
    Rep Power
    3165
    Hi, it sounds like you just have to enable smoothing. Open the library in Flash and find you bitmap image. Double click on it to open the properties panel. It should look a bit like this:


    Tick the "Allow smoothing" tickbox and set the "Compression" to "Lossless (PNG/GIF)".
    Quis custodiet ipsos custodes?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0
    Originally Posted by Tann San
    Hi, it sounds like you just have to enable smoothing. Open the library in Flash and find you bitmap image. Double click on it to open the properties panel. It should look a bit like this:
    Tick the "Allow smoothing" tickbox and set the "Compression" to "Lossless (PNG/GIF)".
    This made the image more blurry, some thing I don't want, but it looks better when it's turning now. I find it looks about the same as when I Traced the Bitmap.

    oi54(dot)tinypic(dot)com/2n7qv6g.jpg

    megaswf(dot)com/serve/1148166
  6. #4
  7. No Profile Picture
    Gotta get to the next screen..
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2003
    Location
    Legion of Dynamic Discord
    Posts
    6,678
    Rep Power
    3165
    It could be to do with how the gif transparency is being understood by Flash. Try re-exporting your image as a 24bit PNG with transparency and then import that.
    Quis custodiet ipsos custodes?
  8. #5
  9. No Profile Picture
    Gotta get to the next screen..
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2003
    Location
    Legion of Dynamic Discord
    Posts
    6,678
    Rep Power
    3165
    Bottom one looks better btw.
    Quis custodiet ipsos custodes?
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0
    It didn't seem to help.

    Ya I agree, the bottom one looks better while rotating, but I like the look of top one if its not on an angle more. I'm gonna do some more research before picking this up again.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0

    Question Need help with image rotation.


    Okay, I made up my mind. I want to do it the long hard way. I think the image quality is worth it.

    My plan is to make an image for every 10-20 degrees of rotation and then have code to appoint the proper image based on the cursors location. But since I'm new to flash I have no idea about how to do this. Any one know a tutorial to do this or give me a code example for it?
  14. #8
  15. No Profile Picture
    Gotta get to the next screen..
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2003
    Location
    Legion of Dynamic Discord
    Posts
    6,678
    Rep Power
    3165
    Well you might enjoy this trilogy of video tutorials by Lee Brimelow about sprite sheets in Flash:

    Part I
    Part II
    Part III
    Quis custodiet ipsos custodes?
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0
    Thanks, but I don't like working with it like this. I prefer seeing it while I work with it. Pure code based design isn't my kind of thing.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0
    Okay, I did it! But it seems long, complicated and useless busy work.

    This is my code

    Code:
    onMouseMove = function () 
    { 
        trace(_xmouse + " | " + _ymouse); 
        rrr.text = "x: " + _xmouse + " | y: " + _ymouse;
    	if((_xmouse >= 100) && (_ymouse >= 100)){
    		ani.gotoAndStop(4)
    	}
    	else if((_xmouse >= 100) && (_ymouse < 100)){
    		ani.gotoAndStop(2)
    	}
    	else if((_xmouse < 100) && (_ymouse >= 100)){
    		ani.gotoAndStop(3)
    	}
    	else if((_xmouse < 100) && (_ymouse < 100)){
    		ani.gotoAndStop(1)
    	}
    }
    This is the result.

    Any one got a better way of doing it?

    Also I have no idea what to do about the problem that if the symbol starts to move it changes the positioning of the mouse in relation to the symbol.
  20. #11
  21. No Profile Picture
    Gotta get to the next screen..
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2003
    Location
    Legion of Dynamic Discord
    Posts
    6,678
    Rep Power
    3165
    You could use the angle of the mouse in relation to the sprite as described here.

    Comments on this post

    • Nappy agrees
    Quis custodiet ipsos custodes?
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2011
    Posts
    22
    Rep Power
    0
    Oh! So going back to my first code but replace the

    Code:
    Degrees = (360*Radians/(2*Math.PI))+170; _rotation = Degrees;
    with and if statement degrees >= or < to a degree change the frame. That's really simple and I feel like an idiot for not thinking of it.

    Thanks!

IMN logo majestic logo threadwatch logo seochat tools logo