Based on Part III’s codes, converting AS2 preloaders into AS3 is pretty simple.

Continue Reading »

Shang :: May.20.2008 :: actionscript 3, beginner :: No Comments »

1. The most popular screen resolution is 1024×768
2. Most people use PC
3. IE is the most popular browser
4. Preferred color model for online is RGB not CMYK
5. Preferred file formats for images are JPG, PNG and GIF not TIFF
6. Rule of the thumb: images should just be 72 dpi rather than 300 dpi
7. File size for images should not exceed 1 MB
8. Fonts supported in HTML are: Arial, Helvetica, Times New Roman, Courier, Georgia, Verdana, Geneva
9. HTML text cannot be kerned. Flash dynamic text cannot be kerned either
10. Always always always test your layout in different monitors and browsers before going live

Shang :: May.07.2008 :: beginner, best practice, good-to-know :: No Comments »

The most important information for a preloader is the number of bytes loaded and the total number of bytes of the file (file size). In ActionScript 2, getBytesLoaded and getBytesTotal functions serve the purpose. The most basic implementation is like this:

stop();
function preload() {
	var l:Number = getBytesLoaded();// loaded bytes of the swf file
	var t:Number = getBytesTotal();// total bytes of the swf file
	var p:Number = l/t;// percentage loaded of the swf file, value range from 0-1
	updatePreloader(l,t,p);
	if (p == 1) {
		onEnterFrame = null;// remove onEnterFrame loop
		gotoAndStop("main");// go to the main frame
	}
}
function updatePreloader(l:Number,t:Number,p:Number){
	//most of the time l and t are not used, but just in case you need it there's no harm to keep them
	trace("bytesLoaded: "+l+"  bytesTotal: "+t+"  percentage: "+p);
}
onEnterFrame = preload;

Based on Part II’s 2 keyframes structure, the codes above should be placed in the “preloader” key frame and core codes should be placed in “main” key frame.

Visuals for indicating the loading progress can be easily extended from the basic codes shown above. All we need to do is to play around with updatePreloader function. Here’s a list of simple visuals:

Continue Reading »

Shang :: May.06.2008 :: beginner :: No Comments »

Before building a preloader, let’s take a look at how SWF files loads.

SWF files are displayed in a streaming manner. Frames in the main timeline are loaded from 1 to the end (from left to right in Flash IDE). The user will be able to see a frame once it is loaded, without loading the whole SWF file. Because of the streaming nature, a SWF file with only one frame in the main timeline will only show up until everything is loaded. A preloader is not needed in such situation. In order to make a preloader visible during the preloading phase, preloader should be placed in the first frame and the contents should be placed in some frames behind it.
Continue Reading »

Shang :: Apr.21.2008 :: beginner, best practice :: 1 Comment »

…(a preloader) consists of a quickly-loaded smaller movie, image or text with a message that tells the viewer to wait while the rest of the larger object is loaded. - Wikipedia

According to the definition, a preloader should be a small message that indicates a large object is loading. A good preloader follows the definition closely, small, quick load and informative. A simple looping animation works, pure text works and a line in the stage is pretty neat too.

A common mistake is called “preloading the preloader”, which means that the preloader makes up the majority of the file size and it is too big to be loaded quickly. It may sound silly but you do spot it from time to time. Unfortunately, there isn’t an exact figure to measure whether the preloader is too big or not. It’s up to the designer or developer’s judgment.

Fortunately, preloader is getting less and less important nowadays. One reason is because bandwidth is getting bigger so the preloading time is much shorter. But more importantly, people realized more time should be spent in developing the content rather than a stunning preloader.

Shang :: Apr.05.2008 :: beginner, best practice :: 2 Comments »

There are some security restrictions. The full article can be found in Adobe’s website. Two restrictions are very important:

1. “Users cannot enter text in text input fields while in full-screen mode. All keyboard input and key-related ActionScript is disabled while in full-screen mode, with the exception of the keyboard shortcuts that take the viewer out of full-screen mode. ”

   This restriction keeps most website/application away from fullscreen mode. Almost all websites and applications need keyboard interaction. Bringing the user out of fullscreen mode to fill up a form is not user-friendly.

   It was stated in Square Factor’s blog that the reason for disabling input is to avoid phishing activities. “…attacker could mimic the look of the operating system / browser to force user to enter sensitive data, such as passwords or serial numbers.”

2. “The ActionScript that initiates full-screen mode can be called only in response to a mouse click or keypress. If it is called in other situations, it will be ignored (in ActionScript 2.0) or throw an exception (in ActionScript 3.0).”

Shang :: Mar.23.2008 :: actionscript 3, beginner, good-to-know :: 1 Comment »

Regardless of whether you are a seasoned developer or a designer or a complete newbie, (re)familiarizing yourself with the software and basic terminology is a good place to start. Here is a list of tips all Flash users should know.

1. Frame rate -> 12fps for mobile phones, 18fps to 30fps for general usage
2. Scene -> Please do not use scenes, it is outdated and unstable
3. Time line -> Onion skin is good for working with multiple frames
4. Library -> Ctrl + L
5. Button -> Try not to use it because it is very inflexible as compared to the movie clip (more another time)
6. Graphics -> Great for animation as it has live preview from the timeline
7. Bitmap text/Pixel font ->Round up all X, Y axes to whole numbers or risk getting blurry text
8. Align panel -> Ctrl+K

Shang :: Mar.09.2008 :: beginner, good-to-know :: No Comments »