Free AS3 Panning Fullscreen Image Class
  • I made another class to add to your tool box of Full Screen Image classes. This class is great, it will take your image and fined the closes size to fill the full screen of the browser with the image and then pan the areas of the image that have been clipped off. This also has on the fly resizing for browser resizing and will know if it needs to pan vertically or horizontally automatically.

    Example:
    Note Click on the example to go in to full screen mode.

    KEEP THE WEB FRESH!! Get Adobe Flash player

    Initialization is simple just import the class create a new instance with a url in the constructor and addChild and you have a full screen image that pans. I have added a example fla in the zip as well.

    Enjoy.

    If you found this helpful please donate.

    Link to Zip file: panning-fullscreenimage

    ::::UPDATED::::::


    This has been updated by a full screen library class that can do video, images and swf files.
    Please be sure to read http://gfxcomplex.com/actionscript3/free-as3-image-and-video-full-screen-library/ for more info.

    Share and Enjoy:
    • Digg
    • del.icio.us
    • Facebook
    • Google Bookmarks
    • Technorati
    • LinkedIn
    • RSS
    • Twitter

    February 14th, 2009 | Josh | 25 Comments |

About The Author

Josh Chernoff

I'm a flash developer/designer currently living just out side of St. Louis. I have been working with Flash and AS3 since 2006. I have been recently learning about 3D modeling and motion graphics. Feel free to look at my portfolio to see what I have been up to. http://gfxcomplex.com/portfolio

25 Responses and Counting...

  • Comet! 02.14.2009

    Hi,
    Nice example.

    I am trying to implement it on my machine. I have this error:

    Main.as, Line 4, “1046: type was not found or it is not a runtime compilation constant: TextField” Origin: import com.gfxcomplex.display.PanningFullScreenImage;

    I think this could be due to my classpath but I am not sure.

  • You need to import the TextField class. “import flash.text.TextField”

  • also, use the main.as file as the document class.

  • Ok, thank you! Is great!

  • I got this error:

    Main.as line 1 1180: Call to a possibly undefined method addFrameScript.

    why is your main.fla not working?
    Too bad, because it looks awfully nice.

  • @Gerhard Barst

    That’s a strange error, I dont get that error so I don’t know what to say. sorry.

    Since this class does not require the fla that I provided you may just want to import the class in a new Fla and use it that way. The fla I provide is for example only.

    Any one else getting this error?

  • Do I have to compile the main.fla in CS4?
    If you provided an example, then I suppose you want it to be compiled by the downloader? Or is it just a placeholder and not to be supposed working without further modifications?

  • The main.fla should be saved as a CS3 version.

    but once again you can just point to the main.as file in a new fla
    Just create a new fla place it in the source folder and set the document class to main.as

    Though you may want to comment out the bit about “loading_txt.text = String(int((e.bytesLoaded / e.bytesTotal) * 100));”
    unless you put a text field on stage called loading_txt you will get a error.

  • Hi. I just would love to know what you do to make the image perfect even when the image resizes. When I resize my images it always get weird. Thanks for any tip.

    Another thing is that I’m new and can’t use classes easily. I am lookin for some panning solution, both vertical and horizontal. Have any tip for me?

  • Hi Rui,

    I don’t understand do you mean your having a problem with images that use my class?

    As for the “New to classes” thing, you just have to spend the time to learn there is no easy way around it. My classes will do every thing you have asked for thats the best tip I can give.

  • HI. I don’t mean that. Your class is great and I am trying to understand it. I am just making a question outside your class. Inside flash, everytime I resize an image it became weird. In this example you gave me the image is always 5 stars. How this resize works so the image is always great? Thats my question :)

  • Hi Rui,

    One key thing is to use bitmapsmoothing, the other is to keep the images equal in scale

  • Hi,
    When I use my picture/url
    It works when I’m testing the movie but when I want to publish it, it doesn’t work anymore.
    It works however with original picture/url.
    What am I doing wrong?

  • Hey, great stuff, thanks for sharing. I’ve been able to apply this class with great ease there is only one problem that I encounter. I have a horizontally scrolling image and it works well except when it gets to the beginning of the image than the image disappears and you can see the loader. I’ve been trying to figure out the problem with no luck.

    Thanks for your time
    Cheers.

  • Loving the module!!

    Is there a way to cause the image to fade in upon loading? (using transition / setstyle etc)? I don’t want to loop the alpha value up (although the image does respond to alpha attribute settings)

    An example would be great. Thanks

  • Ooops…comment in the wrong forum…

  • This class works great on a PC, but on a Mac the loaded image disappears when you click off the browser (for example if the browser isn’t full size and you click elsewhere on the screen to open a second browser or do anything else). Thought it might have to do with the Full Screen option so I took that function out in a test version, but the loaded image still disappears. Even modified the PanningFullScreenImage class, took out the event listener for Event.REMOVED_FROM_STAGE, onRemoveFromStage but still the image disappears on the Mac… No change on a PC though.

    I actually think the image is reloading on the Mac. I see the loader again immediately after clicking off the browser, but the image won’t appear again until I click back on the browser, as if the stage click reloads the image.

    Anyone have an idea how to fix this? My boss is on a Mac, so not having it work on a Mac isn’t an option! For an example of what happens, I’ve uploaded the example provided here, exactly as downloaded, no mods. Here’s a link: http://www.jupiterxo.com/fullScreen/bin/PanningMain.html

  • Sorry about any problems you are having I will see what I can do when I get a little time.

    Though I don’t have a mac so it would be great if I could get you to test for me.

  • Hey Donna, I don’t know if you’ve figured out the problem with the image disappearing, I ran across your post looking for an answer to the same question. I think I found the solution on another blog. Here’s the post:

    What I found out (for a different project) was that MOUSE_MOVE seems to active when you MOUSE_DOWN as well, so for instance I was creating a video player who’s controls faded out when the mouse left the stage but I found that when the user was clicking, or selecting text, etc on other parts of the site the controls would appear. This got to me to using a hitTestPoint() with the mouse and stage to make sure that the user’s mouse was actually interacting with the Flash movie, and to cut a long story short it worked like dream.

    So I thought I’d try the same method with the parallax box and it also worked rather nicely. I added this method to the class:

    private function isOverStage():Boolean
    {
    var mouseX:Number = stage.mouseX;
    var mouseY:Number = stage.mouseY;
    return stage.hitTestPoint(mouseX, mouseY, false);
    }

    then I wrapped the contents of the onFrame() method already in the class with a simple if statement:

    private function onFrame(e:Event):void {
    if (isOverStage())
    {
    [rest of existing code]
    }
    }

    This means that the parallax box will still finish off the movement it started before the mouse left the stage, which I found looked a bit smoother than pausing.

  • Is there a simple way of making this pan effect not full screen – i.e – in a small box within the flash page?
    A bit like this:

    http://www.dangleberries.com/

    (Click on a thumbnail once inside the site to see what I mean).

    Thanks!

    Bye.

  • @Gerhard Barst

    you got that error becuase probably you put the line “import flash.text.TextField” in the timeline of the main document.
    instead you have to out the cose in the main.as

  • @ceexco

    Thanks that worked!

  • ben

    Hi there,

    Love the class!
    Just one small thing…
    I’m importing the class into my main.fla and i’m trying to track the progress of the loading image from within this fla. (so that I can build a loading bar).
    Any tips?

    Thanks

    Ben

  • ben

    Where did my question go?

  • The class extends the loader class so it disparages all the same events as events and you can listen to the PreloaderEvent

Leave a Reply

* Name, Email, and Comment are Required