Free AS3 Image and Video Full Screen Library.
::EDIT:: There has been an update. I have created a better example that will show how to use this lib as a slide show so for any of you who have asked how to change the image there you go. I have also cleaned. the code just a little.
I have put all three of my full screen classes together. I am also now hosting it on googles code site. There will be some documents coming out soon, though there is still some examples in the zip.
The newest class is a FullScreenVideo class that takes and URL of a FLV, FL4 or H.264 supported video add scales the video to fit the browser. You can apply smoothing and or buffering. You can also set the number of times to loop the video or set it to 0 to loop forever.
The second class is a class that will scale an image the same way you can with a video.
The third class is a Image panning class that will pan the areas cropped by scaling the image.
This achieved such a common set of tasks that I was amazed that there was not much out there already. I hope it helps, enjoy.
Here is a link to the Zip:: http://as3-fullscreen-lib.googlecode.com/files/FullScreenLib.zip
Here is the link to the project on code.google.com:: http://code.google.com/p/as3-fullscreen-lib
::EDIT:: Good news… I just tried to load a swf in the FullScreenImage Class and it works so long as you don’t use bitmapsmoothing. So now for the record you can load anything a Loader class can in the FullScreenImage class.
Hello,
great work.Thank you.A nice addition would be a pattern overlay mode for the video class.
YOU ROCK! THANKS
AWESOME! Hard to find stuff. When I drag out my images or movies, they do not follow the left-bottom edge of the browser perfectly. Instead, browser resizes, creating a white gap and then the image/video snaps in to the correct size. I would like to eliminate this effect. I would the video/image to STICK to the browser always, like this:
http://www.uniqlo.jp/uniqlock/
Thank you SO much…
Correction, RIGHT BOTTOM edge of the browser…
Totally disregard my posts. It only chops when I do “Control/Test Movie” in Flash. If I open HTML or SWF from bin, it’s BEAUTIFUL!
One more question. I tried use this code in Flex to align big image to Center/Center, but it sticks to the bottom right. I am using Canvas as contentHolder and Image as a graphic. Any ideas for Flex? Thanks.
How do I associate this script with the image I am trying to use as a background? I am new to AS but have been able to somewhat follow the fullscreen script here. Thanks
[...] http://gfxcomplex.com/actionscript3/free-as3-image-and-video-full-screen-library/ [...]
[...] Free AS3 Image and Video Full Screen Library. TagsAE after effects Air amf API AS3 Colors CS4 Design flash flash 10 Flex Fonts fullscreen Image Kuler logo logos MJPEG pixel bender Preloader Tutorial video [...]
[...] Free AS3 Image and Video Full Screen Library. TagsAE after effects Air amf API AS3 Colors CS4 Design flash flash 10 Flex Fonts fullscreen Image Kuler logo logos MJPEG pixel bender Preloader Tutorial video [...]
I am trying to modify FullScreenImage.as
case “TL”:
_contentHolder.width = sW;
_contentHolder.scaleY = _contentHolder.scaleX;
if (_contentHolder.height < sH) {
_contentHolder.height = sH-400;
_contentHolder.scaleX = _contentHolder.scaleY-400;
}
break;
So that the Background Image will appear just at the bottom 2 thirds of the browser but full screen on the width.
I took 400 away from screenHeight(sH) does nothing. Can anyone give me a direction.
The first thing is that if you want the image to be at the bottom of the stage you will then always have to match the width.
_contentHolder.width = sW;
then you will want to align the image to the bottom of the stage
_contentHolder.y = sH – _contentHolder.height;
Now if the image fills the bottom 2/3rds that depends on the size of the image in relation to the size of the browser.
Other wise just have the y of _contentHolder 1/3 down from the top. and expect there to be white space at the bottom of the image or the image’s bottom will be cropped.
Now in the right forum I hope
Loving the module!! I use fullscreenimage to load images on the start of my app.
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
Is there a way to create a slideshow of the images loaded like this site
http://www.gavaphoto.com/index2.php?v=v1
sine each image is just like any other loader you could just swap out one for the next.
Great file, the only thing im wondering is how can i put the video to the background and have a website floating in front of it?. i cant really find where i can put my flash website to make it visable in front of the video.
Totally awesome work. I tried another method for fullscreen, but this one is much better, and easier to implement. Thank-you!
great work! you have put together a really nice collection and i found it really easy im follow through
Thanks so much for this!
You really rule man!
First of all, I just wanted to say thanks! This library is awesome
I keep getting a compiler error when I try to publish PanningMain.fla. Does anyone know how to resolve this? I’ve pasted the error below. Thanks in advance for any help that can be provided!
Location:
PanningFullScreenImage.as, Line 84
Description:
Warning: 1090: Migration issue: The onMouseMove event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseMove’, callback_handler).
Source:
private function onMouseMove(e:MouseEvent):void
@aaron
This is not an error, it’s only a warning. This should not affect you in any way. This is because I named a function onMouseMove. Sorry it’s just old habit. If you want the warning to stop just name that function anything else you want.
I have done such a porting to Flex of you component.
Now the component accepted also Embedded assets and it’s an extension of standards Flex Classes.
I hope it’s useful to someone…
BTW many many thanks to admin
package com {
import flash.display.Bitmap;
import flash.events.Event;
import mx.controls.SWFLoader;
public class FullScreenImage extends SWFLoader {
private var _staged:Boolean = false;
private var _align:String = “top-left”;
private var _source:String;
[Inspectable(type="Boolean")]
public var smoothingImage:Boolean = true;
public function FullScreenImage():void {
super();
this.scaleContent = false;
this.includeInLayout = false;
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
this.addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
this.addEventListener(Event.COMPLETE, onStageResize);
}
[Inspectable(type="String",enumeration="top-left,top-center,top-right,middle-left,middle-center,middle-right,bottom-left,bottom-center,bottom-right")]
public function set align(value:String):void{
_align = value;
onStageResize(null);
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
super.updateDisplayList (unscaledWidth, unscaledHeight);
if (content is Bitmap) {
var bitmap:Bitmap = content as Bitmap;
if (bitmap != null) bitmap.smoothing = this.smoothingImage;
}
onStageResize(null);
}
private function onAddedToStage(e:Event):void {
_staged = true;
stage.addEventListener(Event.RESIZE, onStageResize);
onStageResize(null);
}
private function onRemovedFromStage(e:Event):void {
stage.removeEventListener(Event.RESIZE, onStageResize);
}
private function onStageResize(e:Event):void {
if (content && _staged == true) {
this.content.width = stage.stageWidth;
this.content.scaleY = this.content.scaleX;
if(this.content.height = stage.stageWidth)
this.content.x = -((this.content.width-stage.stageWidth) / 2);
if (_align.search(‘-right’) != -1 && this.content.width > stage.stageWidth)
this.content.x = stage.stageWidth – this.content.width;
// —————–
if (_align.search(‘top-’) != -1) this.content.y = 0;
if (_align.search(‘middle-’) != -1 && this.content.height >= stage.stageHeight)
this.content.y = -((this.content.height-stage.stageHeight) / 2);
if (_align.search(‘bottom-’) != -1 && this.content.height >= stage.stageHeight)
this.content.y = stage.stageHeight – this.content.height;
}
}
}
}
re-post of the previous code, there’s somthin wrong in paste action..
I have done such a porting to Flex of you component.
Now the component accepted also Embedded assets and it’s an extension of standards Flex Classes.
I hope it’s useful to someone…
BTW many many thanks to admin
package com {
import flash.display.Bitmap;
import flash.events.Event;
import mx.controls.SWFLoader;
public class FullScreenImage extends SWFLoader {
private var _staged:Boolean = false;
private var _align:String = “top-left”;
private var _source:String;
[Inspectable(type="Boolean")]
public var smoothingImage:Boolean = true;
public function FullScreenImage():void {
super();
this.scaleContent = false;
this.includeInLayout = false;
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
this.addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
this.addEventListener(Event.COMPLETE, onStageResize);
}
[Inspectable(type="String",enumeration="top-left,top-center,top-right,middle-left,middle-center,middle-right,bottom-left,bottom-center,bottom-right")]
public function set align(value:String):void{
_align = value;
onStageResize(null);
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
super.updateDisplayList (unscaledWidth, unscaledHeight);
if (content is Bitmap) {
var bitmap:Bitmap = content as Bitmap;
if (bitmap != null) bitmap.smoothing = this.smoothingImage;
}
onStageResize(null);
}
private function onAddedToStage(e:Event):void {
_staged = true;
stage.addEventListener(Event.RESIZE, onStageResize);
onStageResize(null);
}
private function onRemovedFromStage(e:Event):void {
stage.removeEventListener(Event.RESIZE, onStageResize);
}
private function onStageResize(e:Event):void {
if (content && _staged == true) {
this.content.width = stage.stageWidth;
this.content.scaleY = this.content.scaleX;
if(this.content.height = stage.stageWidth)
this.content.x = -((this.content.width-stage.stageWidth) / 2);
if (_align.search(‘-right’) != -1 && this.content.width > stage.stageWidth)
this.content.x = stage.stageWidth – this.content.width;
if (_align.search(‘top-’) != -1) this.content.y = 0;
if (_align.search(‘middle-’) != -1 && this.content.height >= stage.stageHeight)
this.content.y = -((this.content.height-stage.stageHeight) / 2);
if (_align.search(‘bottom-’) != -1 && this.content.height >= stage.stageHeight)
this.content.y = stage.stageHeight – this.content.height;
}
}
}
}
Hi. Sorry but Im new to ActionScript. I Have to Load SWF as a bacground not image.
How do I Disable bitmapsmoothing. I dont wont to mess this beautifull code!!!!!
Thanks man!
Is any documentation available?
Hey, awesome class for fullscreen background images. But I’m getting a problem with loading in swf files as backgrounds. The file loads in fine, but at times I get this gap on the right side and bottom when FullScreenAlign is set to the top left. When I load in a image (like a jpeg), I do not have this gap problem. I am however using SWFobject to embed my swf file. It could be the swfobject I’m using, but I could be wrong.
Hello.
Thanks for the great files! I have a problem reguarding the “PanningMain.fla”-file. When i test the movie an error pops up. “1046: Type was not found or was not a compile-time constant: TextField.
@cuebit The problem was that I had never intended this to load swf files, I found out that since I was using a loader class as the base class that this could work for that.
When I get some time I plan to clean the code up and do some Q/A on it. There is another problem that is showing up on macs that I can’t see since I don’t have a mac.
If any one out there with a mac that can help pin point the problem that would be great.
@Jens This is due to a text field that is use to show the progress. I will made an update to the demos soon.
Hello!
First of all, Thank you for incredible AS3 Image and Video Full Screen Library!
I’m trying to figure out the best way to swap out an image for the next or previous images. I already have an array of image file names but when the next or previous image loads, the timing of transition between old and new images was bad. Can you please give us an example? I kept coming back (and still am) for a documentation and your svn is still empty. :-/
Hope to hear from you soon!
Aaron – the fix is elegant – just rename his function onMouseMove – it’s an old AS2 method, and when flash sees it, it kicks that error. I renamed it onMousMove, and no more error.
FYI: this is not an error, it’s a warring, and best practice says to turn off warnings because of the slow compile times. =P
Hi Josh,
Thanks you for your sharing. I use your “PanningFullScreenImage.as” class in a project. Everything works fine. However, there is a little problem in the code. When user clicks outside of the browser, displayed image is lost. It’s because of the event listener that is added to stage. I changed the ;
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMovel); to
this.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMovel);
and now everything is working fine. If you try what I tell, you can get it. just try to click desktop or another window when an image is displaying.
Thanks again.
.)
hi, im trying to loop a video, but just cant make it, could you explain me how to do it, please!
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
Hello, and thanks for this class, it is very good!
I just found this yesterday, I’ve done some tests and I came to my problem.
Is it possible to have an image as background, like the class does, but with the swf (PanningMain.swf) centered in the browser window?
How?
Thank you,
Pluda
Hello again,
I also notice that if you load one swf with dinamical content such a request from a database per example, it will run forever, not just once as expected, causing flash player to quit.
I’m trying to descover where the aplication is doing the loop, but so far with no results.
Pluda
Hi, great class. Is there any documentation available on how to customize it? I’m trying to add a progress bar to the video similar to what you would find on Youtube.
Thanks,
Adam
@adam
There is limited docs since this is a small set of classes, feel free to poke around the source code. You will find it very easy to understand.
Sorry to everyone, I have been so busy that I have not been able to support this very well. I will try to attempt to address as many of the requests as possible when I can.
Thanks for understanding.
- Josh C
“046: Type was not found or was not a compile-time constant: TextField.
@Jens This is due to a text field that is use to show the progress. I will made an update to the demos soon.”
Sorry for remanding you. It would be great if you solve this. I guess it is not big issue.
Thanks a lot
@Jens
@Admin
Found the problem , i think
just add this:
import flash.text.TextField;
Hi, I’m currently experimenting with the class to setup a fullscreen photo slideshow but I havent figured out how to get it to loop?
@Jens and everybody who get this error:
‘1046: Type was not found or was not a compile-time constant: TextField.’
you can avoid this by simply adding import flash.text.TextField; in ImageMain.as
Cant thank you enough for the wonderfull job you did in this class.. you saved me tons of hours of work and development. all I need to do now is to add it to an xml reader and project is completed.
Good Job
HELLO JOSH!
FIRST OF ALL! THX! THIS IS GREAT!
WELL I SET UP EVERYTHING LIKE YOU SAID AND IS WORKING FINE, EXEPT FOR SOMETHING IN THE CROSSDOMAIN.XML THAT I NEEDED TO ADD TO MY SERVER SO IT CAN WORK, BUT ANYWAY, IS WORKING NOW.
MY QUESTION IS HOW CAN I USE THE PANNING AS A BACKGROUND BUT HAVING A LAYER IN TOP OF IT. FOR EXAMPLE BUTTONS TO CALL MY LINKS SUCH AS “PORTFOLIO, CONTACT, ETC”.
HOPE U CAN HELP ME! THX!
CARLOS