ActionScript 3.0 :: Scale Images In Full Browser Sites?
Jul 24, 2010
What's the best practice to scale images in full browser sites? I am new to Flash and have a pretty good understanding of how most things work in Flash. My newest goal is getting Flash to scale 100% on all browsers. But when I do, my pictures become pixelated and I'm sure videos would do this as well. So my question is - what's the best practice or actionscript to keep this from happening? Sites like [URL] that have utilized their abilities to scale their images on any browser are great examples. How can I achieve this?
I'm working on a site right now where the flash player fills the browser window up to 1600x1200 res. The developers I hired are having problems with AS2 when it comes to scaling things and positioning them as the browser window changes size. While it works, the biggest problem is the aspect ratio, keeping the layout looking nice, and the footer keeps dropping off the screen at certain sizes.
Screen res closer to 16:9 looks better laid out than 4:3 and they keep telling me that it has to be proportional when it comes to positioning and scaling, although positions aren't really changing from whatever code they've used. To me, there must be some way so that if looks nice on 16:9, when it goes to 4:3 it will look good too, or even some in between size, they should be able to use code to figure out where things belong, even if it's not perfect. Instead, there are big gaps of dead space on 4:3 and it just looks like crap.
This is also true of background images which fill up about 1/3 of the page on the left or right. As we go down in size they say only a proportionate scale can be used, but sometimes the images are staying too large based on the size of the browser window and should be scaled more. Some of this may be attributed to much of the content being loaded dynamically as the client has us building a CMS, but to me, it's still coordinates and scale when it comes down to it and I don't know why raw percentages must be used instead of some more complex math.
If someone knows how this can be achieved, or can at least point me to web site that has this working properly, I can make sure they investigate further and figure this out before the deadline. I'm adding attachments to illustrate what I'm talking about. I'm using colored blocks to define where dynamic text boxes, icons, footer, images and navigation are. Arrows show where i'd like things to move dynamically.
What I'm wanting to do is load an image into my browser dynamically at full screen. And then when the browser window is scaled the picture scales proportionately with it. (I've seen it on loads of sites, but for some reason I just can't fathom it out (which is really bugging me). I'm using the gaia framework (which is amazing) to do this by the way (not sure if that makes a difference of not?). This is what I've got so far...
I am trying to create a website that will full scale the browser window with all the flash elements inside but I am having trouble deciding what resolution to design in and how to lock certain content to not scale.
I am trying to achieve the effect that will consist of a high resolution image as the background for each section of the website that will full screen. Content such as logo and footer etc should always remain locked. An example of this can be found at http:[url]..... If you shrink the browser window all content stays centralised and the top and bottom footer do not scale, although the central part of the site does change. I was wondering how this effect was achieved? How does some content remain locked and others scale. I really can not figure out what dimension size to design in and achieve the high res image effect for the site. I too will require a top and bottom footer.how that site was published and constructed that would be brilliant.At present I am playing around with the following code:
I have this code to scale external images to full-screen:
function resize_image(){ pic = big_mc.swfloader; Stage.align = "TL";
[Code].....
It works fine but I want to change it so the scaling is determined by the browser height, at the moment it scales to the browser width so you lose some of the image height - Also, need to keep the images in proportion
Essentially I have an animation with two main movie clips - a foreground and background movie clip.I want the foreground movie clip not to scale but the background movieclip to take the full screen of the browser.I'm only using vector images
I need to achieve the image scaling done here (not copying the site, just need that image scaling technique)[url]...
i've got the listeners in place, and have no problem getting images to fit the browser windows. the problem is stopping the distortion, while also making sure at least 1 dimension fits the browser's dimensions (ie no borders appearing along one direction). i don't mind the browser 'cropping' the image.
I want want to create a gallery where the images fill up the entire Browser window. Here is what I got so far: PHP Code: Stage.scaleMode = "noScale"; Stage.align = "TL"; import flash.display.*; stop();var sl:Object = new Object();sl.onResize = function() { [Code] ..... How can I use an XML file to get the images from?
in fact i used fr-ode's full-browser image code. but i dont want to generate full browser images. i want to build a structure like [URL] as you see in site, photos scaling automatically when you resize the window. can anybody write me a statement for this? here is the fr-ode's code which distroyed by me
i would like to hear some feedback on how to seo flash sites using deep linking. I am using swfAddress and swfObject but the urls generated by swfAdress with # anchors are not really seo friendly, google just ignores enything behind the "#" and this could be end in cloaking.
i've been working with flash for a long time, but there's still something that i don't quite think i'm understanding fully. i see many of these sophisticated photography sites programmed so that the photo fills the whole screen (such asand the photo is crisp and clear on any sized monitor.i know how to set the site to be programmed to fill 100% of the screen, and i know how to "trace bitmap" inside of flash so that the photos work a little better. they then act more like vector images than bitmaps which tend to pixelate when proportions are enlarged. but when i use the "trace bitmap" feature, the flash file often becomes very large size in terms of KB, even when some detailed smaller images are traced.
I am working in Flash CS3 and Actionscript 3.0 My application resizes according to browser width and height. If the user first resizes the browser and then loads the flash application, I could not get the full browser width untill the user goes for full screen. Is there any way around, to get the full browser width before the user goes for full screen.
I'm working on a small flash site and I want the swf file to have "bleed" or to go to the very end of the window so that the swf isn't just ploped over top of a background. [URL]
I want to understand something if it is possible to do it in flash movie. I want to make flash animation with let say 4 pics. The animation will be used as an advertisement on other sites. But I want the images in the flash movie to be changed from time to time. Thus I want the images to be loaded from my server while the movie is been shown on other sites. I want to know if this is possible in flash.
Do sites like facebook resize images before upload to save bandwidth?... or do they just get resized remotely, beause when i try and do it using gd library i have the problem that images wiht large dimenions timeout, whatever memeroy limit i set..
[URL].. Anyone know the AS to make it automatically check the size of the browser for the listeners_notice when you resize the browser it works perfectly...but not when it first loads up.
The problem any swfs that I load into are not centered because of the Stage.align = "left"; So I adjusted all loaded swfs like so.
_root._x = 200; _root._y= 100;
Which center my movie perfectly. The problem is when I try my movie on other resolutions the movie is no longer centered? Do I need to write some code that gets the screen resolution and adjusts the _root based on screen resolution?
I am still struggling with transforming my app build in Java/Eclipse to Flex/Actionscript with Flashbuilder.Now I can not find how I should implement an image to cover the hole screen.[code]...
I have a Flash movie that runs full screen, but with StageScaleMode.NO_SCALE so that the actual movie size is the same as it would be if I ran it not full screen.
There is a huge difference in performance between full screen and no full screen. This is despite the movie taking up the same screen space.
Would anybody happen to know if there is a way to scale objects accordingly on stage when switching to fullscreen.. It's sort of like when the stage is set to "scale", and all the objects scale accordingly, but I'm trying to scale the objects while having the stage set to "noScale"..
I'm building a flash website that needs to have fullscreen enabled for the entire site. Does anyone know how to make only specific movieclips scale up in size when entering full screen mode, like various background movieclips?
In AS3 flash - I have a textField with a CSS in it that looks like this:
body { fontSize: 10%; }
When it runs, the font is small. When I click the full screen button, I expected the font to increase proportionally because I set it for 10%. However, this is not working, the font stays at the same size as when not in full screen. I have debugged the onResize event and I can see the style fontSize=10pct when I log it out.
Am I misunderstanding the meaning of % here? I was hoping it would increase the fontSize automatically when going to full screen mode, but that does not appear to be the case.
I need to scale an SWF in a browser in such a way that the MOVIE fills up the screen (100%w&h) but does not stretch the content. I know this is possible for projector, but is it possible for a browser?
I uploaded a swf file with dreamweaver as a stand alone window and it works fine. How do I get the swf file to scale larger or smaller as the user adjusts their browser window larger and smaller? I would like to get the swf file to scale along with the browser window. I posted this in dreamweaver but was told this is an action script issue.
I've created a website in Flash and have posted it to the net. I want it to scale as the user resizes the window, but having little formal training in Flash I'm not entirely sure how to go about it.
