Learn Flash: Email Links & Buttons	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial - Email Links & Email Buttons

Free Flash Email Tutorial

A Flash Email Button is a button that when pressed opens an email program. When opened this program will automatically be set to send you an email to what you. The idea is that it is very easy for the person looking at your web page to send you an email. This tutorial teaches you how easy it is to create Email Buttons and Email Links from Flash. Creating a Flash Email Button is very straight forward.

You will learn the pros and cons of using email buttons and exactly why email buttons don't always work. The tutorial explains the ActionScript in clear and easy to understand terms. You will learn how to apply the ActionScript and use the various added extras, options and parameters available to use with email buttons. You will learn about the issues that arise form Search Engines and the dreaded Email Spammers! I will look at ways of avoiding the spammers net. Selectable text is discussed and the pros, cons and pit falls of selectable text is looked at in relation to webmail and email buttons. The HTML code for Email Links is also shown.

Step One

 

ActionScript

 

Parameters and Extra Options

 

Selectable Text

 

Search Engines and Spammers

Why use Email Buttons and not Forms?

As a general rule Forms are more reliable than Flash Email Buttons or HTML Email Links.

Having said that there are times when an Email Button is advantageous. The main advantage of Email Buttons is that they are very easy to make and will only take you a few minutes! They can easily be created by someone with little Flash experience. Often the humble Email Button is more than adequate and a Form is an over kill. For example if I upload a web page that has photos of my latest holiday snaps I will use an email button as a Form would be too 'formal'. Forms can also be complicated to make and may take you some considerable time to setup.

Cross Ref: Have a look at the: Form Tutorial

The main disadvantage of Flash Email buttons is that they don't always work. Exactly the same is true of HTML Email links. There are several reasons why Flash Email Buttons and HTML Email Links don't always work:

• The way the Email Button works is to look for the default email program on the users computer and start that program, with the added instruction to send an email to the specified email address. This is not identical but similar to a shortcut that you might have on you computer desktop like this:
  
        
  
  If there no email program on the computer then the email button will not function. Thus you are dependant on the end user having an Email program on their machine. Not al computer have such a program. Common examples of this might be computers that you would find in public places such as Internet cafes, libraries schools or colleges.
  
  
• If your punter is using someone else's computer and that computer does have an email program then they should be able to send an email to you. Alas the email's return address will be incorrect and any return mail will go to the original computer's inbox and not to your users personal inbox.
  
  
• Having an email program installed on your computer is slightly different than other types of programs in that the email program will not work unless the program has been both installed and setup. Quite often the email button may link to the default email program and that program will start a Setup Wizard. This will ask the all sorts of setup question and maybe confusing:
  
  
  Outlook's Startup Wizard automatically runs if the program hasn't been setup.
  
  
• Generally speaking there are two types of email setups:
  
  
  • Programs that run on the local computer such as Outlook, Eudora etc.
    
    
  • Webmail such as Hotmail, Yahoo Mail etc.
    

If your punter uses a web based system such as Hotmail then the email button is of no direct use as it will start the email program on the person's local computer and will not open their webmail. Having said that displaying your email address on the web page so that the user can either write it down or copy and paste is a good idea and this is possible with a Flash email button.

Try the Flash email button below. It may or may not work depending on the email setup on the machine that you are currently using:

Note: The email button below links to my real email so if you are going to email me - make me smile!!!

Example: Download the Flash file  Beg 033a

Press the Email button.

Note: It in the Flash Movie above it is possible to highlight the email address and copy (Ctrl C) it into a webmail program such as Hotmail. I will discuss selectable text in more detail latter.

Step One: Setup a New Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it: General
3. Select Flash Document:
4. Click: OK

Note: You should now be able to see a new Flash document:

5. Go to: Modify > Document (Ctrl J)
6. Set the size to: 200 x 130 px
7. Select a: Background colour
   
   I selected: FF9900
   
   
   My background Colour.
   
   
8. Click: OK

Step Two: Place a Button on Stage

To create any sort of link in Flash you must have a button. A button is simply something for the user to click on. You can choose a button from a preset Library, which is what we will do, or create your own.

Cross Ref: If you want to learn how to create your own button go to the beginner tutorial: Buttons

1. Go to: Window > Common Libraries > Buttons
2. Open one of the button folders by double clicking on it:
3. Select a button:
   
   I selected: Push Buttons:
   
   
   I selected: Push Button - Blue.
   
   
   

Warning: Not all buttons are buttons! DO NOT choose Asset, Component, Knob or Faders.
Look for the Button Icon:

