» Download all the source code and examples here

To begin, download the above zip file which contains a full Flash site that is completely iPhone/iPad/iPod touch/mobile friendly. It also contains all code samples shown below, including all HTML, CSS, and JavaScript for a fully functional mobile site. Feel free to use the mobile site as a template for your own site.

Here are 7 tips to make your Flash site iPhone friendly and accessible to all users on all devices:

1) Use SWFObject and actually make use of the alternate content feature

The first thing you’ll need to do is use SWFObject to embed your Flash site into your HTML page. Most Flash developers are already doing this but the important thing to do here is to make sure you take advantage of SWFObject’s capability to display alternate content to users without Flash installed. Unfortunately a lot of Flash sites using SWFObject fail to provide anything useful as far as alternate content. Below is an example of how a lot of Flash sites look to users without Flash:

Not very helpful to users on mobile devices.

At the very least you should include some basic content from the site like contact info and relevant links in addition to having a link to download the latest version of Flash. Below is how my personal portfolio site appears to a user without the Flash plugin:

Users without Flash installed see this.

The most important thing to note above is the link to the non-Flash version of my site which I’ll go over below. Open up “index.html” in the download to see how all of this is setup.

What my Flash portfolio looks like to users with Flash.

2) Develop a simplified HTML version of your site for iPhone/iPad/iPod touch/mobile users

A sample mobile site HTML template is included in the above zip file in the folders “Sycamore” > “mobile”. When developing a mobile site the important thing is to keep the site simple using basic HTML and a one column layout. This is to ensure it will be completely accessible to all users and viewable on all devices including mobile devices besides iPhones. I prefer to keep everything on one page if possible since scrolling on the iPhone is more enjoyable than clicking. I also like to size my images 320 pixels wide which looks perfect on the iPhone’s screen. This is how the mobile version of my site looks:

Note how the 320 pixel wide image fills the screen nicely.

It’s also a good idea to create a subdomain on your web server named “m” which stands for mobile. That way your mobile site address can be “m.yourdomain.com” which seems to be the standard way of doing things these days.

Notice the “m” in my URL.

3) Use JavaScript to detect iPhones, iPads and iPod touches and automatically forward them to the mobile version of your site

Use this simple bit of code to seamlessly send iPhone, iPad and iPod touch users straight to your mobile site – it should be placed in the header of your “index.html” page:

Using this code ensures the alternate content you created with SWFObject in step #1 is skipped entirely on iPhones. There is nothing more annoying for iPhone users than getting a “Please upgrade your Flash Player” message.

4) Set the viewport to be the width of the iPhone

This bit of code goes in the header of your mobile site HTML page:

It sets the width of the page to be the same width as the viewport of the device viewing it. This ensures that on the iPhone the site is sized correctly and already “zoomed in” and matches the iPhone’s screen size perfectly.

5) Make the iPhone stop from resizing text on rotation

If the iPhone is rotated, by default Safari will increase the text size on the page. This is handy if the text size is too small to begin with but if you are using a large enough font size this isn’t necessary. In fact, it can increase the size so much that it really messes up your layout and looks bad. I find 14px to be a good, legible font size for the iPhone’s screen. It’s plenty big enough to read on either orientation of the iPhone so I prefer to turn that feature off by using the CSS code below:

6) Create an iPhone home screen icon

In the download you’ll notice there is an image in the “mobile” folder called “iphone_icon_57x57.png”. This is basically a fav icon that the iPhone uses. If a user adds a link to your site from their home screen this is the icon that shows up. To change this image you’ll want to create a PNG sized 57×57. You don’t need to create any rounded corners or the shine effect – those are added automatically by the iPhone. If you don’t create a custom icon, the iPhone automatically takes a small screenshot of your page and uses that for the icon.

Here is the code you’ll need to insert in the header of your mobile site HTML page to make the iPhone use your custom icon:

7) Use Helvetica!

All iPhones and iPads already have the font Helvetica installed on them so it makes a great choice for your font family in the CSS for your mobile site.

No more Arial!

Once again, all code samples above are included in the download. I hope you find these tips useful – if so it would be nice if you could share this on Twitter, Digg, etc. If you know of any other tips for making Flash sites accessible on iPhones and other mobile devices please leave them in the comments below. Thanks!

