Tag Archive for 'as3'

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();
  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!";
  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;
  28. // Layout settings
  29. contactForm.nameWidth = 400;
  30. contactForm.emailWidth = 400;
  31. contactForm.messageWidth = 550;
  32. contactForm.messageHeight = 200;
  33. contactForm.verticalSpacing = 10;
  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.


AS3 Dotted Line Class

Here is an ActionScript 3 class I use all the time to draw pixel perfect dotted lines in Flash. You can set the line width, line height, color, alpha, dot width, and dot spacing. Simple but useful!

Continue reading ‘AS3 Dotted Line Class’

Top 8 Resources for Learning ActionScript 3

After having made the switch to AS3 about a year ago I have to admit it was a huge pain for me to upgrade from AS2. A lot of that was due to the wrong approaches I took (reading a 900 page book straight through is not recommended, for one). So keep reading and learn from someone who has made the switch. And in the end learning AS3 really will make your life easier. And note this is coming from someone with a design background so I’m not some super-genius computer nerd who has been programming in BASIC since he was three. It is possible for non-coders to learn AS3.

Continue reading ‘Top 8 Resources for Learning ActionScript 3′