Flash Headline in Arthemia
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
site by
Yay!
Yay indeed.
This is great, thanks for the tutorial. I’ve digged it.
Hi,
Is the Flash Headline automatically updates when got new posts?
Unfortunately, the flash headline won’t automatically update with any new content.
Its controlled by an .xml file which is not influenced by the WordPress loop, so you have to put your content in there manually. A bit of a pain, yes – however there are some plugins that will do it automatically for you, such as:
Jason Schuller’s “Featured Content Gallery Plugin” (http://www.revolutiontwo.com/plugins/featured-content-gallery.htm).
However, we proposed using the “Flash” headline because any animated plugin usually is using code that conflicts with the jcarousel animation in the ‘featured’ section on the right of this theme. Jason’s plugin breaks the jcarousel animation as mentioned. Flash is not using jquery/ajax or whatever, so its won’t conflict. Its a ‘comprimise’ I guess you could say …
Hi Sean
I finally got this working on my website and it’s all good expect one thing. How do get the transparent text background?
I know it’s not a part of the normal accordian background so you must have tweaked it yourself?
It’s a real pain when you have to keep fiddling with the text fonts and positions depending on which image you use. It would be much easier to have a consistent background that the text would be placed in like you have done.
Can you hook us up with the css or formatting you did to create the effect?
@ Saif – sorry to be disappointing but I didn’t use any CSS to create the transparent background for the text; I’ve just done this with Photoshop on the actual image:
http://www.followthewinds.com/wp-content/themes/arthemia/deploy/image1.jpg
See the above pic for a sample. To do this more efficiently I used the same transparent section on every image and made sure all my text was similar length (ie, 2 lines long).
Its not possible to attribute CSS to this flash script as its ‘flash’, not CSS controlled, so you have to resort to the images you use for anything graphic and the .xml file for anything with text.
I’m thinking most people are wanting to apply this as the ‘headline’ section was intended to be applied in the default Arthemia-Premium theme? ie, each image is an excerpt of the latest articles and clicking will take you to the next article. Because you have to constantly update the .xml file and images manually this flash headline (although it looks very cool!) is probably more trouble than its worth to apply its use like this :-/
I think the best application of it is to come up with 5-6 universal images that can remain there for some time as I’ve done on http://www.FollowTheWinds.com rather than having it relate to the latest articles and need to be constantly updated.
No worries sean. Thanks for letting me know otherwise I would have wasted hours trying to figure it out. I have Photoshoped my own images to breate the effect.
Hi Sean,
First of all, thank you thank you! I lost many sleepless nights trying to figure this out. Now, I am currently developing a website for my client http://www.chun-mei.cn. I have also purchased a similar image preview script from Flashden, but it is not the accordion one. The one I’m using is XML Photo Preview.
So here’s the problem, it does not load on the site. I’ve checked through everything — all my code, links, paths, even the permissions on my files from the server, etc. When I view the preview.swf file it works just fine, so the data.xml is okay. But obviously it doesn’t work on the site…I just get the “Loading” on the flash.
Please help a.s.a.p! Many thanks for your time and assistance.
BTW, here is the code I’ve used in the header.php file:
================================================
You need to upgrade your Flash Player.
var so = new SWFObject (“http://www.chun-mei.cn/wp-content/themes/arthemia-premium/preview.swf?xmlPath=http://www.chun-mei.cn/wp-content/themes/arthemia-premium/data.xml&keepSelected=t&selectedWindow=0&image
Width=590&imageHeight=300&sWidth=590&sHeight=300″, “sotester”, “590″, “300″, “8″, “#FFFFFF”);
so.addParam(“allowFullScreen”, “true”);
so.addParam(“wmode”, “transparent”);
so.write(“flashcontent”);
================================================
Hi Susana,
When I look at the site, I can see the flash script working perfectly! Looks great btw! I actually really like this script that you’ve used.
It was what I was originally trying to come up with using the script from the Vikiworks V5 Theme, however it was conflicting with the featured scroller as it was a jquery based script rather than flash.
Unless you’ve already fixed it before I read this comment; let me know what browser you are using because it works fine for me ;)
Will the plugin made by Jason at WP-Elements ( http://www.wpelements.com/2008/08/28/the-featured-content-gallery-plugin-v20-now-fully-automated/ ) work as an alternative to flashden?
Will like to know Sean.
@ Pranab – the problem with Jason’s script is that it’s jquery/ajax based and will conflict with the jcarousel in the ‘featured’ section to the right of the headline.
It will still work, its just your jcarousel will not scroll up and down anymore. Originally I was going to use this plugin as I like it more than the flashden script, however using a ‘flash’ based script has been the only way to avoid the jcarousel conflicts as nearly every featured-headline plugin I’ve seen around is based on jquery/ajax.
Flash seems to be the only option to get over that problem :-/
@Sean
Thanks Sean For that info! I have emailed you with a problem! All the post in the featured section stopped scrolling! Can you tell where is the problem.I have sent you the files to compare!
Thanks in advance for your help!
Hi Susana,
I would also be very interested to know what steps you’ve taken to resolve your issue. I’m having the exact same symptoms on savetwogive.com.
Here is my content:
===================================================
You need to upgrade your Flash Player.
var so = new SWFObject(“http://savetwogive.com/wp-content/themes/arthemia-premium/deploy/preview.swf?xmlPath=http://savetwogive.com/wp-
content/themes/arthemia-premium/deploy/accordion.xml&keepSelected=t&selectedWindow=0&imageWidth=424&imageHeight=300&sWidth=590&sHeight=300″,
“sotester”, “590″, “300″, “8″, “#ffffff”);
so.addParam(“allowFullScreen”, “true”);
so.write(“flashcontent”);
===============================================
I too can run the sample index.html content packaged with accordion just fine: http://savetwogive.com/wp-content/themes/arthemia-premium/index.html
Stranger yet, when I replace my domain (savetwogive.com) with Sean’s domain (followthewinds.com), it works just fine (using Sean’s content instead of mine).
Any ideas would be greatly appreciated.
BTW Sean, your graphics look awesome on your site.
Hey Sean. Hope things are going well.
I have 3 problems with the Arthemia Premium…its like this:
1- When am using the free version of Arthemia, i can see my post view counts next to the post title. But i don’t see anything for the Premium. how to solve this issue?
2- You were speaking about the “jcarousel” which the effect is suppose to show in the featured category. Right? for me it isn’t showing? how to solve this problem too?
3- How can i remove the posts date time? i don’t want it to show up next to my posts.
I really appreciate it if you could help me with my problems.
Thanks in advance Sean.
it’s a great.but i have some problem..my images not view..i have changed adress in accordition xml..
hi..plz lets me know how to change this images in my web header..
http://sidzartz.com/
Hey Sean. You did a great job :)
I was wondering if you could tell us how can we achieve if we are using the Free version of Arthemia.
Thanks
Hi everybody.
I am sorry. I did follow all the step, but I have no images. Can somebody help me please ?
Thank you very much.
Hi,
thank you for your great turtorial!
Unfortunately, i have arthemia-PREMIUM and your codelines-numbers are not compatibly with this.
Now, i don’t know exactly where i have to insert step 2 and step 3. I try it, but it doesn’t work.
could you help me?
Hi Everybody!
Sorry not to get back to all these comments sooner; I didn’t realise so many people would read my website! Ok, here goes…I’ll start at the most recent comments then work up…
@ Funkytown – This tutorial WAS written using Arthemia Premium, its possible there’s been a few updates in the months since I wrote it, so some of the code lines could be different from when I wrote this tutorial. If you like, email me at seanobrien[at]aus120.com and send me your header.php file and I’ll show you where to insert the code.
@ Elbubu, Sidez – if your images aren’t showing up, more than likely you have some code wrong in your accordion.xml file; go through it with a toothpick!! If you’re still having problems, email your .xml files and I will try to take a look at them later in the week.
@ Vuki – I haven’t tried the free version of Arthemia. I would imagine it works exactly the same way, just the code in the header.php will be a little different. I believe the structure would be the same, so see if you can find the same lines of code as I’ve shown in the tutorial – otherwise, send me the header.php from the free version of Arthemia and I’ll see if I can figure it out.
@ DanielPK – 1) That appears to be a feature only available in the FREE version of Arthemia. Probably try asking on the Arthemia forums about that question.
2) Not sure what you mean here? The jcarousel I have been referring to is in the featured section which is on the top right hand side of the theme, and has scrolling articles. If it is not working straight out of the box when you install the theme, you must have a plugin conflicting with it.
3) Try asking on the forums about this one too :-)
@ Susana, Nixon78, Pranab – its been a while since I’ve responded to comments on this site, so have you sorted your problems out or still need help???
can you help me to make arthemia Jcarousel featured working? im start to getting head ache to fix this..
@ RE – let me know exactly what the problem is you are having and I’ll try to help out as best I can.
supper
I’m building a site for a friend using the arthemia premium theme with the kick ass headline script. But for the life of me CAN NOT get it to work. I’ve tried everything. I have the code like you have it, I’ve even used the same pieces of code a friend has on his site which works fine (and is top stuff btw, http://www.trifec.com)
I tried uploading the example index.html to the deploy folder to test it and frustratingly it works fine:
http://www.jeremynicholas.co.uk/test/wp-content/themes/arthemia-premium/deploy/
But it will not work within the header.php:
http://www.jeremynicholas.co.uk/test/
What am I missing????
TJ :(
I have the same problem. I do believe I’ve included the code correctly, finally I even copied the code from the source code from followthewinds.com (replacing with my domain and directory structure) to make sure it was correct. But all I get is: You need to upgrade your Flash Player.
I can also show the flash in the test html: http://test.krissi.net/deploy/index.html
I’ve tested this here: http://test.krissi.net.
I finally figured it out. The script swfobject.js has been updated on the originally site, and this seems to be the reason for why it is not working correctly. I copied the version you have on your site down and used that instead – and this seems to make it work. I need to do some tweaking to make it look nice though.
Hello Sean
Great tutorial.
I followed the steps very carefully.
But it just wouldn’t work for me.
Carousel has stopped working as well.
The website in question is http://www.webspin.org
For the moment i have reverted back to old header.php (removed the accordion).
Carousel is still not working.
I have emailed you as well with the header.php (modified) file.
Please help me!!!
I would really appreciate it.
Thanks
Sumit
I’ve sent you an e-mail…
I’ve tried so many things right now… I really need your help.
I’m using Arthemia Premium and WP 2.7… thanks a lot! I’ve sent you a copy of my header.php.
Cheers!
Like Krissi said, the problem seems to be in the versions of the flash file. I don’t know if Estevao sent you the 2.1 version or if you have downloaded it from flashden.net, but if/when you do figure out how to get the new version to work with a-p, if you could post how you did it, that would be muchly appreciated. I’m using a different theme for my main site right now, but hope to use AP for another project.
Hello
I posted a comment here a few days back, but i guess its still not approved.
My Accordion works fine independently.
But it wouldnt work when inserted in header.php
What could be the problem?
First I thought, it could be a plugin conflict. I deactivated all plugins but it still doesnt work.
I need help desperately.
I have been trying to get it to work for past 4 days.
Any help is appreciated.
Thanks
I forgot to mention the URL.
You can see it working here > http://www.webspin.org/wp-content/themes/arthemia-premium/deploy/
I want to integrate it to http://www.webspin.org/
Hi everyone!
I’m still trying to configure correctly jCarousel on arthemia theme.
This is the situation:
- I’m using jcarousellite 1.0.1 & jQuery 1.3.2 on WP 2.7.1.
- I’ve call correctly these script.
- I’ve 6 posts categorized with “Featured”
- I’ve create a div layer named “carousel” follow by and HTML tags, behind the div “featured”.
- And the carousel run correctly but…only with 3 of 6 post!.
And this is my trouble!
Where/How can i put the correct HTML tags to see all the “Featured” post in the carousel?
Any help would be appreciated!
Simon-
Sounds like you’d be better off asking at the AP forum which is at http://colorlabsproject.com/ There’s plenty of posts about the carousel and its various problems (lol) once you register for the support forum (if you haven’t already).
Another thing to check: Under your AP theme options in your WP admin dashboard, there’s an option that asks you how many items to show in the carousel. It may be as simple as that.
Hi guys,
Has everybody seen this post on the ColorLabsProject forums??
http://colorlabsproject.com/forum/topic.php?id=128
The guys there are close to working out a solution for getting the new v2.1 of the script to work, and in the first page of the post there are some good tips on workarounds to some of the problems everyone has been having.
@ Sumit Bahl – just realised you had a few posts that Askimet chewed up! Sorry. Have approved them now. The flash header is working fine on your site I see, so everything is sorted??
To be honest, is the newer version much different than the old? If it was me, I would just be lazy and stick with the old version which should work (you can download my .js file in the ‘red’ blockquote above in the tut). Or is there some new features in the new version??
@ Tatiana – thanks! Yeap, I would recommend Simon you should getting on the AP forums as well. The guys there are more fluid in the AP code than me.
That ‘check box’ for the carousel is something a lot of people miss. Its not that obvious when you go into the theme options, so remember to look for it ;)
Hey Sean–another note to add up top. For people who are hosted especially with hostgator, they probably need to contact their host to get their domain whitelisted to allow this script to work. I finally did so tonight and it is now working with the current 2.1 script just fine.
HOWEVER-I somehow managed to break the carousel in the process lol. I’ve decided to implement another element in that spot anyway, but to forestall the panicked comments and posts about this here and at colorlabprojects, this is a fair warning. Someone may come up with a fix, or it may be personal user error in my case, and everything will work just fine (its been known to happen). Still, just wanted to give you an update since you are the originator/catalyst for this idea (lol). Knowing me, I forgot to close a div tag somewhere…
@ Tatiana – Great! Thanks for that piece of info. I will make a note of it in this tut!
Cheers again.
Hello, im trying to follow your instructions but on Step2. you mention to add a code ..but I don’t see the code? Thanks
Hmmmmmm, it appears my code plugin has just died. I just sent you an email Mark with the code.
Will have to fix this up later tonight. Does anyone know of a good code highlighter plugin? I’ve tried a bunch and they’re all pretty rubbish. Currently using Google Syntax Highlighter until it apparently has just stopped working today :(
Hey Sean
Yea, everything is working fine now.
The problem was with the version of swfobject, I guess its not compatible with the .js files i am running.
Anyways, thanks a lot for the article.
It really did help me.
Thanks
Sumit
Hi guys! I managed to implement the Accordian Flash with the new version (V2.1) of swfobject.js. Please go to the http://colorlabsproject.com/forum/topic.php?id=128 thread in the Colorlabs Project forum and look for my post with the new code (about Page 5). Please test this out on your site and let me know. I have successfully implemented the Flash on my test site: http://test.krissi.net. Have not yet updated my main site with the new code.
Well done Krissi! Thanks for posting that on here ;)
You’re full on! You have done an awesome job with this layout. Your encouraging tone kept me going when I was ready to switch a less-awesome theme. I will keep visiting
@ Beja – thanks for the kind words!
Still a few minor CSS things I want to fix up/improve on here but have been so pressed for time the past few months trying to fit in training, travelling and competitions on top of computer work … one day, one day … thanks for visiting!
this is fantastic jobs
Hey :)
i can get it to work but only when i use your swf.
When i use the swf that came from flash den it wont load anything.
what do I need to edit in my .fla to get it to work?
Hey Sean, I could really use your help. I have followed this guide to a T [http://www.design.aus120.com/design/flash-headline-in-arthemia-theme/] yet when I preview my site the Accordion doesn’t show up, and when I preview the index.html it says “Get Adobe Flash Player” and when i check the preview.swf file it looks off as well [http://www.rbgmagazine.com/wp-content/themes/arthemia/preview.swf] – How can i get this to work? I desperately request your help on this! thank you for your consideration.
Thanks for share tip
I like this tip very much, thank you for sahring.
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
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…
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
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?
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?
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.
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..
I have the same problem as nick and alex. Can you help me please?
I sent you an email. Plase help me with my problem.
Thanks
Oh come on! I need help :D:D:D
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.”
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.
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!
@ 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.
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.
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
Friends..
how can i add in this script…
automatically add post of for example headline.
I write one post in headline and it add automatically this my post on this flash script!
Sorry for my language..i hope you undarstand me!
Please,, help me.. don’t work.
Here work fine: http://news-win.com/wp-content/themes/arthemia/deploy/index.html
Here don’t work.. blank images:http://news-win.com/technology/
(Now i have add an iframe, but i not love this solution)
Who can help me please?…….. :(
i cant do it :(
Hey Sean,
How were you able to add images to your category bar?
Hi Lisa, actually I’ve done this manually…
What I’ve done is actually ripped out the code for the categories and just hard-coded the images in with titles, directly linking them to the categories. So there’s no automatic functionality anymore and changing options in the Options Panel for the theme no longer works. I think it would be possible to modify the original code and assign an image to each category but I just thought to do it the quickest way possible.
I can show you the code if this doesn’t make sense…
Sean, you could please post the code (or include another great tutorial) that you used to add images to the category bar in the Arthemia theme.
Keep up the great work! Your designs are amazing!