If you work with Flash at all, by now you will have heard of Papervision 3D, the open source project that has turned the Flash world on its head by introducing a 3rd dimension. I had a quick play with Papervision 3D a few months ago and found it surprising easy to pick up. It is now in public beta so I decided to dust off my old project and rewrite it in Actionscript 3.

3D image gallery demo

Inspired by Antti Kupila’s stunning 3D interface for last.fm, I created a simple gallery of album covers using Papervision 3D. For the reflections of the album covers I have used Pixelfumes’ Reflection class.

View demo

View my 3D image gallery

Download source

If you’re curious to see how I put this demo together, take a look at my Flash source files.

Using Papervision 3D

The biggest challenge for me was porting my code to Actionscript 3, as it was the first time I had written AS3 code. But as far as Papervision 3D itself, it really is a piece of cake to get your head around. The documentation that comes with Papervision 3D is a bit hard to follow, but if you download the zipped version of Papervision 3D from Google Code it contains a bunch of great examples which help to introduce the basic concepts.

The cool thing about Papervision is how it can be adapted to all kinds of 3D applications. My main interest is in the possibilities for creating 3D application interfaces, but people have also created 3D games, models and animations. Expect to see a lot more 3D Flash in the next couple of years!

Download

Download Photoshop CS2 file

How to use it

Here is some simple CSS styling you can use to turn an ordinary link into a spiffy looking file download button.

The HTML:

<p class="fileDownload">
    <a href="myfile.pdf">Download Annual Report (PDF 120Kb)</a>
</p>

The CSS:

.fileDownload {
    background: transparent url(file_icon.gif) no-repeat left top;
    display: block;
    height: 35px;
    padding-left: 36px;
}

The final result:

Download Annual Report (PDF 120Kb)

Next up I will be adding functionality so that the submitted form variables can be emailed to any address. Stay tuned…

FormBuilder features

FormBuilder is designed to do make building forms simple. It can do pretty much everything you might want to achieve with a typical HTML form:

• Create HTML forms by entering a few PHP values
• Generates XHTML 1.0 Strict compliant markup
• Fully skinnable via CSS
• Rigorous and flexible form validation on a per-field basis
• Displays easy to understand error messages to the user
• Highlights required fields and fields that are in error
• Automatically send form results to any email address
• Displays a ‘thanks’ message once form is successfully processed
• Hide or show HTML content based on whether the form was successfully submitted
• Ability to add your own custom form validation after FormBuilder has completed its own validation pass
• Protect against PHP header injection

Demo and download

I put together a demo page that shows FormBuilder in action. Try filling out the form incorrectly to see examples of FormBuilder’s error messaging.

View FormBuilder demo
Demonstrates default FormBuilder setup.

View FormBuilder ‘pretty’ demo
Demonstrates the showDividers and usePseudoLegends options. These make your forms easier to style but less semantic.

Download FormBuilder (current version is v1.4)

Important: FormBuilder is a work in progress, so I can’t promise it’s completely bug free. Feedback, suggestions and bug reports are welcomed: leave a comment below.

How the heck do I use this thing?

You should be able to get a pretty good idea how FormBuilder works just by looking at the source code of index.php in the download package. If you want to dig a little deeper I included a text file with the package that documents all aspects of the class and how to use it. And if you’re still scratching your head feel free to post a comment below.

Requirements

FormBuilder must be run on a web server with PHP 4+ running (I’ve tested under both PHP4 and PHP5). A basic understanding of PHP is helpful, but if you follow the examples provided in the documentation you might be able to make do without. CSS knowledge is required if you want to change the appearance of the form.

AJAX validation

Over at roScripts there is a nice tutorial explaining how to modify FormBuilder so that validation is performed unobtrusively using AJAX.

Changelog

Version 1.4

• Added emailResults function, which automatically emails the form variables to any email address

Version 1.3

• Added new field type: password
• Added new field type: hidden

Version 1.2

