From the category archives:

ActionScript advanced aspects

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 }

The Best Flash Site Templates Ever!

by Collado on July 26, 2008


Back in the day, if you had told me some little animation app would catch on as quickly and as suddenly as Flash. I would have said you were an idiot. And if I had told you that Flash would become the design and development community’s number one tool you probably would have said I was an idiot in return.

That’s what makes Flash such an amazing program. Not only did this small animation app come

full circle, but it led also to the creation of some of the most groundbreaking, incredible and right down crazy cool websites you ever did see.

Through my work at premier template customization site (http://foamers.net) I’ve worked with a number of different clients and projects to attain their unique online presence through the template customization process.

Briefly, the template customization process is the method where with we customize the look and feel of the website template and then merge it with your own content files to create a website that’s both unique and can adapt to each individual client’s needs.

And so, over the years I’ve had the opportunity to see and work with both the best of the best and worst of the worst Flash template ever. The top 5 templates of all time are not easy to compile, but since I’m a firm believer in the notion that you, me, all of us have the ability to teach ourselves anything just as long as the inspiration and desire are there, my attempt focuses primarily on website templates which not only brought us some amazing visuals, but that also generously taught me so many neat new tricks.

Do you agree with my selection? Do you think I’m being too uncritical of the ones I’ve picked, or which one do you think is the best? Lets talk about it – add comment


Number 5

I really like the whole two toned very retro atmosphere here and specially the little mp3 player at the bottom because I can take that whole movie clip and reuse it on any other projects. Template No. 20164 is an original design by author Oldman. Ever since it’s release date it has had 1 download. And there’s even a non-Flash version also included with this template.


Number 4

This one really blows you away. It’s a perfect example of what Flash 8’s all new filters were created for. I love how the animation transitions perfectly smooth, and the blurring on the big numbers for each page its really neat also.

And not only do you get the source FLA files, but also all of the PSD files are available too so you can look at all the different layers, filters and masks that went into the making. Template No. 18708 is an original design by author Maxwell. Ever since it’s release date it has had 1 download.


Number 3

There’s nothing really too fancy about this one maybe other than that whole panoramic slide with the scene effect. What I really like about it is that the author made full use of vector graphics, as well as some very useful ScrollPane components. Template No. 18668 is an original design by author Modlin.


Number 2

Perhaps the most radical innovation in Flash as far as website templates concern is XML Flash Sites, this is just one I choose only because it came with a gallery but there’s lots more and they all come equipped with a system that allows you to edit its content without having to use the Adobe Flash software.

So you don’t have to learn any Flash you simply edit the template’s content from a text editor; so if you’re just starting to learn about Flash and would like to see hands-on how Flash and XML work together this is the perfect way to play around and start getting your hands dirty. Template No. 20234 is an original design by author Cowboy.


Number 1

Drum roll, please… “Straight in at number on!” Ok, here we go… the best Flash template ever is Template No. 20361 an original design by author Hugo and one of the true innovations in cutting-edge web design! It’s based on ActionScript3 and made with the PaperVision 3D engine (An open source 3D engine for Flash), which features an impressive 3D interface as well as a wide range of other really neat stuff.

Just like the method used in XML Flash Sites this one allow you to circumvent the need to modify FLA source files whenever you need to change some text or move stuff around etc, etc.

{ 2 comments }

Very First Template Ever (Made With The PaperVision 3D Engine)

by Collado on July 16, 2008

This week TemplateMonster introduced the very first PaperVision 3D Template ever - a beautiful Flash template with an impressive 3D interface! It’s based on ActionScript3 and made with the PaperVision 3D engine (An open source 3D engine for the Flash platform) which provides it that silky, smooth feel as well as a wide range of useful features.

The First Ever PaperVision 3D Engine template

For example, you can now add as many pages to the Flash site as you wish - This feature is identical to the method used in their XMl Flash Site Template that allows your content to be loaded onto Flash via an XML file. Similarly, this also lets you circumvent the need to modify FLA source files whenever you need to change some text or move some pictures around.

The First Ever PaperVision 3D Engine template

Besides the fact that it looks very cool due to the 3D interface the ActionScript3 also provides a set of additional functional features. For example, you dont need to understand Flash/ActionScript you simply edit the website’s content in Notepad and you never worry about not having the Adobe Flash software because you’ll never have to recompile the swf file again. Another thing that comes is handy is that all of the sounds are stored as .mp3 files.

The First Ever PaperVision 3D Engine template

As always just to make the template customization part easier they have allocated all symbols in individual folders with appropriate names. For example jpeg and or png files would be within a folder named “bitmaps”. Likewise, you will find a “buttons” folder also for buttons symbols and so forth.

TemplateMonster says this is the first and only template made with ActionScript3 and PaperVision 3D in their collection. But there will be tons more to follow.

{ 0 comments }

Should I go for a Flash based Website

by Collado on April 13, 2008

business woman deciding on flash vs htmlThere are now a myriad of platforms, applications and programs used in making our website templates dynamic. In addition to plain old HTML there are also CSS(Cascading Style Sheets), SSI(Server Side Includes) and PHP (Hypertext Preprocessor) just to name a few. In addition Flash animation is also used to accentuate the elegance of our Flash site templates. Making the decision to use our template customization services will definitely save you a lot of cost and effort however there is one other thing you’ll want to consider. And that is, which customization package should you choose? In other words should you go for a Flash based Website or is it more practical to stay with HTML? In the following article the author examines some of the pros and cons of using Flash vs HTML. For a more in-depth discussion on this particular matter see also - Top 10 things Flash developers don’t want you to hear

Flash-based sites have been a craze since the past few years, and as Adobe compiles more and more great features into Flash, we can only predict there will be more and more flash sites around the Internet. However, Flash based sites have been disputed to be bloated and unnecessary. Where exactly do we draw the line? Here’s a simple breakdown.

The good:

Interactivity
Flash’s Actionscript opens up a vast field of possibilities. Programmers and designers have used Flash to create interactive features ranging from very lively feedback forms to attractive Flash-based games. This whole new level of interactivity will always leave visitors coming back for more.

A standardized site
With Flash, you do not have to worry about cross-browser compatibility. No more woes over how a certain css code displays differently in Internet Explorer, Firefox and Opera. When you position your site elements in Flash, they will always appear as they are as long as the user has Flash Player installed.

Better expression through animation
In Flash, one can make use of its animating features to convey a message in a much more efficient and effective way. Flash is a lightweight option for animation because it is vector based (and hence smaller file sizes) as opposed to real “movie files” that are raster based and hence much larger in size.

The bad and the ugly:

The Flash player
People have to download the Flash player in advance before they can view Flash movies, so by using Flash your visitor range will decrease considerably because not everyone will be willing to download the Flash player just to view your site. You’ll also have to put in additional work in redirecting the user to the Flash download page if he or she doesn’t have the player installed.

Site optimization
If your content was presented in Flash, most search engines wouldn’t be able to index your content. Hence, you will not be able to rank well in search engines and there will be less traffic heading to your site.

Loading time
Users have to wait longer than usual to load Flash content compared to regular text and images, and some visitors might just lose their patience and click the Back button. The longer your Flash takes to load, the more you risk losing visitors.

The best way to go is to use Flash only when you absolutely need the interactivity and motion that comes with it. Otherwise, use a mixture of Flash and HTML or use pure text if your site is purely to present simple textual and graphical information.

About the Author
About Design9x.com
With extensive experience Design9x a leading Professional Web Design Studio delivering high Quality and Affordable Web-based Solutions. Design9x specialize in Search Engine Optimization (SEO), Internet Marketing Website Development and Consulting to increase Traf

{ 0 comments }