How do I show a full-size image?

[MayuZane]

How do you make it so that a full-size image will appear on a new (flash) window when you click a button, like how the applegeeks.com comics do here? (Click on 'previous comic' and you'll see what I mean)

Thanks in advance.

[zizdodrian]

You'd have to code a library yourself. This little clump of code should start you off - you'll need no special symbols or assets to get it to work, but I can't shake the feeling that I've left something out...:

Button Code:

Code:

//put this on the frame in which your button is stored

var IMGLoader = new MovieClipLoader()


//this is the code for your button. Make sure Stage.align = "TL", or you will have to change some of the positioning settings.

on (release) {

    if (loadbox) {
       _root.loadbox.removeMovieClip()
    }

    if (behindloadbox) {
       _root.behindloadbox.removeMovieClip()
    }

    if (obscurer) {
       _root.obscurer.removeMovieClip()
    }

    _root.createEmptyMovieclip("loadbox",10)
    _root.createEmptyMovieClip("behindloadbox",7)
    _root.createEmptyMovieClip("obscurer",5)
   
    _root.obscurer.beginFill(0x000000,60)
    _root.obscurer.lineTo(0,0)
    _root.obscurer.lineTo(50,0)
    _root.obscurer.lineTo(50,50)
    _root.obscurer.lineTo(0,50)
    _root.obscurer.lineTo(0,0)
    _root.obscurer.endFill()
    _root.obscurer._x = 0
    _root.obscurer._y = 0

 
    _root.obscurer.onEnterFrame = function() {
             this._width = Stage.width
             this._height = Stage.height
    }

    _root.behindloadbox.beginFill(0xFFFFFF,60)
    _root.behindloadbox.lineTo(0,0)
    _root.behindloadbox.lineTo(50,0)
    _root.behindloadbox.lineTo(50,50)
    _root.behindloadbox.lineTo(0,50)
    _root.behindloadbox.lineTo(0,0)
    _root.behindloadbox.endFill()

    _root.behindloadbox._x = (Stage.width/2) - (_root.behindloadbox._width /2)
    _root.behindloadbox._y = (Stage.height/2) - (_root.behindloadbox._height /2)

    _root.behindloadbox.onEnterFrame = function() {
           _root.behindloadbox._x = (Stage.width/2) - (_root.behindloadbox._width /2)
           _root.behindloadbox._y = (Stage.height/2) - (_root.behindloadbox._height /2)
         
           if (_root.loadbox._width != 0) {
                _root.behindloadbox._width = _root.loadbox._width + 20 //we want 10 pix on every side
                _root.behindloadbox._height = _root.loadbox._height + 20 //we want 10 pix on every side
           }
               
    }
   
    IMGLoader.loadClip("whateveryouwanttoloadintothepreviewbox.jpg", _root.loadbox)

    _root.loadbox.onEnterFrame = function() {
           this._x = _root.behindloadbox._x + 10
           this._y = _root.behindloadbox._y + 10
     }
}   

As I said, that *should* work.


*goes off to test it in flash*

[zizdodrian]

Yep, it works fine!

I stuck it all into a flash document which you can download here:
http://giffard.dynalias.net/stuff/LoadImageTest.fla

Theres an SWF here:
http://giffard.dynalias.net/stuff/LoadImageTest.swf


Remember that I left some stuff out for you to do - namely the animations, and a loading percentage. It is just a little example, and I spent no more then 5 minutes writing it - so don't expect it to be a masterpiece - just an example to show you how it is done.

When you incorporate it into whatever you are doing, be sure to link me to it - I'd like to see what you do with it!

[zizdodrian]

OK... I modified it slightly so it will load in all the AG comics and display them.

Here is the SWF:
http://giffard.dynalias.net/stuff/AppleGeeksBrowser.swf

(It ain't gonna run in your browser because of security, but you can download it and it should work fine.)

And the FLA:
http://giffard.dynalias.net/stuff/AppleGeeksBrowser.fla

[MayuZane]

!!

Whoa, thank you very, very much

You just helped me a lot with my university flash site project. Thanks again. I'll put the result up on my deviantart site. I think it'll be only right to add you in the 'Special Thanks' section.

"Thanks to zizdodrian from the Applegeeks.com forum for the image-full-viewing help."

Unfortunately, I ultimately may not be able to include the image-full-view feature, but I'll still credit you anyway for helping.

[MayuZane]

Hmm I think there's a bit of a problem here. The entire site is in Flash, and it really won't have its own webhoster or domain since it's just a project.

All I need a button that when clicked upon, accesses a specific URL ( Like http://img48.imageshack.us/img48/12/wifv0100cgminitj5.jpg ) but you don't have to type it in and loads that image in full-view, complete with a 'close' button. Or maybe there's something I missed in the actionscript...

[Tholmir]

like how the applegeeks.com comics do here? (Click on 'previous comic' and you'll see what I mean)

Take a look at http://www.huddletogether.com/projects/lightbox2/

But it's all done in JavaScript, no Flash.

[zizdodrian]

Hmm I think there's a bit of a problem here. The entire site is in Flash, and it really won't have its own webhoster or domain since it's just a project.

All I need a button that when clicked upon, accesses a specific URL ( Like http://img48.imageshack.us/img48/12/wifv0100cgminitj5.jpg ) but you don't have to type it in and loads that image in full-view, complete with a 'close' button. Or maybe there's something I missed in the actionscript...

Oh - the code I gave you should work fine.

Here is a version which loads that image... (again, because of security issues, you may need to save it to your computer's hard disk before it will work...)

Here is the SWF:
http://giffard.dynalias.net/stuff/HomePageTest.swf

and the FLA:
http://giffard.dynalias.net/stuff/HomePageTest.fla


Basically, the whole bit of code is easily controllable - all you have to do is save the URL of the image you want to open into the variable _root.URL. That, as you probably well know, is very easy:

_root.URL = "http://img48.imageshack.us/img48/12/wifv0100cgminitj5.jpg"

After setting the variable, run the code, and that image will appear, full screen.

You could also just store your images at deviantart, and load them in like this:

_root.URL = "http://tn3-1.deviantart.com/fs9/300W/i/2006/145/8/7/May_Masterpiece_2006_by_mayuzane.jpg"

It should work fine. I've included a really basic sample homepage so you can see what I was thinking of.

All you need to do to make the image viewer go away is to click anywhere on the screen.
If you want back/forward buttons, just let me know.