RSS

Flash XML image ticker (scrolling images that load from an external text file)

22 Apr

There are tons of paid options like flashloaded.com’s FlashTickerFX (34.99) which I recommend if 1. you have flash 2. you are familiar with flash and flash components and 3. are going to be reimbursed – and there are also a ton of free options that use javascript or ajax/jquery.  But the only GOOD free option that I could find using flash that loaded images from an xml file was by benjaminkeen.com – his flash ticker is free, and there is a healthy amount of community support in his forums. I’m going to go through a very quick how to guide on how I got it to work..

Requirements

  • FTP access to your webserver
  • Dreamweaver or a text editor

Limitations

The only limitation I ran into was that the images have to be a perfect square. (if you want it to look decent anyways – it works off of a perfect square model, so images that are not a perfect square will work – but you have to make sure you alter the ‘size’ to be the largest value of width or height of any of your images, otherwise they will be cut off.) If you are OK with that, you’re good to go on to the next step.

Download

Download my altered version (I am going to write this article assuming that you downloaded this archive)
or you can opt to download the latest release from his site if you’re comfortable with code (in which case you won’t need this tutorial..) Latest release was 1.71 at the time this article was written – and that is what my altered version is based off of.

Extract

Extract the zip file to a folder

Images

You are going to need to make your images 55×55 resolution, and in .jpg format. I included some as examples – be sure to delete these if you are adding your own.
If you want to use a different size go ahead, but as I mentioned in the limitations you will need to alter some code in the index.html file: Alter the size of the image on line 30 in the index.html file. Match/change the stage height in line 29 above it. And if you want a different width for the whole flash movie that is line 28 – it’s set to 680 (pixels) right now.

Configure

Open up info.xml

Enter in the full URL of each image between the <thumbURL> & </thumbURL> tags (like this: http://www.yourwebsite.com/ticker/images/image01.jpg ). If you run out of thumbURL tags, just go ahead and copy and paste everything between the <item> and </item> tags (including those tags). You can also add your info to the other parameters if you wish. LinkURL is the link that the image leads to when clicked. caption (untested) is text that describes the image & target is specifying whether or not you want the link to open in a new window or a specific frame. You can use “_blank” for a new window. (without the quotation marks of course) – if you don’t put anything in the target field it will default to the window that the ticker is in and the visitor will leave your page.

That’s pretty much it! If it doesn’t look how you want you can open up index.html and alter some of the parameters – see Benjamin’s comprehensive list here (click on configuration options in the right hand menu). And if you copy and paste any of them into the index.html file, be sure to add a 3 after “so” like this: so3.addVariable   instead of so.addVariable – you will get an error on the page if you forget to do this.

The Lazy way

If you just want to load a whole folder in favor of identifying each image in the info.xml file do this:
open index.html and change lines 25 & 26 from this:

so3.addVariable(“sourceFile”, “info.xml”);
so3.addVariable(“fileType”, “xml”);

to this:

so3.addVariable(“sourceFile”, “get_folder_images.php”);
so3.addVariable(“fileType”, “text”);

Then open the get_folder_images.php file and change lines 26 & 27 from this:

$image_folder_dir = “./images”;
$image_folder_url = “http://www.yourwebsite.com/ticker/images&#8221;;

to reflect your personal website URL. Unless you changed the name of the images folder in the zip you downloaded, leave the first line alone- and just substitute http://www.yourwebsite.com/ticker with your URL. And you should be good to go – doesn’t get much easier than that.

Did you appreciate this article? Please click here to donate.

Advertisements
 
6 Comments

Posted by on April 22, 2009 in Flash

 

Tags: , , , , ,

6 responses to “Flash XML image ticker (scrolling images that load from an external text file)

  1. JP

    May 3, 2009 at 5:00 pm

    Hi, good post. I have been wondering about this issue,so thanks for posting. I’ll certainly be subscribing to your blog.

     
  2. eriteric

    May 6, 2009 at 11:05 am

    Thanks JP

     
  3. eriteric

    May 27, 2009 at 11:48 am

    I was recently switching hosting providers and hadn’t had a chance to upload the files for this blog – the link to the .zip mentioned in this post is active again. Sorry for any frustration this caused anyone.

     
  4. steviec

    December 3, 2009 at 8:56 am

    Is a version available for SWFObject 2?

     
  5. pinguim007

    January 18, 2012 at 11:27 pm

    hello,

    How about the html? what should I do?

    my is like this, but is not working…

    var so3 = new SWFObject(“scroller_x.swf”, “scroller1”, “100%”, “66”, “8”);

    so3.addVariable(“sourceFile”, “info.xml”);
    so3.addVariable(“fileType”, “xml”);
    so3.addVariable(“scrollSpeed”, “10”);
    so3.addVariable(“stageWidth”, “600”);
    so3.addVariable(“stageHeight”, “66”);
    so3.addVariable(“thumbSize”, “60”);
    so3.addVariable(“bgColor”, “666666”);
    so3.addVariable(“navColor”, “333333”);

    so3.write(“scroller1”);

    ~

     
  6. responsive design

    August 4, 2013 at 10:36 am

    I really love your site.. Great colors & theme.
    Did you make this website yourself? Please reply back as I’m planning to create my very own blog and would love to know where you got this from or exactly what the theme is called. Cheers!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: