Elaine McVicar » tutorial

Flash ActionScript 3.0 – Uploading an image

elaine — Fri, 09 Oct 2009 13:34:54 +0000

I’ve been having trouble implementing the code to upload an image to a server. The code is basically this:

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.

// 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.

CSS Switcher by month using Javascript

elaine — Thu, 03 Sep 2009 12:53:44 +0000

I’ve been creating a website where I wanted to change the look depending on the season. I’ve used Javascript to control what CSS was applied by checking what month it is, then changing the href property of the css tag.

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.

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 of the page.

Done!

Anatomy of Illustrator (CS3) – for super beginners

elaine — Tue, 16 Jun 2009 15:41:20 +0000

I was helping out a friend who is almost completely new to design, and discovered that there is very few tutorials explaining the very basics of Illustrator and how to use the tools. The variety of panels and menus can be quite confusing to a beginner and there is very few guides out there to ease a new user to the program. If you’ve not had any training it can be a struggle to teach yourself in the beginning, so here is a simple beginners guide to using Illustrator that I wrote for my friend.

The basic anatomy

The workspace

Artboard – This is the main page area that you are drawing on
Tool bar – Where all your main creation and editing tools are. This is shown in front of the artboard as a floating panel or attached to the side of the artboard
Panels – Where you control and change your shapes. These can be shown attached to the side of the artboard with icons to denote the panel, or they can sit over the artboard.
Top menu – This is the usual type of top menu that includes ‘File’, ‘Edit’ etc. This is where you’ll find all tools and options in the menu list format

Tool Bar

Panels

The tool bar

This bar contains the main tools you’ll use. If you can’t see the tool bar on the artboard then use the top menu to find it.

Window > Tools

There are a few different types of tools in the tool menu, so here is a quick run down of them.

Selection

Selection tool - Select an object or grouped objects on the artboard
Group selection and Direct selection tools – This lets you select a single object (Group) or a single point/line (Direct). This is useful if you want to edit an object that is part of a group, or edit the shape of an item
Magic wand – This lets you select objects with a similar fill colour/pattern
Lasso tool - Also a selection tool, just draw a shape and it will select everything within the shape

Object creation (Drawing and typing)

Pen tool – This selection of tools let you draw out a shape point by point then edit it. Clicking once and releasing creates a point. If you click and drag you can create a curve.
Type tool – Write text with one click, or create a paragraph shape by dragging, then click on this to write text within this text box
Line tool – Allows you to draw different types of lines, such as straight, arcs, spirals and grids
Shape tools – Draw different types of shapes
Paint brush tool – This creates a stroked line using a brush (This can be found in the Stroke and Brush panels)
Pencil tool – You can freehand draw a shape or line. If a shape is selected you can also go over the same line again to adjust its shape

Reshaping

Rotate tool – Select and object before you select this tool, then you can either double click to enter a rotation, click once on the artboard to the the rotation registration point, or click and drag to rotate the object
Scale tool – The scale tool works in a similar way to the rotate tool, but with changing the scale of an object
Warp tool – Drag across an objects to change it’s shape
Free transform tool -This tool lets you scale and rotate an object using the bounding box handles. These are the little squares shown on the object when it is selected. To maintain the proportions of the object, hold down ‘SHIFT’ while you drag. Holding ‘ALT’ will let you transform the object from the center point rather than a corner.

Additional tools (Painting, graphs and more)

Symbol tools – This tool lets you spray paint and edit symbols on the artboard from the symbol library (Symbols can be found in the Symbol panel)
Graph tools – This tool lets you create a variety of types of graph. You can select a size and enter the graph details.
Mesh tool – You can create and edit mesh lines on an existing shape. Click to create a mesh point then you can adjust the shape and fill.
Gradient tool – If you have a shape with a gradient fill (i.e. by using the Gradient panel), then this lets you drag across the shape to change the gradient.
Eyedropper tool – If you have one item selected and click on another item it will copy the colour/styles over to your first item.
Blend – You can blend two items together. Select either an anchor point or in the middle of each item and the blend tool will blend these together.
Live paint tool – Lets you fill in sections of shapes on the artboard. A shape with a hole or different sections in the middle is called a ‘Compound path’
Live paint selection – Selects the shape you want to fill

Artboard

Crop area – You can select what area of the file you would like to export (i.e. File > ‘Save for web’). Double-click to select the options, or you can click and drag.
Erase – This tool lets you erase sections of your selected item.
Drag – Drags your view of the artboard
Zoom – Click to zoom incrementally, or click and drag the area you want to zoom to.

Colour

Colour selections – You can double click on the fill square or outline square to change these colours of the selected shape. You can also click the arrows to switch them. If the colour is white with a red line through it, this means that there is no colour.

There can be little arrows on the bottom corners of a tool. This denote that if you hold the mouse down there is a choice of tools.With some tools, such as the line and shape tools, you can click once and you will be able to type in options for the object, rather than just clicking and dragging on the artboard. Also, for some tools you can also double click to change the tool options.

The panels

These panels I normally have on the right of my screen. If you can’t see them use the top menu:

Window > #Panel Name#

The panels are grouped together with each other and can be selected with tabs. There is also a little arrow on the right that will give you more menu options.

I’ll order these in the approximate order I have them in on the screen

