I have been trying to work out how the full-browser background was done here: [URL] It scales in a very elegant way: it never stretches the image, stays centered on the image and never causes ugly blank areas around the image. For me, it's become deceptively difficult to achieve! :-(
View 1 Replies
I am trying to scale a background image to the size of the browser window. For some reason it does not fill the entire stage?
Stage.scaleMode = "noScale";
Stage.align = "TL";
background_mc._width =Stage.width
background_mc._height =Stage.height
background_mc.onResize = function() {
background_mc._width = Stage.width
background_mc._height = Stage.height
} Stage.addListener(background_mc);
This is a thing I developed using Flash and Javascript, to set any image dynamically as a background image of a web page and allow all other page content to scroll over the top of it.
[URL]
Would be interested on anyone's comments feedback, particularly about the flash (source code can be downloaded)
I am creating a website where the entire background is tiled and it also contains a photo gallery. Now, the photo gallery has to only appear within a limited height but the width could be similar to the browser window. (The website will be a full browser website with a capability of going fullscreen.). I tried a lot of things but the stage calculation requires to be a little different than the general stage properties.
In general, the height and width of the image is directly proportional to those of the stage. But what I am looking at is for the image to be rescaled proportionally to the width of the stage but the height nneds to be about 20-30% less than the height of the actual stage. Basically the background will be visible in that 20-30% of empty space. (And of course other elements)
My scaling of the image code looks like following,
Code:
function scalePic():void {
if ((stageHeight / stage.stageWidth) < imHeight) {
im.width = stage.stageWidth;
im.height = imHeight * im.width;
[Code] .....
And it also centers the image on the stage based on the new stage size.
Currently I have link on an HTML page, and when the link is clicked, it opens a flash movie with slideshow and a semi transparent black background. The way I have it set up is as follows
CloseButton.as (the close button for the slideshow)
FullBackground.as (the black background)
MainContent.as (loads the slideshow)
then I have
main.fla (loads the CloseBtn, FullBG, and MainContent)
preloader.fla (loads the main.fla .swf)
I am trying to emulate an effect like this site uses...
[URL]
and I've basically poached their script, a jQuery initiated 100% width and height background that loads into a couple of holding containers.
The thing I would like to do differently is fix the background in place so the content can scroll over it. How can I, say, write the flash movie to the BODY background or something like that? I'm not a javascript wiz and am not sure how I might do this.
I want to load it always to fill the whole screen but to retain the aspect ratio. So far I am able to stretch it to 100% of the screen but the aspect ratio is not preserved. The instance name of the mc in which I load the background image is "back".
Here is an example of what I need: [URL] Try to resize browser window to see how the background image preserves its ratio.
PHP Code:
function loadFunc(What, Where) {
var LoadingObject = new MovieClipLoader();
var NewObject = new Object();
[Code].....
I am in AS2 with a working full browser flash site. I have an mc I'd like to start out at 100% but scale up to 120% if the browser window area increases. How do I tell example_mc to scale proportionally up to 120% when the window scales?
View 1 RepliesI'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.
I'm looking to create a site that has video playing full browser in the background. A very perfect example lies here:[URL]..As you can see, the video is scaled according to stage resize while the menus and such stay where they should like a perfect liquid layout. I've watched the Liquid Layout video (from this site i'm pretty sure?) and understand how to position objects on the stage according to stage resize, but I've never figured out how to scale only the video like that. The only way I've been able to do that is by setting my publish settings to NoBorder with 100% width and height, but that defeats the whole liquid layout because it scales your entire swf. I feel like it's some sort of math I'm not grasping.
I'm probably wrong, but I feel like the way I'd go about doing this would be to set everything up as a liquid layout site; that is specify stage align and scale to TOP_LEFT and NO_SCALE. I'd have my liquid menu items positioned accordingly with a resize function and for the background video I'd use a FLV Playback Component that would be manipulated through another as3 function to scale accordingly. I'd use a Playback Component so as to be able to load multiple external videos (.h264) when a link was clicked. Am I on the right track? AS3 only please!
I am trying to build an AS3.0 flash site with a full browser background imagethat scales proportionally like in [URL] I found some stuff online but nothing on how to do it with AS3.0
View 11 RepliesHow do you make a flash full browser background with high quality like here: [URL](choose your language at first. After that opens up a screen with a full browser bitmap man on the left size.)I have been trying to make such scalable high quality background image but the results have been poor.
View 8 RepliesI want to know how can i make something like if any one scale browser my site will scale in aspect ratio without cropping
something like jimcarrey website [URL]
I have this video background, and I want its aspect ratio to be kept intact when the window is resized. Also I want the screen fiiled, if the aspect ratio would make the video smaller than the window it won't resize, it would just center.
[URL]
I have that code, it gives you an idea of what I want. however its buggy and flickers.
I need to scale images so that they always fit within my browser but also retain their aspect ratio. All other examples I have seen at some point either the width or height is cropped off by the edge of the browser. I need my images to always stay inside but also I do not want them to ever scale above 100% i.e. no enlargement. owever the images don't stay within 100% scale and also get cropped off.else as much as I can.The code I have is like this
Code:
if(mainTL.allImages._width > Stage.width){
mainTL.allImages._width = Stage.width;
[code].....
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
View 1 RepliesI'm trying to create a website with full screen background images (or possibly, a video) but don't know the best way to approach it. The Die Antwoord site does pretty much what I'm trying to accomplish. I'd also like to know how they can use such high resolution images. If I try to use a high res image, the file size is enormous.I also want to do is to be able to change the background image when a button is clicked. What is the best way to do that with large images? Another site that uses similar technology only with a video is the TV on the Radio site.
View 3 RepliesI'm trying to create a website similar to this one, where the content is a fixed width and height (i.e. made to fit a 1024x768 screen), but the background image is full screen and scales proportionally when the window is resized.
How can I achieve this full screen background using Flash CS4/AS3?
I was wrote the following code to set the background image in one vBox.
vBox.setStyle("backgroundImage", "PreviewBackground.png");
vBox.setStyle("backgroundAttachment", "fixed");
Where the height and width of vBox was 250 x 350 and the height and width of background image was 400 x 400.The problem is that the background image doesn't show the full image. The image has cropped. How can i show the full image as a background image?
How can I fill my whole background with a big image? The photo is 1400*867 and with the solution here it fills up the width but not the height. I don't care if the photo gets cropped in order to fill up the height too.
The CSS3 way (background-size) is perfect but doesn't work in IE.
If you don't know a way with css/jquery could you direct me to a flash script where I could just enter the path of the image and let flash resize it?
I have searched everywhere but I can't seem to find anyway to create a full screen background image. Does anyone know the code to do this? Or know of any tutorials?
View 3 RepliesI have set my stage at 1920 x 1440 with a background bitmap that matches that size. The aspect ratio of my stage/bitmap is 4:3. When I run my Flash website on a legacy 4:3 monitor set at 1024x768, the top and bottom portions of the stage image are truncated. The remaining part of the displayed picture has an exact aspect ratio of 16:9.
[Code]...
I am trying to create a background like the attached image (full screen).I don't like these colors, but do like the effect.
View 9 RepliesI've spent the past few days having a look for this and no luck so far. Basically I have got a multi-page XML gallery with thumbnails. At the moment the images in the gallery stay their original size. I want to make it so that a) the image takes up the entire page of the browser/stage, and b) the image resizes as the browser does, which I suppose might be in the publish settings.
So my question is how can I size this image so it takes up the entire stage? I've tried fiddling around with Stage.width and Stage.height but no luck so far.
Something like this: [URL]is what I mean.
Attached is my .fla, the actionscript code is all within a key frame inside gallery_mc.
I'm building some navigation that extends all the way from left to right across my SWF. When the window resizes, I'd like the nav buttons to get wider but not have the text on the buttons get wider.
The buttons themselves are rectangles with a vertical gradient and a stroke around the outside. I'm using 9-slice scaling so the stroke doesn't scale, but the middle (gradient) gets wider or narrower.What'd be great is to be able to select an object or layer and say "don't scale, even if the rest of this movie clip scales". Is there a way to do that, or will I have to do it via actionscript?
I need to do exactly the same, but using an animation inside a mc instead of a pixel background. Does anyone know how to do that?
View 1 RepliesI am working on a new site with a liquid layout and I havent been able to find a way to keep the aspect ratio correct with the different sizes.
[Code]...
the image size im working with is 990x600 for a 1024 display.I would like the image to be centered and never to have empty area, so if it needs to it would strech past the sides.
I used a colour gradient background image on my stage for my website.Managed to load up the same background onto the browser background.However, the result is not satisfactory as I can see the website background image boundaries against the browser background.How can I get around this? Or is there a code that allows me to change my website background to transparent so that I can only see one browser background?
View 3 RepliesI'm looking to achieve the effect seen as these sites (a background photo that rescales while not losing image quality)...
[URL]
I am trying to achieve an effect seen as on this website. [URL]
I want to have a background image that resizes to the browser window (my other elements retaining their size) - but stays in scale. I have been using the code provided at gotoandlearn which tiles the image. Here is the code used there.
import flash.display.BitmapData;
GreyBar._xscale = Stage.width;
var tile:BitmapData = BitmapData.loadBitmap("tile");
[Code]....
