Trying to float my icons so they're always at the bottom right corner of browser window.

[SeanPercy42]

I am currently using div tags to accomplish this but because I'm now encorporating a preloader, I'm unable to use this method. I have elements that need to float including my logo on the bottom left, my icons on the bottom right, and a quote request tab on the top right of the window. I also need my main_mc to center itself to the browser window. I was able to do all of this using CSS and DIV tags but because I would like to use a preloader, need to figure out how to do it in AS instead.

Someone mentioned on a previous discussion that I could use javascript somehow to position the items, but don't know much of it. If someone could post a relatively easy solution to accomplish this I would really appreciate it.

[sinious · Accepted solution]

What kind of preloader is this? Are you using some kind of javascript preloader that shades the site and preloads the page? How does preloading affect your need to change the CSS? Does the SWF resize itself?

If you're not very familiar with JavaScript it's best to get a framework that will handle things like browser differences for you. jQuery is a very popular and easy to use framework. You could use the AS ExternalInterface class to inform JavaScript that your Flash has finished loading and use jQuery to measure and align your SWF object. You'd need a resize event handler to adjust the position as needed also in the event the user resizes the browser.

Although I think just keeping it simple with CSS is best. I just don't understand why a preloader isn't allowing CSS to work unless the SWF actually changes size.

An example of a JavaScript function using jQuery that ExternalInterface could call to reposition the SWF, assuming the SWF has the id="MainSWF":

// javascript

$(document).ready(function()

{

          // resize listener

          $(window).resize(function() { AlignElements(); });

          // make sure SWF is absolute positioned

          $('#MainSWF').css({'position':'absolute'});

          // call it to start

          AlignElements();

});

function AlignElements()

{

          // use top/left properties to align SWF

          var left = Math.round(($(window).width() - $('MainSWF').width()) / 2) + 'px';

          var top = Math.round(($(window).height() - $('MainSWF').height()) / 2) + 'px';

          $('#MainSWF').css({'left':left,'top':top});

}

AS:

// AS, called when SWF finished preloading

ExternalInterface.call("AlignElements");

Make sure you download and load jQuery into your pages so it's available or that won't work. There's plenty of other JavaScript frameworks you might like more or are overall lighter on page load for this basic stuff. Looking around doesn't hurt.

[SeanPercy42]

Basic Flash preloader that's on the 1st frame and AS3 tells it to go to frame 2 once the complete file has been loaded. Here is the very short code I'm using to accomplish this:

function loadProgress(my_content:ProgressEvent):void{

    var percent:Number = Math.floor((my_content.bytesLoaded*100)/my_content.bytesTotal);

    preloader.progressBar.gotoAndPlay(percent);

}

function loadComplete(e:Event):void{

    currentFrame+1;

}

loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

loaderInfo.addEventListener(Event.COMPLETE, loadComplete);

Basically I was importing each of my elements (flash icons, logo, quote request drop down form) into seperate div tags and positioning them with CSS so they would float when the browser window is resized. But then I read that you can't use a flash preloader to load an HTML page, so I'm needing to move those elements into my main flash file and have them reposition using AS3 and/or Javascript. For some reason my website's not displaying on the hosting site I just signed up with or I could show you a visual.

[sinious]

So you moved the edge-of-browser elements inside Flash? Are you making your SWF fill the browser? If so you'll need to just pay attention to properties (after load) like resize above, but the AS versions.

e.g.

stage.addEventListener(Event.RESIZE, _resizeHandler);

function _resizeHandler(e:Event):void

{

     // reposition elements code

}

Then you're just using basic available properties like stage.stageWidth / stage.stageHeight to determine what x/y position to put your elements at.

[SeanPercy42]

Basically the resolution of the swf is 1920x1080. I'll position the whole swf using css/div later for anyone with a resolution higher than that. But yes, I moved all of the edge-of-browser elements from the independent file they were in to the main swf and basically just need them to float in place if the browser window is resized. I don't want to resize anything just slide/float certain MCs if the window size changes. I've seen it on a ton of websites but usually being done in javascript instead of flash/as3. I have seen it done on a few flash sites before though so I know it is possible.

I noticed you put "//reposition elements code" in your previous post but am somewhat new to AS3 and don't know how to implement it. I think you get the jist of what I'm trying to do though. If you could post an AS3 example of how to reposition one or two elements I could probably figure out the others.

One other thing is it looks like the eventListener is looking for the stage to be resized which should never happen. I will post a screenshot of my website so you can get a better idea of what I'm trying to do.

