Professional Web Applications Themes

zoom & scale images in Flash - Macromedia Flash Sitedesign

Can anyone point me to an good application that enables the viewer of a Flash site to scale and move around an image?...

Sponsored Links
  1. #1

    Default zoom & scale images in Flash

    Can anyone point me to an good application that enables the viewer of a Flash site to scale and move around an image?


    Sponsored Links
    chico webforumsuser@macromedia.com Guest

  2. #2

    Default Re: zoom & scale images in Flash

    You don't really need an application that does that, you can build it yourself quite simply. Coincidentally I just posted a script yesterday that, with a simple tweak, will do just that. Refer to the thread 'Shrink to Fit' for more instructions on how to prepare your .fla and here's the script modified to also allow drag and drop:

    onLoad = function () {
    pic._xscale = 25;
    pic._yscale = 25;
    };
    //we've added a variable to check if the picture movie is 'full' (large) or not
    full = false;
    //this is a recursive function, basically that means this function does not fire until it's told to
    function doScale() {
    //here we check if full is false (our initial value), meaning it's not full screen
    if (full == false) {
    pic.onEnterFrame = function() {
    if (pic._yscale<=100 && pic._xscale<=100) {
    // 5 is the speed
    pic._yscale += 5;
    pic._xscale += 5;
    //notice that we set the variable to true meaning that
    //yes, it is full screen
    full = true;
    }
    };
    }
    //now we reverse the function, same script but reducing the size
    if (full == true) {
    pic.onEnterFrame = function() {
    if (pic._yscale>=25 && pic._xscale>=25) {
    pic._yscale -= 5;
    pic._xscale -= 5;
    //we have now reset our movie clip to it's original 25%
    //starting size and we're also resetting the value to false
    full = false;
    }
    };
    }
    }
    //now when we press the mouse we 'fire' our recursive function called doScale()
    //**TIP: you don't have to say do in front of recursive functions, it just makes them easier to read
    //at least I think so.
    pic.onPress = function() {
    doScale();
    //startDrag has six parameters: Target (which in this case is 'this' but it could also be the
    //name of your mc, lockcenter (which snaps the mouse to the center of the image), and
    //left-top-right-bottom (which allows you to limit the _x and _y coordinates of the movie clip
    startDrag(this);
    };
    pic.onRelease = function() {
    stopDrag();
    }

    Follow the discussion in the 'Shrink to Fit' post, add these actions to your movie, see how it works, and then you should be able to tweak it to fit your specific needs. If you have more questions please respond to this thread.

    Doug Richards
    Team Macromedia Volunteer for Flash

    Sprint Corporate Champions User Group Manager
    Member AIGA
    swingb13 webforumsuser@macromedia.com Guest

  3. #3

    Default Re: zoom & scale images in Flash

    Thanks for that. I would however link the viewer to be able to control the scaling and navigation by using control buttons. I am new to action-script and its been tens of years since I had to learn a language. I am working through the tutorials to see if I can use your script and build this movie. Any help you can offer would be gratefully received. Thanks again.


    chico webforumsuser@macromedia.com Guest

  4. #4

    Default Re: zoom & scale images in Flash

    These forums are a good place to start learning actionscript. If you're going to work in Flash I would highly recommend learning scripting as soon as possible. The best resource available is Colin Moock's Definitive Guide to Actionscript from O'Reilly.
    Back to the question at hand, adding control buttons to our original script is simple enough. Currently the user would click the image to change the scale but with a simple tweak or two we can make it triggered by a button. Since we've already created our pic movie clip all we need to do know is create a button that controls the pic mc. Another approach to this would be adding a slider bar that allows the user to scale the image by dragging the bar to increase/reduce the image size. The slider bar will take a lot more detailed coding so for now let's look at simply triggering the actions with two simple movie clips that are acting as buttons.

    1.First, lock the layer that the pic movie clip is on.
    2.Add another layer to your movie (you should now have three layers. Title them: Actions, Pic, and 3.Controls)
    4.Draw a button shape on the Controls layer (for now just a simple box will work, later you can edit the movie to make it look better)
    5.Select everything you've just drawn and make it into a movie clip (F8)
    **TIP: You can use either a button object or a movie clip object. I prefer working with movie clips
    because they are more flexible but it's really a matter of your preference.
    6.Give the new button (movie clip) the instance name ScaleUp
    7.Select the button on the stage and ALT+drag the instance to create a copy of ScaleUp. Give this new instance the name ScaleDown.

    Now we're going to use the basic script we created for our first run with a few alterations, most notably we're going to remove the variable full since we no longer will need to check if the image is full scale or not. We're also going to break apart the doScale function into to seperate recursive function, doScaleUp and doScaleDown. We will trigger each of these functions with our new buttons through onPress events. Additionally we will preserve the drag and drop capability already associated with the pic movie clip but make that functionality specific to our pic mc.


    onLoad = function () {
    pic._xscale = 25;
    pic._yscale = 25;
    };
    //notice we've removed the full variable
    //and here we seperate the original script into two parts
    function doScaleUp() {
    pic.onEnterFrame = function() {
    if (pic._yscale<=100 && pic._xscale<=100) {
    //**TIP: Currently the scale is set to increase to 100% once this function
    //is triggered. As an alternative we could require the user to click each
    // time they want to zoom the image larger, like this
    // pic._yscale = pic._yscale+5;
    //pic._xscale = pic._xscale+5;
    //This method would increase the scale by only 5% every time the user
    //presses the button.
    // 5 is the speed
    pic._yscale += 5;
    pic._xscale += 5;
    }
    };
    }
    //and again we seperate our script into a new function 'doScaleDown' that we will trigger with
    //the scaleDown button
    function doScaleDown() {
    if (full == true) {
    pic.onEnterFrame = function() {
    if (pic._yscale>=25 && pic._xscale>=25) {
    pic._yscale -= 5;
    pic._xscale -= 5;
    }
    };
    }
    }
    //now with our two new buttons we trigger the functions
    scaleUp.onPress = function() {
    doScaleUp();
    };
    scaleDown.onPress = function() {
    doScaleDown();
    };
    //and pic is still scalable and draggable
    pic.onPress = function() {
    startDrag(this);
    };
    pic.onRelease = function() {
    stopDrag();
    };


    Keep in mind that currently this script is designed to function with a single image. When you move into creating your viewer you will have to make a decision on if you want to hard code the names of each movie clip for each function or if you want to work with an array that stores the names, which you then reference dynamically. Since you're new to actionscript I would recommend that you make the effort to understand how array's work and how you can build your own. Array's can be a deep subject so rather than going into an in-depth tutorial here I would recommend you read all the infomation available here at Macromedia.com on array's in Flash. Check out the developer center to get started. To give you a quick glimpse of their power try this:

    Create another movie clip with a seperate image. Name this one picB (don't forget the instance name). Now add this to the top of your actions:

    Names = [pic, picB];
    //set the stage dimensions of all the objects in the array
    for (i=0; i<=Names.length-1; i++) {
    Names._xscale = 25;
    Names._yscale = 25;
    }

    See how both movie clips are scaled down to 25% now? That's just a taste of how to work with array's. Good luck and post again if you have questions.

    Doug Richards
    Team Macromedia Volunteer for Flash

    Sprint Corporate Champions User Group Manager
    Member AIGA
    swingb13 webforumsuser@macromedia.com Guest

  5. #5

    Default Re: zoom & scale images in Flash

    Many thanks for that.



    chico webforumsuser@macromedia.com Guest

Similar Threads

  1. scale images
    By Kiriran in forum Coldfusion - Advanced Techniques
    Replies: 3
    Last Post: February 21st, 04:38 AM
  2. Fitting Flash While Keeping Scale
    By gilberb001 in forum Macromedia Flash Sitedesign
    Replies: 5
    Last Post: April 4th, 10:22 AM
  3. HowTO: re-Scale an ENTIRE flash movie ??
    By Bob in forum Macromedia Flash
    Replies: 4
    Last Post: February 15th, 03:34 PM
  4. Scale IE frame to Flash file
    By Knewt webforumsuser@macromedia.com in forum Macromedia Flash Sitedesign
    Replies: 2
    Last Post: January 25th, 11:07 AM
  5. FS. Nikon 801, zoom lenses, Flash
    By Dave Hall in forum Photography
    Replies: 1
    Last Post: August 6th, 07:05 AM

Bookmarks

Posting Permissions

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139