In this tutorial, we’ll learn how to take advantage of these items.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: Brief Overview

We’ll make use of the ContextMenu class to create an application showing the different methods and properties of this class.

Step 2: Create New Document

Open Flash and create a new Flash File (ActionScript 3.0).

Set the stage size to 600×300 and add a black radial background (#555555 to #252525).

Step 3: Add Target MovieClips

We will create four MovieClips that will each show a different context menu when right-clicked.

Select the Rectangle Tool (R) and create four squares of 100×100 px each, with some writing inside. Convert them to separate MovieClip symbols and align them to the corners of the stage; use the image below as a guide. The instance names are in italics.

Step 4: Add Simple Instructions

Add some text to the stage to indicate to the user what action to perform.

Step 5: Create the Document Class

Create a new ActionScript Document and save it as Main.as. This will form our document class. If you are not sure how to use a document class, please read this Quick Tip.

Step 6: Start Writing the Document Class

The package keyword allows you to organize your code into groups that can be imported by other scripts, it’s recommended to name them starting with a lowercase letter and use intercaps for subsequent words – for example: myClasses.

If you don’t want to group your files in a package or you have only one class you can use it right from your source folder.

package
{

Step 7: Import Required Classes

We’ll make use of the following classes, so import them in the document class:

import flash.display.Sprite;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

Step 8: Extend MovieClip

We’re going to use MovieClip-specific methods and properties so we extend that class.

public class Main extends MovieClip
{

Step 9: Define Variables

These are the variables we’ll use. They are basically ContextMenu and ContextMenuItem instances.

/* When a ContextMenu item is created you can specify: the name of the item, whether to use a separator line,
   whether the item should be enabled by default, and whether it is visible to the user */

var builtInItems:ContextMenu = new ContextMenu();
var customItemEnabled:ContextMenu = new ContextMenu();
var customEnabled:ContextMenuItem = new ContextMenuItem('ActiveTuts+');
var customItemDisabled:ContextMenu = new ContextMenu();
var customDisabled:ContextMenuItem = new ContextMenuItem('Disabled Item', false, false);
var linkedItem:ContextMenu = new ContextMenu();
var linkText:ContextMenuItem = new ContextMenuItem('Go to TutsPlus.com', true);
var textCM:ContextMenu = new ContextMenu();

Step 10: Write Main() Constructor Function

This function is executed when the class is loaded. It calls the functions that will handle the ContextMenu elements.

public function Main():void
{
	handleBuiltIn();
	handleCustom();
	handleDisabled();
	handleLink();
	handleClipboard();
}

We’ll write these functions in the next steps.

Step 11: Write handleBuiltIn() Function

This is the function that handles the built-in items. Here we take builtInItems, a ContextMenu we defined earlier, remove the built-in items, and set it as the context menu for the builtIn square symbol.

private function handleBuiltIn():void
{
	builtInItems.hideBuiltInItems(); //Hides all built-in menu items (except Settings)
	builtIn.contextMenu = builtInItems;
}

You can see a list of the built-in menu items here.

Alternatively, you can enable/disable specific menu items using the builtInItems property as shown in the following code:

var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;
defaultItems.print = true; //You can replace "print" with a valid default context menu item

Again, visit livedocs.adobe.com for a list of such items.

Step 12: Add a Custom Item

To add a custom item to the context menu, we’ll make use of two of the variables we created.

private function handleCustom():void
{
	customItemEnabled.customItems.push(customEnabled); // Adds the customItemEnabled ContextMenuItem value to the ContextMenu instance
	custom.contextMenu = customItemEnabled; // Sets the ContextMenu instance to the MovieClip
}

As you can see, we can push() a ContextMenuItem onto a context menu’s customItems property, because it is an array.

Step 13: Add a Disabled Item

The same action is performed by this function, but using the customItemDisabled parameter in the ContextMenuItem.

private function handleDisabled():void
{
	customItemDisabled.customItems.push(customDisabled);
	disabled.contextMenu = customItemDisabled;
}

This makes the item look grayed-out and unclickable.

Step 14: Add an Action

We know how to add a custom item to the context menu list, so far it can be used as a message or a notice but it will be more useful if an action can be performed when clicked. Let’s see how to do it.

//A webpage will be opened when the menu is clicked

private function handleLink():void
{
	linkedItem.customItems.push(linkText);	//remember we set the text of this link earlier
	linkText.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuSelect);
	link.contextMenu = linkedItem;
}

private function onMenuSelect(e:ContextMenuEvent):void
{
	navigateToURL(new URLRequest('http://tutsplus.com'))
}

Step 15: Alter the Clipboard Context Menu

The ContextMenuClipboardItems class determines which items are enabled or disabled on the clipboard context menu. These settings are used when ContextMenu.clipboardMenu = true and when the object with focus is not a TextField.

private function handleClipboard():void
{
	textCM.clipboardMenu = true;
	textCM.clipboardItems.selectAll = false;
	contextMenu = textCM;
}

Note that these settings only apply in Flash Player 10, so cannot be used in Flash CS3 (they will cause a compiler error if you try to use them).

Step 16: Document Class

Go back to the .fla file and in the Properties Panel set the Class field to ‘Main’ to make this the Document Class.

Conclusion

Customizing the Context Menu in your movies or applications can extend its functionality in a very usable way, try it!

Related posts

• No related posts.

Step 1

Open a new document. On the toolbar, change Units to pixels. Create a 1001px circle using the Ellipse Tool (F7). Put the x, y coordinates position at (0, 0).

Make sure all this toolbars have been checked.

Fill the circle with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to -90°, and the Edge pad to 9%. Then, add one slider in the Gradient Slider. Set the color and position, Start Point at white, Added slider at 30% black; Position at 92%, and End Point at 40% black.

Step 2

Duplicate the circle using copy and paste. I suggest you do not use Command + D (Duplicate command). This is because we need the object position to remain at 0, 0. Change the circle size to 941px. Clear the Outline Color. Now fill the object with a Linear Gradient using the Fountain Fill Dialog (F11), change the Edge pad to 22%. Add a slider in the Gradient Slider. Now set the color and position, Start point at 20% black, Added slider at 70% black; position at 90%, and End point at 10% black.

Step 3

Duplicate the outer circle. Change the size to 921px, then fill with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Edge pad to 22%. Add two sliders in the Gradient Slider. Set the color and position, Start point at white, First slider at 10% black; position at 8%, Second slider at 70% black; position at 90%, and End point at 10% black.

Step 4

Duplicate the outer circle again. Change the size to 750px. Then fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Edge pad to 4%, then add three sliders. Set the color and position, Start point at white, First slider at 10% black; position at 37%, Second slider at 80% black; position at 50%, Third slider at 20% black; position at 76%, End point at 10% black. Open the Outline Color and change its thickness to 1 pt and fill it with a black color.

Step 5

Duplicate the latest circle, change the size to 720px, and fill it with a black color.

Step 6

Duplicate the latest circle, change the size to 700px, and replace the Outline Color with a white color.

Step 7

Use the Pen Tool to draw a vertical line in the middle of the circle. Then change the outline thickness to 1 pt, and fill it with a white color.

Duplicate the line, then rotate to 6°.

Repeat it again and again, but now rotate each line to 12°, 18°, 24°, 30°, 36°, 42°, 48°, 54°, 60°, 66°, 72°, 78°, 84°, and 90°. The result should look like that shown below.

Step 8

Select all lines, then duplicate them. Flip horizontally by clicking on Mirror. Delete the lines at 0°, 30°, 60°, 90°, 120°, and 150°.

Step 9

Duplicate the latest circle and change the size to 650px.

Step 10

Create a 20px circle, put the coordinate position at 0, 338. Fill with cyan color, then remove the Outline Color. Duplicate the circle, put the coordinate position at 0, -338. Fill with white color.

Now select both of them. Duplicate, then rotate to 90°. Change the cyan circle to a white color.

Duplicate again, rotate to 30°, then change the size to 15px.
Do the same, now rotate to 60°, 120°, and 150°.

Step 11

Now let’s put the numbers. To obtain a symmetrical result, duplicate the latest circle, change the size to 610px. Use the circle as a boundary and start typing your numbers. Type the numbers “1-12″ except number “3″. I used Kozuka Gothic Pro B for my font, but you can use your favorite font. For number “12,” “6,” and number “9,” the font size is 24, and the rest is 16.

Since each number has a different width, but the the same height, let’s set the y coordinate position for each number, so the numbers will have the same value with their opposite side. See the picture below, number “10″ and number “2″ have the same y coordinate position, ie 140px. Also, with the number “7″ and the number “5,” the y coordinate position is at -230px. Delete the boundary circle.

Step 12

On the empty field, create an 80 px by 60 px rectangle using the Rectangle Tool (F6). Draw a rounded rectangle using the Shape Tool (F10).

Put the rounded rectangle to the number three position, then fill with a black color. Open the Outline Pen Dialog by double-clicking on the Outline Color and set the width to 2 pt with the option Behind Fill checked, then fill with a white color.

Step 13

Duplicate the rounded rectangle and scale it to 90%. Remove the Outline Color, then fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to 90°, then add one slider in the Gradient Slider. Set the color and position, Start point at 30% black, Added slider at white; position at 51%, End point at 30% black. Next type the number in the middle. We’re done with the numbers.

Step 14

Let’s make the analog stopwatch. Duplicate the two latest circles and lines at 0°, 36°, 72°, 108°, and 144° (you need to redraw the line at 0° because it was deleted before), by holding down the Shift key and click the object one by one, use copy and paste. Select them all, then resize to 160px and change the Outline width to 0,5 pt. Resize the inner circle to 126px. Put it to a position shown below.

Step 15

Do the same now with the lines at 0°, 12°, 24°, 36°, 48°, 60°, 72°, 84°, 96°, 108°, 120°, 132°, 144°, 156°, and 168°. Always remember to use the x, y coordinates position to obtain symmetrical result. Put it to a position like pictured below.

Step 16

Now let’s make the stopwatch hand. In the empty field, create a rectangle using the Rectangle Tool (F6). Now right-click the object, choose Convert to Curves (Command + Q). Change the shape using the Shape Tool (F10). Create a circle and place it under the rectangle as shown. To combine the two objects, select them, then click Weld in the toolbar. Add a small black circle.

Place it in the middle of stopwatch. Size it to fit the stopwatch circle. Then, type the numbers.

Step 17

Create the Vertortuts logo under number twelve. It’s very easy, I know you can create the logo just by seeing it. Type “VECTORTUTS” under the logo. But you can use your own logo here if preferred.

Step 18

Let’s draw the hand hour. In the empty field, create a rectangle using the Rectangle Tool (F6). Then right-click the object, choose Convert to Curves (Command + Q). Change the shape using the Shape Tool (F10).

Create a circle and place it under the rectangle as shown. To combine the two objects, select them, then click Weld in the toolbar. Add a rectangle in the middle, using the Shape Tool (F10) to create the rounded rectangle, then fill it with a 40% black color. Group (Command + G) them all.

Place it in the middle of watch, rotate to 85°. Use guidelines to help you arrange the object position.

Step 19

Draw the minute hand. See Step 18, but now make it slimmer and longer than the hour hand. Fill it with a 30% black color.

Place it in the middle of the watch, rotate it to 310°. Use guidelines to help you arrange the object position.

Step 20

Last, draw the second hand. In the empty field, create a rectangle using the Rectangle Tool (F6). Then right-click the object, choose Convert to Curves (Command + Q). Change the shape using the Shape Tool (F10).

Create a circle and place it under the rectangle as shown. To combine the two objects, select them, then click Weld in the toolbar. Fill it with a red color, change the Outline Color with a red color too. Now add a small black circle.

Place it in the middle of the watch, rotate it to 192°. Use guidelines to help you arrange the object position.

Step 21

Now let’s make the steel strap. Create a 179 px by 291 px rectangle using the Rectangle Tool (F6). Then right-click the object, choose Convert to Curves (Command +Q). Change the shape using the Shape Tool (F10), shape the rectangle as shown. Fill with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to -90°.

Add seven sliders in the Gradient Slider. Set the color and position, Start point at 40% black, First slider at white; position at 3%, Second slider at 20% black; position at 11%, Third slider at white; position at 17%, Fourth slider at 20% black; position at 24%, Fifth slider at 50% black; position at 42%, Sixth slider at 20% black; position at 83%, Seventh slider at 20% black; position at 94%, End point at 30% black.

Place it at the top of the watch.

Fix it using the Shape Tool(F10).

Step 22

Duplicate it three times and put it to the position shown. For the first one, flip horizontally using Mirror, place the coordinate position at -296, 465. For the second one, flip vertically using Mirror, place the coordinate position at 296, -465. For the last one, flip vertically and horizontally using Mirror, place the coordinate position at -296, -465.

Step 23

Create a 411 px by 279 px rectangle using the Rectangle tool (F6), make sure the width is fit with the last object (see picture below). Draw a rounded rectangle using the Shape Tool (F10). Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to 90°.

Add six sliders in Gradient Slider. Set the color and position, Start point at 50% black, First slider at 40% black; position at 48%, Second slider at white; position at 68%, Third slider at 20% black; position at 75%, Fourth slider at white; position at 86%, Fifth slider at 50% black; position at 93%, Sixth slider at 20% black; position at 99%, End point at 80% black.

Step 24

Duplicate the rounded rectangle, modify the Linear Gradient. Change the Angle to -90°. Add seven sliders in the Gradient Slider. Set the color and position, Start point at 40% black, First slider at 20% black; position at 12%, Second slider at 10% black; position at 23%, Third slider at white; position at 43%, Fourth slider at 10% black; position at 68%, Fifth slider at 20% black; position at 79%, Sixth slider at 30% black; position at 93%, Seventh slider at 50% black; position at 99%, End point at 50% black.

Step 25

Create a 202 px by 162 px rectangle using the Rectangle tool (F6), but now smaller by about 50% from before. Draw a rounded rectangle using the Shape Tool (F10). Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to -90°.

Add six sliders in the Gradient Slider. Set the color and position, Start point at 50% black, First slider at 30% black; position at 7%, Second slider at 10% black; position at 15%, Third slider at 10% black; position at 28%, Fourth slider at white; position at 39%, Fifth slider at 10% black; position at 70%, Sixth slider at 30% black; position at 89%, End point at 10% black.

Step 26

Arrange the position like shown below. Remember to use x,y coordinates position to get symmetric result. Order the large rounded rectangles to the back of page (Command + End).

Select them all. Use the Simplify command in the toolbar. The small rounded rectangle will trim the large one.

Select the small rounded rectangle, change the height scale to 95%, place it at the center between the two large rectangles. The result should be like this:

Place it at the top of the watch.

Fix it using the Shape Tool (F10). Do not use the Simplify command. The Simplify command will change the gradient.

You can Group (Command + G) the steel strap, then duplicate it. Flip it vertically using Mirror and place it at the bottom of the watch as shown.

Step 27

In the empty field, create a rectangle using the Rectangle Tool (F6), use the Shape Tool (F10) to create the rounded rectangle. Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to 90°.

Add two sliders in Gradient Slider. Set the color and position, Start point at black, First slider at 90% black; position at 26%, Second slider at white; position at 63%, End point at 90% black.

Duplicate the rounded rectangle seven times. For each rounded rectangle, modify the gradient randomly. Group (Command + G) them.

Step 28

Create a rectangle using the Rectangle Tool (F6). Then right-click the object, choose Convert to Curves (Command + Q). Change the shape using the Shape Tool (F10) as shown. Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to 230° and Edge pad to 5%.

Add three sliders in Gradient Slider. Set the color and position, Start point at white, First slider at 20% black; position at 30%, Second slider at white; position at 50%, Third slider at 10% black; position at 70%, End point at 60% black.

Arrange the object with the rounded rectangle.

Order the object to the back of page (Command + End). Select them all and use the Simplify command in the toolbar.

The result should be like this:

Place it at the right side of the watch, order it to back of page (Command + End). Select the object and the outer circle of the watch, then use the Simplify command in the toolbar.

Step 29

Next create a rectangle using the Rectangle Tool (F6). Then right-click the object, choose Convert to Curves (Command + Q). Change the shape using the Shape Tool (F10) as shown. Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to 5° and the Edge pad to 3%.

Add three sliders in the Gradient Slider. Set the color and position, Start point at 50% black, First slider at 30% black; position at 47%, Second slider at 10% black; position at 61%, Third slider at white; position at 69%, End point at 10% black.

Place it like shown below. Fix it and Order it to back of page (Command + End). Select the object and the outer circle of the watch, use the Simplify command in the toolbar. Duplicate the object and flip vertically.

The result should be like this:

Step 30

Now create a 38 px by 74 px rectangle using the Rectangle Tool (F6). Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to -90°. Add six sliders in the Gradient Slider. Set the color and position, Start point at 40% black, First slider at 10% black; position at 11%, Second slider at 20% black; position at 24%, Third slider at 90% black; position at 42%, Fourth slider at 20% black; position at 61%, Fifth slider at white; position at 77%, Sixth slider at 10% black; position at 90%, End point at 50% black.

Step 31

Now create a 47 px by 103 px rectangle using the Rectangle Tool (F6). Draw a rounded rectangle using the Shape Tool (F10). Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to -90°.

Add six sliders in the Gradient Slider. Set the color and position, Start point at 40% black, First slider at 10% black; position at 11%, Second slider at 50% black; position at 28%, Third slider at 90% black; position at 37%, Fourth slider at 50% black; position at 47%, Fifth slider at white; position at 77%, Sixth slider at 10% black; position at 90%, End point at 50% black.

Step 32

Create a 96 px vertical line with three point (see the picture below) using the Pen Tool. Modify the object using the Shape Tool (F10). Fill it with a Linear Gradient using the Fountain Fill Dialog (F11). Change the Angle to 50°.

Add three sliders in the Gradient Slider. Set the color and position, Start point at black, First slider at 40% black; position at 29%, Second slider at 10% black; position at 58%, Third slider at 70% black; position at 78%, End point at 80% black.

Step 33

Put the three of them at the same y coordinate position, arrange them as shown. Then rotate about 25° and Group (Command + G) them.

Place it at the right side of the watch like shown below. Order the object to the back of page (Command + End). Select the object and the outer circle of the watch, use the Simplify command in the toolbar. Duplicate the object and flip it vertically.

The result should be like this:

Your wristwatch is done.

Final Image

After adding a simple gradient background he final image is below. Use coordinates positioning and other simple techniques to create great results.

Related posts

• No related posts.

Unfortunately, much like HTML 5 audio, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you’ll need to create three versions of your video.

• .OGG: This will make Firefox happy. You can use VLC (File -> Streaming/Export Wizard) to convert your video to this format easily.
• .MP4: Many screencasting tools automatically export to Mp4; so you can use that file for Safari and Chrome.
• .FLV/.SWF: Not all browsers support HTML 5 video, of course. To compensate, make sure that you add a fallback Flash version as well.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
</head>
<body>
<video controls width="500">
	<!-- if Firefox -->
	<source src="video.ogg" type="video/ogg" />
	<!-- if Safari/Chrome-->
	<source src="video.mp4" type="video/mp4" />
	<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
	<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
</body>
</html>

There are a handful of attributes available to the <video> element.

• Controls: Display the play/stop buttons?
• Poster: The value can be a path to an image, that will serve as the display of the video before it is played.
• AutoPlay: Immediately play the video when the page is loaded?
• Width: The desired width of the video. By default, the browser will automatically detect the dimensions of the supplied video.
• Height: The desired height of the video.
• Src: The path to the video file. It’s better to use the <source> child element instead for this task.

Dos and Don’ts of HTML 5 Video

1. DO create three version of your video to make Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf)
2. DO NOT omit one of these formats. Unfortunately, you can’t easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari. Safari understands the <video> element, and will expect to find a suitable video format to load. If one is not found, it will display an empty player.
3. DO keep in mind that full-screen support will not work in Safari and Chrome. However, with the release of Firefox 3.6, you can right-click, and view in full screen.
4. DO remember that the reason why IE loads the Flash file instead is because it does not understand what the <video> element is. However, if a browser DOES understand that element, it will expect to find a suitable file to load.

Please note that, if I can find a suitable work-around for the full-screen problem, we’ll be using this method on Nettuts+ in the near future!

Related posts

• No related posts.

Step 1: Set up the Flash Document

Create a new Flash ActionScript 3 document. Resize the stage to be 600×300. With the rectangle tool, draw out a rectangle that is the size of the stage. Give it a color of #CCCCCC. Also, give it a black stroke of 2px.

Step 2: Set up the Flash UI

Here’s the layout we’ll be working towards:

Open the Components Panel (Window > Components) and, from the User Interface folder, drag a ColorPicker component onto the stage. Give it an instance name of ‘cp’.

Next create a dynamic text field called ‘resizeText’; place and size it however you please (you can’t see the one in my image; it’s empty, and in the top-right of the stage.)

Now, create another dynamic text field. Give it an instance name of ‘jsText’. Then create a button symbol and give it an instance name of ‘prompt’. After that, create another button and give it an instance name of ‘change’.

Finally, create two input text fields. Place one next to your ‘prompt’ button, and give it a name of ‘promptText’. Take the second text field, move it next to your ‘change’ button and name it ‘changeText’.

Also, add any labels you want; refer to my image to see how I set it up.

Step 3: Set up the HTML UI

In order for the ExternalInterface to work, the document has to be on the internet. First, create a new text file, and save it as ‘externalInterface.html’. Next, open a text editor and add all the code below. Save the HTML file.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>externalInterface</title>
<style type="text/css">

body {
	font-family:Arial;
}

#asSend {
	padding-top:20px;
	font-size:12px;
}
#htmlWrap {
	margin-top:10px;
	width:578px;
	padding-left:20px;
	border-width:1px;
	border-style:solid;
}
#sender {
	margin-top:10px;
}
#textChange {
	font-size:13px;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:20px;
}

