Ever wanted to create your own AIM Expression? This tutorial describes the basic process. I won't really go over any design aspects as to how to make the Expression look good, that'll be left up to you to figure out. This tutorial will only work if you keep all the files in one folder.
Requirements
- First and foremost, a properly functioning brain
- Windows – this won't help you if you're using anything else
- A basic understanding of HTML – I'll help a little
- WinZip – for unzipping and zipping the arf
- Notepad – can be found on any windows based computer
- A program and the ability to create or edit images
Buddylist Side Image
This image needs to be 60 pixels wide by how ever many pixels high you want it.
Click to view full-size example:
IM Side Image
This image needs to be 125 pixels wide by how ever many pixels high you want it.
Click to view full-size example:
HTML Files
Anything that shows up in the side images is basically a webpage, so you'll have to include the images in a webpage. This means that anything you can do with a webpage, you can include in the side bars on AIM. Below is the most basic code to use if you have no HTML knowledge, otherwise you can fiddle around and do whatever you want.
Open a new document in Notepad and paste the following code. Edit the red text to your image specifications. Change the blue text to the background color you want when the image runs out.
Buddy List HTML:
<html> <body bgcolor="CCCCCC" leftmargin="0" topmargin="0" scroll="no"> <table border="0" cellpadding="0" cellspacing="0" width="60" height="500"> <tr> <td> <img src="tutorialbl.gif" width="60" height="500"> </td> </tr> </table> </body> </html>
IM Window HTML:
<html> <body bgcolor="CCCCCC" leftmargin="0" topmargin="0" scroll="no"> <table border="0" cellpadding="0" cellspacing="0" width="125" height="400"> <tr> <td> <img src="tutorialim.gif" width="125" height="400"> </td> </tr> </table> </body> </html>
Just paste the above code into Notepad and save as two separate files with a .html extension.
The Arf
Download this arf and save it to the same folder as your images and HTML files. The arf is just a zip file with the .zip extension renamed to .arf, so to view and edit the files, you'll need to change the extension to .zip and unzip the folder.
To change the extension, go to Tools > Folder Options
The click on the View tab, and uncheck the Hide extensions for known file types box, and click OK.
Now there should be a .arf extension, just change that to .zip and use WinZip to unzip it.
Inside the folder, you should find eight files:
- blbkgnd.bmp – Edit this file to whatever you want, but make sure to save it as a BITMAP. It's best if you put opacity at around 20% so you can see text over it.
- blimage.gif – Don't worry about editing this file, since it won't show up anyways, unless you're using the a beta version of AIM 5.something. Remember to save as a GIF.
- blskin.xml – In this file, you will find a URL. Change this URL to the location on the internet of the HTML file that contains your buddy list side image. If you don't get the location right, your image will not show up. There is also a hex color that indicates the color on top and bottom of your buddy list. Below is what you'll find in the file blskin.xml. To edit the file, right click on it and go to Open With > Notepad.Change the red text to point to the location of the HTML file that contains your Buddy List side image. Change the teal text to any hex code to change the color on top of and below the buddy list. If you don't know what a hex code is, don't mess with it, or go look it up.
<?xml version="1.0" encoding="UTF-8"?> <DOCUMENT> <RESSET TYPE="SKIN"> <RESREC ID="BUDDYSKIN" FILLCOLOR="CCCCCC" CONTENT="http://www.yourURLhere.com/tutorialbl.html"/> </RESSET> </DOCUMENT>
- icon.gif – This is your buddy icon, put whatever you want here, but it has to be under 7 KB for it to work, and save as a GIF. The icon size is the only one that matters. It should be 50 pixels X 50 pixels.
- imbkgnd.gif – This is the image that appears behind the text when you're in an IM. Change it to white if you don't want anything, or make the opacity around 20% so you're able to read what is being typed. If you put text in this image, it'll make it harder to read your IMs. Save as a GIF.
- imskin.xml – This file is just like the blskin.xml, but you need to change the URL to point to the HTML that contains your IM side image. Below is what you'll find in the imskin.xml. To edit the file, right click on it and go to Open With Notepad. Change the red text to point to the location of the HTML file that contains your IM side image.
- manifest.xml – Below is what you'll find in the manifest.xml. To edit the file, right click on it and go to Open With > Notepad. Change the numbers around in the red text, but be sure to leave the same number of characters. ex. 11000000-0000-0000-0000-0000000000A. If you ever come across another expression with the same ID number, one will overwrite the other.Change the blue text to the title of your expression, make sure they all match.Change the green text, keeping letters as letters, and numbers as numbers. Make sure they are all the same. Just change one and copy and paste it in the other locations.
<?xml version="1.0" encoding="UTF-8"?> <DOCUMENT EXPIRATION="06/30/2007" PackageType="00" SLEVEL="00" ID="00000000-0000-0000-0000-0000000000A"> <THEME ID="00000000-0000-0000-0000-00000000000A"> <NAME LANG="EN" TEXT="Name Of Theme"/> <SET ID="AIM-STANDARD" TYPE="SMILEYSET"/> <SET ID="AIM-STANDARD" TYPE="SoundSet"/> <SET ID="Name Of Theme" TYPE="DisplaySet"/> </THEME> <RESSET TYPE="DISPLAYSET" ID="Name Of Theme"> <NAME LANG="EN" TEXT="Name Of Theme"/> <RESREC TYPE="Display" ID="BLBKGND" BART="a0a0a0a0aa0000==" FILE="blbkgnd.bmp"/> <!-- includes BLFILLCOLOR, BLCONTENTBAR --> <RESREC TYPE="Display" ID="BUDDYSKIN" BART="a0a0a0a0aa0000==" FILE="blskin.xml"/> <RESREC TYPE="Display" ID="IMICON" BART="a0a0a0a0aa0000==" FILE="icon.gif"/> <!-- includes IMCONTENT --> <RESREC TYPE="Display" ID="IMSKIN" BART="a0a0a0a0aa0000==" FILE="imskin.xml"/> <RESREC TYPE="Display" ID="IMBKGND" BART="a0a0a0a0aa0000==" FILE="imbkgnd.gif"/> <RESREC TYPE="Display" ID="BLIMAGE" BART="a0a0a0a0aa0000==" FILE="blimage.gif"/> </RESSET> </DOCUMENT>
- miicon.gif – I have no idea what this thing does. Don't mess with it and it won't give you any trouble.
<?xml version="1.0" encoding="UTF-8"?>
<DOCUMENT>
<RESSET TYPE="SKIN">
<RESREC ID="IMSKIN" CONTENT="http://www.yourURLhere.com/tutorialim.html"/>
</RESSET>
</DOCUMENT>
Once you have all these files edited like you want them, then zip them all up and change the extension back to .arf.
Uploading
The next step is to upload the Arf, the two HTML files, and the two side images into the directory on your web space that you used in the blskin.xml and imskin.xml files.
Once that is done, type a link like this in your address bar in your browser:
aim:GetExpression?URL=http://www.yourURLhere.com/tutorial.arf
and click on it. If you did everything right, it will give you two prompts that you say yes to and it should work just fine.
You can download a zipped folder of all of the files you need here.
Related Links
- Building Expressions with Expression Creator
- AIM Support discussion forum at BigBlueBall
ily aim
I’m having a problem with not only the file I created via this tute, but ALL expressions I’ve tried (including ones I downloaded from elsewhere): when I load the .arf file with the getexpression link or whatever, it always says something about “manifest file not found” and then a bunch of letters and numbers in my AIM folder…and then numbers and letters are different each time. mytheme.com has been no help and neither has Google, so I beg of you, you’re my last hope.
How can i create a aim id….?