Flash Headline in Arthemia
Posted on 05. Nov, 2008 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.
Recently, a newer version of the flash script (v2.1) has been released, which will not work with the below instructions. This tutorial was written with v1.4.4 and has been tested up to v1.5 and works perfectly. If you have downloaded the newer version, it appears all you need do is firstly replace is the swfobject.js file with the older version. You can download my v1.4.4 file here. Then put all the files (images etc) into one folder without the subfolders used in the new downloads. Then you should be able to follow these instructions as usual.
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.
<script src="http://www.followthewinds.com/wp-content/themes/arthemia/deploy/swfobject.js" type="text/javascript"></script>
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
nick
Jul 25th, 2009
Hey thanks so much for going to the trouble in talking us through this..I have the script working but it ONLY works with followthewinds linking to the swf file and the xml accordion file. When I replace the links with my own website it doesnt work at all. Would you know why this would be?
kind regards Nick
Alex
Jul 26th, 2009
Hey everybody,
same problem that nick, script works great when I’m using files from your website and when I want to change something, nothing work great…
nick
Jul 28th, 2009
I got it to work by linking the files to a directory on another website which I host on a different server, is it a possibility that the flash xml script needs specific server scripts to run properly? You can check the website Im using it on at http://www.blufiremedia.com
Carlsberg
Aug 3rd, 2009
Im having a problem with my installation this flashden-script.
I recently got everything to work as a charm, but for some reason the flash works fine in Firefox and Opera. But in Internet Explorer I see that when people are clicking on a article in the flash and goes back to the home page the flash goes black, with nothing there.
I’ve tried with firefox 3.0 and Internet Explorer 6, IE7 and IE8.
Im guessing it has something to do with the swfobject.js.
Running ver. 2.1 of swfobject.js
Does everone facing the same problem?
Chris Lin
Aug 14th, 2009
I have the same problem as Nick and Alex.
I can get the script to work fine with the followthewinds files.
When I try to use the ones on my site nothing shows up. Anyone have a fix for this?
Chris Lin
Aug 14th, 2009
Figure it out guys.
To everyone who is having the problem, try just coming the items in the deploy directory into the root directory of your website.
That is how I solved it and I this should definitely help everyone else.
Yachts Combson
Sep 22nd, 2009
You have a great website here…and a great theme. Keep up the good work and continue with your blog..
Wordpress is so much fun..
tutotech
Sep 28th, 2009
I have the same problem as nick and alex. Can you help me please?
tutotech
Sep 29th, 2009
I sent you an email. Plase help me with my problem.
Thanks
tutotech
Sep 30th, 2009
Oh come on! I need help :D:D:D
rick
Jan 20th, 2010
On step 2, what code are you referring to?
” 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.”
Sean OBrien
Jan 20th, 2010
Hi Rick,
Arrghh! Once again my source-code plugin fails. I’ve found another way …
Refresh this blog post and the new code should appear in Step 2.
If it doesn’t, email me and I’ll send it to you direct. Cheers.
L
Feb 4th, 2010
Hi Sean,
Firstly, thank you so much for sharing all this information – I really appreciate it!
My headline doesn’t scroll automatically – i have to run my mouse across the images for the slideshow to work. Do you know why this is? Is it a plugin that i need or have missed something?
Cheers!
Sean OBrien
Feb 10th, 2010
@ L – that’s very strange.
The script is made with Flash, so it won’t conflict with any plugins you have. It should scroll automatically straight out of the box.
Could you let me know your URL and see what version of the script you have. There are much newer versions than the v1.4.4 which I wrote this tutorial with.
L
Feb 10th, 2010
Hi Sean,
Thank you so much for your response.
Our URL is http://www.trespassmag.com
I did everything in your tutorial including using v1.4.4
I’m not sure where I’ve gone wrong – if you can help, I’d appreciate it very much.
Thanks again.
L
Feb 24th, 2010
Hi Sean,
Sorry to bug you again, but did you manage to have a look at the script that I’m using? Still no autoscroll on the flash headline.
Cheers,
L
Jacinto Szmidt
Mar 5th, 2010
Hey, I found this post while searching for help with JavaScript. I’ve recently changed browsers from Opera to Microsoft Internet Explorer 5. Just recently I seem to have a problem with loading JavaScript. Every time I browse site that needs Javascript, my computer doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is very appreciated! Thanks