</style>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="300" id="externalInterface" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="externalInterface.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="externalInterface.swf" quality="high" bgcolor="#ffffff" width="600" height="300" name="externalInterface" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="htmlWrap">
<div id="asSend">
  <label for="textArea">Send to actionscript:</label><br />
  <textarea cols="50" rows="4" id="textArea" name="textArea"></textarea>
  <br />
  <button id="sender" name="sender">Send</button>
</div>
<div id="textChange">Use Actionscript to change me!</div>
</div>
</body>
</html>

The key areas are:

• The <object> section, which embeds the SWF you’ll create from the Flash file.
• The <div>s and <textarea>, which have id properties so that we can access them from the SWF.

Your HTML should appear as below:

When the code has been replaced, upload the file to your webserver, so we can get started with the ActionScript.

Step 4: Set up a Document Class

Create a document class for your Flash file; call it externalInterface.as. If you’re not familiar with document classes, read this Quick Tip.

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {

		}
	}
}

Step 5: Calling JavaScript Functions from Flash

The first thing we’ll do with the ExternalInterface is call a JavaScript function that will change the background color of our webpage. So, attach an event listener to our ColorPicker component. When the color changes, it will send the hex value to a javascript function called receiveColor():

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);	//calls receiveColor(event.target.hexValue) in the javascript
		}
	}
}

