ActionScript 3 Custom Contextual Menu
A lot of freelance web development jobs require a working knowledge of a whole mess of technologies, starting with HTML, CSS, and some basic PHP knowledge, continuing on through Flash, Flex, and ActionScript, and adding in a whole slew of other things. The list could go on, but that’s an- other article.
Suffice to say, freelance web developers face a never-ending battle to not only keep up with emerging web development technology, but also to refine the techniques they’ve already developed. Trying to keep all of this in our brains is an impossible task, so it helps to keep a set of bookmarks of tips, tricks, and code examples handy to refer to as solutions come to mind.
So, with that, here are the first of a few ActionScript examples that can be used to strengthen your Flash content (and your freelance resume). Here’s a favorite, one that allows you to add a custom contextual menu to a Sprite object. You simply set the Sprite’s contextMenu property to a ContextMenu object. This one comes courtesy of Peter deHaan over at ActionScript Examples.
Here’s the code you need:
// ActionScript 3.0
var red_cmi:ContextMenuItem = new ContextMenuItem(“red”); red_cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cmi_menuItemSelect);</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
var cm:ContextMenu = new ContextMenu();
cm.customItems.push(red_cmi);
cm.hideBuiltInItems();
var spr:Sprite = new Sprite(); spr.contextMenu = cm; spr.graphics.beginFill(0x000000); spr.graphics.drawRect(0, 0, 120, 90); spr.graphics.endFill();
spr.x = 10; spr.y = 10; addChild(spr);
function cmi_menuItemSelect(evt:ContextMenuEvent):void { spr.graphics.clear();
spr.graphics.beginFill(0xFF0000); spr.graphics.drawRect(0, 0, 120, 90); spr.graphics.endFill();
}
In this way, you can go beyond the basic contextual menu that Flash provides, and actually give out right-clicking users some extra functionality, or at the very least, extra information.
Dynamically Loading an Image
If you’re seeking web developer jobs, it’s very important that you stay on top of emerging web development trends. One of the things Flash can do that straight-up HTML cannot (but HTML + JavaScript can) is dynamically load elements. This results in a faster experience for the user. Some of the most common elements, of course, are images.
So, here are two examples for dynamically loading an image, the first in ActionScript 2 (which is rapidly falling by the wayside) and the second us- ing its successor, ActionScript 3 (for Flash 9 and later).
In the case of ActionScript 2, we’ll be using the createEmptymovieClip() and loadMovie() methods:
// ActionScript 2.0
var url:String = “http://www.helpexamples.com/flash/images/image2.jpg”;
var movieClip:MovieClip = createEmptyMovieClip(“movieClip”, 0); movieClip.loadMovie(url);</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
As for ActionScript 3, we would just use the Loader class:
// ActionScript 3.0
var url:String = “http://www.helpexamples.com/flash/images/image2.jpg”; var urlRequest:URLRequest = new URLRequest(url);
var loader:Loader = new Loader();
loader.load(urlRequest);
addChild(loader);</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>

