TextArea Masking

You can mask the TextArea component if you set the Cache as Bitmap option. Select the TextArea on the stage and find the option labeled as: use runtime bitmap caching, in the Property Inspector.

Selecting this option allows the TextArea to be masked. However it doesn’t seem to allow you to set the alpha. Still looking for an answer to that…

TextArea and Embbeded Fonts

The subject of embedding fonts in the TextArea Component came up yesterday. I didn’t know the answer. But, after some research I found the following works with regular text.

Create a TextArea on the stage. Add some text to the text property in the Component Inspector.

Give the TextArea the Instance name: a_txt.

Create a new Font in the Library, by clicking the little button in the upper right of the library. Choose New Font. Choose the Font and size. Click OK. Find the find in the Library, right click, choose: Linkage. In the Linkage box select Export for ActionScript. Note the Class name. In my example it was Font1.

Add the following on a frame or in class that can access the text Area.

var font:Font = new Font1() as Font;
var tf:TextFormat = new TextFormat();
tf.font = font.fontName;

a_txt.textField.embedFonts = true;
a_txt.setStyle( “textFormat”, tf );

Need to know when the mouse leaves the stage?

Ever need to know when the cursor leaves the stage? This comes up every once in a while and is useful to know. First there is Event.MOUSE_LEAVE which is:

Dispatched by the Stage object when the mouse pointer moves out of the Flash Player window area.

According to Flash Help.

stage.addEventListener( Event.MOUSE_LEAVE, mouseLeaveListener );
 function mouseLeaveListener (e:Event):void {
         trace("mouse left the stage");
         stage.addEventListener( Event.MOUSE_MOVE, mouseMoveListener );
 }
 function mouseMoveListener (e:Event):void {
         trace("mouse re-entered the stage");
         // remove the listener until the next time the mouse exits the stage.
         stage.removeEventListener(Event.MOUSE_MOVE, mouseMoveListener);
}

Then there is also Event.ACTIVATE and Event.DEACTIVATE. These events are dispatched when Flash gains and loses focus. In other words when the cursors leaves the area of the movie.

A link to a discussion of the subject on Ationscript.orghere

What happens when something leaves the stage?

I noticed that problems can occur when something leaves the stage. At times when a movie clip leaves the stage you will want to clean up or put things in order. I found there are two events that occur when a display object leaves the stage: REMOVED and REMOVED_FROM_STAGE. These have the potential to be very useful.

Here’s a short snippet of code to show how they work. Imagine you have a movie clip named box_mc. The script below adds a the clip to the satge, then assigns a CLICK event listener to it. When the box_mc is clicked it removes itself from the stage. This enabled by adding the REMOVED_FROM_STAGE event listener.

var box_mc:MovieClip = new Box();
addChild( box_mc );
box_mc.addEventListener( MouseEvent.CLICK, click_box );
box_mc.addEventListener( Event.REMOVED_FROM_STAGE, remove_me );

function click_box( event:Event ):void {
	trace( "Click box" );
	removeChild( box_mc );
}

function remove_me( event:Event ):void {
	trace( event.target + " has been removed from the stage" );
}

Here’s another exmaple. Imagine you have a class that is used as he base class for a MovieClip. That is the class is set as the Base Class for a MovieClip Symbol in your library. This class might create objects that live on after it is removed from the stage.

To take care of these object you can give your class a destroy() method and add an event listener for REMOVED_FROM_STAGE. This way the clip takes care of cleaning up after itself.

Here’s an example of a class with a destroy() method set up as described:

package {
	import flash.display.MovieClip;
	import flash.events.*;

	public class OrangeBox extends MovieClip {

		public function OrangeBox() {
			addEventListener( Event.REMOVED_FROM_STAGE, destroy );
		}

		public function destroy( evt:Event ):void {
			trace( "Destroy the Orange box" );
		}
	}
}

ImageStreak Class update

Here’s an update to the ImageStreak Class. I have added a new method that sets the number of horizontal pixels drawn with each pass. This gives much better control over the speed of the transition.

Once you have created an instance of ImageStreak call the following method to set the number of horizontal pixels drawn with each pass. The following would set a 10 pixel step.

my_is.setStep( 10 );

