[...] can read more at http://gfxcomplex.com/actionscript3/as3-full-screen-image-class-with-alignment-scaling-and-smoothing... Share and [...]

Thank you soooo much, I’m sure this will be really helpful to others as well

Hi,
I really like this Class. I’m trying to figure out how to create a load progress bar for it.

I tried:
- image.addEventListener(ProgressEvent.PROGRESS, progressLoop);
- image.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressLoop);

Could you explain to what exactly I need to listen? Thanks.

Hey Kevin,

use:

import flash.events.ProgressEvent;

image.addEventListener(ProgressEvent.PROGRESS, onProgres);

private function onProgres(e:ProgressEvent):void{
trace(e.bytesLoaded, e.bytesTotal, int((e.bytesLoaded / e.bytesTotal) * 100));
}

Great job! I have two questions…

1. How can I get the image to look as crisp as possible…it’s a little blurrier than when I open the image in a browser. Is this bitmap smoothing perhaps?

2. Once I have loaded a new FullScreenImage, how would I load a new one? Like when a user chooses a new page of my Flash movie.

THANKS!

1: Try to use a image that is 1024×768 that is the best stander to start with, any thing lowwer then that almost always the end uses screen will have to upscale the image.
2: use bitmap smoothing if you can. Note to use bitmap smoothing you will need to have a crossdomain.xml file on the sever that is hosting the image. Bitmap smoothing will soften the image if it’s gets upscaled too much, but it help to prevent artifacts and image noise.
3: The Full screen Image class will not reload a new image, to load a new image just make an new instance of the class and add to the stage just as you did with the first. Just be sure to remove the old one image from the stage.

Very Nice Work. Is it possible to ad movie support. It would be awesome to also load h264 or flvs into the bg. Having looping animations in the background would be nice.

THANKS!

I’m debating on making a whole new Class that loads video or use the loader class to load swf files for that. Any thoughts?

It would be nice, having a class that would understand normal images like png, jpg but also swf and video of course. This actually sounds like a class, somebody should have come up with allready. But I have asked Mr. Google for hours and he didn’t come up with a cool answer.

So i guess you ‘re up for the fame, of beeing the first humanoid to code the miracle class.

This class worked great and I was able to get the full screen background working.

Two questions:
1) Is there a way to make a movie clip (that contained the jpg) to go full screen so I can apply a transition to fade the image in, or tweak certain properties– ie alpha, tint, etc?

2) Do you know how to load a movie clip/or swf in so that it always remains centered in the screen upon browser resizing? I know you created a class to center the background image, how do I apply it to movie clip/or swf?

I appreciate your efforts and any advice on these two issues.

Thanks!

@urbanhumor this has class has had a upgrade that now supports video and panning.
Have a look here.

http://gfxcomplex.com/actionscript3/free-as3-image-and-video-full-screen-library/

The upgrades look great, but i guess it still ultimately doesn’t answer my question of how to bring in a full screen background jpg as a movie clip. Ultimately, I want to be able to fade in and out the image.

And the second question was regarding how to have content, whether a swf/or movieclip, always centered upon browser resizing.

Your work looks great and much appreciated but if you could shed any light on these two issues it’d be a huge help. Thanks!

@urbanhumor

Since the FullScreenImage Class extends the Loader class you can try to load a swf with it but don’t use bitmapsmoothing.

As for fading just set the alpha on the var as you would anything else.

Sorry, haven’t had a chance to check back in. So I finally figured out the two questions I had with your help. Thank you so much. There was one last small thing, however, once I got it working there was a strange white border (maybe 5-10px wide) between the edges of the jpg and the browser. Any idea why that is happening?

That is the browser css margin. You can set it to 0 in the body.

Much appreciated. I knew it was a tiny fix… thanks for everything.

Man, very nice, thanks so much for sharing!

How do you set the browser’s CSS margins to 0? I tried using Notepadd++ but that’s not working. Thanks, I’m kinda new to Flash.

awesome job! thank you

If I wanted to have a random image (out of 3) load each time the website is visited, would it be possible to do this with a randomized list of urls? Would I need to work from an xml file? Thanks! And thanks so much for sharing this class.