__

Related posts:

1. 11 Myths About Flash That Won’t Die
2. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3
3. Simple Sanity-Saving Tip for All Timeline-Based Flash Projects

1. You can’t select and copy text on Flash sites

I still see this one all the time in online discussions involving Flash. Text in Flash is selectable (and copyable) if the Flash Developer chooses to make it so. This feature has been around for quite awhile. It’s not complicated or time consuming to implement either. It’s as simple as checking a box inside the Flash IDE or setting a property to true in ActionScript. So Flash technology is fully capable of this, it’s simply up to the developers to make it happen. There is no excuse not to implement this in Flash sites with a lot of text.

2. Your Flash site won’t show up on Google

This is a huge myth due to most people’s misunderstanding of Search Engine Optimization (SEO) and what factors cause a site to be listed at the top of Google. A lot of people seem to be obsessed with SEO without having a clue to how it works.

According to SEOmoz’s Top 5 Ranking Factors, the following is what matters most for SEO and getting your site to the top of the search engines:

1. Keyword Focused Anchor Text from External Links
2. External Link Popularity
3. Diversity of Link Sources
4. Keyword Use Anywhere in the Title Tag
5. Trustworthiness of the Domain Based on Link Distance from Trusted Domains

So how many of those five would negatively effect a site made entirely in Flash? Zero. That’s right. Not one of those has to do with HTML keywords on the page or H1 tags. Of course those things are important too but they don’t matter nearly as much as most people seem to think.

To get your site to the top of Google you need trustworthy sites to link to your site coupled with good title tags. Simple as that. You can have the most keyword optimized HTML site in the world but if no sites are linking to it you are screwed.

Case in point: Look at The Oatmeal, a hugely popular site that is featured all the time on Digg. The Oatmeal is created by just one person, a guy named Matthew Inman who has been called a SEO genius. He launched a dating site by himself in 2007 and was able to get a #1 ranking on Google for the search term “online dating” (without the quotes) beating out sites with huge marketing budgets like eHarmony and Match.com. He did this by utilizing a clever way of getting sites to link back to his. So obviously he knows what he is doing and understands SEO. Most of the posts on his site The Oatmeal are just a series of images inside an HTML page. No HTML text at all, meaning no keyword optimization, H1 tags, etc. Sounds kind of like a Flash site, doesn’t it? He has no trouble getting his site to the top of Google and neither would a Flash site that has good sites linking to it.

Of course there are some in the Flash community who point out how Google now indexes the text inside of SWFs and this is true. The problem is that they only index static content, not content loaded dynamically through XML. Most professional level Flash sites will load in content dynamically so Google really isn’t indexing the content. Maybe they will in the future but I don’t think the technology is quite there yet. Either way it won’t stop your site from getting a good search ranking since the actual content on the page isn’t nearly as important as the factors discussed above.

On an additional note I’m going to go out on a limb and say SEO is simply overrated in a lot of situations. If you are a design agency or a freelance designer I doubt you are getting much business through Google searches. Maybe if someone is looking for a local company in a small geographic area. But that matters less and less with a global economy with more businesses not caring where you are located. For example, I’ve never gotten any freelance work through people doing Google searches. I get work through word-of-mouth and networking. Clients simply aren’t finding me by typing in “flash designer” on Google and having my page pop up. The same is probably true for lots of businesses who needlessly fret that they aren’t in the top search results.

Also none of this takes into account how easy it is to have alternate HTML for your Flash site if you do really want to keyword optimize your content. Using the industry standard SWFObject for embedding Flash, you can serve up alternate content to users who don’t have the Flash plugin installed and Google will crawl and index that content. My personal portfolio site does this along with lots of other Flash sites.

So really people should understand what factors actually matter before saying a site created entirely in Flash won’t show up on Google. Flash + SEO = not as bad as you think.

3. Flash intros suck!

“OMG Flash sucks! I hate Flash intros! I always just click skip intro.” Not that I don’t agree but when I hear people say stuff like that I have to wonder what year they think it is. 1997? Seriously, when was the last time Flash intros were popular and widespread? For some reason people still seem to associate Flash technology with Flash intros. I’ve heard people say they don’t want Flash on the iPhone because they hate Flash intros.

