6 Replies Latest reply on Nov 24, 2014 12:04 PM by Ottographix

    Zoom in and out on stage?

    Ottographix

      Hello All,


      I am creating an interactive map in Edge Animate and was wondering how to zoom in and out on the stage.

      In other words...I have an image that fills the page but everything looks very small.

      I need to have zoom in and out buttons for users.

      It's also OK if the mouse scroll zooms the image, or some other option...I just need to be able to zoom in and out somehow!

       

      To be clear....I am NOT looking to have it scale to the width of the browser. I need the image itself to be able to zoom in and out.

       

      Anybody have any ideas?

      Any help is appreciated. Thanks!

       

      Jason

        • 1. Re: Zoom in and out on stage?
          resdesign Adobe Community Professional & MVP

          There are several jquery plugins to do that.

           

          On Wed, Nov 19, 2014 at 5:13 PM, Ottographix <forums_noreply@adobe.com>

          • 2. Re: Zoom in and out on stage?
            Ottographix Level 1

            Hi Redesign. Thanks so much for your recommendation

             

            I actually found and purchased a jQuery zoom: http://vectorflower.com/preview/smooth_zoom/sample5.html

            Sample 5 is pretty much exactly what I was looking for.

             

            BUT (and there's always a but isn't there?)...I can't for the life of me figure out how to get this into my Edge Animate project.

            This is the project I am working on: Untitled

             

            I'm just starting on it, but you can roll over "The Westin" in the upper left corner and see what I started to do. Just a simple rollover with a box and text. I will be adding a bunch more to this map.

             

            I am trying to get the entire thing to zoom in, and I'm not sure if it's possible with the jQuery zoom I bought.

             

            The jQuery zoom instructions say:

            1. First set ID attribute for the image in your web page. For example:
            <img id="yourImageID" src="your_image.jpg" />

             

            ...but I am adding all those rollovers in Edge Animate and it is going to be a "symbol"...not an "image".

            I'm not sure how to make it work for a symbol or if it's even possible.

            • 3. Re: Zoom in and out on stage?
              Ottographix Level 1

              oops...accidentally posted that before I was finished!

               

              In closing...I am going to try this using Dreamweaver and the jQuery plug in, but would really like to know if I can use this zoom in Edge Animate on a detailed symbol.

               

              There's also more code to add:

              2. Inside the head tag of your page, paste the following style:
              <style> .smooth_zoom_preloader { background-image: url(zoom_assets/preloader.gif); } .smooth_zoom_icons { background-image: url(zoom_assets/icons.png); } </style> 
              3. Inside the head tag of your page (below the style added in Step 2), paste the following code:
              <script src="zoom_assets/jquery-1.11.1.min.js"></script> <script src="zoom_assets/jquery.smoothZoom.min.js"></script> <script> jQuery(function($){ $('#yourImageID').smoothZoom({ width: 512, height: 384 }); }); </script> 

               

              OK, that's it! Any help would be appreciated

              • 4. Re: Zoom in and out on stage?
                resdesign Adobe Community Professional & MVP

                Let me look at it and try to figure it out.

                In the mean time check out these samples made in the earlier version of Animate. NOt sure what they use since I did them a long time ago.

                Zoom example.zip - Box

                Zoom Test.zip - Box

                 

                I think I have some others but I do not remember where they are at this moment.

                • 5. Re: Zoom in and out on stage?
                  resdesign Adobe Community Professional & MVP

                  Could you post a link to your files so I can check it out? Also, what version of Animate are you using? Could you post a link to the plugin you got?

                   

                  Some instructions about plugins from earlier versions. I need to make a new plugin I think.

                  • 6. Re: Zoom in and out on stage?
                    Ottographix Level 1

                    Hi redesign,

                     

                    Thank you so much for your willingness to help

                    I see you're name around a lot and appreciate your expertise.

                    I'm looking forward to playing around with and getting more familiar with Edge.

                     

                    Anyway...I found a work-around for the zoom I was trying to create.

                    I showed the client a basic version with the map zooming out to the user instead of the user zooming in on the map.

                    The client liked it so I'm just going to go with it for now!

                     

                    FYI, this is what I am working on. I'm just starting...so only one button in upper right corner is working right now:

                    San Diego Gaslamp Interactive Walking Map

                     

                    Thanks again redesign!

                     

                    Jason