Customize the Right-click menu in Flash | ContextMenuItem Tutorial

Overview:

Flash give publishers the opportunity to customize the right-click menu which pops up in the swf file with a context menu item in actionscript.

ContextMenuItem
ContextMenuItem(caption:String, callbackFunction:Function, [separatorBefore:Boolean], [enabled:Boolean], [visible:Boolean])
Creates a new ContextMenuItem object that can be added to the ContextMenu.customItems array.

Steps:

The menu item has a caption, which is displayed to the user in the right click menu. It also has a a callback function handler by naming the function in the code to be invoked once the menu item is selected. It then has three boolean values which specify whether the item has a separator before it, is enabled, and is visible.

To add a new context menu item to a context menu, you simply create the context menu items and then push them into the customItems array.
You can enable or disable specific menu items, make items visible or invisible, or change the caption or callback handler associated with a menu item at any time.
In the example here the menu items about clearing and rewriting the text are set to toggle each other, so you can’t rewrite the text if it hasn’t yet been cleared and vice versa.

To further customize the context menu flash allows us to hide the built in items in the menu with hideBuiltInItems(). This hides all the built in item from view (except ‘settings’) by setting their visibility to false.

Example:

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/right-clickmenu.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”60″]
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
var ccs:ContextMenuItem = new ContextMenuItem(“Visit Circle Cube Studio”, visitCCS, false, true, true);
var pog:ContextMenuItem = new ContextMenuItem(“Visit Interactive Flash Portfolio”, visitPOG, false, true, true);
var ct:ContextMenuItem = new ContextMenuItem(“Clear Text”, clearText, true, true, true);
var rw:ContextMenuItem = new ContextMenuItem(“Rewrite Text”, rwText, true, false, true);
var mt:ContextMenuItem = new ContextMenuItem(“Move Text”, moveText, false, true, true);

myMenu.customItems.push(ccs, pog, ct, mt, rw);
_root.menu = myMenu;

function visitCCS () {
getURL(“https://circlecube.com/circlecube”, “_blank”);
}
function visitPOG () {
getURL(“http://www.circlecube.com/test/”, “_blank”);
}
function clearText() {
myText = “”;
ct.enabled = false;
rw.enabled = true;
}
function rwText() {
myText = “Rewrite: \nRight-click to see the customized menu”;
ct.enabled = true;
rw.enabled = false;
}
function moveText() {
theText._y += 10;
}
[/cc]

Download:

Download the Zip file (right-clickMenu.zip)

New Theme for Circlecube

I went for the basic and popular Qwilm 0.3

Theme hardly based on huddletogether.
This theme was designed by Lokesh and destriped and built by Oriol Sanchez

Over the next while I’ll be massaging the look and feel (mostly CSS) to fit my needs.

Please let me know if you see anything odd or broken, or if you have any other comments, thanks!

Update: Color Scheme adjusted and some minor layout changes. A little PHP tweaking, but mostly CSS.

About.StomperNet.com

About dot Stompernet dot Com (about.stompernet.com) is the new public (free) website from StomperNet. I helped implement this design and had to learn all about themes in Drupal. It’s still in beta, but it’s well on it’s way. It is an agglomeration site, where all the StomperNet Faculty’s feeds can be found and various other free content, like video in the Squambido player, and the Scrutinizer software.

about stompernet screenshot

StomperNet Scrutinizer

StomperNet releases Scrutinizer, software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built in conjunction with Nitobi using Adobe AIR and Flex. I had the chance to do the skinning of the browser in flex! I really hope to have a good excuse to play more with flex.

Scrutinizer Thumbnail

Anyways, check out the free software (master-minded by Andy Edmonds), this ‘Click Fu’ video created to explain it, and the many uses of Scrutinizer.

[kml_flashembed movie=”http://www.stompernet.net/squambido/pagetest/squambido.swf” height=”338″ width=”450″ fvars=” playlistURL = http://www.stompernet.net/GoingNatural20/files/GoingNatural20Public.dhtml.xml ; autoplay = false ; awiz = 1126 ; playlistoffset = 4″ allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]

NavBar Menu List with CSS

The Overview:

An interactive navigation bar using CSS with rounded corners. Just put the html as an unordered list and your navigation links as list items and the CSS will do the rest! As shown here! The css will tell the browser to display this special unordered list as the menu. This utilizes a technique to have one background image with three states: normal, hover and active. The css controls the placement of the background image so when you hover, the images is displaced to show only the hover state, and likewise for the active and then returns to the normal state. This is compatible in all the browsers I have checked so far, let me know if you find any issues [thanks].
vertical nav menu screenshot

The Steps:

1. First make the html. An <ul> full of <li> elements.

2. Make the desired backgrounds. Three part background (or two) . One part ‘Normal’ state and another ‘hover’ state and optionally an ‘active’ state. Add additional backgrounds if you want anything like rounded corners, or just a header.
menuTop
Top Menu Background Image
menuMiddle
Middle Menu Background Image
menuBottom
Bottom Menu Background Image

3. The CSS to attach the two together

The Example:

verticalMenuCSS.html

As you can see this is a simple html unordered list with list items.

[cc lang=”html”]

  • My Site
  • Home
  • About
  • Biography
  • Portfolio
  • Contact

[/cc]

Here’s the magic.

[cc lang=”css”]
/*vertical Menu CSS style sheet*/

*{
list-style:none;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

.sidemenu {
width: 150px;
border: none;
}
.sidemenu li a {
height: 18px;
text-decoration: none;
}
/*Top sidemenu Item (Header and rounded corners)*/
.sidemenu li.top a:link, .sidemenu li.top a:visited {
color: #828282;
display: block;
background: url(images/menuTop.png);
background-repeat:no-repeat;
padding: 1px 0 1px 0;
font-size: 1em;
font-weight: bold;
text-align: center;
}
/* Uncomment this if you want the header to be an interactive link
.sidemenu li.top a:hover {
color: #828282;
background: url(images/menuTop.png) 0 -22px;
}
.sidemenu li.top a:active {
color: #26370A;
background: url(images/menuTop.png) 0 -44px;
}*/

/*sidemenu Item Middle*/
.sidemenu li.middle a:link, .sidemenu li.middle a:visited {
color: #5E7830;
display: block;
background: url(images/menuMiddle.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.middle a:hover {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -22px;
}
.sidemenu li.middle a:active {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -44px;
}

/*Bottom sidemenu Item (rounded corners)*/
.sidemenu li.bottom a:link, .sidemenu li.bottom a:visited {
color: #5E7830;
display: block;
background: url(images/menuBottom.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.bottom a:hover {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -22px;
}
.sidemenu li.bottom a:active {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -44px;
}
[/cc]

verticalMenuCSS.html

The Download:

verticalMenuCSS.zip

Free IQ Web Designer & Flash Developer

Starting my new position at Free IQ this week! I’ll be doing Web Design, Flash Design/Development and anything between. Actionscript, Flash, HTML, CSS, Javascript, Graphic Design etc…
I’ve been hired expressly to revamp the flash video player they have. They assure me that there will be a plethora of interesting tasks to keep me busy as well. I’ll post significant updates as the player gets massaged and fleshed out!
free iq beta