Process of updating a Flash banner

9 01 2009

To update a Flash banner sounds simple enough however the process involves as many components as working on a small website. The resulting file size is small, but it doesn’t mean the process is easy to deal with. Most of the times when I work on banners, I forget one or two elements in the beginning which slows down the process down the road. (I know, I need to learn to like banners more…)

No matter how much I don’t like updating banners developed by other developers, they just keep coming back. So I figure I’d post the checklist of the necessary steps here in order to ensure smoother process next time.

[+] Assets. Make sure you have all the following to begin with. Believe it or not, this step takes longer than I expect every single time.
A. comp (.psd and/or .ai) and storyboards (.pdf or .psd)
B. font files (must be MAC or PC specific)
C. information on max file size (? KB)
D. information on max duration and number of loops
E. information on click through URLs (sometimes you don’t need the actually URL, instead you just need to include the clicktag code before publishing.)
F. .fla files (and which version of Flash IDE it requires.)
G. (if applicable) .as files

[+] Update the banner(s). This is always the easy part fortunately. 🙂

[+] Post the updated banners to a server so the less tech-savvy clients can check it out.

[+] Deliver the source files including
A. font files (must be MAC or PC specific)
B. .fla files (and which version of Flash IDE it requires.)
C. (if applicable) .as files

Advertisements




What I was working on – My Magic Circle

5 01 2009

Happy New Year. (better late than never.)

I had been working on http://my-magic-circle.com during the last weeks of 2008. It is a funny video generator. User can join the Magic Circle by uploading their own pictures. The target audience is Harlem Globetrotters’ fans and non-fans really. Below is a sample Magic Circle video. We have been seeing pretty good conversion rates on Google Analytics since the launch of the site. 🙂 Check it out and create your own if you like.





Flash or HTML website?

20 05 2008

/* Please note the term “Flash” and “HTML” in this post should not be defined as their precise technical meanings. The target reader of this post should be anyone who needs a website but cannot decide whether to use Flash or HTML and why. */

When it comes to choosing the right technology for your website, the following question comes up a lot: “Should we have a Flash site? Or HTML is OK?” It is not an easy question, but I am gonna talk about the pros and cons of them both, from a couple of different perspectives.

[LOADING] A Flash site typically preloads a good chunk of data (site structure, some visual assets, etc.) up-front before it can show anything at all, while HTML sites pops a small part on the page right away (some text, an image, etc.). So the initial wait for a HTML site to load can be less than for a Flash site, however Flash sites can display better-designed and more detailed loading information and can better handle user expectation.

[DESIGN] Flash sites offer much more flexibility to designers than HTML sites. Animated transitions, audio, video, 3D, fullscreen, etc., you name it. This is probably the best strength of Flash sites. HTML sites tend to look more “box-y” by nature, which could be good or boring.

[USER EXPERIENCE] One of the biggest difference b/t Flash and HTML sites is that HTML sites, by nature, are page-based. When you click on a link in an HTML web page, chances are the current page is gone within milliseconds and a new page which might look completely different will pop up. You might say the experience is jarring. In comparison, on Flash sites, instead of the entire page gone, visual elements on the old page can fade out nicely or fly out one by one, depending on the design, then elements of the new page can fade in nicely or fly in one by one. Or, even some of the elements will stay on the page, will just resize themselves, or reposition themselves to make room for the new elements to come. In one sentence, Flash sites typically offer much smoother and more pleasant user experience, if designed well.

[BACK, FORWARD, and BOOKMARK] HTML sites are page-based, so users can use browsers’ built-in “back” “forward” buttons to navigate through different pages in a site and can bookmark any page of a site. However Flash sites typically do a poor job integrating these functions. (There are ways to make them work with Flash sites, however it requires the Flash developers to plan ahead, and to spend extra development time.)

[SEO] SEO = search engine optimiz(e)/ation. It is normally expected that your site is search engine optimized so that users can be directed to your site from Google. HTML sites are much easier to be programmed to be SEO-ed. However, search engines are not doing a great job indexing Flash sites, at least not yet. Again, it CAN be done with Flash sites, but it requires a good Flash developer a good amount of development effort.

[CROSS-BROWSER and CROSS-PLATFORM] Compared to HTML sites, Flash sites look and perform much more consistent and predictable than HTML sites. It takes a good designer and a good HTML developer to make HTML site cross-browser and cross-platform the way you want it.

[MAINTENANCE] There are ways to make content of HTML sites and Flash sites dynamic and easy-to-update. Which one takes more effort totally depends.

[COST] Typically, to develop a Flash site takes 2-4 times the time needed for an HTML site, even longer if you want to include SEO features in your site. Not to mention the fact Flash developers are more expensive than HTML developers in general.

