A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: zoom in and zoom out of image

  1. #1
    Member
    Join Date
    Nov 2010
    Posts
    37

    zoom in and zoom out of image

    hi,

    i want to zoom in on an image by clicking one particular region and zoom out by clicking again. how can i achieve this. please help.

  2. #2
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    By zooming on a particular region, do you mean that it should zoom on THAT particular region, or the same zoom for anywhere you click?

    If you want the whole image to zoom, then give your image movieclip an instance name of, e.g.: my_image - and, on your frame, use this code:

    Actionscript Code:
    mc_name = "my_image"; // name of your movieclip
    speed = 0.8; // change this to change speed of easing
    increase = 100; // how much the image should zoom in

    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    normalScale = _root[mc_name]._xscale;
    targetScale = _root[mc_name]._xscale+increase;

    function scalingX(target_mc, speed){
        var XScale:Tween = new Tween(target_mc, "_xscale", Strong.easeOut, target_mc._xscale, targetScale, speed, true);
    }
    function scalingY(target_mc, speed, type){
        var YScale:Tween = new Tween(target_mc, "_yscale", Strong.easeOut, target_mc._yscale, targetScale, speed, true);
    }
    function scalingX2(target_mc, speed){
        var XScale2:Tween = new Tween(target_mc, "_xscale", Strong.easeOut, target_mc._xscale, normalScale, speed, true);
    }
    function scalingY2(target_mc, speed, type){
        var YScale2:Tween = new Tween(target_mc, "_yscale", Strong.easeOut, target_mc._yscale, normalScale, speed, true);
    }

    back = false;

    _root[mc_name].onPress = function(){
        if(back == false){
            back = true;
            scalingX(_root[mc_name], speed);
            scalingY(_root[mc_name], speed);
        } else {
            back = false;
            scalingX2(_root[mc_name], speed);
            scalingY2(_root[mc_name], speed);
        }
    }

    This is definitely not the best way to do it, but I couldn't think of any easier. I've written the code, so that you may change the 3 Variables at the top, to fit yours - just change them

    As for zooming in on that particular region of the image, make an empty movieclip (just draw a dot, convert to movieclip and remove that dot from inside), and give it an instance name of my_place. Now, instead of the above code, type this in your frame:

    Actionscript Code:
    mc_name = "my_image"; // name of your movieclip
    speed = 0.8; // change this to change speed of easing
    increase = 200; // how much the image should zoom in

    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    normalScale = _root[mc_name]._xscale;
    targetScale = _root[mc_name]._xscale+increase;

    normalX = _root[mc_name]._x;
    normalY = _root[mc_name]._y;

    function scalingX(target_mc, speed){
        var XScale:Tween = new Tween(target_mc, "_xscale", Strong.easeOut, target_mc._xscale, targetScale, speed, true);
    }
    function scalingY(target_mc, speed, type){
        var YScale:Tween = new Tween(target_mc, "_yscale", Strong.easeOut, target_mc._yscale, targetScale, speed, true);
    }
    function scalingX2(target_mc, speed){
        var XScale2:Tween = new Tween(target_mc, "_xscale", Strong.easeOut, target_mc._xscale, normalScale, speed, true);
    }
    function scalingY2(target_mc, speed, type){
        var YScale2:Tween = new Tween(target_mc, "_yscale", Strong.easeOut, target_mc._yscale, normalScale, speed, true);
    }

    onMouseDown = function(){
        _root.my_place._x = _root._xmouse;
        _root.my_place._y = _root._ymouse;
    }

    back = false;

    _root[mc_name].onPress = function(){
        if(back == false){
            back = true;
            a = _root.my_place._x-_root[mc_name]._x;
            b = _root.my_place._y-_root[mc_name]._y;
            scalingX(_root[mc_name], speed);
            scalingY(_root[mc_name], speed);
            var X:Tween = new Tween(_root[mc_name], "_x", Strong.easeOut, _root[mc_name]._x, _root[mc_name]._x-_root.a, speed, true);
            var Y:Tween = new Tween(_root[mc_name], "_y", Strong.easeOut, _root[mc_name]._y, _root[mc_name]._y-_root.b, speed, true);
        } else {
            back = false;
            scalingX2(_root[mc_name], speed);
            scalingY2(_root[mc_name], speed);
            var X2:Tween = new Tween(_root[mc_name], "_x", Strong.easeOut, _root[mc_name]._x, normalX, speed, true);
            var Y2:Tween = new Tween(_root[mc_name], "_y", Strong.easeOut, _root[mc_name]._y, normalY, speed, true);
        }
    }

    This is not accurate, but it at least works!

    Hope it helps ^^

    I know, the code is enormous, but that's just me and my unnecessary stuff, lol. Hopefully, someone else with better and simpler codes will appear
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  3. #3
    Member
    Join Date
    Nov 2010
    Posts
    37
    thankyou NIG_13, that was really helpful. I went with the second script coz that's what i want. I found that when i clicked anywhere on the image it kept zooming in on the same region. Can you help me zoom into the region that is being clicked please? Also, i would also like to have a pan option.

    thanks so much

  4. #4
    Member
    Join Date
    Nov 2010
    Posts
    37
    hey NIG_13, i figured it out. i didn't know that i have to keep the dot MC on the stage outside the main MC. Now, iti 's just the Panning that i need. please help me with that because i am bad at scripting and i know only the basics

  5. #5
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    You know what, let's just forget that script. This can be accomplish by using a vCam. How many images are there in your Flash? Can I see it? Depending on how it is, we can simplify the matters
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  6. #6
    Member
    Join Date
    Nov 2010
    Posts
    37
    hi NIG_13, i have one image with text here and there that need to be zoomed in. Also, i went with your script you gave earlier. when i click on an area at the bottom it zooms into the area in the top left. can you tell me why that is? and how i can rectify it please?

  7. #7
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    HERE YOU GO

    I know the actionscript is HUGE... but the outcome at least works :/
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center