Now we have to write this receiveColor() function. In the head of our HTML document, we start the javascript by defining this function. It simply takes the value sent to it from Flash and changes the background color.

Put that right after <head> in your HTML file. If all’s well, when you run the HTML page in a browser and change the color in the ColorPicker, it should change the background color of the webpage.

Step 6: Calling ActionScript Functions from JavaScript

The next example will be to send data from JavaScript to Flash. In the HTML document, paste the following code within the <script> tag you added in the last step:

window.onload = function() {
	var sender = document.getElementById("sender");		//getElementById finds an element according to its "id" property
	sender.onclick = function() {
		var ta = document.getElementById("textArea");
		document['externalInterface'].receiveText(ta.value);
		ta.value = "";
	};
};

Here’s what this does: after the document is loaded, we get the ’sender’ button and attach an event listener to it. When the ’sender’ button is clicked, it will call the receiveText() function in Flash that we will set up now.

Back in Flash, we tell the ExteralInterface to register the ActionScript function so that it can be called from JavaScript. Then we set up our receiveText() function:

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);	//allows JavaScript to access the receiveText() function.
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		//this is the new receiveText function
		public function receiveText(value:String):void {
			jsText.text = value;
		}
	}
}

(New lines are 8 and 15-18.)

Step 7: Calling JavaScript Alerts, Confirms and Prompts from ActionScript

