Dynamic Flash-based portfolio

We're going to show you how to make a dynamic Flash-based portfolio that's a doddle to update and loads swiftly. It uses ActionScript and XML data to build a portfolio on the fly (dynamically) and show a progress bar while external Flash files or images are loaded into each page.

This approach is good for several reasons. The main portfolio Flash file will be very small (our example is 20Kb) so will load into web browsers quickly, giving visitors something to look at while your work is loading. The work inside the portfolio will only be loaded when required (when someone clicks on a button) so helps keep the overall file size and load time to a minimum. The most useful feature is that once you've designed and created your layout it will be quick and easy to add new pieces of work and you won't need to edit the main Flash file each time.

There are many ways to lay out an online portfolio: some people like a screen full of thumbnail images, some like slideshows, and others prefer a list of project titles or client names to click on. For the purpose of this tutorial we'll focus on a list of project names that can be clicked to load examples of work, although the same code with a few alterations could easily be used to create a thumbnail layout. The design of our portfolio is very simple, but has been built to allow you to flex your creativity and customise things however you like.

The ActionScript in this tutorial is fairly complex so to make it easier it's all included in the support files. We've also provided comments throughout the code, which can mainly be found on the Actions layer in Frame 1 of the main timeline.

Before you start, it's a good idea to have a look at the final working version of the portfolio, which you'll find in the support files. Double-click on ss_flash_folio_final.html to view the finished portfolio. Alternatively, you can view it here.

Click here to download the support files (1.88MB)

Click here to download the tutorial for free