The Pan|Zoom component on a website?

Stumbled across the Pan|Zoom and want to use it on my website, have a large scale image to place in a small area, much to what the webpage I came across does:
Have managed produce it with my image in a SWF and Air file, although I am used to putting the swf into a html page, but then launch the page, the image doesn't show and the application does not work, as it needs the other files/code to run it.
Am I totally off track, as I want it just in one self containing swf... I am very much a newbie to flex/flash builder 4.
Any help would be greatful, haven't altered any of the orginal code just the image within it.

I found a technique to pan/zoom somewhere on the 'net, can't remember where, but I adapted it to pan/zoom an image.
(Flex 3)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" width="100%" height="100%"
    verticalScrollPolicy="off" horizontalScrollPolicy="off"
    creationComplete="initApp()" >
        private var draggedObject:DisplayObject;
        private var imageMatrix:Matrix;
        private function initApp():void{
            imageMatrix = img1.transform.matrix;
       private function startDragging(event:MouseEvent):void{
            draggedObject = DisplayObject(event.currentTarget);
        private function stopDragging(event:MouseEvent):void{
        private function onMouseWheel(event:MouseEvent) : void{
            // set the origin of the transformation
            // to the current position of the mouse           
            var originX:Number = stage.mouseX;
            var originY:Number = stage.mouseY;           
            // zoom
            imageMatrix = img1.transform.matrix;
            if( > 0 ){                   
                //limit zoom:
                if (imageMatrix.a > 3){
                // zoom in
                scaleAt( 6/5, originX, originY );
                //limit zoom:
                if (imageMatrix.a < .26){
                // zoom out                   
                scaleAt( 5/6, originX, originY );
        public function scaleAt(scale:Number, originX:Number, originY:Number) : void{
            // get the transformation matrix of this object
            imageMatrix = img1.transform.matrix;
            // move the object to (0/0) relative to the origin
            imageMatrix.translate( -originX, -originY );           
            // scale
            imageMatrix.scale( scale, scale );           
            // move the object back to its original position
            imageMatrix.translate( originX, originY );           
            // apply the new transformation to the object
            img1.transform.matrix = imageMatrix;
            //set the label's text:
            txtZoomLevel.text = 'Zoom Level: ' + imageMatrix.a.toPrecision(2).toString();           
    <mx:Image id="img1"
        x="50" y="50"
    <mx:Text x="15" id="txtZoomLevel" width="137"
        color="#ffffff" text="Zoom Level:" bottom="20"/>

Similar Messages

  • Mouse cursor dissapears in The Pan|Zoom component

    When using the Pan|Zoom component found at inside a mx:Window in my AIR application, the custom mouse cursors (draghandOpen, draghandClosed) are not shown. The mouse cursor just dissapears when rolling over the ImageViewer.
    From the Pan|Zoom code:
                    case "mouseOver":
                        // cursors
                        if (_client.viewRect.containsRect(_reciever))
                        } else
                            cursorID = CursorManager.setCursor(_iconHandOpen);                       
    This works fine when running the source at as an AIR application. Why won't it work in a mx:window?

    I found the solution here: ndow/
    The problem was fixed by changing CursorManager.setBusyCursor() to myAIRWindow.cursorManager.setBusyCursor();

  • Adobe's Pan|Zoom component not fitting the content area

    I'm calling centerView method on handleLoadComplete event ( so the image will be adjusted to fit the content area when load is complete, but I'm having problems when testing this on Internet Explorer. Using Firefox it works fine, but on IE it only works after pressing Ctrl + F5.
    Do you know how can I fix this?

    Making it zoom and pan was a bit tricky, but I had it done
    two months ago (in july). The integration of the pan zoom with
    callout ("kind of spots on the map", the other published FIG
    componet) repositioning was bit tricky.
    I solved it with pointTransformations, but it was too
    expansive, in terms of memory. In my first trial, theyre positions
    were recalcuted as you pan and zoom.
    Now, in the version I published here
    you dont hav smooth zooming, and the callouts only are
    repositioned after your drop the map.
    I am working now on it. Im probably going to make then blurry
    or transparent while panning, but as I got this message from the
    foruns and I had promissed another guy who contacted me a (working)
    version, I decided to publish it on my blog.
    Hope it will be usefull.
    Please, be aware that not really a small application: it has
    lots of classes. Please read it all before contacting me with any
    Best luck :0)

  • Pan Zoom Component

    I wanted to know the license requirement for Pan Zoom component available in Flex store as a sample application. Is it fine to use the code in commercial applications?

    Normally, the sample code used in Adobe articles is free reign to use in commercial applications.  I have no ide if Adobe ha a formal documented license, though.

  • I have cross dissolve transitions set between images and videos, and I have the pan/zoom hold setting at "0." Despite the "0" setting, my images are static until the cross dissol

    I have cross dissolve transitions set between images and videos, and I have the pan/zoom hold setting at "0." Despite the "0" setting, my images are static until the cross dissolve is complete. I want the pan/zoom feature to start the moment the subsequent image becomes visible. Is there a solution?

    I am not sure if I am zeroing in on what you seek so please clarify...on
    I want the pan/zoom feature to start the moment the subsequent image becomes visible.
    Do you mean fading in visible versus or completely visible at the end of the transition? Whatever the case, I have not
    found a scenario to fit what you are describing.
    However, here are my suggestions for you to consider...
    1. What is the alignment of the Cross Dissolve transition - Left Clip, Between Clips, or Right Clip. If Between Clips, please try Left Clip alignment.
    2. What is the duration of the Cross Dissolve transition - you could try varying the transition duration. If less than 1 second, then please read the
    details for minimum transition duration in the following
    Please let me know if any of the above worked for you in what you were seeking regarding pan and zoom effect and video transitions.
    Thank you.

  • Why can't the Pan & Zoom Tool start with the whole frame using photos

    I've used the pan and zoom animation in Microsoft Movie Maker - and want that same ease of use in any other program (I find it doesn't do a great job of soundtrack and text/image placement) see menu options below....   I Purchased Premiere Elements after watching a short video of the pan & zoom tool - however now that I am trying to use it it falls way short.
    Is there a way to allow me to select the whole photo as the starting frame -- in the screenshot below the frame 1 will not extend to the whole photo so I start off with a cropped image.  I want the full Frame of the photo and then be able to zoom and pan in toward faces - while I can still do this with the cropped frame I loose a good deal of my photo and the context it provides.
    The Microsoft Movie Maker options - very easy                        |              Limitation of Premiere Elements 13 to start with the full photo frame

    You might like to ask that question in the Premiere Elements forum
    Premiere Elements
    It looks to me as though the aspect ration of the photo and the video frame are different and therefore something has to be cropped off.
    But I could be wrong

  • How do I restore default functionality to the Pan & Zoom tool?

    When I select the Pan & Zoom tool, the image on the left is what I get - the green bars that used to appear are gone:
    What step by step procedure do I need to follow to get those green bars to appear like they used to? The green bars disappear ONLY when I place a video in the timeline.  If I place a still photo in the timeline the green bars are there like they should be.

    From your previous threads, it would appear that you are using Premiere Elements 12 Mac. Is that correct?
    Is this a "it worked before but not now" or "it never worked before" type of issue?
    I am strictly an Elements Windows user, and, when I select Tools Menu/Pan And Zoom, the project gets taken into the Pan and Zoom workspace that looks like
    Is this what you are used to seeing when you used Tools Menu/Pan and Zoom Tool? I think that I lost you when
    you wrote
    If I place a still photo in the timeline the green bars are there like they should be.
    After I click Done to the Pan and Zoom workspace, the project goes back to the Expert workspace and the panned and zoomed photo has no green marking(s) on it. The panned and zoomed photo that goes back to the Expert workspace does have an increased duration compared to the original Timeline photo.
    Could you point out what the green bars are that you are referring to?
    I have never seen a Premiere Elements 11 or 12 Pan and Zoom workspace that looked like your screenshot.
    What were you doing in the program when this problem occurred?
    I would suggest that you make sure that
    1. You have updated the program from 12 to 12.1.
    2. You have deleted the Adobe Premiere Elements Prefs file (Users/user name/Libraries/Application Support/Adobe/Premiere Elements/12.0)
    3. If that does not work, then I would suggest a complete uninstall/reinstall of the program.
    Is the Pan and Zoom Tool the only feature that is not working and/or displaying correctly?
    We will be watching for your follow up.
    Thank you.

  • I can't change the pan / zoom duration in Premiere Elements 13

    Ok I'm getting really frustrated especially after I just watched a video tutorial which clearly shows how to do this in Premiere Elements 10 and I have JUST purchased version 13!
    What I'm not able to adjust is the speed or duration between focus frames in a pan / zoom; after it's set up.
    You are supposed to be able to go into the PAN TOOL, and either click on the pan duration, or in the In the Pan Time dialog, scrub the time duration to the desired value, or enter a value in the dialog box, OR simply adjust / drag the focus frame markers in the timeline (like in the video tutorial I watched...) to change the pan duration.  In my software at least NONE of these work.  (All these from:  Adobe Premiere Elements Help | Pan and zoom to create video-like effect)
    I can't click on the pan duration, well if I do nothing happens, I can't even get a Pan Time Dialog box; so I can't do it that way; and lastly I can't click and adjust the focus frame markers in the timeline....none of it works and I can hardly believe that this is correct...the only way that I can adjust the pan time, is to delete the effect completely and start it over...this can't be correct can it??
    Any help would be appreciated!!!

    Ok yep you are great, so I'm sorry I'm attempting to do it on video clips, not stills. 
    I was aware that the last versions of PE had similar Pan and Zoom workspaces, that's why I knew or thought I knew that my situation could be solved.
    The first link that you recommend is exactly where I got the third paragraph of my question, so I had already reviewed that and to me when you read the directive it still makes it sound like you can adjust the focus frame markers....?  (very confusing)
    The second link you sent might have helped me realize that the tool doesn't work the same way for Stills and it does for Video clips; (I really think like on the Adobe web site this difference should be markedly more clear to help with confusion; but in their defense maybe it's me being slow to understand)
    I was able to figure out some of the difference through perseverance last night, and did figure out (like your last link explains) that you can move the CTI and then add a new focus frame...BUT I still have my original can you adjust the pan duration on a video clip after it's been made and you have left the pan and zoom tool like if you want to edit that timing... I think the answer is that you can't lol, I think it has to be deleted or a new focus frame added and the other deleted to adjust the I correct?
    This quote is taken from the Adobe web site one of the links you shared 
    You can work with focus frames in videos the same way that you work with focus frames for images. However, only those options that are relevant to movie clips appear in the pan and zoom tool.
    I think maybe the last sentence is attempting to explain that but it's just so ambiguous...
    Just trying to figure it out!  I do appreciate your help! 

  • Pan zoom tile

    I ran across this interesting flex application but the
    problem is it loads this huge image and you can pan and zoom on the
    huge map image. But what if you wanted to load a whole bunch of
    images when you pan left right up or down and it will load the
    corresponding image for that zoom scale you are in. Is there any
    tutorials how to accomplish this i am turning my head on this
    because this mapping pan zoom tile is a very interesting topic to
    have a tutorial on.
    Here is the link
    zoom flex example

    I have such a beasty.
    I have been looking a the pan zoom component for some ideas.
    If you are still interested I would be interested in

  • Ease in/Ease out is clunky for pan/zooms

    I'm using FCP 5 with 10.5.6. When panning and zooming around in a still image (photo), I just can't get an easy landing or stop at the end of the motion, no matter how I adjust the ease in/ease out speed. After choosing Ease in/ Ease out on a keyframe, I shove the little blue speed-control bead toward or away from the keyframe along the motion path, but that distance is limited, and I see very little difference in the result. The motion still stops with a perceptible jerk or clunk.
    I have used applications like Photo-to-Movie that have great control on the speed of pans and zooms, and the motion of a pan or zoom starts or stops very gently and almost imperceptibly. Photo-to-Movie costs only $25, so I can't see why an expensive professional program like Final Cut can't do the same thing. I can do smooth pan/zooms in PTM, export the result as a DV clip, and then drop the clip into Final Cut, but I can't adjust the motion within FCP. And working in an outside application to import the results is a real slow-down.
    Assuming that the Ease in/Ease out control is all the control you have for smoothing pan/zooms in FCP, and it's inadequate, is there any plug-in for FCP 5 (free or at least inexpensive) that will produce gentle starts and stops?

    Thanks for all the comments everyone, and thank you also Tom Wolsky for your great tutorial books and DVDs that have helped me to gain some competence with Final Cut. I recommend them highly to anyone learning the program.
    To shed some light on the purpose of my original post, the project I'm working on contains both video footage and still images. In this video I'm demonstrating how to paint pictures, while using still images of historic paintings as examples of how the old-time painters did things, compared to what I'm doing now.
    So in this video I alternate from live demonstrations of painting, to still images of old paintings, slowly panning and zooming around the old paintings and stopping to analyze portions of them.
    I find that there is something comfortable and soothing about good pan/zooms as compared to the unsettling feelings and irritation caused by watching jerky starts and stops, with unnatural acceleration and deceleration between.
    You have all made it clear to me (thanks again) that it is a matter of the mathematics involved in Final Cut's treatment of pan/zooms that makes it hard to get smooth movements of that type in FC. I still think it's odd that I can get wonderful pan/zooms from a cheapie little program like Photo-to-Movie but not a pro application like Final Cut, but at least PTM can get the job done for me, although it is a slowdown to have to use it. I first have to create the pan/zooms on still images in PTM and then export them as DV clips to drop into Final Cut. If a pan/zoom then needs adjustment, I have to throw the clip away, go back to PTM and modify the movement, and then export a fresh clip. Very slow.
    By the way, I visited the Photo to Movie website, which I haven't done for a long time, and I see that the price of the program has now doubled to $50. The authors have apparently gotten big ideas and have added transitions, titles, and other kinds of editing besides just movement. On their demo webpage <> you can see sample pans and zooms created by the program. The third sample movie down from the top, with the zebras, shows some of the types of motion I'm after, such as the scene that zooms gently in on the turtle's head or the dog near the end of that movie. Note how smooth the starts/stops are.
    In my own YouTube movie <>, which I created in Final Cut in 2008, the paintings that leap out at you with music at the beginning were also created in Photo to Movie and dropped into Final Cut. In that case the motion is almost violent, and no doubt I could have done it just as easily in Final Cut, but at that time I was new to keyframing in Final Cut and had gotten so accustomed to the ease of doing such things in PTM that I used it for that too. A few minutes further along in that video you can see the kind of gentle pan/zooming by PTM that I'm trying to create again now in a new video. My failed attempts to do it in Final Cut a couple days ago are what led me to ask for help here.
    Maybe if I can gain a better grasp of Motion 2 I could do better with it than my first attempt yesterday, and I could also also round-trip between Motion and Final Cut to quickly adjust the movements, but I just don't know the program well enough yet to do that. I'll search for tutorials and demo movies on Motion. Someone above has also said that Motion 2 is inferior to version 3 in this respect, and I don't have 3, so I guess I'm stuck with Photo to Movie for the present to get smooth pan/zooms.
    Thanks again everyone for all the enlightenment on this subject.
    Tom B.

  • Pan & Zoom Not Working in PP4

    Using PP CS4 with 8 years experience with Premiere, am having trouble with this effect. Effect Controls > Motion > Position & Scale controls are all there but the resizing for keyframes is not having any visible effect in either Source or Program monitors. The clip remains exactly as it was imported at full, uncropped view. Please help. Thx

    Just for clarification, are you using the Pan & Zoom for a SlideShow in Encore, or are you using the Fixed Effects>Motion>Scale & Motion>Position in PrPro?
    If the latter, then I would post to the PrPro CS4 and Earlier Forum.
    In the meantime, and in case you ARE encountering this issue in PrPro, let's go over the steps to do Pans & Zooms in the Effects Control Panel.
    First, in your Timeline, Select your Still Image (or Video Clip).
    If not in focus, get Effects Control Panel open and in front in its Pane.
    Place the CTI (Current Time Indicator) /Playhead at the first Frame of that Still/Clip.
    Look at the Fixed Effects list in Effects Control Panel, and for Motion, twirl that Open, to reveal both Scale and Position. Twirl those Open, to reveal their sliders.
    For a Zoom, click the little Stopwatch icon next to it, to toggle Keyframe animation ON, and place a Keyframe on that First Frame.
    At this point, that Keyframe will have a value of 100%, or original size. If one needs to adjust that, say for a Zoom Out to full Scale, but needs to start Zoomed In, set it to where you wish to start.
    Move to the time (on the Timeline, or on the mini-timeline in Effects Control Panel - the CTS's are linked), where you want the Zoom Out to end, and click the New Keyframe button, the filled circle in the ◄●► icon. A new Keyframe is added at that spot. Now, adjust the Scale to what is desired there.
    One can adjust the Interpolation between those Keyframes, if desired, but that is something that one will be better off, if they read the full section on Keyframe Interpolation in the Help Files.
    If one wishes to add a Pan, then the same process is repeated, but for the Fixed Effect>Motion>Position.
    Good luck, and hope that helps,

  • Is Copy Paste Pans & Zooms Possible in Photoshop Elements Slide Show Editor Slideshow?

    In the Photoshop Elements Slide Show Editor, someone wants to create a unique pan and zoom effect for one photo and be able to apply it the the rest of the photos in the Filmstrip without having to do that on an individual photo basis.
    In the Slide Show Editor, Edit Menu/Apply Pan & Zoom to All Slides or Apply Pan & Zoom to Selected Slide(s) does not get the job done. Instead it looks like it just applies the default Photoshop Elements pan and zoom. I have investigated several routes to the goal unsuccesful and have concluded that Photoshop Elements Slide Show Editor offers no such copy paste pans & zoom feature.
    I have detailed how to add more than one pan & zoom per slide, how to get the pan & zoom copy/paste job done in Premiere Elements, either doing all the pan & zoom in Premiere Elements or creating the pan & zoom in Photoshop Elements for one slide, using Send to Premiere Elements, Break Apart Adobe Photoshop Elements Slideshow, copy/paste of the transferred pan & zoom. Believe it or not, that does work. I know that there will be skeptics who feel that the pan & zoom timing would be distored, but....This person does not have or want Premiere Elements in the equation. So, I am looking for a way out for her.
    I am posting the question here for someone to confirm my conclusion or offer a way that has escaped me. If someone has found a way, he/she will be fully created for the contribution and thanked.

    Copy and past funtionaliy is not available  in pan & zoom feature. Please do a feature request.

  • Pan & Zoom in PRE7

    I have Photoshop Elements7 and Premiere 7 and I have a few basic questions.
    I prefer the pan & zoom effects in PSE7 over the presets in PRE7 when I make DVD slide shows.
    I don't like the black box effect surrounding the image when zooming in PRE7 so is it possible to duplicate the PSE7 effect in PRE7?
    Is there any "ideal" image size when importing my images?  I understand the final image size would be 720 x 576  for a PAL system.
    I note PRE7 manual states it can handle up to 4096 x 4096 pixels but I think that would use up an incredible amount of space on the DVD however as I understand it providing the files are in PSD format PRE7 will size them automatically to 720 x 576 for the PAL system.  To allow for upsizing in a zoom I would need to have the image sizes say 1200 x 800.
    Are my assumptions correct?

    I don't know about your manual, but my books recommend you keep your images no larger than 1000x750 pixels in size. 4096x4096 would likely stop all but the most powerful computers right in their tracks -- and even if it did work, the program would likely choke during output to DVD.
    So trust me. Keep it at 1000x750 or smaller.
    There are a number of ways to do pans and zooms in Premiere Elements, so I'm not sure what you're comparing when you say pan & zoom effects vs. pan & zoom presets.
    The presets are set up for various sizes of photos, as can be determined by the names of the preset For instance the 920x1280 Zoom In preset will work perfectly with a 920x1280 pixel photo. If you match the photo sizes with the preset you won't get a black box around the outside.
    But the best way to get good, custom pans & zooms is to use keyframing.
    I cover keyframing in my books -- and show you some advanced tricks with keyframing in my new "Cool Tricks & Hot Tips for Adobe Premiere Elements." I've also got a Steve's Tips article "Basic Keyframing PDF" you can download from the site for free. I also cover it in my free "Basic Training with Premiere Elements" tutorials.
    Finally, if you prefer to use presets, I've got a set of free presets made to fit perfectly with 1000x750 pixel presets. Instructions on how to use these presets are included with the download.You can download it here., by the way, is a great resource for learning and mastering this program!

  • Pan & Zoom with overlay functions

    Want to craete a zoom & pan image, that also has overya layers that can be swicthed on/off.
    Say theer are 8 levelo of overlaid information activated from a static key sitting outside teh pan/zoom area. Selecting these turns on/off indivusla overlay layers insode of a zoom/pan area.
    Is this possible? If i'd really appreciate some instrcutions.
    Many thanks

    If I understand your question correctly, you'd like to have some overlays on top of a pan & zoom image ? It wouldn't be too difficult to let some buttons switch a few Object State to several overlays. However these states won't scale accordingly with the pan & zoom, if that's what you want...

  • "Stuttering" when panning/zooming a still image...?

    I'm working on a small project which is basically a series of zooms/pans on still images. The pans/zooms are quite slow and take place over about 6-8 seconds. There's nothing too fancy going on here, but I notice that when I do a RAM preview or render out a comp, I get small "stutters" in some of them. Does anyone have any ideas why this would be happening and any suggestions on making these animations a little more "smooth". I mean, these things aren't complex at all, and overall they're quite smooth, but there's still times when I get these stutters and I can't figure out why they'd be happening? Would appreciate some advice!

    There are certain speeds that sync up with frame rates so that they cause judders, jitters, stuttering or whatever you want to call it. The slower the frame rate the more obvious the problem.
    If you've ever watched a western on TV or at the movies you've seen the stagecoach wheels turn backwards at various speeds. This is an example of the problem. It's actually called a stroboscopic effect. Mechanics, in the good old days when cars had carburetors and distributors, used to hook up a timing light to the #1 spark plug so that a light flashed on a timing mark on the crankshaft pulley. This light had the effect of stopping the rotation visually. That's exactly what's happening when you are moving your photograph across the frame at one of the critical speeds. Your eye is fooled and your brain can't process the movement smoothly.
    There are also other cases where the sub pixel interpolation between frames causes areas of detail to flicker between frames. The latter problem can be seen by viewing your comp a frame at a time while zoomed in to say 800% and observing the edge detail. This problem can be especially nasty when you're trying to do a smooth title or credit roll. The horizontal lines that make up fine type can almost completely vanish between fields or frames if the text is moving at the wrong speed. You can test this out by creating a single pixel high horizontal line in AE and animating it from bottom to top of the frame. The only speed where you'll get a nice solid line in every frame or field is one that is an exact multiple of the frame rate. IOW, 1 frame 1 pixel of movement, 1 frame 2 pixels of movement, and so on. Move at 1 frame and 1.33 pixels of movement and the line will appear to completely disappear then return.
    If you are working at 24fps progressive you'll find that the juddering caused by motion at critical speeds is much more problematic than projects at 29.97 fps. Interlacing, as was mentioned before, helps and gives you a wider range of motion, but interlacing can introduce more pronounced flickering in the detail if you are right at one of these critical speeds.
    This problem extends to shooting as well. Cinematography manuals contain critical panning speed charts that list the number of degrees per second you can pan with various lens (angle of view) and shutter speed combinations. There isn't a videographer out there that's tried shooting 24P video and not ended up with an unusable pan due to these critical speeds.
    The solution to successfully animating detailed images is to use the right speed (pixels per second) for your frame rate, add extra motion blur to hide the problem, or reduce the amount of detail in the image. These are the only solutions that I know of. They all limit design and timing, but what good is your design if it makes your eyes go buggy.
    The best way I know if to tell if the problem is a playback issue is to use a device or program that tells you when you're dropping frames. You can use QT (by looking at the playback rate) or in FC or PPro by having the program report dropped frames. If it's a data rate issue you need more horsepower or a better codec. 

Maybe you are looking for