flash swf as header in thematic « ThemeShaper Forums

ThemeShaper Forums » Thematic

flash swf as header in thematic

(4 posts)

Started 3 years ago by dicarlo
Latest reply from dicarlo
This topic is resolved

Tags:

dicarlo
Member
Hey everyone, I'm a flash/actionscript guy with limited experience implementing css/php/html code. I designed a site in Wordpress 2.7.1 using Thematic 0.9, and have everything working except a flash header. First of all, thanks for making the process so easy with Thematic.

I followed Ian's and the forum's instructions to accomplish the following:
1. created a child theme with custom content and overrides
2. placed an image where the header exists,
3. moved the SEO-friendly header copy offstage
4. added a home button to the top nav

Here's the site:
http://willpower.tv/

My aim now is to have an .swf appear exactly where the header .jpg appears. Unfortunately, you can't just swap out a ".swf" for ".jpg" in the style.css child theme here:
```
#blog-title a {
	background:url(images/willpower_header_alt.jpg) no-repeat top center;
	// etc
}
```
Wouldn't that be easy?

I consulted these:
http://themeshaper.com/forums/topic/loading-flash-in-the-header
http://themeshaper.com/forums/topic/widgets-in-the-header

But neither resolves this issue.

With flash, I've got to identify the file's class and add detection and browser-specific handlers. The best-practice way to detect for flash (what Disney/WB/Fox and other entertainment industry companies use) is the opensource swfdetect. I'm using it on this page to call a swf:
http://willpower.tv/wp-test_for_thematic/

That page uses the following code to place either a swf in center at the top edge:
```
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen">
		/*-- bkg image pattern and overall img-swf alignment --*/
		body { padding:0 0 0 0; margin:0; text-align:center; background:#c8ddc0 url(img/bkg.jpg) repeat-x top center; }
		/*-- stupid borders --*/
		.jesushatesimageborders { border-width:0; padding:0 0 0 0; }
		/*-- this corrects default active link img errors in i.e. and firefox browsers when using flash wmode --*/
		object { outline:none; padding:0 0 0 0; }
	</style>
	
	<script type="text/javascript" src="swf/swfobject/swfobject.js"></script>
	<script type="text/javascript">
	swfobject.embedSWF("swf/header.swf", "myContent", "940", "272", "8.0.0", "swf/swfobject/express_install.swf");
	</script>
</head>
<body>
	<div id="myContent">
		<a><img class="jesushatesimageborders" src="img/header_alt.jpg" alt=""/></a>
	</div>
</body>
```
If you view this script in a typical browser with both javascript and flash enabled, then the flash header (header.swf) appears. If you view this page on iPhone or in a browser while turning off either flash or javascript, then the site loads only the image (header_alt.jpg) identified in the myContent div id.

I've experimented with inserting a swf load script (variations on the one above) into several locations, but the closest I can get to a working site shows the site with TWO headers. One swf and one jpg, sometimes with the menu missing. If I remove the old jpg header, the header text reappears and the swf leaves the stage.

Does someone know which files I should modify in my child theme (plus a little guidance what to put there) in order to to swap the SWF where the current header resides?

Thanks everyone,
Perre
Posted 3 years ago #
dicarlo
Member

Any suggestions on how to approach this? I tried to be as detailed as possible about what I tried and what hasn't worked. Thanks...

Posted 3 years ago #
Chris
Moderator
Hey,

I can tell you how to get your code into the header but you have to try where exactly it needs to be and if it doesn't collide with the rest of the header.
```
function my_swf_code() {?>
<--- your code --->
<?php
}
add_action('thematic_header', 'my_swf_code', x);
```
The x is the big question .. start with 0 .. this will add you code in before #branding .. as I said .. it might be possible that you need to remove parts of the header just in case that it collides with your code.
```
function remove_certain_things() {
remove_action('thematic_header','thematic_brandingopen',1);
remove_action('thematic_header','thematic_blogtitle',3);
remove_action('thematic_header','thematic_blogdescription',5);
remove_action('thematic_header','thematic_brandingclose',7);
}
add_action('init', 'remove_certain_things');
```
This will give you a clean header.

Cheers,

Chris
Posted 3 years ago #

dicarlo
Member

Hey Chris,

Thanks for your solution - it worked, and worked well. I have no more questions. I just wanted to report back on what the final results look like and to break down how specifically it worked. Anyone else trying to put flash into a wordpress header using thematic can follow this model. I'll keep an eye on the forums if anyone has questions.

You can see the final result on the final Will Power site here:
http://willpower.tv/

The header is in flash. What you see here is one swf (willpower_head_container.swf) that loads a small preloader script (contained in preloader.swf) which in turn loads a 300k file (willpower_header.swf). When it's fully loaded, it plays the header which chooses one of 16 random frames featuring different poses by the actor Will Power. But before all that happens, we run a great open source detection scheme called swfobject. I mentioned this in my initial post.

Here's the code found within the functions.php, starting with yours (Chris's) above, followed by my function to enclose the swf code called my_swf_code:

function remove_certain_things() {
remove_action('thematic_header','thematic_brandingopen',1);
remove_action('thematic_header','thematic_blogtitle',3);
remove_action('thematic_header','thematic_blogdescription',5);
remove_action('thematic_header','thematic_brandingclose',7);
}
add_action('init', 'remove_certain_things');

// Add a swf where the img header is
function my_swf_code() {?>
		<style type="text/css" media="screen">
			/*-- bkg image pattern and overall img-swf alignment --*/
			html, body { padding:0 0 0 0; margin:0; text-align:center; }
			/*-- stupid borders --*/
			.jesushatesimageborders { border-width:0; padding:0 0 0 0; position:relative; }
			/*-- this corrects default active link img errors in i.e. and firefox browsers when using flash's wmode --*/
			object { outline:none; padding:0 0 0 0; height: 272px;}
			div#content { text-align:left; }
			object#content { display:inline; outline:none; }
		</style>
		<!-- open source swfobject flash detect, flash content embed, and alternate content embed -->
		<script type="text/javascript" src="http://willpower.tv/swf/swfobject/swfobject.js"></script>
		<script type="text/javascript">
		swfobject.embedSWF("http://willpower.tv/swf/willpower_head_container.swf", "myContent", "940", "272", "8.0.0", "http://willpower.tv/swf/swfobject/express_install.swf");
		</script>
		<div id="myContent" >
			<a href=""><img class="jesushatesimageborders" src="http://willpower.tv/img/willpower_header_alt.jpg" alt="" no-repeat top center /></a>
		</div>
	<?php
}
add_action('thematic_header', 'my_swf_code', 2);

Anyone who wants to swap this out for their own should find that it works great in WP 2.7.1 and Thematic 0.9.5.

ThemeShaper Forums

ThemeShaper Forums » Thematic

flash swf as header in thematic

Reply