We can also call alerts very easily from ActionScript. Here we simply tell the ExternalInterface to call a ‘prompt’. We can also use the ExternalInterface to pass parameters to functions. Here we tell the ‘prompt’ function to ask the user his or her name. When our user enters the info, it’s passed back to the ‘promptText’ text field.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);	//makes promptClick() run when prompt button is clicked
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		public function receiveText(value:String):void {
			jsText.text = value;
		}

		//function to be called when prompt button is clicked. Will ask for user's name using a JS prompt.
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
	}
}

(New lines are 9 and 20-23.)

Step 8: Calling Anonymous JavaScript Functions

Another thing we can do is write our own JavaScript functions as strings, then call them from the ExternalInterface. Here we create a JavaScript function that receives a parameter. We take that parameter and assign its value to the innerHTML attribute of our ‘textChange’ div in the HTML document. You’ll notice that there are no external JavaScript functions being called – it is all contained within the ActionScript.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);	//makes changeClick() run when change button is clicked
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		public function receiveText(value:String):void {
			jsText.text = value;
		}

		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}

		//changes text inside the HTML to match text field inside Flash
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
	}
}

(New lines are 10 and 25-29.)

Step 9: Calling Anonymous JavaScript and ActionScript Functions

Finally, we can call anonymous functions on both sides. In the ‘anonymous’ function, we register an anonymous ActionScript function with the ExternalInterface. The function fills in some text, then starts a timer. Next, we call an anonymous JavaScript function. This function tells the window, when it’s been resized, it must call back to our anonymous ActionScript function.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);

			//create a new timer with a one second tick, and add an event listener
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, onTimer);
		}

		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}

		public function receiveText(value:String):void {
			jsText.text = value;
		}

		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}

		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}

		//clear the text after one second has passed
		public function onTimer(event:TimerEvent):void {
			resizeText.text = "";
			timer.stop();
		}

		public function anonymous():void {
			//see how we're defining a function inside another function?
			ExternalInterface.addCallback("anon", function(){
				resizeText.text = "The window has been resized.";
				timer.start();
			});

			//same applies here
			ExternalInterface.call("function(){ window.onresize = function(){ document['externalInterface'].anon(); }; }");
		}
	}
}