I have been working with Flash professionally since 2001 and not one time have I ever created a Flash intro. Ever. That’s 9 years. Zero intros. It’s pretty well established that Flash intros do suck and that people severely dislike them. And it’s been pretty well established for about 10 years now. So quit complaining about all these supposed Flash intros everywhere. I don’t see them on any professional, contemporary sites and I don’t know any professional Flash Developers who still create them.

4. Flash isn’t supported on mobile devices

According to Adobe, there are currently 800 million Flash enabled mobile devices out there. Of course the elephant in the room is the iPhone – but how much longer can Apple hold out? Flash Player 10 is supposed to be coming to most smartphones in 2010 – including those running Windows Mobile, Google’s Android, Nokia S60/Symbian and the new Palm operating systems. Users want to access the whole internet and once other mobile devices start offering Flash support I believe Apple will be forced to quickly follow suit and allow Flash on the iPhone.

5. Can’t use the back button and no permalinks/deeplinking

This is entirely possible. See my portfolio site or my Aspen template. More and more Flash sites I see coming out these days support this feature. It’s easy to integrate back button support and deeplinking using SWFAddress.

6. Can’t scroll with the mouse wheel

This is entirely possible as well. Even on the Mac. See my Sycamore template and my AS3 scrollbar, both using SWFWheel.

7. Flash sites load slowly

People seem to think that creating a site in Flash somehow makes the file size 10 times larger than if you created it with HTML. Loading similar content – like lots of images for instance – will take the same amount of time whether you load it with Flash or HTML.

8. Flash sites don’t validate/aren’t accessible

My portfolio site is standards-compliant and validates according to the W3C. And it is completely accessible with alternate content, even on the iPhone. Same with tons of other all-Flash sites.

So you might be saying well Flash makes it harder to create a valid and accessible site. Well that might be true but according to browser maker Opera, less than 5% of all websites actually validate. So it’s not like creating a site with HTML makes it automatically standards-compliant. It’s up to developers to care and take the time to make a site standards-compliant and accessible.

9. Lots of users don’t have Flash installed

98.9% of users have Flash Player 9 or later installed according to Adobe. Even if they are fudging the numbers in their favor that’s still a pretty high percent. The number of users without Flash is probably similar to the number of users who have JavaScript disabled.

10. Flash sites automatically start blaring music and Flash banner ads takeover the screen

Yes, some Flash sites might do this and there are tons of annoying Flash banners out there. But there are plenty of ways to be annoying in HTML too. You can’t blame a bad use of the technology on the technology itself.

11. Flash Designers hate HTML and think the whole internet should be Flash

“If you think Flash is so great then why isn’t your blog made in Flash?” I’ve actually seen that posted before in discussions about Flash. My response to that would be “Because that would be retarded.”

I don’t think any Flash guys are saying it makes sense to use Flash in all situations. Most websites shouldn’t be entirely Flash. Does that mean no websites should be entirely Flash? Not at all. You can deliver an experience in Flash that simply cannot be compared to anything you can do in HTML/CSS/Ajax.

Not every site on the web is about delivering straight up information. If so then all we would need is Wikipedia. HTML is perfect for information rich sites like a blog. Flash is great for delivering a memorable experience.

__

So next time you hear anyone perpetuating any of these myths about Flash tell them what’s up. Please post in the comments if you can think of any other myths.

__

Related posts:

1. 7 Tips to Make Your Flash Site iPhone and iPad Friendly
2. 21 Well-Designed Flash Portfolios
3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3

As a freelancer I’ve worked in-house for lots of different design agencies and I’m always curious to see how they keep all their projects organized and what naming conventions they use. I’ve seen lots of good examples and lots of bad. Hint: If your files always have names like “design_final_05a_FINAL.psd” you are probably doing something wrong.

I’ve gathered all the best practices I’ve seen and put them together in a ZIP file which I use as a starting point for all my projects. Feel free to download it and incorporate it into your workflow:

» Download project_template.zip

I’ll go ahead and explain all the parts to it below as well as give some neat tips and tricks for staying organized and sane.

The above is what “project_template.zip” should look like once you have unzipped it. Replace “Project Template” with the name of your project.

Here it is with all of the folders expanded. I’ll go over each item starting from the top.

“Assets”
This stores all project files that aren’t deliverables – it’s also common to see it named “Resources” or “Reference” but I like the name “Assets”.

