7 Tips For Better Flash Customization

by Collado on August 8, 2008


Seems like Flash is on everyone’s mind lately, I get so many emails from new designers and do-it-yourselfers whom have purchased a flash template and lo and behold their saying “Please help before I pull the rest of my hair out!” Ouch, that hurts!

Generally speaking they’re having difficulties figuring out this new medium or just trying to make sense of the whole Flash environment. And who can blame them, lets face it Flash is nothing if not a little fickle.

Personally it’s over a decade since I first started fooling around with the stuff, still I do not consider myself by any means to be an expert, but try to share the many mistakes that I’ve made and the things that have helped me and hopefully that little bit on knowledge can help keep whatever’s left on top of your head where it belongs. I’ll admit to cutting some corners, but what you’ll get are 7 nuggets of prime Flash customization advice. With hidden features explained, myths exposed and tricks uncovered, these tips are all designed to address our most commonly asked questions with all the right remedies.

These are just my seven that I thought were the essentials, but maybe there are some you’d like to share, so if you would like to comment by all means, we love to hear from you, feel free to share your experiences leave us your comments. And as always should you wish to acquire more information about our template customization services simply jump on over to the contact form and let us know what you’re thinking.

1 – Flash is an Artful Dodger

Flash has a stubborn tendency for shutting downs always at the worst possible times, although, I must admit it does bear a knack for inspiring sympathy, you see Flash is always very cordial about it. For example it’ll say something like Flash has encountered a problem and needs to close, (cute little guy, poor thing), and that it is very truly sorry for the inconvenience, but there’s no time to waist, it must relieve itself at once. And me being the agreeable person that I am will simply click Ok and watch desperately as all my work just disappears never to be mentioned again. Of course there are lots of other good reasons for remembering to save frequently that one just so happens to be mine.

There are also several options that you can use to save a file: ‘ Save’, ‘ Save As’, and ‘ Save and Compact’. When you save a file, Flash does not analyze all the data before creating an optimized version of the document. Instead, the changes you make to the document are appended to the end of the .fla file’s data, which shortens the time it takes to save the document. When you select ‘ Save As’ and type a new name for the file, Flash writes a new and optimized version of the file, which results in a smaller file size. When you select ‘ Save and Compact’, Flash creates a new optimized file and deletes the original file.

Caution: When you select ‘ Save and Compact’, you cannot undo any changes you made before you saved the file. On the contrary if you select Save when working with a document, you can undo changes made prior to that save point. Because Save and Compact deletes the earlier version of the file and replaces it with the optimized version, you cannot undo earlier changes.

Remember to use ‘ Save As’ frequently and to type a new file name for your document after every milestone in your project if you are not using version control software to create backups of your .fla file. If you encounter major problems while working on the document, you have an earlier version to use instead of losing everything.

2 - Stop Tinkering And Listen

Before we do anything we first need to carefully install all the fonts that came with the template. Otherwise Flash is going to hit us with a “Missing Font Warning” alert message. That means that we have not installed all of the fonts included in the package, and that could result in a host of other issues. Here’s what we need to do.

1 - Choose “Start > Settings > Control Panel” (Note: In Windows XP, chooseStart > Control Panel“)
2 - double-click on the “Fonts” folder
3 - choose “File > Install New Font
4 - in the Drives list, select the drive and the folder containing the fonts you want to install
5 - select the fonts to install. To select more than one font, hold down the “CTRL” key and click each font
6 - click “OK” to install the fonts.

Quick Tip! A simpler way to install new fonts is simply to drag and drop all the fonts you want to install onto the “Fonts” folder located within the Control Panel directory.

3 – Putting your text in there

First we should open our “.fla” file from our web design template package in Macromedia Flash. Then if not already open we’ll open the symbols library (hotkey “L”) and browse through it to find the symbol containing the text we want to modify.

Edit text

What’s nice is that all symbols that contain text have appropriate names such as “Company Name” or “About Us” and we can also see them in the preview window at the top of symbols library panel. If we’re unable to see the text for some reason we’ll probably need to change movie background to a different color other than white, as white text on white background stands invisible.

Symbols Library

To do that, we’ll need to choose Modify/Document… from the top menu and change background color in popup window.

Once we have what we’re looking for we want to double click the symbols icon to show text symbol in main workspace window. Then we’ll simply double click that text with “Selection Tool” or single click it with “Text Tool” (hotkey “T“) to edit the contents.

4 - Changing images in Flash

A: Open your source “FLA” file in Adobe Flash and press “F11” to launch symbols library. To perform search of a needed image symbol will be easier if you sort them “by kind” simply by pressing “kind” tab at the top of symbols list. You’ll see that all bitmap symbols are grouped now at the top of the whole symbols library.

Adobe FLash Publishing Settings Window

Bitmap Symbols in Library