Colour – RGB for web stuff and CMYK for print. This lets you drag the arrows to create a colour, or double click for the colour picker
Swatches – These are saved colours. You can drag the colour square to the swatches panel to keep it. If you double click on this you can give it a name, change it, or set it as a global colour. Making a colour swatch a global colour will let give you a colour slider for the swatch when selected and you can change the tint.
Brushes – These adjust your stroke lines and can be used in conjuction with strokes around the shape and the paintbrush.
Symbols – These are little symbols you can re-use again – You can also create your own by dragging them into the symbol panel.
Stroke – This lets you set the outline of the shape. You can change different options for your stroke in this panel.
Gradient – You can change gradient colours by dragging them on the gradient bar from the swatch panel, you can also drag these little colour squares and change the angle and location options
Appearance – This allows you to change the order of the fills, strokes and effects (Shown in the Effects top menu item). You can also add strokes and fills using the arrow option to the right i.e. to create double lines etc.
Layers – This allows you to have different shapes on different layers, you can view, hide or lock these as well as change the order
Transform – This lets you change the position and size of the shape you have selected. You can also change the angle or skew it. The little link icon on the right after the W and H, lets you either keep the shape in proportion if on or just change one dimension if off.
Align – This lets you align shapes against each other, i.e. centre them all together
Pathfinder – Use this to cut out or join shapes. Select all the shapes you want to change, then click on one of the pathfinder icons.
Character – Basic text options such as font, font size and leading
Paragraph – Further text options if you have created text within a paragraph shape

The top menu

File – This has your usual, ‘New’, ‘Open’, ‘Save’ and ‘Print’ type options
Edit – Basic edit controls such as copy and paste, as well as preferences and settings
Object – Controls the shapes on the screen. Some of the basic object controls are:
- Transform – Changes the shape using ‘Move’, ‘Rotate’, ‘Reflect’, ‘Scale’, ‘Shear’ etc.
- Arrange – Changes the order of the shapes on the screen. This will change the order only within the selected layer
- Group – group selected items together
- Lock – Lets you lock an item so you can’t select it – you can ‘Unlock all’ from here if you want to select them againExpand – This lets you expand text to outlines, and expand compound shapes, effects and fills
- Rasterize – Creates a flat bitmap image from the object(s) you have selected
Type – This is for controlling and editing the text/fonts
Select – Lets you select specific items, such as if they have the same fill colour
Filter -This menu lets you distort vectors, as well as having a filter menu that can be applied to bitmaps – I suggest you stick to Photoshop for these though.
Effects – This menu lets you add effects to items such as Drop shadows and rounded corners as well as other fancy effects. You can find anything you’ve added in the Appearance panel mentioned before. These can be edited or deleted.
View – Viewing selections for the artboard, as well as options such as ‘Ruler’ and ‘Guides’
Window – Where you find all your panels/tools if you can’t find

Now, getting started…

Hopefully the above has given you a bit of help with how Illustrator is put together, and although it’s not a completely comprehensive guide I know I’ve learned a few things writing this that I hadn’t know before. So, now you’ll need to learn about to actually use Illustrator, for how here is a few useful places to visit.

Useful beginner tutorials/articles

Create an envelope icon – Lovely tutorial to start on
How to create a cute Hippo character
Getting started with Illustrator
Use Adobe Illustrator to create a clean website layout

Resources

Vectortuts+ – Great place for Illustrator tutorials

Smashing Magazine - find useful tutorials and articles

Blog.Spoon Graphics – 50 Illustrator Tutorials Every Designer Should See

How to design a good email

elaine — Wed, 24 Sep 2008 16:25:16 +0000

It’s been a long time since I’ve designed an email, so before I start here are a few basic things that I should consider.

Designing the email

Who’s it for: While designing the email you should keep in mind who the target audience is. The email should be relevant and interesting to the reader, otherwise it will often be considered to be spam.
What do you want them to do: You should also think about what you want the reader to do once they have read the email, basically, what is the call to action. This should be simple for the user to find, so keep irrelevant copy and links to a minimum.
The layout: It’s very important that the reader immediately recognising who the email is from, so keeping the logo to the top left is a good idea. Also consider that the email will be viewed in different browsers and applications and may also be initially viewed in a preview pane. This means you should try to get the message across to the reader without taking up too much space. Think about how the content is set out. Titles should be short and informative, any images should be relevant to the content and try to be as concise as possible. Also minimise fonts, colours and images as these can make the email confusing and difficult for the reader to scan quickly. And finally, make sure the call to action is prominent in the email, so the reader can easily understand what the email wants them to do next.

Writing the copy

The subject line: The subject line is the motivation for the reader to actually read the email, so it’s very important to get this right. You should briefly describe the emails’ content, and add something attention grabbing. It’s also a good idea to add a call to action whenever possible
Personalise: If you have a name associated with the email address it’s a good idea to use this in the email. It will help confirm that the email is not spam, and also make the reader think the email is more relevant to them, hence making it more likely to be read.
Talk to the reader: Copywriting is a skill all on it’s own, but quite often it will also be one of the designer’s tasks so it’s worth thinking about carefully. Try to think of the email as a conversation, rather than dry information and keep it simple and concise so the reader doesn’t have to read through lots of text to find out what the email is about.

Building the email

Click, click, click: Make sure any images and relevant text are clickable; you want to give the reader as many opportunities as possible to click on the email.
Important links: There are a some additional links that should be on every email. Having an unsubscribe link is essential. It will reassure the reader and is also a legal requriement. Another good practice is to add a link to a web version in case the reader has problems viewing the email.
Compatibility and stuff: Finally, remember all browsers and applications have different rules for displaying backgrounds and images, so your email may not be viewed exactly how you want it to be. This means you should try to build the email as simply as possible, you should never use background images and all styles and colours have to be applied in the HTML rather than with external CSS.

So…

I’m sure there are many more issues to be considered when creating an effective email, so perhaps try a few of these resources too.

20 Tips for Good Web Copy

Email Guidelines

Good HTML Newsletter Design

Flash Banner Basics

elaine — Fri, 29 Aug 2008 13:40:12 +0000

This is a quick beginners guide to creating advertising Flash banners, including some technical issues you should consider.

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.