So basically the logo needs to stay 10px from the left side of the window and 15px from the bottom; the icons 10px from the rt side and 15px from the bottom; the glass bar below them (you can barely see) needs to stay 10px from the bottom; and a quote tab (not imported yet) needs to stay at the top right corner.

I had everything set up correctly using div tags and css but because I can't use a flash preloader to show the progress of the html file I had to move everything to the same swf. If I left it the way it was the navbar and quote request tab would have show up on top of my preloader screen while the main page of my site loaded, if that makes sense.

[SeanPercy42]

You'll definitely want to click on the screenshot to see it better.

[sinious]

Are you allowing the site to scale? Most users to this day still are under HD so you'd definitely want your site to be usable. Only 11% or so have 1920 while browsing, here's some data:

http://www.w3schools.com/browsers/browsers_resolution_higher.asp

Ultimately if you're scaling the content then the x/y will always be the same. You're interested in the browsers current size and any resizing which suggests to me you're moving or sizing your site already.

The mentioned properties of the stage will give you what you want.

To center something in a SWF that scales or does not resize, with an instance name of say "myLogo", you would set the .x and .y property. it would look like this:

// assuming the registration is in the upper left of the symbol

// x (horizontal)

myLogo.x = Math.round((stage.stageWidth - myLogo.width) / 2);

// y (vertical)

myLogo.y = Math.round((stage.stageHeight - myLogo.height) / 2);

To position something 10 pixels down and 10 pixels away from the right side of the screen, same general idea:

// x

myLogo.x = Math.round(stage.stageWidth - myLogo.width - 10);

// y

myLogo.y = 10;

Same deal with the bottom of the screen with stageHeight. 10 pixels from the right side and 10 pixels from the bottom:

// x

myLogo.x = Math.round(stage.stageWidth - myLogo.width - 10);

// y

myLogo.x = Math.round(stage.stageHeight - myLogo.height - 10);

You can see from the redundant math it's pretty basic. Use the objects .x .y .width and .height properties along with what you're calculating against, the stage.stageWidth and stage.stageHeight.

Now if you allow your SWF to resize but NOT scale, e.g. StageScaleMode.NO_SCALE, and you're allowing the SWF to take up the whole browser, you'll need some resize sniffing code and you'll use the same properties stage.stageHeight/Width upon resizing.

Adding an event listener for a resized stage is easy:

stage.addEventListener(Event.RESIZE, _onResize);

function _onResize(e:Event):void

{

     // run all the calculations in here again

}

[SeanPercy42]

I designed it to be used on smaller resolutions. Nothing required will be outside the 1014x668 borders. That is also why I need the icons, logo, and quote request tab to reposition (in case a user resizes their browser on a high res monitor or if they have a lower resolution than 1080p).

So the "hut" movieclip is on it's own layer in flash, it will always just need to be centered (vertically and horizontally) to the browser window, while the navigation bar and quote request tab reposition to always stay on the screen. If you take a quick look at http://www.thedesignhut.biz you can see that the quote request tab slides left and right if you resize the browser window. This is exactly what I need it to do but only in flash. I'm going to try what you just suggested but if you follow that link and see that I'm trying to do something other different than what you think, please respond so I don't screw up my as code even more. Thanks for your help btw.

[sinious]

The only difference in the code is I'm using the objects properties such as width and height so if you change them the code will still work.

Here's a saved-down to CS4 example of keeping 3 objects aligned to the edges of a SWF. Test it in Flash and resize the player window and watch the objects follow the edges, just like your site.

Example Source

[SeanPercy42]

Okay I was able to get the icons, logo, and navbar to "float" where I need them using this code:

navBarIcons.x = stage.stageWidth/2 - 420;

navBarIcons.y = stage.stageHeight/2 - 550;

navBarLogo.x = stage.stageWidth/2 - stage.stageWidth + 185;

navBarLogo.y = stage.stageHeight/2 - 550;

navBar.x = stage.stageWidth/2 - stage.stageWidth + navBar.width/2;

navBar.y = stage.stageHeight/2 - 498;

function _onResize(event:Event):void{

navBarIcons.x = stage.stageWidth/2 - 420;

navBarIcons.y = stage.stageHeight/2 - 550;

navBarLogo.x = stage.stageWidth/2 - stage.stageWidth + 185;

navBarLogo.y = stage.stageHeight/2 - 550;

navBar.x = stage.stageWidth/2 - stage.stageWidth + navBar.width/2;

navBar.y = stage.stageHeight/2 - 498;

}

stage.addEventListener(Event.RESIZE, _onResize);

I'm sure several things could be simplified further but it works and I don't want to put more effort into it. The one thing I would like to do is have the icons on the navbar (that float left) stop floating at a certain position. I know this can be done with an if statement but can't figure out the values to use.

It basically needs to say something like if navbar icons reach 200px from the left side of the stage, stop moving; and I just don't know how to translate that into AS. Any ideas would be much appreciated.

[sinious]

It's exactly like you said. In the resize function just test with a condition to see if you should proceed with changing the values.

Just pre-test your calculation on navBarIcons.x above like so:

if ((stage.stageWidth / 2 - 420) <= 200)

{

     navBarIcons.x = int(stage.stageWidth / 2 - 420);

}

I'm just wrapping the math in an int() because it will cut off the decimal and everything after so you always stay on a whole pixel (it helps with clarity, especially on text).

[SeanPercy42]

I figured everything out, thank you so much for all your help!

[sinious]

Glad it worked for you, you're welcome and good luck!

[SeanPercy42]

I got it all setup and exported it to the web, and realized that the items don't reposition in the browser window. They only do when I click on "test movie" from inside Flash. Any ideas on how to fix that?

[SeanPercy42]

As far as I can tell I have to use ExternalInterface to send the browser dimensions from JS to AS3. I have no idea how to do this though. If you've done it before and possibly have a couple code snippets that I can easily throw in my AS3 & a JS file I would really appreciate it.

Here are two pages I found that look close to what I need but I don't know how to get and send the browser dimensions from the html/JS to AS. Thanks in advance for your help.

http://snipplr.com/view/5082/

http://viget.com/inspire/bi-directional-actionscript-javascript-communication

[sinious]

The code I posted in my very first reply shows you ExternalInterface and using JavaScript, although this was the opposite direction, AS to JS.

Take a look at the ExternalInterface example source in my first link. It's a full 2 way example.

If you use jQuery like I mentioned you can copy my example browser resize code too.

[SeanPercy42]

I have this very close to figured out. I'm just going to hide the divs and unhide them using ExternalInterface once the main swf loads. I am having a different problem with javascript though and was wondering if you might help me. I know it's more of a JS question but I saw that you're familiar with it and I can't seem to find the thread I found the last time I was having this issue. I actually had this completely correct before but was going to move my elements all inside the same .fla and didn't think I would need it anymore.

I'm trying to write and if statement that stops a certain div from moving once it's 200 or so pixels from the left side of the browser window. I know it's something like:

var iconsPosition = document.getElementById('icons');

function reposition(){

     if (icons.x <= 200){

          iconsPosition.style.position = "absolute";

     }

     else (){

          iconsPosition.style.position = "fixed";

}

I'm probably way off right now because I'm really tired and very new to javascript but this is similar to what I used before and had it working. All I'm trying to do is stop my icons from sliding under my logo if someone resizes the browser too far. Any help would really be appreciated. Thanks in advance!

[sinious]

Ya that's a JavaScript question. I don't exactly know what you're trying to do but if it's anchor to the left side of the screen, set the object as position=absolute and any block level item will always be exactly where you set the top/left settings.

Here's a full HTML5 example you can test in a browser with the individual settings in a JS script at the bottom. Any modern browser (esp devices) will have no issue with it.

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>200px</title>

<style>

*,html,body{margin:0;padding:0;}

</style>

</head>

<body>

<div id="myDiv">This is 200px wide, tall and will be 200px from the top and left of site.</div>

</body>

<script>

// NOTE: notice the script is BELOW the body? This assures HTML objects

// in the body are initialized before this script fires

// grab the object

var md = document.getElementById('myDiv');

// set as block (versus inline)

md.style.display = 'block';

// set width and height to 200px

md.style.width = md.style.height = "200px";

// set position to absolute on screen

md.style.position = 'absolute';

// set the actual position 200px left/top

md.style.left = md.style.top = "200px";

// color it red for obviousness

md.style.backgroundColor = "#c44";

// padd text

md.style.padding = "20px";

</script>

</html>

Because it's top/left anchored anyhow it will not need to be continuously processed in any resize events. Only elements trying to hug the right or bottom edges need that. Be sure to set the z-index if it should hover over other items or make sure the <div> is later in the code, either will keep it "over" other content.

Hope that helps and if you're all set please mark helpful/correct answers so we can filter unanswered. Good luck!