Remember you can also set the setSpeed() method to change the time between drawing intervals. Between setStep() and setSpeed() it should be possible to get a wide range speeds.

ImageViewer 2 Update

After having someone ask about ways to hide the ImageViewer I decided to added a few new methods. The ImageViewer2 now supports a fadeOut() and fadeIn() method. These animate the _alpha of the ImageViewer container clip. Use fadeOut() to make an ImageViewer fade out to transparent and fade in to make an ImageView fade in to full opacity. If the ImageViewer is faded out calling loadImage() will cause it fade in automatically.

I updated the original post for ImageViewer2.

Make_3d Class Examples

Here is a class I created at extends movie clip. It adds properties that allow you to position movie clips in 3d space. The class is pretty simple with just a few properties and methods. If you’re looking for a featured 3d class that generates solid objects take a look at Sandy or PaperVision.

The Make_3d class might be good for creating simple animated effects for interface elements. The class is really more of a 2.5D. It allows you to create the illustion of depth by scaling and positioning movie clips on the stage.

Make_3d Class

[kml_flashembed movie=”http://webdevils.com/examples/Make3d/3D_04.swf” height=”400″ width=”300″ /]

Make3d provides properties to set the X, Y and Z position of a clip. Make_3d can rotate clips around the origin. Make_3d can also change the brightness of a clip as it moves back in space. This can enhance the illusion of depth. Clips can get brighter or darker and range of the effect can be set. Make_3d also provides a setting to simulate camera angle which can be used to create more less extreme perspective effects.

Using Make_3d

Make_3d Extends the movie clip class. The Make3d Class must be set as the AS 2.0 Class in the Linkage Properties dialog box for any clip will use it. Just right click a symbol in the library and choose Linkage. Then select the Export for Actionscript option and type the name Make_3d into the AS 2.0 Class field.

The Make_3d class adds three new properties, myX, myY, myZ, to movie clips that use this class. The properties set the x y and z positin of an object. To redraw a clip on the stage in 3d space call render point after setting myX, myY or myZ.

Rendering a clip in 3d space sets that clip’s _x, _y, _xscale and _yscale, this makes the clip look like it has been moved in 3d space. Do not set these properties yourself (_x, _y, _xscale and _yscale). Rendering a clip in 3d space also uses swapdepths to set the stacking of clips. Do not use swapDepths() on a 3d clip or it will not stack correctly with other 3d clips.

setOrigin( origin_x:Number, origin_y:Number )

Use setOrigin() to set the location of the vanishing point in your scene. This will usually be in the center of the stage. Setting the X and Y values to half the width and half the height of your Flash project will get the best results. If your 3d elements will be nested within another Movie Clip, you can set the origin to 0, 0 and place the host Movie Clip’s registration point at the origin.

For example if your Movie had a width of 400 and a height of 300 you would want to set the origin to 200, 150:

mc.setOrigin( 200, 150 )

translate_3d( x:Number, y:Number, z:Number )
This method moves an object in 3d. Pass it x, y and z values of the distance you want to the object to move. The values passed to translate_3d are added to the object’s current x, y and z values. For example the following would move an object 100 units in the x, 0 in the y and 400 in the z.
mc.translate_3d( 100, 0, 400 )

position_3d( x:Number, y:Number, z:Number )
This method positions an object at a location in 3d space. Pass position_3d() the x, y and z values and the clip will move to this position. For example to move a clip to the origin you could use the following:
mc.position_3d( 0, 0, 0 )

rotate_3d( x:Number, y:Number, z:Number )
This method rotates an object around the origin. For example to rotate an object 2 degrees around the x axis, 5 degrees around the y axis and 0 degrees around the z axis you could use the following:
mc.rotate_3d( 0, 0, 0 )

renderPoint()
This method renders he clip in 3d by positioning and scaling the object based on it’s x, y and z coordinates. You should call renderPoint() after setting the myX, myY or myZ properties. If you set myX, myY and myZ in the same frame you need call renderPoint() only once to update the position of your clip. If you translate_3d(), position_3d() or rotate_3d() you do not need to call renderPoint(). These methods call renderPoint() themselves.

mc.renderPoint( 0, 0, 0 )