This looks cool, I’ve been trying to get a standard proportioned centered swf on top of a background that scales like it should without distortion. How can I get this to load behind another swf, or just on the bottom layer of a larger flash site?

Hey, i had one more question. How do i tweak the class so i can pull the jpg from my library rather than an external jpg outside my swf? Thanks!

Just trying out the module, and I get this error when adding the child (at runtime);

cannot convert com.gfxcomplex.display::FullScreenImage@2d4adc1 to mx.core.IUIComponent

Am I missing something obvious?

@Michelle
I don’t know alot about the flex mxml framework but I would think that the class would need to be wrapped in a IUIComponent.

My class just extends the Loader class so there should be no reason why you can’t use it in flex.

PS: this class has been updated http://gfxcomplex.com/actionscript3/free-as3-image-and-video-full-screen-library/

@urbanhumor
you will have to rewrite the class on your own to get the bitmap data from the fla library.

(I’m not a flex expert yet but…) I see that your class extends sprite . See this link:
http://www.mail-archive.com/flexcoders@yahoogroups.com/msg21916.html

So I changed the line which extends sprite to extend UIComponent, and import mx.core.uicomponent

And now it works in flex too!! I have no idea if you can make a universal version (Flash & Flex) but this seemed to do the trick….

@Michelle Very cool.

I’m glad you got that to work for you.

Sorry about mistaking what class was extending. It’s been some time since I have looked at this class.

I still think that there is another way to using this class in flex as it is, with out changing the super class. Even still enjoy.

Hi,

I’m soo new to Flash, so please excuse me for being a numpty, but i can’t get this to work…

I don’t think i’m saving the ‘com’ folder in the right place or something.

I keep getting “Definition com.gfxcomplex.display:FullScreenImage could not be found” (obviously the same error for the align one too).

I’d really appreciate any help/guidance!

Thanks,

Nick

Sorry…was being a plonker – i’ve got it working now, but my only problem is that i can’t seem to figure out how to put something else on the stage. I want to use the full size image as the background for my site and then i want to be able to put menus, etc, etc on top of that……

thanks

Hi,

I try to make it work with a swf which has a animation inside but this does not seem to work.
There is a rotationZ timeline animation in the swf.

Can you please tell me what i should do?

Thanks in advance,
Angelo

hey there dear Josh …
i almost cried when found your magical CLASS to perfectly scale images…
now that i can handle it perfectly, i wonder how to apply that class to a movieclip wich is rotating a few pictures inside….

im also wondering if you do have a method or whatever to make multiple preloads in AS3… i used to work with the GreenSock preloading class but, there is no AS3 version, so… now i got crazy.
for example: i need to preload pic1.jpg, pic2.jpg, mc1.swf, mc2.swf….

blessings my friend… hope you can give me some light!

Hey!

I think this is great! It is really easy to use!

I’ve got one problem. I am checking the progress by:
image.addEventListener(ProgressEvent.PROGRESS, showLoading);
offline this works great

online in FF I get: infinity as procent loading

and in IE I even get a error:
TypeError: Error #1010: Een term is ongedefinieerd en heeft geen eigenschappen.
at background/showLoading()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.gfxcomplex.display::FullScreenImage/progressHandler()
(Error #1010: A term is undefined (heres your number one lesson in Dutch )

Do you know what the problem is? Thank you for you help!!!

Hey,

I just got your class library and I must say the examples look very promising!
However, after doing a quick test with the following code I get an error:

import com.gfxcomplex.display.FullScreenImage;
import com.gfxcomplex.display.FullScreenAlign;
var image:FullScreenImage = new FullScreenImage(url:String = “Assets/Projects00.jpg”, align:String = FullScreenAlign.TOP_LEFT, bitmapSmoothing:Boolean = false);
addChild(image);

The error is: 1084: Syntax error: expecting rightparen before colon.

Dear Josh,
I’d like to know if it’s possible to fade the full screen image?
I’m willing to use TweenMax library.

Thanks in advance!
.andrea

Just set the target of the FullScreenImage var in the tweening method.