Flash Headline in Arthemia

Posted on 05. Nov, 2008 by Sean OBrien in Design

On a recent project I just finished  I got to try out the Arthemia Premium theme and here is what I came up with: www.followthewinds.com. I had quite a few emails from people asking me how I got the flash animation working in the Headline section. Funnily enough, I saw the script on someone else’s website and figured out how to do it myself.

Unfortunately, its not a free script; it’s “paid” and will set you back US$15 from FlashDen:
http://www.flashden.net/item/accordion-v1-xml/4332

You can get other similar scripts for free but they’re not as complete and usually haven’t got the .xml file attached which will let you very easily add text to the images and assign the right pictures without editing the original flash files (.swf/.fla) themselves.

This script was a little tricky to get to work in because (my copy at least) didn’t come with any decent instructions and it wasn’t apparent where all the files needed to be sitting in your header.php and in your source folder. Anyhow, I worked it out after all the emails I received from others asking how I did this, I decided I’ll put a quick tutorial together on how you can put it in the Arthemia theme.

If you would like to attempt to get the newer v2.1 script to work, some discussions and a working tutorial can be found on this forum post, for those who are members of the Colorlabsproject Forums: http://colorlabsproject.com/forum/topic.php?id=128.

Step 1.
Upload the following files (which you should have the from the FlashDen download) to a directory in your wordpress folder. I used /wp-content/themes/arthemia/ to make it easier.

• image1.jpg
• image2.jpg
• image3.jpg
• image4.jpg
• image5.jpg
• image6.jpg
• image7.jpg
• preview.swf
• swfobject.js
• accordion.xml

Step 2.
Add the following piece of code to your header.php after the last carousel script. It should be somewhere around Line 22 depending on what update you have of Arthemia theme.

Change it to your website address obviously! And be careful that it links perfectly to the file.
Try copying the address into your browser to check!

Step 3.
Now we need to add the following code to replace everything in the Headline div. Just delete everything between line 188 – 227 in your header.php and replace it with the following code:

You’ll notice I’ve changed this a little from the original code in the FlashDen download. This is because it would not validate in strict xHTML without these changes. I’ve only changed two things:

• delete the table value height=”100%”, this is not a valid value – you don’t need a height in this instance, the height will be defined by the size of your .swf file.
• replace all instances of & with &. This is the correct html special characters to use to validate your flash code.

Step 4.
Now go to your accordion.xml file and change all the image1.jpg instances to a full address (it needs to be the exact address to work, or you can use the tag < ?php bloginfo(’template_url’); ? >.

Step 5.
Once you’ve got up to Step 4 and you’ve edited your pictures to suit, you should be able to view the player on your website.  You’ll notice the .swf file is a little wider than the Headline section and you have about 1-2px of your player being cut-off. A simple fix of your style.css file will fix this:

Here’s what you need to change to make it fit like mine:

#headline {
width:600px;
}

#featured {
width:300px;
}

And there you have it. A nice flash accordion style menu featuring whatever content you’d like!

If you are having any problems with this (I know I made this tutorial pretty short, and I’m having issues with my GoogleSyntaxHighlighter Plugin so you can’t copy and paste the second piece of code as I’ve had to use an image of it!) feel free to send me an email about it. I’ll try to help out where I can.

And props to Michael for a great theme – Arthemia Premium

Tags: arthemia, code, Design, flash, premium-themes