4. Select a Button and drag it onto the: Stage

   Tip: Check to see that the button that you have selected is really a button and not a component or other type of object. Make sure the button is selected and look at its properties in the Property Inspector: Window > Properties (Ctrl F3)
   
   
   The Property Inspector displays info on the type of object: Button

Step Three: Adding the ActionScript to the Button

If someone clicks on the button the button needs to have the appropriate ActionScript so that it knows what to do. In this case open the default Email program on the users computer.

In this section you will place the ActionScript on to the button including the URL:

1. Select your: Button
   
   
2. Open the Actions Panel: Window > Actions (F9)

The Actions Panel Flash MX/5: Window > Actions or F9 or Right Click > Actions (Mac: Ctrl Click) The Actions Panel has two Modes: Normal Mode: Use of Menus and Options only. Menus give code with full syntax. Syntax errors not possible! Expert Mode:Type, Copy (Ctrl C) & Paste (Ctrl V). Use of Menus gives partial code only. Note: In Flash 8 Normal Mode is now called Script Assist On and Expert Mode is Script Assist Off. Flash MX 2004: Window > Development Panels > Actions or F9 Important: The Actions Panel in Flash MX 2004 only has one mode so the information in this tutorial about two modes (Script Assist On and Off) does not apply as it only has an expert typing mode. You will not be able to use the Script Assist method described. The use of the Actions Panel Menus will give partial code only which is different to the code as stated in this tutorial. I recommend that you type or copy (Ctrl C) and paste (Ctrl V) then edit the code that you require. Flash 8: Window > Actions or F9 or Right Click > Actions (Mac: Ctrl Click) In Flash 8 Macromedia have brought back the old Flash MX Normal/Expert mode to the Actions Panel. Yeah!! (not available in MX 2004). To make it seem like a new feature they have re-named it: Script Assist which is either switched on or off. Look for the new button in the Actions Panel: Script Assist On: Use of Menus and Options only. Menus give code with full syntax. Syntax errors not possible! Script Assist Off: Type, Copy (Ctrl C) & Paste (Ctrl V). Use of Menus gives partial code only. Switching Script Assist On & Off: Click the Script Assist button or go to the Side Menu Button:    Script Assist is on if ticked :

3. Go to the Action Panels side Menu button and tick: Script Assist
   
   

Tip: Before you use the Actions Panel make sure the correct object is selected. In the top left corner of the Actions Panel it must say: . If it does not say Actions - Button you have not got your button selected.

4. Click on: Plus Sign > Global Functions > Browser/Network > getURL
   
   
   Click on the blue Plus Sign and follow the menu to: getURL
   
   
5. In the top section of the Actions panel you will see URL. Type the following:

mailto:your@email.com

Of course you need to replace your@email.com with your own email address!!



In the URL line type mailto:your@email.com

Your Email Button should now work !!

Note: If you want to copy and past the script it's here:

on (release) {
    getURL("mailto:your@email.com");
}


Red Herring: A URL is a technical term which means Uniform Resource Locator or in normal language URL means web address such as: www.webwasp.co.uk. You may well ask why is getURL used in the ActionScript? Has a URL got anything to do with sending an email? Well no not at all but then again are Herrings really red?


Red Herrings?

HTML Code: Notice how similar the ActionScript is to the HTML email link. Here is an HTML version of the email link:

<a href="mailto:your@email.com">Email Me</a>

This HTML code would display like this: Email Me

Warning: HTML email links are completely visible to all Search Engines looking to compile email address for junk mail. Don't use this type of link unless you have good email anti spam filters. Most email providers will supply some sort of spam protection but you may need to check and ensure that the filters are on.

There are quite a few parameters or extras that you can add. They are optional extras and you can either have them or not. If you do include them you can have as many of these extras as you wish. I have typed them with a space between so that it is easier to read but the space is not necessary. What you cannot do is type them on separate lines. They must all be in the same line in between the quote marks after the get URL

Subject & Body Text

Here I have added two extra parameters which give a subject and body text:

This will add the subject Cool Tutorials and the body text Great tutorials to the email. Try it:

Example: Download the Flash file  Beg 033b

Additional Parameters: Subject and Body


Additional Parameters: Subject and Body

---

CC & BCC

You can also have Carbon Copy (CC) & Blind Carbon Copy (BCC)

on (release) {
    getURL("mailto:first@email.com ?cc=another@email.com &bcc=more@email.com");
}

Try it:

Example: Download the Flash file  Beg 033c

Additional Parameters: CC and BCC email addresses


Additional Parameters: CC and BCC email addresses

---

Email Listings

You can have as many emails listed as you might want. Just separate them with a Semi Colon; I also add a space as I think it is easier to read but this is not needed:

