Free Flash Source Code | Flash & ActionScript Blog

7 Tips to Make Your Flash Site iPhone and iPad Friendly

July 29, 2010

. 0 Comments

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.

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:

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
document.location = "mobile/";
}
</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:

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

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

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:

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

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
background-color: #f5f9ed;
}

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

January 21, 2010

in Flash

. 26 Comments

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:

Keyword Focused Anchor Text from External Links
External Link Popularity
Diversity of Link Sources
Keyword Use Anywhere in the Title Tag
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.

Folder Structure and Project Organization Best Practices

October 7, 2009

in Freelancing

. 15 Comments

I like to think of myself as a pretty organized person – ok I admit I’m pretty much borderline OCD when it comes to having everything in its right place. So one thing that has always interested me is how best to structure and organize my design/web projects.

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.

Project template

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

Project template expanded

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

Old

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.

Documents

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.

Desktop

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!

—

How to Sell Your Flash Templates Without FlashDen

August 19, 2009

in Entrepreneurship

. 19 Comments

“Why don’t you use FlashDen to sell your Flash templates?” I’ve been asked that question several times since starting Warm Forest. In this post I’d like to explain why I choose to sell my products independently and show how easy it is for anyone to create their own site selling digital goods – whether it is Flash templates, WordPress themes, E-books, software, etc.

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.

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

July 13, 2009

in Freebies

. 14 Comments

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:

var navItem:Sprite = new Sprite();
var cm:ContextMenu = new ContextMenu();
cm.hideBuiltInItems();
var openNewWindow:ContextMenuItem = new ContextMenuItem("Open Link in New Window");
openNewWindow.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onOpenNewWindowSelect, false, 0, true);
cm.customItems.push(openNewWindow);
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:

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