• By default there is no longer an empty dd after each form field, which makes FormBuilder’s markup more semantic. The empty dd's provide a handy element for styling visual dividers between fields, so you can still reveal them using the new showDividers parameter in the FormBuilder constructor.
• Introduced usePseudoLegends parameter. If set to true, legend will be replaced with h3. The HTML legend element is notoriously difficult to style consistently, and this parameter provides a workable alternative.
• Cleaned up the demo CSS styles, including getting dividers displaying properly in Safari.

Version 1.1

• Checkboxes and radio buttons are now correctly marked up inside label tags
• Labels are now associated with the relevant form field via the for attribute

Credit where credit is due

FormBuilder uses validaForms by Erick Vavretchek for form validation. Please see the validaForms PHP Classes package if you wish to learn more about this excellent from validator.

By writing a small JavaScript function that is triggered when the window is resized, we can overcome this restriction. When the window size is detected to be smaller than a minimum width/height specified by the designer, the Flash movie will stop scaling, and scrollbars will be forced to appear.

FlashScaler class

I have written a JavaScript class that takes care of resizing the Flash movie. FlashScaler is designed to integrate nicely with the SWFObject method of Flash embedding, though it will work fine without SWFObject too. With a sprinkling of CSS applied to your HTML document it will work just dandy in any modern browser.

Demo

See FlashScaler in action (SWFObject static publishing example)
See FlashScaler in action (SWFObject dynamic publishing example)

Download

Download FlashScaler

The download pack contains all of the files used in the FlashScaler demo. If you take a look at the HTML, Flash and CSS files included in the pack it shouldn’t be hard to figure out how it all fits together. Feel free to use my FlashScaler class in any of your personal or commercial projects.

Browser compatibility

The current version has been tested in the following browsers but probably works in older browsers too:

• Firefox 3+
• Internet Explorer 6+
• Safari 3 (Mac), Safari 4 (PC)
• Chrome 4
• Opera 9

Previous versions of FlashScaler have been confirmed to work in Firefox 1, Safari 1.3, and IE5, and Netscape 8, so it is safe to say that FlashScaler works in any modern browser.

Changelog

v1.1, 04 March 2010:

I have updated FlashScaler to take advantage of the callback feature introduced in SWFObject 2.2. Now, when Flash detection fails, FlashScaler is disabled.

Inspired by the work of Theo Hultberg and Asual, I have developed a simple Flash class that demonstrates the implementation of deep linking in a Flash movie. While I don’t propose that my DeepLink class should be used as a substitute for Ausual’s excellent SWFAddress, it might provide a useful building block for exploring what the ExternalInterface class is capable of.

Table of contents:

• Should I use DeepLink instead of SWFAddress?
• DeepLink Demo
• Download
• Notes and known issues
• Installation
• What is deep linking?
• Thanks

Should I use DeepLink instead of SWFAddress?

In a word, no! SWFAddress includes support for the browser history buttons, which makes it a much more comprehensive solution. Taking things further, Theo Hultberg has developed proper object oriented implementation of SWFAdddress. I developed DeepLink to satisfy my own personal curiosity about Flash’s ExternalInterface class, not as any kind of substitute for SWFAddress, and decided to release it publicly in the hope someone might find it useful in their own experiments with deep linking and ExternalInterface. Having said that, DeepLink is very easy to implement and does a decent job, so you should be able to use in production environments if you choose to. If you want to use DeepLink as the basis for further experimentation, please feel free.

DeepLink Demo

I have made a simple demo showing how the DeepLink class works.

View DeepLink demo here:
http://www.f6design.com/journal/deeplink/

Note how each time you select a new ‘page’ within the Flash movie, the URL in the browser window changes. Each of these URLs is bookmarkable, and when plugged into a web browser will take you directly to the relevant content instead of the front page of the site.

To try this out, visit:
http://www.f6design.com/journal/deeplink/#/pageone/