(New lines are 12-14 and 34-49.)

No tags for this post.

Related posts

• No related posts.

]]>

Place the code bellow in functions.php file inside your theme’s folder.

function randomPosts($numPosts = 5){

	query_posts(array('orderby' => 'rand', 'showposts' => $numPosts));
	if (have_posts()) : while (have_posts()) : the_post();

	?>
		<ul>
			<li><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		</ul>
		<?php

	endwhile;
	endif;

	wp_reset_query();

}

Change the layout to fit your needs.

Calling randomPosts(); will show 5 random posts and if you want a different amount then call it like randomPosts(number);

Related posts

• No related posts.

Warm up your illustration skills with this spring-inspired tutorial for creating organic letters. Use of a Wacom tablet is recommended but not required.

This is a Detailed and Professional Tutorial

Related posts

• No related posts.

Place the code bellow in your theme’s functions.php file.

function commentCount($type = 'comments'){

	if($type == 'comments'):

		$typeSql = 'comment_type = ""';
		$oneText = 'One comment';
		$moreText = '% comments';
		$noneText = 'No Comments';

	elseif($type == 'pings'):

		$typeSql = 'comment_type != ""';
		$oneText = 'One pingback/trackback';
		$moreText = '% pingbacks/trackbacks';
		$noneText = 'No pinbacks/trackbacks';

	elseif($type == 'trackbacks'):

		$typeSql = 'comment_type = "trackback"';
		$oneText = 'One trackback';
		$moreText = '% trackbacks';
		$noneText = 'No trackbacks';

	elseif($type == 'pingbacks'):

		$typeSql = 'comment_type = "pingback"';
		$oneText = 'One pingback';
		$moreText = '% pingbacks';
		$noneText = 'No pingbacks';

	endif;

	global $wpdb;

    $result = $wpdb->get_var('
        SELECT
            COUNT(comment_ID)
        FROM
            '.$wpdb->comments.'
        WHERE
            '.$typeSql.' AND
            comment_approved="1" AND
            comment_post_ID= '.get_the_ID()
    );

	if($result == 0):

		echo str_replace('%', $result, $noneText);

	elseif($result == 1): 

		echo str_replace('%', $result, $oneText);

	elseif($result > 1): 

		echo str_replace('%', $result, $moreText);

	endif;

}