As an Internet surfer for fun, I love the varieties in Flash site design styles. However as a site visitor looking for information, I don’t have a preference one way or another. It all depends on who your target audience is, what message you want to convey and how much your budget is. Let me end my post with a URL to a site I like, which includes both an HTML version and a Flash version. Check it out here.





Flex-built Flash editor – everyone can make sushi in 2 minutes

8 05 2008

Ever since Aviary made its first appearance, it has caught the attentions of thousands of web users’ and reviewers. In my opinion, what is great about the tools Aviary has to offer is that they are created by Adobe programs (Flex, Flash, etc) but to some extend they are becoming competitors to Adobe programs (Photoshop, Illustrator, etc). So… my biggest question was, will Aviary (or anybody else) release something that will become competitor(s) to Flex or Flash?

Admittedly, I was half joking when I asked that question. There is no way you can create a Flash IDE built with Flash technology, right? That didn’t make any sense to me.

However my jaw dropped when I saw a online Flex-built Flash editor. The tool is called Wix. Basically you can create a simple-structured page-based web site or widget using Wix’s web-based editor. Read the review, or even better, get an account and check it out yourself. (Find the button “CLICK HERE TO GET INVITED” on the page.)

OK. Let’s step back. It is not a Flex-built Flash authorizing tool per se. I still don’t think that is possible yet. At least not now. But think about Wix, it is opening many doors to all the Web 2.0 users.
[+] It publishes Flash sites, thus is taking advantage of all the benefits Flash player has to offer. It is the most widely-distributed plug-in, it is cross-platform, cross-browser. It can be multi-media. It offers powerful interface. It’s RIA.
[+] It solves an issue common Flash sites (at least most of them) encounter – SEO.
[+] It is free (for now). For people who want to build simple Flash sites, but don’t want to spend $700 on Flash IDE, this is great.
[+] It is easy to use. The UI is beautifully-designed. It hides the confusing Flash IDE’s timeline and library from the users, instead users have in-context tool boxes. I think it won’t take long before anybody could manage to make a website in Wix, compared to a pretty big learning-curve in Flash IDE.
[+] Better than Flash IDE, it comes with ready-made clip-arts and pre-built slideshow and video players for laymen. You can also embed media from popular sites such as Flickr, Youtube, etc. Soon, the entire www will be your library.

Wix is an easy-to-use web-content editor. It is great for:
[+] people, especially pre-college teenagers, who want to make good looking and multi-media presentations, but cannot afford (time- and money-wise) expensive IDEs.
[+] small businesses that want to build quick online portfolios to show case their work.
[+] personal albums and newsletters, especially when you are already sharing content on social networking sites such as Flickr, youtube, etc.

Wix is not for me, or any professional Flash designer/developer. What I cannot live without in my Flash websites includes:
[+] Scalability with dynamic content. I have been using XML as my data layer in almost every project I do, be it small or big project. I enjoy the MVC paradigm.
[+] customized transitions between clicks. To me, nothing on a webpage should pop in/out. That is a big differentiator between RIA and (most) HTML sites.

To sum up, I will use the following video of this Sushi machine as my comment to Wix. Hats off to Wix.





Full Screen mode – AS3 Flash Player 9

29 01 2008

[UPDATED] sample site that I used the fullscreen mode: http://my-magic-circle.com.

[UPDATED] sample code added. See below.

Just came across the full-screen issue in AS3. It turned out to be pretty easy to deal with. I am stoked Flash Player 9 has this feature. Developers need to do both of the following 2 things to make this happen.

[Step One] Actionscript

package{

	import flash.display.StageDisplayState;
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;

	public class Main extends Sprite{
		public var _fullScreen_btn:MovieClip;

		protected function handleMouseUp(me:MouseEvent):void
		{
			if (stage.displayState == StageDisplayState.NORMAL) {
				try{
					stage.displayState=StageDisplayState.FULL_SCREEN;
				}
				catch (e:SecurityError){
					//if you don't complete STEP TWO below, you will get this SecurityError
					trace("an error has occured. please modify the html file to allow fullscreen mode")
				}
			}
		}
		public function Main(){
			_fullScreen_btn.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp,false,0,true);
		}
	}
}

[Step Two] html script (the code which embeds the .swf file in the page)

In short, you need to update the value of the param “allowFullScreen” to be “true”.

If the html script was published by Flash IDE, you need to
update two instances of “allowFullScreen” , both from “false” to “true”.

If the html script was published by Flex IDE, you need to add the param
“allowFullScreen” with the value “true” at four places.

My references:

http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
http://www.flashxpress.net/forum/showthread.php?t=64585

Thanks to my friend Will Carpenter‘s help.