• “_Old”: I go into more detail about this later on but basically this folder is where you store all the old and backup versions of your files. It starts with an underscore to always keep it at the top of the folder.
• “Design”: Keep all your design source files here, like PSDs, Illustrator files, etc. I’m including a 960 grid PSD I created which I use as a starting template for a lot of web design projects. Learn more about the 960 grid system here.
• “Notes.txt”: I like to keep all the project specs together in one central location. One tip I like to do is when I have a client email with important project information in it, I paste it into this text file. This keeps me from having to go back to my email and dig though everything every time I need to look stuff up about what the client said. Also keeps me from constantly checking my email which is a huge distraction and time waster.
• “Zip”: For most projects I’ll have a few ZIP files that the client sends over – after I unzip them I store all the original ZIPs here in case I need to revert back to them.

“deploy”
This is for all files that will be uploaded to the web server for the final project. It’s also common to have it named “bin”, “web” or “deliverables”. I prefer the name “deploy” since the name is more clear as to what exactly it’s for. Also notice how everything in here is named with all lowercase letters which is standard for all files deployed to the web.

• “css”: All CSS files go here.
• “img”: For all your images. It’s also common for it to be named “images” but I like the 3-letter version better since it is more consistent with the rest of these names.
• “inc”: All include files go here – mostly for doing dynamic/PHP websites.
• “index.html”: This is the root file for the project.
• “js”: All JavaScript files go here. The “swfobject.js” file here is the industry standard for inserting Flash into HTML pages.
• “project_template.swf”: A sample SWF file that is embedded in “index.html”.
• “xml”: All XML files go here.

“src”
All project source files go here, which for me is typically FLA and ActionScript classes. I set the FLAs to publish to the “deploy” folder to keep everything separated and organized. I’m still amazed at how many developers I see who still keep everything in the same folder then have to move/rename things once they are ready to upload. If you keep your “deploy” and “src” folders separated you’ll never have to move or rename things again.

• “project_template.fla”: A sample FLA set to publish to the “deploy” folder.

Other organization tips & tricks

The above is typically how my “_Old” folder will look for storing backups of old versions of my files. Obviously if you are using a CVS respository for versioning then you probably won’t need this. But this is a simple way of keeping previous versions of files and having backups around in case you need to revert back to something.

For a PSD file named “home.psd” for example, the latest version will simply be called “home.psd” and will be stored in the “Design” folder. Periodically I’ll copy and paste versions into the “_Old” folder and name them “home_01.psd”, “home_02.psd”, etc. The most current version won’t have any numbers after it. It especially won’t have the word “final” in it since designs tend to never stay final for very long. I’ve seen some designers include the date in the filename like “design_10-7-2009.psd” so they know which one is the most current. That never made much sense to me since right in the folder it will usually show the date last modified. If you just keep one current version in the “Design” folder with a normal name that should be all you need to tell that it is the latest version.

To backup my “deploy” and “src” folders I simply create folders named “01″, “02″, etc and copy and paste the “deploy” and “src” folders together inside. See the above image for an example of what I mean.

Another thing I’ve learned is to store all my files in the default “Documents” folder on my computer. I used to have my “Personal” and “Work” folders kept directly on my desktop but I quickly realized that was a bad idea after accidentally dragging my entire “Work” folder to the trash when trying to delete some MP3s on my desktop. Luckily I caught it right after it happened but it could have been disastrous. Now I keep my actual folders in the “Documents” folder and create aliases (shortcuts on the PC) on my desktop to link to them. That way if they get deleted it’s no big deal since it’s just an alias.

This is how my “Work” folder is organized:

Business & Finance
For all tax info, contracts, agreements, paperwork, forms, etc.

Projects
All my projects organized by client.

Resources
Where I keep all my design resources like fonts, icons, photos, textures, patterns, backgrounds, Photoshop brushes, ActionScript libraries/frameworks, etc.

Also what I like to do for quick access to my current projects is create aliases on my desktop for all projects I am working on. This helps me see what is currently on my plate and I won’t forget about it since it is in plain sight on my desktop.

If you are wondering why my desktop background is plain boring grey it’s for a neutral background when working in Photoshop. On the PC Photoshop has a solid background when you are working in the program (or at least it used to – haven’t used Photoshop on the PC in ages) but on a Mac all the windows show through to the desktop. So if I’m working on a design or especially a color scheme, having a color desktop background will throw me off. I swear I’ll start subconsciously choosing colors that match and compliment my desktop colors without even realizing it. Neutral grey prevents this.

Anyway I hope people will find the above useful for staying organized. I realize my system won’t work for everyone but it seems to work really well for me and the types of projects I do. I’m always changing and optimizing my workflow so if anyone has any comments or suggestions for improvement please let me know in the comments!

—

Related posts:

1. 7 Tips to Make Your Flash Site iPhone and iPad Friendly

First off, I have nothing against FlashDen. I think the whole Envato collection of sites is wonderful for the creative community. I actually used to sell on FlashDen back in the day before eventually deciding to go off on my own with Warm Forest. For me it came down to having control over everything (pricing/marketing/support) and just the fact that it’s more fun for me to do things myself.

What I don’t like about FlashDen

FlashDen has 200,000+ users. That’s a huge market to pass up. But there are a couple of reasons why I choose not to sell through them…

They tend to focus on quantity over quality

Do you want to search through 1,172 Flash menus to find the right one to use in your project? Me neither. I think their logic is that the more options people have, the better. If there are 1,000+ options, then there has to be the perfect option for you, right? In reality I think people would rather see a small handful of really great options to choose from. Have a few options that are flexible and easy to customize and that’s all you need. Marketing studies have shown that having more choices of products makes consumer actually buy less. When presented with too many choices consumers feel overwhelmed and simply choose not to buy. For a great book that discusses these topics I recommend The Paradox of Choice.

It’s hard to market your files on their site

When you release a new file on FlashDen you get brief exposure on their homepage in their “Recent” section. After a few days though your file gets removed from the homepage and buried in the thousands of other files on the site to make room for the next new files. To have your highly polished, super-customizable template that you spent weeks and weeks planning and building being replaced on the homepage after a few days by an animated lobster SWF that someone threw together in 30 minutes would be frustrating. There are some very nice files on FlashDen but they tend to be mixed in with tons of products that aren’t very useful or very appealing from a design point of view.

They price their site templates too low and they take a large cut of the sale

I know, I know. The whole theory of stock sites is to sell lots of products at low prices. Having said that, getting a complete Flash website for $30 seems to me to be crazy below the market price. Any kind of professional who wants a website would probably have a budget of more than that I would hope. The max price they have for any template is $40 so no matter how nice of a template you design that is the most they will sell it for. I think customers would be willing to pay more for something that is really well designed and thought out. As far as their payment rates, you can earn from 25% up to 70% of each sale. They have expenses for running and promoting FlashDen and of course deserve to earn a profit and that’s fine. For me though, I would rather just price my products myself and get 100% of every sale.

Ok so I had a few gripes with FlashDen – how hard could it be to create my own site to sell my products?

How to sell your Flash templates or digital goods yourself

These days the barrier to entry is extremely low for any kind of web-based business. Hosting is cheap. Domains are cheap. There are all kinds of online services that will handle your shopping cart, process your payments, track your expenses, manage your advertising, etc. Everything is simple to setup and dirt cheap. There is no reason not to have an online business.

It ended up being surprisingly easy getting my own site, Warm Forest, up and running. I did a lot of research on the best way to set things up and the following is what I ended up using.

__

E-junkie for my shopping cart
www.e-junkie.com
Cost: $10/month

No need to code my own shopping cart system when there are tons of ready-made services that will handle everything for me. E-junkie hosts my file downloads securely, then sends a temporary email download link to the customer after they make payment. It was super simple to integrate their shopping cart into my site. I like them because they don’t take a cut of each sale and instead just charge you a flat monthly rate depending on the number of products you have for sale.

__

PayPal & Google Checkout for my payment processing
www.paypal.com
Cost: Small percentage of each sale

E-junkie actually doesn’t process any payments – they just integrate with PayPal and Google Checkout. Lots of customers already have PayPal and everyone trusts Google so it makes everyone feel secure in the payment process to use something they are already familiar with.

__

BuySellAds.com for my advertising
www.buysellads.com
Cost: varies (but generally great prices)