Change the $oneText, $moreText, $noneText variable values to suit your needs. The percentage character (%) can be used in all of the variables and will be replaced with the number.

Using the code

commentCount(); //echoes the comment count

commentCount('comments'); //same as the example on top

commentCount('pings'); //echoes number of trackbacks and pingbacks

commentCount('trackbacks'); //echoes number of trackbacks

commentCount('pingbacks'); //echoes number of pingbacks

If you know a simpler way to do this let me and the readers know in the comments. Thanks.

Related posts

• No related posts.

One more interesting tutorial how to create canvas texture imitation from the photography. Here I’ll show you the method how to simulate the maximum texture of canvas.

Before starting this tutorial you should find the suitable photography to work with. You can try to find it by using Google Images or feel free to use mine. Open up the photography and duplicate layer with Ctrl+J at first. After that desaturate copied layer with Image > Adjustments > Desaturate and set up opacity to 70%.

Merge two of these layers in one and apply Filter > Noise > Add Noise to the new layer.

The result should be next:

After that apply Filter > Blur > Gaussian Blur with next presets:

Hope, your result looks the same as mine on the picture below:

Ok, move to the next step. On this step you should stylize the photography a little bit with Filter > Sharpen > Smart Sharpen by using following presets:

See the difference below:

Ok, now create a new layer and fill it with black color. Then Filter > Noise > Add Noise to add the noise a little bit on this layer.

