Problem with Flash Header

[Sawhorse]

Let me just make sure I am understanding. So if i am wanting to keep the same height as it is right now...not by changing my flash file I like the size of it right now...all i would need to do is make the width larger in the actual flash file?

YOU MUST change the image ratio of your original swf file to match the flash display stage ratio. If you do not change your original swf file to match the flash display stage ratio you will always see part of the flash stage in the banner. If you want a 20:3 display banner then you must edit your original swf and save it so it has a 20:3 image ratio.

The number of px you have really only deals with image quality and final size of your swf. Generally, more px - better quality - larger file size - slower image rendering.

Davewest & Misty back to you. I do not think I have more I can add.

[misty]

Much easier to have flash swf file EXACT same width and
height as template header settings

[Sawhorse]

Misty,
Yes, it is easier. You know what you have, and that is how I do it. But, I believe it is not mandatory.

[welchyboy]

OK I am trying to understand bare with me lol. I can easily set the #logowrapper to say width:900px; and height: 110px; easily. Then change the flash file to match these. What I don't understand is when you change resolutions that wont matter? For example 600px on a 800 x 600 page and a 1280 x 768 page look completely different. My other issue is that I am very happy with the height of my banner right now. Not meaning the logowrapper size as 110px I mean if i were to change the height of my flash file from whatever it is like 300 to 110 the height would really change and the logo won't be readable. Am I doing something wrong. I am going to mess around with it right after this post and I will see if i can make something happen.

[welchyboy]

OK I have tested it and for some reason it isnt working. Or i am doing something wrong again which is possible. I put my flash file to height: 110px; and width: 887px; as well as my #logowrapper it works great in 1024x768 which I am using. However if the resolution is changed it still looks bad. What is the problem. If you go to the site now you will see that the logowrapper is set as i said but the flash is not anymore. I changed it back for now. Please let me know what i could be doing wrong. Thanks again for ALL your help. Everyone who has helped so far! Much appreciated!

[Sawhorse]

I looked at your site. All I can tell you is that you have a very big swf. It takes a while to load. I do not have the expertise to go any further. Someone else may be able to help.

[welchyboy]

Yes you are very right...That is my problem. I think I am doing something wrong I have never seen a flash file 2600px wide which this one is. Like I said I did shorten it to about 887px by 110 px which will make it a LOT smaller however I need the flash file to ALWAYS fit between the page margins of the logowrapper.

[davewest]

Yes you are very right...That is my problem. I think I am doing something wrong I have never seen a flash file 2600px wide which this one is. Like I said I did shorten it to about 887px by 110 px which will make it a LOT smaller however I need the flash file to ALWAYS fit between the page margins of the logowrapper.

One design concept is to keep it simple and small. Faster loading means they may actually see what you spent so much time on. This applies to flash as will. Using images inside of flash increases it's size. Best practice is to size your images just to what you need, no smaller or larger then that. To make something totally free of size distortion, don't use any images at all.

I'll load a image and then begin to draw and pant a duplicate image within flash making a raster image. Once I'm done, I'll delete the jpg image. This leads to a design that can be scaled to any size I want with no distortions. For some of my banners that I want to load fast, it's all done in action script with maybe a background color.

As for your concerns about screen size, code for the average size, or create a resolution sniffer. Check for res and code your css for a set size screen and change size of things. To hit sizes from PDA's on up to TV's, your going to need to code different pages for each and redirect.

The sniffer below is just a simple one I used to check for browser and load a css that works for them. Half the code was deleted to down size my message.

<!-- begain detect witch CSS to use
    var ua = window.navigator.userAgent;
    var tTest = 0 // test for all others
    
       if(ua.indexOf("WebTV")>0) { //for webTV users
        ua = "WebTV"
        tTest = 1
        document.write('<style type="text/css"><!--');
        document.write('p { font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-size: 80%}');
        
        document.write('a:link {  color: #0000FF; text-decoration: none; font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-weight: bold}');
        document.write('--><\/style>');
        //alert(ua);
}
        else if(ua.indexOf("MSIE")>0) { //for IE users
        ua = "MSIE"
        tTest = 1
        document.write('<style type="text/css"><!--');
        document.write('p { font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-size: 100%}');
        
        document.write('a:link {  color: #FF0000; text-decoration: none; font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-weight: bold}');
        document.write('--><\/style>');
        //alert(ua);
        }
        else if(ua.indexOf("I")>0) { //for Netscape users
        ua = "I"
        tTest = 1
        document.write('<style type="text/css"><!--');
        document.write('body { background-color: #FFFFFF; background-image: url(Graffics/bakgrond.gif)}');
        
        document.write('p.navigation-bar { background-color: #00ffff; border: medium #0000ff groove; padding: 1%; text-align: center; font-size: 90%; background-image: url(Graffics/flamback.gif)}');
        document.write('--><\/style>');
        ////alert(ua);        
    }
        else if(ua.indexOf("Gecko")>0) { //for Mozilla/Firefox users
        //alert(ua);
        ua = "Gecko"
        tTest = 1
        document.write('<style type="text/css"><!--');
        document.write('body { background-color: #FFFFFF; background-attachment: fixed; background-image: url(Graffics/bakgrond.gif) }');
        
        document.write('a:link {  color: #FF0000; text-decoration: none; font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-weight: bold}');
        document.write('--><\/style>');
        //alert(ua);
    }
        
        else if(tTest == 0){  //default for all others 
        document.write('<style type="text/css"><!--');
        document.write('p { font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-size: 100%}');

        document.write('a:link {  color: #FF0000; text-decoration: none; font-family: "Comic Sans MS", "Times New Roman", serif, Times; font-weight: bold}');
        document.write('--><\/style>');
        //alert(ua);
        }
     // end -->

Sorry for getting off track with web design in stead of flash designs. I've just installed a banner on my web site that's 300x75 expanded to 500x125. The only true image is the boy in the ghost costume.

[welchyboy]

I understand by adding jpegs to the flash file it is what is making the file larger. However the customer was wanting this particular image as well as their logos in there as well. My main problem and focus is just to make sure it looks good in the browser then if needed I can spend more time decreasing the size of the file. But I need to get it working with other browsers. I am not sure exactly what to do with that res sniffer. I am quite new in css and flash. Still learning all these things at once. I did some research about css switchers I am still looking into this to see if i can make something happen but as of now haven't gotten anywhere. I am not sure how to really make these images in the actual flash file. I am so sorry I am an extreme newbie but I have been working on this site for about 3 months and it is finally coming around thanks to everyone here at zen cart. So I am glad i took on the challenge and began to learn to be a zenner! So thanks again for taking the time out to help a newbie!

[welchyboy]

This is a site that I would like to be able to do something with...

http://www.themaninblue.com/experime...lutionLayout/#

When you set your resolution to 800 x 600 it uses a completely different stylesheet. than when you set it to something higher than 800 x 600. Most likely I won't change much but I would be able to change the logowrapper size and maybe have it reference a completely different swf if i needed to. Any thoughts on how to approach this. I know you gave me your code I am just not sure how to use it lol.