Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
17th August 2009

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

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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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
Make Flash search engine friendly
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.

Tags: ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://chrisdasie.com Chris Da Sie

      This is a great tutorial. It’s about time Flash became SEO friendly. I’ve had a lot of clients recently want to switch how their new site is being coded because of the lack of SEO support. Now, I can tell them that it’s ok to use Flash. Thanks for the great tutorial!

    • Oliver Bouillon

      hi Steve,

      sounds good but pictures links are down..

    • rickp

      Interesting thing is I am trying to find the website shown in this article through google searches and they are not coming up… Hmmm… How search engine friendly is their content?

    • http://www.cleartag.com Lebanon Web Development

      Thanks for the tutorial, I am fan of Joomla, so will try it. You can also optimize Flash for non-joomla websites, by using SWF object and other techniques to make it more search engine friendly.

    • Andrei

      What issue # is this?

    • kurt schmierer

      I am unable to veiw the imagery to see what was being talked about. how do I fix that.

    • Neewbie

      can’t see images on this page!

    • Ron

      How do I obtain the files for this tutorial?

      Thanks

      Ron