Make Flash search engine friendly

CREATIVE AGENCY VIVID IMAGE EXCLUSIVELY REVEALS SOME OF THE WORK THEY’VE BEEN DOING TO MAKE FLASH CONTENT SEARCH FRIENDLY.

USING JOOMLA AND Flash, Vivid Image has been able to create SEO-friendly Flash websites. Here we’ll explain the technique for dynamically generating Joomla feeds to provide Flash with the content. Vivid Image is working on extending this and implementing direct database connections. Due to the current limitations in Flash 9,0124 (providing socket policy request files on TCP port 843), this is not covered here, but we’ll be working on workarounds for future coverage.

01 Extract the content



management system (Joomla) Unzip the Joomla 1.5.7 package from the CD to your computer. Please check Joomla’s Download page (www.joomla.org/download.html) for the latest

version. Upload all files to your FTP site or copy into your local htdocs folder. The copy of Joomla on the CD is zipped with all the ActionScript classes and folders: SWFAddress JavaScript , SWFObject JavaScript and the Joomla Flash template.

02 Create a MySQL database and install Joomla to your computer



Create a MySQL database. If you are unsure how to do this, contact your hosting provider who can create this for you. Once this is created, navigate to where you extracted Joomla to. This will guide you through the Joomla installation. While installing, please take note of the table prefix and MySQL database details. You will need this to configure the Flash ASQL. By default, the Joomla database table prefix is ‘jos_’.

03 Configure Joomla



Once the installation is complete, you need to remove the ‘installation’ directory. You will not be able to proceed without this. If you have not installed the Joomla CMS from the included tutorial, you will need to copy the ‘asClasses’, ‘caurina’, ‘swfaddress’, ‘swfobject’ folders, ‘main.as’, ‘readXML.as’, ‘SWFAddress.as’, ‘SWFAddressEvent.as’ and ‘index.fla’ files into the root and ‘flashtemplate’ folder into the front-end templates directory of where you installed Joomla.

04 Configure templates



If you did not install Joomla from the CD, you will need to set the default template to Flash SEO Template. To do this, when logged into Joomla go to Extensions from the top menu and click on Template Manager. In the Template Manager, select Flash SEO Template by clicking the radio button next to its name and click Default. Otherwise, everything else is installed and configured in the CMS. If you click on the Preview button in the right-hand corner of the CMS next to Logout, this will show you the front end of the website. As you have not yet exported ‘index.swf’ from index. fla, you will have a blank white output.

05 Create sections and categories



You need to have at least one section and category in Joomla to make the Flash work. To create a category, go to Content and then click Section Manager. Click on New in the top right-hand corner. Complete the form; we named our section ‘Flash Content’ but you can name it differently. Fill in an alias and click Save. Next, from the top menu, hover over

Content and select Category Manager. Click New in the top right and complete the title and Alias. We used ‘Content’ and ‘content’, but again these can be named differently.

06 Create the default content



Go to Content and click Article Manager. Click New in the top right corner. Here, you need to complete Title (the title of the HTML page and the title in Flash), Alias (explained in

Step eight; for the default pages, the aliases need to be ‘home’, ‘aboutus’ and ‘contactus’), Section and Category (select from the drop-downs). Then complete your page text in the

WYSIWYG, and click Save. On the overview page, Article Manager, you can select your homepage content by clicking on the red cross icon of the corresponding article.

07 Set up a Joomla menu



Next, we need to create the Joomla menu. To do this, go to the Menus drop-down on the top menu then click on Main Menu. You will see that Home is already created. Now we

need to create items for the other two default content pages, About Us and Contact Us. To do this, click New, select Articles and then Article Layout under the Article heading.

Complete the name of the hyperlink in Title, and add the same alias into the Alias box as you typed in the Article Manager. Using Select Article on the right-hand side, select the

corresponding article. The menu should automatically position into the template.

08 The missing link



The Joomla article alias is used to link the SWFAddress and the Joomla database. If you go into main.as between lines 117 to 142, this is where the SWFAddress is set. The value within

the function setValue should be the alias for the corresponding article. The method of adding additional pages to Joomla and Flash will be described on page 56, in Step 11 and Step 14 respectively.

09 Enable SEO -friendly UR Ls in Joomla



Next up, from the main menu, go to Site then click Global Configuration. Under the SEO Settings on the right-hand side, check the radio box for Search Engine Friendly URLs as well as Use Apache mod_rewrite, and then click Save in the top right-hand corner. Once this has been done, navigate to the root of your Joomla installation and check that .htaccess exists. If it does not, open ‘htaccess.txt’ with your preferred text editor and save

it as ‘.htaccess’.

10 Test the SWF for the first time

Open the index.fla in the root of your Joomla installation. You now need to export the SWF. In CS3, go to File>Publish, or the shortcut Ctrl+Enter (PC) or Cmd+Return (Mac). Now

navigate to your Joomla installation.

11 Understanding the index.php template



The index.php template in Templates>Flash Template is where the front end of the CMS is created. The loadSWF() function dynamically inserts the SWF into the template in an element with the ID of ‘flashContent’. Two variables are also parsed into the Flash here: ‘baseURL’, the root of the Joomla installation; and ‘joomlaCategoryID’ (which category Joomla should automatically generate the XML document from). The If statement is processing which page should be loaded initially. Also in the template, you will see <jdoc: include type=”modules” name=”left” />. This is where Joomla will insert any modules with the position left (in this case, the menu and <jdoc:include type=”component” />. This is where the article content or any page content will be placed.

12 The .htaccess file



The .htaccess files work on Linuxbased servers and MAMPP (Macs) XAMPP (Windows) servers. Because the pages that we create in Joomla do not exist, the .htaccess is used to process the error and redirect it to the Joomla page instead of showing an error. More uses of the .htaccess file are explained at www.javascriptkit.com/howto/htaccess.shtml.

13 Adding additional buttons



Buttons are adding to the Flash file dynamically using a button class. To add additional buttons to the stage, open the index.fla and open the Library tab (Window>Library from the top menu). Drag ‘stdBtn’ onto the stage where you wish it to be placed. Click on the instance you placed on the stage and open the Properties tab (Window>Properties from the top menu). In the instance name field, name your button and take a note of this as you will need to use this in main.as.

14 Initialising buttons in ActionScript



Open main.as and go to lines 69 to 77. This is where the buttons are initialised. To initialise the button, write ‘instance_name’ in it (‘Button Text’). Then add the function ‘addButtons’

(btnSet.addButtons([btn_home,btn_about,btn_contact]);) and your new instance name like this: btnSet.addButtons([btn_home,btn_about,btn_contact, instance_name]);. You

need to add an Event Listener to do this, so add the following line of code: instance_name. addEventListener(MouseEvent.CLICK, handleClick);.

15 Linking button to the content

Now we need to update the handleClick function by adding another case in the switch statement (around line 119). The new case needs to be written before the default case. An example of a new case statement is written like this:

case “(Button Text)”:

SWFAddress.setValue(“(Joomla Alias)”);

break;

16 The SWFHandler function



This Event Listener is called each time SWFAddress.setValue is called. Once the event is triggered, our custom function switchContentToDisplay is called. This function loops through the array of Joomla content, and once it finds an alias match based on the setValue() Joomla alias, it will display that content.

"