Then mess with the layer mode & opacity/fill. I tried Screen with opacity of 50%.

Now, duplicate noise layer with Ctrl+J and hide the copy (click on the eye, which indicates layer visibility). Go to lower layer and apply Filter > Blur > Motion Blur with next parameters:

Your effect should be the next:

Now, apply Filter > Sharpen > Sharpen to this layer two times.

After that go back to the hidden copy of layer and make it visible again. Apply Filter > Blur > Motion Blur with following parameters:

See the difference now?

Ok, now apply Filter > Sharpen > Sharpen two times for this layer also.

Then adjust brightness and contrast a little bit with Image > Adjustments > Brightness/Contrast. Use next parameters:

Your picture should look the same as mine:

And the last one thing that we need to do before finishing this tutorial to increase the sharpness with Filter > Sharpen > Sharpen:

On this step we are done. The final picture has nice canvas texture imitation effect isn’t it?

Related posts

• No related posts.

This Tutorial is Filled with Creative Techniques

Warm up your illustration skills with this spring-inspired tutorial for creating organic letters. Use of a Wacom tablet is recommended but not required.

This is a Detailed and Professional Tutorial

Related posts

• No related posts.

So in this simple loop below, it will output something every third time through the loop:

<?php for ($counter = 1; $counter < 100; $counter++ ) { if ($counter % 3 == 0) { echo "<p>Every third!</p>"; } }
?>

Related posts

• PHP and MySQL File Download Counter (0)
• Making a Mosaic Slideshow With jQuery and CSS (0)
• Make your MooTools Code Shorter, Faster, and Stronger (0)
• Awesome CSS+JS form styling (0)
• 2 Different Ways For Getting Twitter Status / PHP and jQuery (0)