on (release) {
    getURL("mailto:first@email.com; second@email.com; third@email.com");
}

Try it:

Example: Download the Flash file  Beg 033d

Additional Parameters: Listed Emails.


Three emails will be sent.

That covers all the parameters. Remember that you can mix and match any combination but you must type them on a single line.

Step Five: Selectable and Non Selectable Text

In my first example you can hover the cursor over the email address and it changes to the I-beam cursor: 

This enables the user to select the text, copy (Ctrl C) and then paste (Ctrl V) it into a webmail program such as Hotmail.

Example: Download the Flash file  Beg 033a

Click and drag over the email address.

It is very easy to create selectable text in Flash:

1. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
2. With the Text selected switch on Selectable Text:
   
   
   The Text is made Selectable through a setting in the Property Inspector.
   
   
   

   Warning: Never use selectable text for text only buttons like the one below. They can be impossible to click on. The problem is that the I-beam cursor replaces the Hand cursor:

   Without the Hand cursor it is impossible to click on a button. Try on the button below.

   • If you try to click in the centre of the button you get the I-beam:
   • You might just be able to get the Hand Cursor if you go right into the corner of the white:
     
     
     With selectable text you get the wrong cursor making the button difficult to click.

Step Six: Email Buttons, Search Engines & Email Spammers

Many people do not put their email address on the Net due to Search Engines that look specifically for email addresses. These can be compiled into lists and sold to advertisers wanting to send junk or spam emails. I guess if it is on the Internet it is freely available information and so companies see it as fare game. I personally detest spammers. I have had to close down email addresses because of being avalanched by thousands of junk emails. I now have very tight junk mail filters on my Inbox which means that some legitimate emails cannot get through and alas I still get junk mail - at least not in over-whelming numbers anymore. Well that's my grip!!

Flash Vs HTML
It is better to display an email address in a Flash Movie than to do this in HTML as Web Crawlers searching for potential junk email addresses are less likely to look inside a Flash Movie. It is technically possible for Search Engines to read Flash Movies but they are too complex to be reliably read so at present many Search Engines ignore Flash Movies. Of course that may change?

Note: These email buttons work so no JUNK email please!!!!

Example: Download the Flash file  Beg 033e


Search Engines will tend to ignore the above Flash Email button.

If you want to make it even more difficult for Search Engines to read your email then convert the text to an image. This can be done in Flash by selecting the text and going to: Modify > Break Apart (Ctrl B) and then doing it again: Modify > Break Apart (Ctrl B). Like this:

Example: Download the Flash file  Beg 033f


Search Engines cannot read this as the text is an image.

In the Flash Movie above you may notice that the text looks slightly fuzzy. With small fonts there can occasionally be slight distortions when creating images in Flash. If you use a dedicated paint program such as Fireworks or PhotoShop you may find the results are clearer. In the next Email Button an image file has been made in PhotoShop and saved as a Gif file. This file was then imported into Flash:

Example: Download the Flash file  Beg 033g


The text in this button was created in PhotoShop and imported into Flash as a GIF image.

Note: A functioning Email Button needs to have the email address in the ActionScript. It is unlikely for a Search Engine to search the ActionScript but it is technically possible.

Belt & Braces?
If you want to be sure don't make a Flash Email button or an HTML Email link at all just display your email as a Gif image. You can easily make something like this in any Photo Edit program like FireWorks or PhotoShop:

Example: Download the Gif file  Beg 033h

This in not a Flash button just a GIF image made in PhotoShop.

Tip: You can also make Gif images from Flash. Look in File > Publish Settings

Cross Ref: Publish Settings

Scanners convert images into text. This means that even the above image could be read by a really determined Search Tool. I don't know if such a search tool exists as it would take forever to read every image on the Internet! Computers simply aren't fast enough (yet). If you use an unusual or distorted Font then I guess you would be really safe?

An image distorted in PhotoShop. Can you read it?

Anti Spam Filters
Most email providers will supply some sort of spam protection> You need to check what your provider offers and ensure that the filters are on. There are various levels of anti spam filtering and if your email provider does not supply you with good protection there are other ways of protecting your inbox. For example you can have your own anti spam filter or you can subscribe to companies who will provide anti spam systems.

A Touch of Realism
No system is fail safe. Your email address is stored in many places that computers can read. For example if you send emails to other people then your email address will be stored on other peoples computer systems. Are their systems fail safe and virus free? Probably not. If you use email you will at some point receive some junk mail. As long as your system is not inundated I suggest that you just live with it.

Lets hope you have a good anti spam system and enjoy many emails from real people!!

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here