BSA pretty much came out of nowhere to become the default ad system for tech/creative websites and blogs. It seems everyone uses it now to setup and manage their ads. The price of ads is cheap right now due to the recession and all so it’s a great time to be promoting your site through banner ads. You get a lot of bang for your buck and it’s easy to target the exact market you are looking for.

__

Media Temple for my hosting
www.mediatemple.net
Cost: $20/month

Media Temple can supposedly handle large spikes in site traffic with their grid service which is the main reason I went with them. Although I have had the occasional problems with site uptime, overall I think they are worth the money. There is cheaper hosting available but I’d rather pay a little extra to go with a well-known and respected name in the hosting business.

__

phpBB for my customer support
www.phpbb.com
Cost: Free

No matter how well thought out a FAQ you have for your products, customers are still going to ask you a million questions. Even if the questions are in your FAQ they will still ask them. Instead of having people email me with questions, I installed a forum on my site for them to post their questions. I check it every so often and provide answers. That way instead of having to answer the same questions over and over again by email, customers will (hopefully) just search the forum and find the answer. phpBB is simple to setup and maintain.

__

Basecamp for my tasks/planning
www.basecamphq.com
Cost: Free

I actually use the free plan on Basecamp to manage my upcoming tasks. I know that sounds cheap but really I just use their To-Do list feature and have a bunch of to-do lists, one for each area of Warm Forest I’m working on. I wonder if I’m the only one who does this? Regardless, it seems to work really well.

__

Google Docs for my notes and spreadsheets
docs.google.com
Cost: Free

I’m a big fan of cloud computing – I like to work on different computers and in different locations. With Google Docs, my desktop, laptop, and iPhone can all access the same files from anywhere. I like to have docs for future ideas I want to implement like blog ideas, marketing ideas, ideas for new templates, etc.

__

Gmail for my email
www.google.com/apps
Cost: Free

Like everyone else, I love Gmail. I use their Google Apps on my domain and couldn’t be happier.

__

Google Analytics for my tracking
www.google.com/analytics
Cost: Free

It’s crucial to know where your website visitors are coming from and how they interact with your site. Professional analytics used to be crazy expensive but with Google it’s all free. Get this setup on your new site right away.

__

WordPress for my blog
www.wordpress.org
Cost: Free

Getting the word out about your new site is by far the hardest thing so having a blog is a must. WordPress is pretty much the standard for blogging. There are also lots of great themes out there you can buy to get you up and running quickly.

__

So it’s really not that hard to do things yourself

In the end I’m pretty happy I decided to create my own site and not use FlashDen to sell my products. Admittedly, the difficult thing so far has been making people aware that my site is out there. That’s always the tough part but the site has been growing steadily. I encourage anyone considering making their own site selling digital goods to just go for it. It’s easy to start things on your own and there is no reason you have to take the established route these days. Ultimately it’s better for me if everyone created their own independent template selling site – that way people will know they can look elsewhere besides FlashDen. I think it’s good that consumers have choices. Hopefully using the above tips others will follow in my footsteps.

_

Related posts:

1. Free AS3 Scrollbar: Fullscreen and Resizable

You can see a working example of what I came up with above in my blog header nav.

Flash links inside of text fields (usually set with CDATA and XML) support right-clicking to open links in new windows by default but setting up a nav that way usually doesn’t make sense and you would lose a lot of functionality doing it that way. So the trick I found was to take advantage of the fact that you can add a custom right-click context menu not just to the Flash stage but also to each individual sprite itself.

Here is some sample code that you can add to each of your nav items to achieve this:

I also tried to mimic the browser functionality of command (control on a PC) clicking to open links in new tabs and shift-clicking to open them in new windows. Using keyboard listeners I was able to get this working in Safari but sadly it doesn’t seem to work at all in Firefox for some reason. In Opera, shift-clicking opens a new tab but command-clicking just triggers the normal right-click menu. I guess it just depends on how the browser wants to handle the keyboard events.

I also added the ability to copy the URL to the clipboard for copying and pasting. Here is a quick snippet of code that will copy text to the system clipboard:

So why create a menu in Flash at all if HTML natively supports these features? The main reason would be nice typography – no more using the same system fonts over and over again. Plus you can create lots of neat dividers/selected state graphics/rollovers without having to open up Photoshop.

Here are three versions of the Flash right-click nav that you can download for free below.

» Download now (zip)

–

» Download now (zip)

–

» Download now (zip)

–

For more info, see the TypeNav™ page here.

–

Related posts:

1. Flash AS3 Contact Form Using PHP
2. Free AS3 Scrollbar: Fullscreen and Resizable
3. AS3 Dotted Line Class

The contact form class is super-customizable and simple to use. I’ve used it in lots of projects and it’s easy to make it look different every time. Here is the basic usage:

And here is a preview:

Pretty much everything can be easily customized including all the colors and text and validation copy. Here is how you would customize it:

And here it is customized:

I’m also including an XML-powered version for people who don’t own the Flash authoring software or who don’t know any ActionScript at all. You can just drop this into an HTML page and customize everything straight through the XML without having to open Flash or mess with any ActionScript. It’s a simple way to add a contact form to any website.

The script that actually sends the email is written in PHP so the web server you upload it to will need to support PHP in order for the email to send.

» Download the contact form class and XML version

Feel free to use this code in any way you want other than selling it.

Have fun!

__

Related posts:

1. Free AS3 Scrollbar: Fullscreen and Resizable
2. AS3 Dotted Line Class
3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3

Update [6-21-2009]: Now supports mouse wheel scrolling on the Mac using SWFWheel.

Here is a demo of the scrollbar in use. You can click “Add Copy” to see how it resizes:

You can also view a demo of it being used fullscreen in my Sycamore template.

Here is the usage for the scrollbar class:

» Download the demo and source code

Feel free to use this code in any way you want other than selling it.

Enjoy!

–

Related posts:

1. AS3 Dotted Line Class
2. Flash AS3 Contact Form Using PHP
3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3

Testing these projects inside of Flash is a pain. If you are testing the movie and there is a certain section of the movie you want to review, you always end up having to sit through parts of the movie waiting for the part you want to come up. Anyone who has had to work with a 3,000 frame timeline knows what I am talking about.

The solution is simple but I can almost guarantee that once you use this trick you will start using it every single time you are working with a timeline.

The trick is to add keyboard arrow controls to the movie.

Up restarts the movie.

Down pauses/unpauses the movie.

Left jumps back 30 frames.

Right jumps forward 30 frames.

Now when you are testing you can just press the arrows to jump through the movie to get to the different parts.

So if you want to review how a certain text transition looks, or pause the screen to double check you have the correct copy, or skip ahead to a certain part of the movie to review, just use the arrows.

Add this script to the first frame of your animation and you are all set:

Feel free to download the example and use it however you like.

» Download the sample zip file

__

Related posts:

1. AS3 Dotted Line Class
2. Free AS3 Scrollbar: Fullscreen and Resizable
3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3

So I scoured through my immense collection of Google Bookmarks and looked at literally hundreds of Flash sites and found my favorites. I’m only focusing on personal portfolio websites this time – I’ll leave design agency portfolio sites for another post.

My two biggest complaints about some of the sites I viewed:

• Music that starts blaring automatically (I have iTunes on with my own music, thanks)
• Sites that takeover my browser window by trying to resize it

I am happy to report that the sites I’ve collected here do neither of the above. So yeah, Flash can suck but in the rights hands it can be an unparalleled user experience which these sites show.

Andy Gugel :: www.32round.com

If I had to pick an absolute favorite site from this list, Andy Gugel’s portfolio would have to be it. There are so many small details that went into it that make viewing the work such a smooth, seamless process. The way the image detail views are setup is the best I’ve seen. Instead of being cropped to a certain size like on most sites, the images (pretty much all web design comps) are full size so you can view the entire comp. Yeah it’s not optimized for 800×600 screens, but that’s not the target audience, so who cares? All around excellent work.

__

Jon Ruppel :: www.oneover.com

Normally I’m not a huge fan of sites that try to get too crazy with the navigation but on Jon Ruppel’s site it works. The way you can change the way the thumbs are laid out is just flatout badass. You’d think a 3D ring of rotating thumbs would hinder usability but it doesn’t. Very awesome site.

__

Nat Filippini :: www.nadameconvence.com.ar

This is a fairly simple site but what it does it does very well. The focus is on the actual portfolio work like it should be.

__

Jonatan Hedberg :: www.formatura.org

This site has been around for a while but I’ve always liked it for some reason. Elegant typography with a clean layout always works.

__

Chris Delia :: www.imnotanaddict.com

Sweet design work and the gradient rollover effect on the thumbs is awesome. I also dig the right-click navigation and how the HTML page holding the site grows to fit the different sections of the site. No Flash scrollbar needed.

__

Pawel Nolbert :: www.hellocolor.com

One of my favorite sites and one of my favorite designers. Pawel’s design work is absolutely stunning. The colors on the site are constantly shifting and changing – I love how the thumb rollovers and logo are always different. Beautiful and creative work.

__

Mario Hugo :: www.loveworn.com

This has to be about as minimal you can get for a portfolio site. The focus is entirely on the design/art work. I love how the visited state of the links reveals an image.

__

Thom Bennett :: www.tbgd.co.uk

Beautiful typography, color and texture. Not much else to say about it.

__

Adhemas Batista :: www.adhemas.com

Slick site full of beautiful, colorful work. The Flash implementation is seamless and gets out of the way of the work.

__

Doug Alves :: www.nacionale.cc

Super smooth site with wonderful typography. I like the visited state on the thumbs.

__

Danny Yount :: www.dannyyount.com

Not much to say here other than his design work kicks ass and the Flash work is as smooth as can be.

__

Jesper Bentzen :: www.anovadesign.com

Something about this site is just so amazingly slick. I love how all the site elements are desaturated, then colorize when you rollover them.

__

Chris Erickson :: www.kindnessandhumility.com

Normally it’s bad to require 4 clicks before you can see any portfolio images but on Chris Erickson’s site this type of nav is what makes the site so cool. Very original and innovative and the site couldn’t be more usable in my opinion.

__

Greg Huntoon :: www.417north.com

I know wood paneling on site backgrounds is pretty played out these days but this is one of the first sites I remember seeing it on. Just an all around cool site even though it has been around a while. I love how the different section tabs get raised up off the page.

__

Gabe Kean :: www.gabekean.com

To say this site is grid based would be a huge understatement. Everything fits perfectly into the ruled notebook paper which goes perfectly with the educational/exhibit design work that Gabe Kean does.

__

Scott Hansen :: www.iso50.com

I know I said I despise sites where music starts automatically when the page loads. Well this is an exception. Not only is Scott Hansen probably my favorite designer around today but he makes his own music too. And surprisingly it’s actually really good. He is a true talent. Check out the print section if you want to see some stunning work. As far as the Flash work itself, there isn’t much to say other than it is done perfectly. Also the ISO50 blog is worth checking out and bookmarking too.

__

Jason Hickner :: www.pr0jects.com

This guy is seriously talented and he does seriously cool work. He’s the one who did the Flash development work on The FWA site. I think he builds robots in his spare time too and I’m not even joking. Hardcore stuff.

__

James Monaghan :: www.allaboutjames.co.uk

There are a couple cool things I really like about this site. I love how when you rollover the project names, the site background becomes a project image. The horizontal drag to view the detail images is also pretty sweet. Nice work.

__

Alexander Radsby :: www.aeform.net

A straight forward horizontal scrolling portfolio that is done very well. The way you can view all the projects by year is a cool feature.

__

Jonas Eriksson :: www.imjonas.com

A super minimal horizontal scrolling portfolio – no navigation, just a scroller and the portfolio images. Super simple but it works.

__

Bruno Fujii :: www.illustplosion.com

Another horizontal site that is done well. I like the large portfolio images so you can really see his artwork. The way the whole site rotates when you click the “About” button is probably my favorite thing about it.

__

Know of any other well-designed Flash portfolio sites you think deserve to be on this list? Let me know in the comments section below.

Related posts:

1. 7 Tips to Make Your Flash Site iPhone and iPad Friendly
2. 11 Myths About Flash That Won’t Die
3. Simple Sanity-Saving Tip for All Timeline-Based Flash Projects

Dotted line preview:

Dotted line usage:

Dashed line preview:

Dashed line usage:

» Download the zip containing the class and the above samples

Feel free to use it in whatever way you see fit.

__

Related posts:

1. Free AS3 Scrollbar: Fullscreen and Resizable
2. Flash AS3 Contact Form Using PHP
3. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3