The AllFlashWebsite Template [AS2] · Jan 17, 07:35 PM

This template attempts to be a complete solution you can use for any Flash website that needs features going beyond the trivial Flash animation doohickey. Don’t judge the template by the unattractiveness of the demo (it’s pretty ugly). It isn’t meant to offer you any visual styling help, whatsoever. That’s all up to you. Hopefully you’re a Flash developer who creates original, interactive sites that actually use Flash to push the boundaries of the browser beyond HTML. This template allows you the flexibility to create whatever kind of site you want, but offers a framework which will help you work more efficiently and create a site that is highly compatible in many different ways. Some of the benefits include cross-browser compatibility, CMS, effortless SEO, mixing flash and non-flash content, XML in Flash, RSS in Flash, Printing from Flash…

See the demo here

If you’re wondering, but how does it work?, the simple answer is that AFW Template uses SWFAddress and SWFObject combined with Textpattern, all wrapped up in a perfect little bundle.

The AFW Template is based on the code of all the AllFlashWebsite.com articles that came before it. However, this version of the code is reorganized to be simpler and better, and some new features have been added. It may be helpful to read all of the previous articles if you need to gain a better understanding of how the Template works.

There are more than a few steps to the installation process (described below), but it mostly consists of copying and pasting into Textpattern. If you don’t miss any steps, the installation might take less than an hour.

Download AllFlashWebsite Template

Download AllFlashWebsite Template

After you download and unzip the archive, copy all the files and folders inside the www folder to your website’s root directory (this can be any folder on your web server that you chose). Now read the following instructions which will explain how to setup Textpattern.

Step 1: Install Textpattern

First download Textpattern here then simply follow the instructions. Installing Textpattern is really very easy, as long as you know how to create a new MySQL database on your web server. Most commercial web-hosts provide this function in their control panel. However, if you can’t figure it out, just contact tech support.

Step 2: Modify Textpattern’s index.php

We need to add code to Textpattern’s index.php to make it work with SWFAddress. Insert just one line of code immediately after <?php in your index.php file:

include './swfaddress-afw.php';

Step 3: TextPattern Admin Settings

Login to TextPattern and navigate to Txp>Admin>Preferences. Change the Permanent link mode to /section/title.

Step 4: Install Plugins

Install each plugin from the archive’s plugins folder by copying-and-pasting to Textpattern’s Plugin Installer (Txp>Admin>Plugins). Be sure to set the plugin to active because all plugins are inactive by default when you install them. Activate the plugins by clicking on each No in the plugin list.

Step 5: Install the Template’s template

First navigate to Txp>Presentation, then to Txp>Extensions>Templates. Under Import Templates chose AFWTemplate then click Go.

Step 6: Create Textpattern Sections

Create the following sections under Txp>Presentation>Sections. In Textpattern, first you create the section, then you set the options.

about section

  • page basic
  • style default
  • options No No No Yes

article section

  • page archive
  • style default
  • options No No No No

contact section

  • page basic
  • style default
  • options No No No Yes

gallery section

  • page basic
  • style default
  • options No No No Yes

print section

  • page default_print
  • style default_print
  • options No No No No

xml section

  • page xml
  • style default
  • options No No No No

xml-gallery section

  • page xml-gallery
  • style default
  • options No No No No

Most of the sections above are actually optional. For instance, if you don’t need a photo gallery, don’t create the gallery and xml-gallery sections.

Step 7: Upload some Images

[You can skip this step if you are not interested in the photo gallery feature]

Navigate to Txp>Content>Categories and add an image category named gallery.

AFW Template includes a gallery-images folder which contains some sample images. In Textpattern, navigate to Txp>Content>Images. Upload all the images and make sure to select the option to generate a 100×100 pixel thumbnail for each.

Step 8: Create Some Articles

afwtemplate.zip includes an articles folder which contains some sample articles. To create the articles, in Textpattern navigate to Txp>Content>Write.

If you want the photo gallery feature, create an article with title Photo Gallery in section gallery by coping-and-pasting the text of gallery.photo-gallery.article.txt. Then (under Advanced Options) set Article Markup to Leave text untouched.

Now for the rest of the articles, you can enter whatever content you’d like, and use any form of article markup. If you read each .article.txt file, it will tell you what section and image to associate with that article:

about.about-me.article.txt
article.first-post.article.txt
article.second-post.article.txt
contact.contact-me.article.txt
gallery.photo-gallery.article.txt
xml.index.article.txt

Step 9: Modify main.swf

There is one line of ActionScript code that you must modify. Open main.swf and goto frame 2 actions. Replace the URL with the correct base URL for your site:

SWFAddress["baseURL"] = "http://www.allflashwebsite.com/tdemo/";

Now recompile main.swf

All Done!

Congratulations, your existence as a Flash designer/developer just became a whole lot easier. Now all you have to do is create your site.

Make sure you take a look at each .fla file included with the Template and use the techniques therein to integrate your site with SWFAddress and the Textpattern CMS. afwtemplate.zip includes an src folder which contains all the source .fla and .as files. What you can do is base your own flash movies on the source files provided. home.fla contains buttons for the site’s top-level navigations. article.fla is a very generic Flash movie that pulls XML from Textpattern. index.fla is similar to article.fla. AFWGallery.fla reads XML generated from the xml-gallery section which outputs a list of images (uploaded via step 7). AFWRssViewer.fla is an example of displaying an RSS feed.

If I have missed anything, please let me know via the comments below.

— Pickle

---