Browse these symbols to find symbol your want to substitute. You can see symbols preview at the top of symbols library. When you have found necessary bitmap symbol double click the icon on the left of it as to see the symbol properties window.

Adobe FLash Publishing Settings Window

Bitmap Properties

You’ll see image preview and options there. Check the image size. It looks like 284 x 423 pixels at 32 bits per pixel. To make your image fit the original effects and animation the best way your image must be exactly the same size as in the original image.

You can resize or crop your image using Adobe Photoshop. Open your image in it using “File/Open…” from the top menu. To resize or crop choose “Image/Image Size…” or “Image/Canvas Size…” accordingly. Then save image using “File/Save As…”, for using it in flash choose one of the following image formats: “JPEG”, “GIF” or “PNG”.

Press “Import” button on the left and browse to location of your image file.

At the bitmap symbols properties window you can change the image quality. Make it lower to reduce published file size. Now you should publish your flash movie.

Quick Tip! You can actually publish your movie directly from “Publish Settings” window, see “Publish” button at the bottom. Or you can publish it from every point of Adobe Flash by pressing “SHIFT+F12″ hotkey.

5 - Making The Contact Form Work

This is a real common question but I think I already covered it in detail over on another post so I’ll just give you the link. http://foamers.net/blogger/archives/45

6 – Duplicating symbols

There are times when you need to make customizations to an instance of a symbol without editing the original so that those changes don’t reflect in any other instances of the symbol on your template or affect the symbol in your Flash Library. For example you might want to add a whole new page or you may need to add an extra button etc. Thats when duplicating a symbol comes in handy because it lets you use an existing symbol ( any item in the library) as a starting point for creating a new symbol.

Open your source “FLA” file in Adobe Flash and press “F11” to launch symbols library. From library, what we need to do is right-click (Windows) or Control-click (Macintosh) the symbol, select Duplicate Symbol and give the duplicate symbol it’s name.

Adobe FLash Publishing Settings Window

Symbols library

Next, drag the symbol unto the stage and give it an instance name. Note an instance name and a symbol name are tow totally different things. Meaning, that while there may be two or more instances of the same symbol with the same name “symbol 1”, each instance must have assigned a unique identifier (e.g. instance name) for all ActionScrip reference purposes.

To edit the symbol, you simply double click the symbol to access it in the Main Area. Then double click the text area and enter your own slogan. Once you edit a symbol, Flash updates all the instances of that symbol in your document. You can customize all other Flash elements by repeating these simple steps.

7- SEO for my Flash Template

Can Flash really be made to be search engine friendly? Surprisingly the answer is yes in fact all you have to do is follow these 3 simple steps.

Step 1: When you are finished customizing and or coding your Flash template, go to File -> Publish Settings. Click on the HTML tab and check the “Detect Flash Version” option. You should set this to the lowest possible version that supports the code used in your movie (ActionScript 3.0 cannot be lower than version 9).

Step 2: Open up the HTML file in the HTML text-editor of your choice. You will notice that there is a section of JavaScript code that detects the users Flash Player version. If they have a version equal to or higher than the version you specified in your Publish Setting in step 1, the Flash .swf file will play as planned. You will also notice that there is a place in the js code that reads something to the effect of “var alternate content = “”.

If the user has an older version of Flash than specified in step 1, then this content will be displayed instead via JavaScript (remember to escape quotes in the variable using backslashes). This is where you can include the Flash movie’s content in HTML, and it is completely readable by robots and site crawlers.

Step 3: “What if the user’s browser does not support JavaScript?,” you might ask. Well, that base is covered too. Just under the JavaScript section discussed in step 2, there is an opening and closing tag. You can also put all of the alternate (HTML version) Flash content in between these tags. This serves as a second fallback for Flash.

In summary, if the user does not have Flash, or the version of Flash is too old, then the alternate JavaScript content you defined will try to display instead. If the user’s browser does not have JavaScript, then the “noscript” content will display. Moreover, you have the HTML version of your content being read and indexed by the site crawlers twice! This content can also be styled using CSS like a traditional web page. You can even go so far as to use the same CSS stylesheet to style your Flash and your HTML, but that is a lesson for another day (see Stylesheets, Flash and XML for Dummies).

This article was recently dugg so if you’d like to show your support I’d really appreciated.

Special thanks to Aaron Waldon for #7

{ 0 comments… add one now }

There are no comments yet...

Kick things off by filling out the form below ↓

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Customize Your Template -   Foamers provides a wide range of premium website templates together with professional template customization to fit your individual business needs.

Start by  -  choosing a template. Once your selection is made, contact us with some general information (e.g. Template ID, some suggested color schemes, colors to avoid, styles or websites that you likes etc).

Basic Package -  $380 -  Customizations: Adding your logo, changing all links, graphics, text, making sure that the contact form works and up to 5 whole pages of content.