You will notice I have structured my URLs in the same way as SWFAddress, which I think is a good method for ‘disguising’ the hash (#) symbol and producing a clean looking URL.

Download

Download DeepLink – the Flash DeepLink class, including the required javascript functions and demo files.

Notes and known issues

The DeepLink class has been tested in the following browsers:

• Firefox 2 – PC (should work fine in older versions too)
• Internet Explorer 7 – PC
• Internet Explorer 6 – PC
• Internet Explorer 5.5 – PC
• Netscape 8 – PC
• Opera 9.0.2 – PC

Note that DeepLink tests for the availablility of ExternalInterface functionality, and will fail silently in situations when it cannot work.

DeepLink requires Flash 8+ to work. The ExternalInterface class was not available is previous versions of Flash.

To get DeepLink working, you need to be running your Flash site on a web server. A local web server on your development machine will do just fine.

DeepLink relies on modifying the hash value of the browser URL (the bit after the #), and if the user manually modifies the hash value then DeepLink will be unable to modify it any further.

The method by which DeepLink uses Javascript to communicate with the Flash assumes that you have used SWFObject to embed the Flash movie in your web page. This isn’t due to any technical requirement, it’s just that SWFObject is the defacto standard for Flash detection and embedding, and also happens to be what I personally use. It should be simple to change my Javascript sendState() function so that it communicates with standard object/embed tags, but you’re on your own if you want to have a crack at it.

Installation

In the <head> tag of your HTML page insert a link to the SWFObject JavaScript, followed by a link to the DeepLink JavaScript:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/deeplink.js"></script>

Below that, include a single line script that tells DeepLink the id of your SWFObject instance:

<script type="text/javascript">
    DeepLink.setObject('deeplinkexample');
</script>

Embed your Flash movie on the page using the regular SWFObject method, such as:

<div id="flashcontent">
   Alternative content goes here...
</div>
<script type="text/javascript">
    // <![CDATA[
    var so = new SWFObject('deeplink.swf', 'deeplinkexample', '100%', '100%', '8', '#000000');
    so.addParam('menu', 'false');
    so.write('flashcontent');
    // ]]>
</script>

In your Flash movie, create a listener object, which will receive hash states from JavaScript (typically when the page first loads):

var deeplinkListener:Object = new Object();
deeplinkListener.receiveState = function(newState:String){
    // code to handle hash variable goes here...
}

Note that the code inside your receiveState() function can be whatever you like. The hash string wil be received in the format one/two/three/. For an example of how this might work, see frame 2 of the .fla included with the demo.

Next, create an instance of the DeepLink class:

deepLinkController = new com.f6design.DeepLink(deeplinkListener);

And finally, alert JavaScript that the Flash movie has loaded. The JavaScript will then pass Flash the current hash value (if any):

deepLinkController.alertLoaded();

You may call the alertLoaded() function at any time, just make sure you don’t do it until the Flash movie is ready to receive deep links – typically this would be when the Flash file has finished loading.

What is deep linking?

If you’ve read this far and still have no idea what the heck ‘deep linking’ is, here is a quick summary:

Flash applications typically utilize only one HTML document, and therefore have only one URL. No matter how complex a Flash movie’s internal navigation system, or how ‘deep’ a visitor delves into the application, this URL doesn’t change. If the Flash application is located at http://www.mysite.com/, this address is all the user will ever see in their browser’s address bar. But what say a visitor wants to bookmark a content state that is located deep inside the Flash application? Or email a URL to a friend that takes them directly to deep content? A deep link allows the addition of this functionality to a Flash movie.

Deep linking in Flash is achieved by modifying the hash value of a URL. The hash value (the bit after the # symbol) is typically used to jump to an invisible anchor link further down the page. For the hash value to be useful as a deep link, it is necessary to extract it from the URL using JavaScript, and pass it as a variable to the Flash movie. The Flash movie can then parse the hash string and use it to perform a change of navigational state, such as jumping to a frame on the main timeline.

Thanks

Thanks obviously to Theo Hultberg and Asual, whose excellent work with deep linking inspired me to try it for myself. Also thanks to Geoff Stearns, the creator of SWFObject.