Problem with Flash Header

welchyboy:

Any suggestions on how to make it better or quicker? I have only tested the file with about 1280 by 768 and lower resolution.

OK... first, there are only three resolutions in flash, High, Medium, and Low. The default is High if not set through the param command. The size is what I think your referring to, basically is the size of your stage. Depending on what your using as a image depends on how good it looks. On my banner, it's only 26kb and is pack with animation. It could have been 8kb, but I used a jpg for the scrolling background graphic. A good book if you have time is Flash Hacks by Sham Bhangal put out by O'Reilly. Good tips on using scripting to reduce file size and incressing animation. The more image you can create in flash and less outside formated images, like jpg's, the smaller the file size. Also, raster graphics, which is what your creating, has very little if any distortion when changing size in flash.

Yeah I will check out that book and I do understand by adding these images it making my flash file huge. I did create these in photoshop but not sure if i want to lower the quality. I am sure I can change it to like a gif or another format to lower the size i just don't want to mess it up too much now because I am pretty much happy with how it looks now. Thanks for all your help and I will see what i can do. Thanks again

Well confused on how to get this working.

Trying to put a flash file in a banner on the header.

This is what I started with that did not work. This is is in the html part of the banner page.

Have installed flash sidebox.

What do I need to put in the html section to get this working please.

Regards
Laurie

chalfontgifts:

Well confused on how to get this working.

The flash banner is there, increasing the height in your CSS for logoWrapper should give it more space. Looking with firefox 3.

Hi Dave

It is there in firefox, but not in IE. That is why I wanted to implenent this contribution, but can't get a drift of what I have to put in the html section of the banner setup to get it to display.

The banner was 728x90 in size. When I adapt the sample code it still shows small.

Can you give me some clues as to what I have to put in here and what each bit does.

I deally I want to display the banner and when I click on it it takes me to a particular page on my site.

Regards
Laurie

chalfontgifts:

Hi Dave

It is there in firefox, but not in IE. That is why I wanted to implenent this contribution, but can't get a drift of what I have to put in the html section of the banner setup to get it to display.

The banner was 728x90 in size. When I adapt the sample code it still shows small.

Can you give me some clues as to what I have to put in here and what each bit does.

I deally I want to display the banner and when I click on it it takes me to a particular page on my site.

Regards
Laurie

If your using IE7, then IE should ask to display it. If IE6 and below, you need a plugin to view flash or shockwave objects. http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash

I use swfObject for a walk around for IE7 asking permission.

OK I am sorry I guess I am a little slow but this is where I am at on my flash header. I have it set to 110px as my height in the logowrapper.

my code for the flash file is here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="includes/templates/arch_shoppe/jscript/swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			params.play = "true";
			var attributes = {};
			attributes.align = "middle";
			swfobject.embedSWF("stxbanner.swf", "stxbanner", "100%", "100%", "9", "expressInstall.swf", flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="stxbanner">
		  
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	

	
	
</body>
</html>

The width of the banner is the only problem from what i see across different resolutions. The height is set to 110px and that is working out great. But since it is set to that now i guess to keep porportions or something it set the width to something smaller. Can anyone figure this one out.

Width of template should be same width as flash swf..
currently it is not...hence spaces at left/right side.

I believe that both Davewest & Misty have given you the reason why your swf does not fit your flash stage (the reason why you are getting black or what ever you have set as your stage background). Let me try to be specific

1) If your swf is say 1280px x 768px you have a 5 to 3 image ratio.
2) If you make your flash stage only 110px high and your swf has a 5 to 3 image ratio the image you will see on your banner will only be 183px wide.
3) The reason why it will only be 183px wide is that your swf must display in the same ratio as the original swf (5 x3).
4) If you want to display a banner that is wider than 183px and you keep your display width at 110px you must make your original swf wider but not higher.
5) For example if you want to display a banner that is 730px by 110px (approx. 20 by 3 ratio) you must make your original a 20 by 3 ratio
6) Thus your original 1280px x 768px (a 5:3) should be 5120px by 768px (20:3) to fit on the flash stage correctly.
7) You do not have to have an exact 5120 x 768 swf original image as long as you have the correct proportion. You could do a 2560ps x 384px swf or anything else that keeps the same ratio.

I hope I am being helpful. Both Davewest & Misty have a better grasp of this than I. All I am trying to do is be a bit more concrete.

Sawhorse:

I believe that both Davewest & Misty have given you the reason why your swf does not fit your flash stage (the reason why you are getting black or what ever you have set as your stage background). Let me try to be specific

1) If your swf is say 1280px x 768px you have a 5 to 3 image ratio.
2) If you make your flash stage only 110px high and your swf has a 5 to 3 image ratio the image you will see on your banner will only be 183px wide.
3) The reason why it will only be 183px wide is that your swf must display in the same ratio as the original swf (5 x3).
4) If you want to display a banner that is wider than 183px and you keep your display width at 110px you must make your original swf wider but not higher.
5) For example if you want to display a banner that is 730px by 110px (approx. 20 by 3 ratio) you must make your original a 20 by 3 ratio
6) Thus your original 1280px x 768px (a 5:3) should be 5120px by 768px (20:3) to fit on the flash stage correctly.
7) You do not have to have an exact 5120 x 768 swf original image as long as you have the correct proportion. You could do a 2560ps x 384px swf or anything else that keeps the same ratio.

I hope I am being helpful. Both Davewest & Misty have a better grasp of this than I. All I am trying to do is be a bit more concrete.

Wow You and misty rock lol that is all I have to say. I haven't tried anything yet but I will do this. 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? What kind of size am i looking at to work with like a 1600 wide resolution. I want to make sure it is viewable for the larger resolutions as well. Thanks again for the very in depth information. I will try this and see what kind of luck i have.

welchyboy:

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.

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

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

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.

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!

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.

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.

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.

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.

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!

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

http://www.themaninblue.com/experiment/ResolutionLayout/#

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.