Skip navigation


Html4 and css2 (and JS) is about to become mature. javascript has actually become a viable solution for simple UI / site animations while IE9 takes the lead as the fastest JS interpreter. and yeah, there is jQuery. the question remains with the flash sites: why?

if you are still doing keyframe scripting and content embedding in your swf then please go away and learn a thing or two, and then come back and read on.

• planing

PLAN! sitemap, content anything that might come into your mind.

• the old issues

there has been the problem with the SEO compatibility. from my understanding this was the only problem with flash. however there is the recent problem with mobile, iOS in general. therefore you have to have your content in html too. so my advice, before starting development on your flash site, do one for the iPhone.

before you design an extravagant UI with lots of html5 animations, you have to consider the fact that there are more nokia and samsung users then iOS and mobile web access is still a peanut compared to desktop. so don’t spend much time. just put a simple navigation on top of the page, create your site structure and make sure it’s readable on all screen sizes including desktop (ie: don’t use 3km long lines of text).

when you are done, you should have a simple site crawlable by search engines. this will also fulfill the purpose of your SEO needs. and you begin the flash overhaul.

• navigation and the html pages

basically you have to recreate the same sitemap in you flash site. and have a variable that forces the flash site to open up a specific page / state, relevant to each page in your html map.

there is a thing called swfObject. it’s a piece of open source code that lets you replace any html tag with your swf. earlier when you created the html pages you should have created a wrapper that wraps any html content. this is the tag which you want to replace, and you do that on all of your html pages, and the you set the variableThatForcesTheFlashSiteToOpenUpASpecificPage.

don’t worry abut SEO. search engines crawl only the content of the page and don’t execute JS. if someone arrive at any page you should always have relevant content returned.

• fragment url (the thing after the “#”)

you might set up an fragment url system for the back button and url copy pasting. however your goal is to create sites where people find and arrive to their content in the mater of milliseconds, but on complex sites is a must.

there are quite a few ways to do it so i don’t get into it. a warning though: if you tend to use fullscreen on android, detect and disable it (it will exit fullscreen if fragments are added to the url.)

• the important part, the edge over any html site (this might apply to any app you create on the platform including AIR and iOS)

even with html5 takes a lot of code to do some nice effects that wont even work on any browser ( <IE8 ). so you have consistency as a huge advantage with flash.

loading – the loading bar is a thing of the past. you have to realize that things must be fluid in order to grab and maintain attention. your main swf should never exceed 1 meg. this is more then enough for some fonts and a complex UI (use vectors not images!). have anything else as an external file (including text content).

when your app starts, start loading the content immediately. but not all at once (=suicide), have a queue for it. and do it after a specific order, that you might change based on user behavior. if you must use a progress bar for whatever reason, for god’s sake, don’t freeze the UI.

if the user is visiting the pages in a different order, then you just have to rearrange the queue.

in essence is not that complicated and you don’t have to overdo it but the results are phenomenal.

be careful with lots of content. always have an eye on the memory usage. up to 500Mb you should be fine. and don’t load content twice.

optimization – this is something that nobody seems to know anything about. i hate sites that freezes after 10 min. memory / process overflow … whatever reason.

remove any event listeners that you don’t use. there is also a limit of how many of them you can have active at a time. also be aware of the garbage collector. google for it, and read anything you can on it.

when it comes to display performance be careful with filters. do not overuse them. another thing you have to look out for is to have as much as possible animating objects cached as bitmap with the cacheAsBitmap or better yet cacheAsBitmapMatrix (only in AIR) properties. or if you are doing particles or huge amount of the same objects manual drawing works the best (example). keep in mind, this is not something you must do all the time but in certain situations works miracles. jump over to the AS3 reference to read more on these.

have a look at the state machine. might have cases where you can implement it.

cache what you might reuse multiple times. don’t overdo. find the right compromise between memory and processing speed

if you have large amount of calculations to do and meanwhile your UI freezes, break into chunks and do one at each passing frame. games use this technique quite allot. the size of your chunks should be as large as the performance drop should be barely visible on a mid-end device. and then you reduce it to half, just to make sure.

learn from your own, and especially from other peoples mistakes. if you have a detailed plan in place, before you start coding, you can scan every point where variables are a bit extraordinary. see if there is a potential problem ahead of you, if yes see if there is a solution. if there is none and you thing you are good enough and have an idea, then do a prototype and check it. if none of this works go back to your plan and change it. if that doesn’t work, you have to talk to your client.

.

finally it all comes down to experience, and getting used to write code on steroids from the get go. no one will notice it at first, but if you’re consistent, luck will find you. like it did with Sean Cooper for example or Andy Moore, or hopefully Paul Preece …

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: