Tag Archive for 'Flash'

7 Tips to Make Your Flash Site iPhone and iPad Friendly

Everyone seems to be talking about how the iPhone and iPad don’t support Flash but I haven’t seen much discussion on what to actually do about it if you have a Flash site. Flash might not be coming to the iPhone anytime soon but there are actually simple things you can do to make any Flash site iPhone/iPad/iPod touch compatible, as well as work on any mobile device and be accessible to users without Flash installed. Every Flash site should attempt to make all content accessible to all users but sadly most sites don’t do this.

» 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:

Alternate content
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:

No Flash
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.

Alternate content
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:

My Flash portfolio on the iPhone
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.

My Flash portfolio on the iPhone
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:

  1. <script type="text/javascript">
  2.  if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
  3.   document.location = "mobile/";
  4.  }
  5. </script>

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:

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

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:

  1. html, body, p, div, h1, h2, h3, h4, h5, h6 {
  2.  margin: 0;
  3.  padding: 0;
  4.  -webkit-text-size-adjust: none;
  5. }

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:

  1. <link rel="apple-touch-icon" href="iphone_icon_57x57.png" />

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.

  1. body {
  2.  font-family: Helvetica, Arial, sans-serif;
  3.  font-size: 14px;
  4.  color: #333333;
  5.  background-color: #f5f9ed;
  6. }

Helvetica
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!

__

11 Myths About Flash That Won’t Die

I make my living as an Interactive Designer/Flash Developer so most of the projects I do involve Flash in some way. So of course I think Flash is a great technology. But I’m definitely no Flash fanboy. I agree that there are lots of terrible uses of Flash out there and I don’t mind when people are critical of Flash. But I do mind when people say things about Flash that are simply untrue. Here are 11 common myths I hear all the time.

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.

__

Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3

For a recent project I needed to create a Flash navigation menu for use in a HTML site that functioned as close as possible to a normal HTML nav. In HTML you can right-click links to open them in a new window/tab but normally with Flash menus you can’t do this. Therefore I had to try to create that functionality from scratch with ActionScript.

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:

  1. var navItem:Sprite = new Sprite();
  2. var cm:ContextMenu = new ContextMenu();
  3. cm.hideBuiltInItems();
  4. var openNewWindow:ContextMenuItem = new ContextMenuItem("Open Link in New Window");
  5. openNewWindow.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onOpenNewWindowSelect, false, 0, true);
  6. cm.customItems.push(openNewWindow);
  7. navItem.contextMenu = cm;

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:

  1. System.setClipboard("Your text to copy");

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.

TypeNav Font Option 1

» Download now (zip)

TypeNav Font Option 6

» Download now (zip)

TypeNav Font Option 8

» Download now (zip)

For more info, see the TypeNav™ page here.

Flash AS3 Contact Form Using PHP

To continue in the tradition of my AS3 scrollbar source code I released a few months back, I’m now giving away the source code for my AS3 contact form class I’ve been using in my other Flash templates, specifically the one from Cedar.

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:

  1. import com.warmforestflash.ContactForm;
  2. var contactForm:ContactForm = new ContactForm();
  3. addChild(contactForm);

And here is a preview:

Get Adobe Flash player

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

  1. import com.warmforestflash.ContactForm;
  2. var contactForm:ContactForm = new ContactForm();
  3.  
  4. // Label settings
  5. contactForm.nameText = "Type your name here";
  6. contactForm.emailText = "Type your email here";
  7. contactForm.messageText = "Type your message here";
  8. contactForm.sendButtonText = "CONTACT ME";
  9. contactForm.sendingText = "Sending message…";
  10. contactForm.errorEmailText = "Your email is not valid.";
  11. contactForm.errorServerText = "Server problems.";
  12. contactForm.confirmationText = "Thanks for contacting me!";
  13.  
  14. // Color settings
  15. contactForm.textColor = 0xffffff;
  16. contactForm.borderColor = 0×222222;
  17. contactForm.backgroundColor = 0×000000;
  18. contactForm.selectedBorderColor = 0x05b59a;
  19. contactForm.selectedBackgroundColor = 0×000000;
  20. contactForm.selectedBlurAmount = 50;
  21. contactForm.sendButtonTextColor = 0xffffff;
  22. contactForm.sendButtonTextRollOverColor = 0xffffff;
  23. contactForm.sendButtonColor = 0x05b59a;
  24. contactForm.sendButtonRollOverColor = 0xff4400;
  25. contactForm.errorColor = 0xff4400;
  26. contactForm.confirmationColor = 0x05b59a;
  27.  
  28. // Layout settings
  29. contactForm.nameWidth = 400;
  30. contactForm.emailWidth = 400;
  31. contactForm.messageWidth = 550;
  32. contactForm.messageHeight = 200;
  33. contactForm.verticalSpacing = 10;
  34.  
  35. addChild(contactForm);

And here it is customized:

Get Adobe Flash player

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!

__

Free AS3 Scrollbar: Fullscreen and Resizable

In coincidence with the launch of my new Aspen template, I’ve decided to release for free the source code for the scrollbar I’ve been using in my other Flash templates. The scrollbar is coded in AS3 and will automatically resize according to the amount of content, unlike a lot of other Flash scrollbars. You can set the track color, grabber color, grabber press color, grip color, track thickness, grabber thickness, ease amount and whether or not the grabber is “shiny”.

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:

Get Adobe Flash player

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

Here is the usage for the scrollbar class:

// Arguments: Content to scroll, track color, grabber color, grabber press color, grip color, track thickness, grabber thickness, ease amount, whether grabber is “shiny”
  1. _scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0x05b59a, 0xffffff, 15, 15, 4, true);
  2. addChild(_scrollBar);

» Download the demo and source code

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

Enjoy!