Comment

  1. Wow! This is amazing. I’ve been trying to figure this out myself but found it to be too complex. Great work and thanks for sharing!

    — Jelle · Feb 6, 11:19 PM · #

  2. Hi,

    I downloaded the files, but guess the FLA’s are CS3. Please can you publish them for Flash 8 (this is an AS2 project after, all). Thanks Glen

    — Glen · Feb 13, 01:39 PM · #

  3. Thanks for letting me know, Glen. Please re-download afwtemplate.zip. There is a new folder called “src.Flash8”

    — Pickle · Feb 13, 08:35 PM · #

  4. Very good tutorial. Thanks.

    — Kamieniarstwo · Apr 17, 03:36 AM · #

  5. do you know of any examples of sites (beyond programmers’ own samples) that use this template or that use SWFAddress for SEO purposes? I’d love to do some research on this option. Thanks much,
    Gradiva Couzin

    — Gradiva Couzin · May 9, 03:12 PM · #

  6. @Gradiva

    The simple answer to your question is I don't know. I have seen some early (pre-release) work, but most people wouldn’t let me know if they did use it anyway. This template is mostly based on my personal website hookah-cafe.com (which I’m never quite happy with). However, this site was created before the template and therefore does not implement SEO quite as elegantly. Pull up the website on your cellphone web browser to get an idea of what a search engine would see. I am working on a full rewrite of that website on which the AS3 template will be based upon.

    Keep in mind, this template is not an end-all solution. However, one of the reasons I created it was because I could not find anything out there that laid all this stuff out from start to finish.

    If you are really interested in SEO, I highly suggest that you read up on that topic separately. You should go ahead and take it for granted that SEOing a Flash website is doable. Just believe it. There are people out there who don’t know better who will tell you that it can’t be done. Just ignore them. The next step is realizing that search engine rankings are based on quality inbound links and fresh content. Everything else is just Lagniappe.

    — Pickle · May 9, 05:34 PM · #

  7. Hi, I have tried to implement your templates but the problem is that I want to implement swdAddress upto three levels, first I load Movie like you have done then I want to load another movie from there and have its swfAddress like main/collections/gallery/slideshow
    I am facing problem in dowing that can you help me

    — Awais · Aug 14, 08:14 PM · #

  8. @Awais
    Please be more specific with your problem. Implementing additional levels is certainly possible, you might have to make some tweaks to the template since it does not go so far as to give you a solution that works for every specific situation.

    — Pickle · Aug 17, 12:42 AM · #

  9. Hi Pickle,

    I’m having trouble getting the dynamic scrolling to work on the ts_desc_mc. Any thoughts how I might troubleshoot this? I’ve looked through the AFWTextSlider code, and still can’t figure it out. I’ve added the buttons to the stage, but clicking them doesn’t do anything.

    Thanks!

    — Raina Gustafson · Oct 31, 01:03 PM · #

  10. Never mind, Pickle, I figured it out. Thanks!

    — Raina Gustafson · Oct 31, 02:22 PM · #

  11. Glad you figured it out I haven’t touched as2 in a while and would have had to do some mulling on that one.

    Also, you might like to check out the newer (CASA) version of the template I think it was a little better put together.

    — Pickle · Nov 2, 01:40 PM · #

  12. Hi Pickle,

    I’m almost finished with a project using this template. I’m running into a problem, though. I needed to use the AS3 version of SlideShowPro so that I could use Thumbgrid. I have the SSP AS3 swf loading into an AS2 swf (by replacing it completely more or less). When I do that, though, the navigation (AS2 from your template) gets lost because I haven’t been able to figure out how to load the AS2 nav swf back into the AS3 file. Does that make any sense?

    If you think you can help me sort this out, I’d be happy to hire you.

    And, yes, I will try out the newer templates soon!

    Thanks!

    — Raina Gustafson · Dec 26, 05:49 PM · #

  13. Raina,

    Glad to hear it’s coming along :) Loading an AS2 SWF into an AS3 SWF is not that hard. You can simply use the Loader object. However, you will not be able to communicate directly between the two SWFs.

    Unfortunately AS3 (AVM2) and AS2 (AVM1) don’t mix well, however it is possible—Please check out this kirupaForum post

    This may not actually solve the problem in it’s entirety. The best solution is to stick AS3 or AS2. Sorry I know that’s not what you want to hear =(

    — Pickle · Dec 27, 09:31 AM · #

  14. Hi Pickle,

    With help, I solved my AS2 + AS3 issue.

    Now, I’m having some issues with SWFAddress. From the homepage, advancing from one page to another seems to work fine. However, if I try to paste a URL to a deep link directly into the browser, I still just get the homepage. Any suggestions for how I might troubleshoot this? And are you available for contract work? If so, please contact me directly via email.

    Here’s an example of the issue:
    http://essalatarchitects.com.s38519.gridserver.com/#/contact/ loads the home page, not the contact page.

    Thanks!
    Raina

    — Raina Gustafson · Jan 16, 07:47 AM · #

  15. FYI, I did upgrade to TXP 4.0.7… but I didn’t overwrite the customization in the index.php file – so that should be ok, I think.

    Thanks!

    — Raina Gustafson · Jan 16, 07:49 AM · #

  16. Hey Pickle,

    I got the SWFAddress issue sorted out!

    Best,
    Raina

    — Raina Gustafson · Jan 16, 08:36 AM · #

  17. Well that was easy :)

    — Pickle · Jan 16, 07:33 PM · #

Textile Help