I’d initially used CSS to replace text with images, this is quite an awkward solution as you have to create a new image for every item you want to replace. I did a bit more searching and discovered siFR 2. sIFR (Scalable Inman Flash Replacement) allows you to replace text on a page with any font you want, using CSS, Javascript and Flash.

I’d struggled previously getting this version to work properly and behave the way I wanted it to. Mainly for each item in a navigational menu to look the same. So I was rather happy when I discovered there was actually a version 3. This version is incredibly easy to use. I love being able to apply CSS styles, as well as defining the font size.

Take a look here: sIFR 3

Set the variables for the file reference, file types to filter by and the url to send the image to:

var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
var fileReference:FileReference = new FileReference();
var uploadURL:URLRequest;
uploadURL = new URLRequest ("upload.php");

Select which file you want to upload to the server.

fileReference.addEventListener(Event.SELECT, selectHandler);
fileReference.browse([imagesFilter]);

Function to tell Flash what to do once you have selected your file.

function selectHandler (event:Event):void {
var file:FileReference = FileReference(event.target);
file.upload(uploadURL);
}

Then use the following PHP code in a file called upload.php.

<?PHP
// The folder where the image will be uploaded to
$target_path = "uploads/";
/* Then add the original filename to the target path.
Result is "uploads/filename.extension" */
$target_path = $target_path . basename( $_FILES['Filedata']['name']);
if(move_uploaded_file($_FILES['Filedata']['tmp_name'], $target_path)) {
echo "The file ".  basename( $_FILES['Filedata']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>

So, why wasn’t is working

So basically, this code wasn’t working, and I had no idea why. I kept getting the generic error [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2038"].

A nice relaxing sleep later I did some more searching and discovered this wonderful post: Romantika.name | Flash Uploader Error. Which basically informed me that there can be a security issue with Flash trying to upload things to a server. I updated my .htaccess file and ta da….all worked perfectly.

Did some research into finding one that would suit, and found these:

Flash Page Flip – from FREE to $499

Had a go of the free version. This is HTML based so didn’t suit my purposes of importing it into the flash as an internal component, and the license with the source code was out of the budget. Animation feels nice and smooth and there are plenty of page controls, but the page images load in dynamically, so if you are flipping through quite quickly you seem to get a lot of blank pages.

View demo

Page Flip, FlippingBook – from FREE (trial) to $299

I liked the smoothness of this one as well. It also has plenty of page control features and comes in a variety of types:

• FlippingBook HTML Edition – View demo
• Flash Component – View demo
• SWF Object – View demo
• Joomla Component

With the Flash Component you can add ActionScript for external navigation, page links and video. Although no source code is supplied, the component should cover any common uses. Images also load in dynamically. It seems faster than the Flash Page Flip one, although this may be related to the image file sizes. One thing I wasn’t so keen on was that the shadows seemed a bit on the dark side, but overall seems like handy and easy to use page flipping tool.

Dynamic Page Flip v3.5 – from $26 to $435

This page turner offers all the standard page controls, but also has the option of auto page flipping, hard front/back cover, page tearing and right to left written books. Again this one allows you to load in either your image or swf pages dynamically, and is controlled by an XML file. Page turning animation doesn’t quite feel as smooth, but has a lot of extra features and good documentation on how to use it.

View demo

Page Flip v2 – FREE/Open Source

Page Flip also offer a completely free open source version of their Page Flipping component. Has almost all the same features as v3.5, however you import your page images directly into the FLA file.

View demo

So…

These all seem to be really good page turning components with slightly different usage methods and features.

I’m trying not to obsess too much about constructing it in the right way either. It’s easy to get caught up in the minutiae, but it will take me less time in the long run if I work out the details as I go along. I can always re-structure things later if I have to.

Anyway, best get back to it.

So far I have a main page structure set out. This includes one FLA file that imports a navigation class. This class creates the menu and controls the navigation between pages. I’ve even managed to get SWFAddress working. This lets the user click back and forward on their browser through the Flash site.

I’ve also created a separate class for all of the content pages. This ensures that the actionscript for each page doesn’t interfere with the others. Next steps are really to code the specific pages, add the content and reskin it to fit the design.

I know I’ll have quite a few challenges, and the timescales I have to work on it are really tight, but I’m looking forward to seeing this project through to the end.

Before you create your Flash banner

Before you begin creating your file there are a few things you will need to confirm with your client, advertising network (i.e. MSN or Yahoo), or digital marketing agency (i.e. TradeDoubler) . These are, for example, banner sizes, file restrictions (such as animation length, looping, file size), and URL.

Banner sizes

A banner can be of almost any size, and can be dependent on placement, geographic location and company. Some common sizes are:

• MPU – 300 x 250 px
• Skyscraper – 120 x 600 px
• Full banner – 468 x 60 px
• Leaderboard – 728 x 90 px

File restrictions

Animation length

Some advertising networks will require a limit to your animation length, so before you start ensure you know what this is if there is one, otherwise take a look at IAB Rich Media Standards. They recommend 15 seconds for the length of the animation.

Looping

Some advertising networks also do not allow the animation to loop, so find out if this is so. It’s also worth considering whether the banner will benefit from looping the animation, or if you want to finish on a final frame with a strong call to action.

File size

There will be a file size limit to your Flash banner, so optimising your banner is essential. It’s a good idea to consider this at the design stage. Try to keep everything as simple as you can. Bitmap images and a variety of typefaces will increase your final file size, so on your publish settings select the option to generate a size report to discover where you can streamline your file. Also, take a look here for some further advice on optimising your banner.

URL

The standard method of passing a URL to the Flash banner is by using a clickTag. This code allows the banner clicks to be tracked. The page that the Flash is placed in will tell the banner what the ‘clickTag’ value should be, i.e. the URL with the tracking code, then the Flash banner will use that value as the URL when it is clicked.

The format of the clickTag is also dependant on the placement. ‘clickTag’ seems to be the most common, however, ‘ClickTag’, ‘ClickTAG’ and ‘clickTAG’ are also used.

Starting the Flash banner

Frame rate

Too fast and some processsors can’t keep up, too slow and the animation is jumpy and awkward. So what should you set your frame rate too?

Here’s some info on the ‘Magic Frame Rate’

“About magic frame rate numbers: Recommended fps values for your FLA document are either 21 or 31, otherwise known as the “magic frame rate numbers”. The reason for these values is that the default document setting of 12 fps is more often than not too slow for tween animations, resulting in “jerky” motion. So most of the time it needs to be higher. In addition, it has been found that two SWFs published to the same fps, will run slower on the Mac Flash Player than on the PC Flash Player, given equivalent processing power. Sometimes the lag time is quite noticeable. To counteract this “bug”, we must set our FLA to either 21, 31, 41, 51 or 61 fps to negate this effect. But of course most computer processors cannot keep up with a frame rate higher than 31 fps, or performance issues in the Flash Player may occur. Thus it is advised that only frame rates of either 21 or 31 be used for most FLA documents. Only if you are running an FLV video player in your browser with the video at high resolution (larger than 320×240) would it be advisable to drop the frame rate of your FLV down to 12-15 in order to conserve performance. See Tom Green’s CMX article for more details on video performance in Flash.”

Taken from: Community MX : Understanding the Movie Clip Architecture.

So, I’d recommend keeping your frame rate to 31fps, to ensure minimal performance issues while still keeping a nice, smooth animation.

Background

Always remember to add a solid background to your banner, rather than setting the background property in Flash. Quite often, when a banner is placed it will have the ‘wmode’ set to transparent, so you can lose your set background colour.

Border

It is also recommended to have a solid border differentiating your Flash banner from the content surrounding it. This is quite often a restriction requested by advertising networks to ensure that your banner does not appear to be part of the site content.

Button

Unless you want different parts of your banner to link to different places, a good habit to create a transparent button covering the full size of the banner.

Then add the button action, something like this:

on (release) {
getURL(clickTag, "_blank");
}


Providing an alternative

Also remember that you may have to create a gif alternative to the Flash banner. The file size restrictions will also be an issue here, so try to keep it as simple as possible. It may be a good idea to keep this static if possible.

And finally

If you are looking for some more information, check out Adobes Best Practices when advertising with Flash or read my other article on Flash Banners Ads.

It will let you drag a  movie clip and make it zoom in and out from either the centre or top left of  the screen, rather than the centre/top left of the actual clip. Sounds a  bit confusing, but once it’s finished I’ll put up a sample and you can see what I mean.

I’m creating an image gallery, which should be quite simple, but I’m going to employ my new found fondness for Actionscript Classes. Still getting the hang of using them, but they are going to be really useful when we want to re-use them for new projects..

I think I’m going to need 3 Classes. One which someone has already written, will load in the images, then crop if required. I’ll write the second to zoom in and out, and the third will let you scroll through the images horizontally. Will hopefully all come together beautifully!