Warm Forest Flash Blog » Freebies

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

warmforest — Mon, 13 Jul 2009 23:51:48 +0000

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.

» Download now (zip)

–

» Download now (zip)

–

» Download now (zip)

–

For more info, see the TypeNav™ page here.

–

Flash AS3 Contact Form Using PHP

admin — Tue, 09 Jun 2009 18:09:21 +0000

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:

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

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:

import com.warmforestflash.ContactForm;
var contactForm:ContactForm = new ContactForm();
// Label settings
contactForm.nameText = "Type your name here";
contactForm.emailText = "Type your email here";
contactForm.messageText = "Type your message here";
contactForm.sendButtonText = "CONTACT ME";
contactForm.sendingText = "Sending message…";
contactForm.errorEmailText = "Your email is not valid.";
contactForm.errorServerText = "Server problems.";
contactForm.confirmationText = "Thanks for contacting me!";
// Color settings
contactForm.textColor = 0xffffff;
contactForm.borderColor = 0×222222;
contactForm.backgroundColor = 0×000000;
contactForm.selectedBorderColor = 0x05b59a;
contactForm.selectedBackgroundColor = 0×000000;
contactForm.selectedBlurAmount = 50;
contactForm.sendButtonTextColor = 0xffffff;
contactForm.sendButtonTextRollOverColor = 0xffffff;
contactForm.sendButtonColor = 0x05b59a;
contactForm.sendButtonRollOverColor = 0xff4400;
contactForm.errorColor = 0xff4400;
contactForm.confirmationColor = 0x05b59a;
// Layout settings
contactForm.nameWidth = 400;
contactForm.emailWidth = 400;
contactForm.messageWidth = 550;
contactForm.messageHeight = 200;
contactForm.verticalSpacing = 10;
addChild(contactForm);

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!

Free AS3 Scrollbar: Fullscreen and Resizable

warmforest — Wed, 22 Apr 2009 16:12:16 +0000

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:

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”

_scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0x05b59a, 0xffffff, 15, 15, 4, true);
addChild(_scrollBar);

» Download the demo and source code

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

Enjoy!

–

AS3 Dotted Line Class

warmforest — Thu, 15 Jan 2009 03:51:39 +0000

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!

Dotted line preview:

Dotted line usage:

import com.warmforestflash.drawing.DottedLine;
var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 1, 2);
addChild(s);

Dashed line preview:

Dashed line usage:

import com.warmforestflash.drawing.DottedLine;
var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 10, 8);
addChild(s);

» Download the zip containing the class and the above samples

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