Adrien’s blog
Stuff I like, stuff I do, stuff I make

Don’t you realize that people don’t socialize much in the train anymore? Most people have their own personal entertainment means: they watch movies on their laptop, listen to their ipod, read books… But in the same time, many of them have a profile on myspace or any other social networking website in order to meet new people. Isn’t that a paradox?

In France, I’ve found two initiatives that extend the idea of social networking to train journeys. Idtgv&co is proposed by SNCF (the French railroad company), and Train d’Union is a free and independant alternative. In both of them, passengers are expected to create a personal and/or a professional profile, register the references of the trains they will be travelling on and meet other people sharing the same journeys online before they can eventually meet on the train.

While some people may think that it’s ridiculous to use a website for meeting people whereas you can talk sponteanously with the person next to you, I think the idea is great because you can make new interresting contacts instead of doing stuff on your own during long journeys.

Now, the next step is to be able to browse people’s profiles and exchange messages on line, during the train journey, like you would do on myspace, in order to meet them right away and make your journey much enjoyable.

I won’t teach you that spam is a major problem these days. As soon as your email address is found on a web page, it is potentially exposed to spammers that can extract it automatically from HTML pages using robots. For that reason, many people cloak their email address:

• by writing something like "john dot doe at gmail dot com" or even "john.doe(removethis)@gmail.com" in order to trick robots whereas humans can still understand the actual address.
• by replacing its textual form with an image. That way, unless the robots use OCR, the email address can’t be extracted automatically from web pages.

Both methods have a downside: visitors can’t click the email address to send an email immediately if the email address is not textually included in the HTML page (as a "mailto" anchor link). Here, I propose a workaround that allows visitors to see and click your email address without exposing it in textual form on your HTML page.

The trick is to cloak your clickable email address in a flash object. If you even too paranoid to leave your email address in textual form in the flash file (which is binary and compressed), you can even put an image instead (this won’t be explained here, though). We will use SWF Tools to create the flash a file from an image containing your email address.

Step 1: Create an image representing your email address

Use your favorite "paint" program (I use "paint.net") to write your email address, crop the canvas (mine is 164x18), then save the image to a file (use png if you want optimal quality). Note that you may want to make the background of your image transparent, this will be supported in the resulting flash file.

Step 2: Create a script to generate the flash file

This time, you’ll need to create a file with your favorite plain text editing program (like notepad). Write (or copy-paste if you’re lazy) the following source code in the file:

# Generate a flash file cloaking an email link
# Run using Swftools http://www.quiss.org/swftools/
.flash bbox=164x18 version=5  name="emaillink.swf" compress
  .png button_img "emailmini.png"
  .button email_button
    .show button_img as=idle
    .show button_img as=area
    .show button_img as=hover
    .show button_img as=pressed
    # ActionScript
    .on_press:
    getURL("mailto:myemail@address.com", "");
    .end
  .end
  .put email_button pin=center x=82 y=9
.end

Now we’re going to do some replacements for the parts written in red. 164x18 are the dimensions of the image you created on step 1, and emailmini.png is its filename. Write your email address in the getUrl function. Then replace x=82 y=9 with the central coordinates of your image (in my case x=(164/2)=82 and y=(18/2)=9).

Save your file as "emaillink.sc", in the same directory as the image you created in step 1. 

Step 3: Run the script using SWFTools

First, you may need to download SWFTools freely from http://www.SWFTools.org then install it. Then run "swfc.exe" with "emaillink.sc" as an argument. Whatever the way you do (command line or drag&drop), make sure that the image file you’re referencing in your script can be found in the current directory.

This will result in a "emaillink.swf" flash file in the current directory. You can test it by drag&dropping it to a web browser.

Step 4: Embed the flash file in your html page

Embedding your cloaked email link into your html page consists in writing the following code: 

<object type="application/x-shockwave-flash" data="emaillink.swf" width="164" height="18">
  <param name="movie" value="emaillink.swf" />
  <param name="wmode" value="transparent" />
  <!–alternate content –>
  <img src="emaillink.png" alt="my e-mail address: myemail at address dot com"/>
</object> 

As for the script, you may need to replace some values here. emaillink.swf (appearing twice) is the name of your flash file, 164 and 18 are its dimensions. The img element defines an alternative, if the user’s environment is not able to display Flash content. If you want to keep it, you may need to put in the name of the image file you created on step 1 and a human-understandable textual representation of your email address (don’t write its normal form if you don’t want robots to extract it automatically by parsing your page).

Enjoy the result

This is how my cloaked email link looks:

If it doesn’t show as a Flash object, check it out on my homepage instead.