Of course, one might ask, “Why don’t I just include all those images in
my swf when I export it?” Well, you could do that. And end up with a mas- sively bloated swf that takes way too long to download. As a marketable freelance web developer, you’ll want to avoid this, since people’s attention spans tend to be quite short on the internet. Not only that, but bandwidth can become expensive, so sending as few bytes from your server(s) to your visitors is also good for the pocketbook.
Have a Hand Cursor for a Button Component
Here’s a very simple bit of ActionScript programming (ActionScript 3.0 to be exact). So you’ve got yourself a nice button. While it’s great to have it look like a button, gently suggesting to your users that they should click on it, it’s even better to have the mouse pointer turn into the hand icon we all know so well.
Do this by setting the useHandCursor property to true. It’s pretty straight- forward stuff.
// ActionScript 3.0
import fl.controls.Button;</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
var myButton:Button = new Button();
myButton.label = “useHandCursor = true”;
myButton.width = 160;
myButton.move(10, 10); myButton.useHandCursor = true;
addChild(myButton);
It’s not rocket science, but it certainly adds an extra element of usability to your web development jobs.
Embed a Font in Flash CS4
If you’re looking to beef up your freelance resume, you’ll want to show future employers that you’re up on all the latest web development trends. Being able to make use of fonts other than old standbys like Arial and Times might just help set you apart from other freelancers.
One of the best aspects of using Flash as opposed to pure HTML is that this sophisticated bit of web development technology allows you to choose any font you want for your projects. But in order for it to appear correctly and not fall back on whichever fonts the user has installed, you’ll want to embed your fonts in your movie files.
Thankfully, Flash offers this very ability. You’ll need a TrueType version of your font and the following ActionScript example:
// ActionScript 3.0
[Embed(source=”assets/ARIAL.TTF”, fontFamily=”ArialEmbedded”)]
var ArialEmbedded:Class;</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
var arialEmbeddedFont:Font = new ArialEmbedded();
var textFormat:TextFormat = new TextFormat();
textFormat.color = 0xFF0000;
textFormat.font = arialEmbeddedFont.fontName;
textFormat.size = 32;
var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.wordWrap = true;
textField.defaultTextFormat = textFormat;
textField.embedFonts = true;
textField.text = “The quick brown fox jumps over the lazy dog.”; textField.width = 500;
textField.x = 25;
textField.y = 25;
addChild(textField);
The first line uses the [Embed] metadata to specify the font file, which you’ll need to have uploaded to your server (the “source” bit is the file- path to the TrueType file). The “fontFamily” bit can be changed to echo the name of the font you’re using, and the “arialEmbeddedFont” var can also be changed—just make sure to be consistent in your naming, or your script won’t be able to find what it’s looking for.
Employ ActionScript to Dynamically Load an External MP3 File
You’ve created a great Flash movie, and now you want to bring in some audio. You also want to make it easy to switch out the audio without requiring your end user to mess about in Flash. Unlike teaching someone how to use Flash, which, while also difficult, might also take away from your freelance opportunities, teaching someone how to use (S)FTP to move and replace files is a pretty simple.
Not only that, but if the user doesn’t end up playing the audio, then it’s never loaded, and you save on bandwidth. This can be important depend- ing on your hosting plan and traffic level.
So let’s set things up to dynamically load an MP3. First, the old-school way, using the Sound class and loadSound() in ActionScript 2.0:
// ActionScript 2.0
var url:String = “http://www.helpexamples.com/flash/sound/song2.mp3”;
var sound:Sound = new Sound();
sound.loadSound(url, true);
</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
And then in ActionScript 3.0, using the Sound class with the load()</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code> and play()</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code> methods:
// ActionScript 3.0
var url:String = “http://www.helpexamples.com/flash/sound/song2.mp3”;
var urlRequest:URLRequest = new URLRequest(url);
var sound:Sound = new Sound();
sound.load(urlRequest);
sound.play();
</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
These are very simple examples, but every bit of web development training has to start somewhere, right? Once you’ve mastered this little snippet of ActionScript programming, you can learn how to bring in the ID3 metadata that MP3 files have embedded in them.
Displaying a Dynamically Loaded MP3’s ID3 Metadata
So you’ve got your MP3 file all set to be brought in dynamically. Not only are you saving your client or employer bandwidth (and adding something valuable to your freelance resume as a result), but you’re also making it easier for you to modify the file in the file system.
But just loading up audio might not be enough. What if the audio is actually the whole point, and you want to inform the user of the metadata that this MP3 has stored in its ID3 tags? Have a look at this snippet of web develop- ment training to learn how to do this using the Sound class and the id3 property.
ActionScript 2.0 will take advantage of the onID3 event handler and the ID3 property:
// ActionScript 2.0
/**
* Requires:
* - A TextArea component on the Stage with an instance name of “textArea”.
*/
var url:String = “http://www.helpexamples.com/flash/sound/song2.mp3”;
var sound:Sound = new Sound();
sound.onID3 = function():Void {
textArea.text += “album” + “:\t” + sound.id3.album + “\n”;
textArea.text += “artist” + “:\t” + sound.id3.artist + “\n”;
textArea.text += “comment” + “:\t” + sound.id3.comment + “\n”;
textArea.text += “genre” + “:\t” + sound.id3.genre + “\n”;
textArea.text += “songname” + “:\t” + sound.id3.songname + “\n”;
textArea.text += “track” + “:\t” + sound.id3.track + “\n”;
textArea.text += “year” + “:\t” + sound.id3.year + “\n”;
textArea.text += “-------------------”;
}
sound.loadSound(url, true);</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
ActionScript 3.0, on the other hand, uses the ID3 event, but the same id3 property from the Sound object:
// ActionScript 3.0
/**
* Requires:
* - A TextArea component on the Stage with an instance name of “textArea”.
*/
var url:String = “http://www.helpexamples.com/flash/sound/song2.mp3”;
var urlRequest:URLRequest = new URLRequest(url);
var sound:Sound = new Sound();</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
sound.addEventListener(Event.ID3, sound_id3);
sound.load(urlRequest);
sound.play();
function sound_id3(evt:Event):void {
textArea.text += “album” + “:\t” + sound.id3.album + “\n”;
textArea.text += “artist” + “:\t” + sound.id3.artist + “\n”;
textArea.text += “comment” + “:\t” + sound.id3.comment + “\n”;
textArea.text += “genre” + “:\t” + sound.id3.genre + “\n”;
textArea.text += “songName” + “:\t” + sound.id3.songName + “\n”;
textArea.text += “track” + “:\t” + sound.id3.track + “\n”;
textArea.text += “year” + “:\t” + sound.id3.year + “\n”;
textArea.text += “——————-”;
}
The end result will be each of those pieces of metadata being brought in and displayed in the TextArea named (in this example) “textArea” in a simple list, with each item on its own line (the “\n” character signifies a line break, similar to
</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code> in HTML).
Here’s an example:
album: Before These Crowded Streets
artist: Dave Matthews Band
comment: This is a love song
genre: Rock
songName: Crush
track: 8
year: 1998
So there you have it! Keep sharpening your proficiency in different kinds of web development technology like this and you might just qualify yourself for a wider range of freelance opportunities.
Use ActionScript to Load an External Text File into a Label
For most of your freelance web development jobs, your end users won’t be familiar with using Flash, and that’s okay—after all, that’s why they hired a freelance web developer! To get around this, you’ll need to provide them with a simple way to change labels and other text content; in fact, this can make your services even more valuable. Gone are the days of being webmaster for every client you have (and in all likelihood, you’re very glad those days are gone!).
So, with that, here’s a method to display the contents of a file that’s been uploaded somewhere publicly available in a Label component instance.
// ActionScript 3.0
// Import the required component classes.
import fl.controls.Label;</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
/* Create a new Label component instance, set the wordWrap and autoSize properties,
and add the label to the display list. */
var myLabel:Label = new Label();
myLabel.text = “loading…”;
myLabel.width = 530;
myLabel.wordWrap = true;
myLabel.autoSize = TextFieldAutoSize.LEFT;
myLabel.move(10, 10);
addChild(myLabel);
// Create a new UILoader instance, add an event listener, and load
the remote text file.
var myURLLoader:URLLoader = new URLLoader(); myURLLoader.addEventListener(Event.COMPLETE, completeHandler); myURLLoader.load(new URLRequest(“http://www.helpexamples.com/ flash/lorem.txt”));
/* Handler function for the URLLoader object. This function sets the text in the label
instance to the contents of the remote text file. */
function completeHandler(evt:Event):void {
var txt:String = URLLoader(evt.currentTarget).data as String;
myLabel.text = txt;
}
The real key here is the URLRequest line; this specifies the remote file we’re looking for. This can be a URL, an absolute path, or a relative path— so long as the Flash file is allowed to access it, it will work. If the file is on a separate domain though, make sure you’ve got your crossdomain.xml files squared away!
Opening URLs in a New Browser Window
This bit of ActionScript programming is good to know how to do for when a client requests it, but use it with caution! Many users have pop-up blockers or other systems in place to prevent this behavior, and it’s not always the most polite thing to do.
With that said, here’s how you can force a URL to open in a new window (or tab, depending on the browser in question) in case any of your freelance opportunities require it:
ActionScript 2.0 uses the getURL() method:
// ActionScript 2.0 (code on timeline)
/* Requires
* - Button symbol on timeline
* - Button symbol on Stage with instance name “buttonSymbol” */buttonSymbol.onRelease = function ():Void {
getURL(“http://www.adobe.com/”, “_blank”);
}</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
Or alternatively, if you put the code directly on an instance on the Stage:
// ActionScript 2.0 (code directly on instance)
/* Requires
* - Button symbol on Stage
*/
on (release) {
getURL(“http://www.adobe.com/”, “_blank”);
}</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
And ActionScript 3.0 uses the navigateToURL() method:
// ActionScript 3.0
/* Requires
* - Button symbol on Stage with instance name “buttonSymbol”
*/
buttonSymbol.addEventListener(MouseEvent.CLICK, buttonSymbol_click);</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
function buttonSymbol_click(evt:MouseEvent):void {
var req:URLRequest = new URLRequest(“http://www.adobe.com/”);
navigateToURL(req, “_blank”);
}
Again, use this one with caution and experiment with your own pop-up blockers to make sure it works. As an alternative, if you’re in a frameset, you can change the _blank portion to _parent or another of the available frame targets.
About Artisan</srv/bindings/8d86c8566c5f4bbe93cbe1318be8caf9/code>
___________________________________
Artisan Talent is a Digital, Marketing and Creative Staffing Firm placing talent in jobs perfectly matched with their skills all over the US.
Connect with Us
Linked In| Glassdoor| Facebook | Twitter | Instagram | Pinterest
