Anyway, I don’t really know any javascript so I rely on help from the bountiful internet so I can do things with it. Lucky for me there are a bazillion javascripty jquery type pop ups, however unfortunately there are A BAZILLION javascripty jquery type pop ups. Well again, I’m overreacting slightly. But here are a few of the pop up plugin type things I tried out.

Lightbox

Lightbox is the one everyone has heard of, but it annoys me slightly – although I’m not entirely sure why. Simple to use and install, but unfortunately wasn’t any use for me this time as it can only show images, rather the sections of HTML that I required.

Colourbox

Colorbox is nice. It produces nice looking pop ups. Smooth transitions. It can load up flash, video as well as HTML. However, again I couldn’t use it for the project I wanted as I needed a div to pop up then stay where it was allowing you to interact with the rest of the page. I think you might be able to get Colorbox to do this, but I struggled with the coding.

DOMWindow

DOMWindow was my saviour in the project I was working on. I didn’t want a hover pop up, or one that fills the entire screen, but with one click a little window should appear, then it should close when the user clicks on the close button. Very simple and easy to use.

A few others

Fancybox
Thickbox
Shadowbox

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.

Adding the default stylesheets to the HTML

I created one main CSS file, that held all the styles that will never change, as well as a four separate season CSS files for Summer, Autumn, Winter and Spring. I used the Summer css file as a default and added an id called season.

<link href="main.css" rel="stylesheet" type="text/css" />
<link id="season" href="summer.css" rel="stylesheet" type="text/css" />

Javascript code to select the CSS

Firstly I get the date, then use an if statement to set a variable with the correct filename. So, between December and February it will show winter.css, March to May spring.css, June to August summer.css and September to November autumn.css.

Then I just set the href property of the element with id ‘season’.

// Get CSS JavaScript Document
function getCSS()
{
datetoday = new Date();
themonth=datetoday.getMonth() + 1;

if (themonth == 12)
display = "winter.css";
else if (themonth <= 2)
display = "winter.css";
else if (themonth > 2 && themonth <=5 )
display = "spring.css";
else if (themonth > 5 && themonth <=8 )
display = "summer.css";
else if (themonth > 8 && themonth <=11 )
display = "autumn.css";

document.getElementById('season').href = display;
// End -->
}

Call the function

All that’s left to do is call the function in the<head> of the page.

<script type="text/javascript" language="javascript">
getCSS();
</script>

Done!

Classes are really great way for me to easily reuse the code, and with each of these sites I’m working on I’m refining them. Right, back to work.

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.

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.

Now the XML tags are pretty easy. This website, Make RSS Feeds, gives you the basics. However, what I need is one that is automatically updated when I update my website. I believe PHP is the answer. I’ve found this site: Web reference – Creating a Custom RSS Feed with PHP and MySQL. Let’s have a go!

Okay, that took me some time using the tutorial above, and the PHP code from my homepage updates…

First try in the validator brought out a few errors. I believe they are to do with the header information so I’m going to search from more help with creating an RSS feed using PHP.

So an hour later, I’ve managed to get it to work – excellent! Seems like the tutorial I followed had a few things in it that was causing me problems, although I’m not sure why.

Now, after some tweaking, here you go, my homepage RSS feed. Please let me know if you have any problems with it, and I will try to sort them.

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.