Tweener Ideas AS3

Here are a few examples that illustrate using Tweener with AS3. Tweener is an animation Class that makes it easy to get things moving in Flash. The Tweener class files are included with these examples in the cuarina folder. You can download the latest version and read more about Tweener here.

These examples show some simple animation ideas using Tweener. Each movie is built using the Document Class. The FLA file contains a movie clip that is animated. In the First movie these clips are on the stage. In the second and third examples these clips are in the library and attached to the stage. For this to work the Linkage option must be set to Export For Actionscript.

Basic Tweener

Some More AS3 Exmaples, Loader Class

Here are a few examples that use the Loader class to load other SWFs into a main SWF. Here I planned each of the loaded SWFs around it’s own Document class. So, the Actionscript that runs each movie is contained in a document class for that SWF. This method seemed to work pretty well. The loaded movies in this don’t really do anything. But, they each contain something happening going on with Actionscript, which is stored in the Document Class for each SWF.

More AS3 Examples

AS3 Version of ScrollBar Class

Here’s an AS3 version of the ScrollBar Class. This uses the same methods and properties as the AS2 version of this class.

Make a newinstance of ScrollBar with:

 new ScrollBar( target_mc, callBack )

The target_mc must have two clips inside named drag_mc and track_mc. The first is the dragger and the second sets the limits for the dragger. You can design these in any way you like as long as they use the instance names

  • drag_mc
  • track_mc

For best results place the registration points of both clips in the upper left corner and align both clips within their parent.

The callback can be any function name that you have defined. The ScrollBar class will send a value from 0 to 1 to the callback function. Think of this as the percentage position of drag_mc from the top of track_mc.

For example if you made a clip with both drag_mc and track_mc you might give that clip the instance name of scroll_mc. To make a new instance of ScrollBar you could use the following:

var a_scrollbar:Scrollbar = new Scrollbar( scroll_mc, test );

When the scrollbar is dragged the function test would be called and passed a value between 0 and 1 representing the position of the dragger. You could use this to scroll some text in a dynamic text field or set the volume of a sound object.

Here is a sample function that would scroll a dynamic text field named scroll_txt:

function test( n ) {
scroll_txt.scroll = Math.round( ( scroll_txt.maxscroll - 1 ) * n ) + 1;
}

AS3 Scrollbar class

Here’s an example of the scrollbar in action.

Scrollbar( host_mc:MovieClip, call_back_func:Function )Creates a new Instance of Scrollbar. The host_mc clip must contain two clips named drag_mc and track_mc. These clips act as the scrollbar. track_mc sets the limits while drag_mc is the interactive clip.The call back function can be the name of any function you define. It will receive one parameter, a value representing how far the scrollbar is scrolled. The range of the returned value will be from 0.0 to 1.0. With 0.0 being the value returned when the scrollbar is at the top (or left when scrolling horizontally) and 1.0 when the scrollbar is at the bottom (or right). You can use this value to control elements in your movie.

  • host_mc: a movie clip containing the drag_mc and track_mc.
  • call_back: the name of a function that will be called when the scrollbar is scrolled.

scroll_horizontal( horizontal_scroll:Boolean )

This method determines whether the scrollbar scrolls vertical or horizontal. By default the scrollbar scrolls vertically. Calling scroll_horizontal() and passing true makes the scrollbar scroll horizontally.

getValue():Number

The method returns the current value of the scrollbar.

setValue( n:Number )

The method sets the current position of the scrollbar. Pass a value of 0 to 100.

Property enabled

This property enables and disables the scrollbar.

SWFObject

This is a great tool for embedding swf’s into your HTML pages. This is an alternative to the markup provided by Adobe via Flash or Dreamweaver. It also circumvents the need to “Activate Flash” on Windows.

I prefer this over the default scripts which often cause problems with the HTML code on the page.

It provides a few extra features also. Like ability to get variables from the URL string for the current page. It can also check the Flash version and provide a link to get the current version of Flash.

http://blog.deconcept.com/swfobject/

Some AS3 examples

Here are a few basic AS3 examples. These cover some of the everyday chores that you may need to solve with AS3. Such as:

  • Making buttons and assigning scripts to them.
  • Using the Document Class. All of these examples store their script in the Document class.
  • Creating a group of buttons. Enabling and disabling buttons.
  • Loading images into a movie.
  • Animating the timeline.
  • Animating the properties of clips.
  • Attaching clips to the stage.

All of these examples store their scripts in a class file that has the same name as the example fla. This file is set as the Document class in the fla.

A few simple AS3 examples

Updated 10/13/07, added an extra example that attaches and removes symbols in the library to the stage.

Where's onRelease in AS 3?

It looks like AS 3 has done away with onRelease, onRollover etc. All of these still work in AS 2. But what do you do if you want to make a project in AS 3?

The following is the new system. Imagine you have made a Movie Clip button and named the instance on the stage b_0:

b_0.addEventListener( MouseEvent.CLICK, button_function );
b_0.buttonMode = true;
function button_function( evt:MouseEvent ) {
trace( "you clicked the button" );
}

If you are using a button clip you do not need the line:

b_0.buttonMode = true;

This is used to make MovieClip buttons show the hand cursor and automatically jump to the frame markers _up, _over and _down on their timeline.

If your button contains a text field, this can capture the mouse focus. That is rolling over the text within the button will take focus from the button as if you had rolled off it. Use the mouseChildren property to trap mouse events, keeping them from being passed on to nested objects.

b_0.mouseChildren = false;

For more infromation: http://www.communitymx.com/blog/index.cfm?newsid=863

ImageBar Class

This class creates a row of image icons. The icon row can scroll based on mouse position or the scrolling can be tied to a button.

This class is a work in progress and can use some improvement.

To use the ImageBar class make a new instance of the class and pass it an array of Identifiers for symbols in your library that will act as icons on the bar.

Using the ImageBar you will follow this basic process. Create an array of symbols that will become images on the bar. Then make a new instance of ImageBar, passing parameters describing how the ImageBar will be displayed. One of these parameters is the array of Symbols to be displayed on the bar.

For example, the following code defines an array and then makes a new instance of ImageBar.

var icon_array = [ "Symbol 1", "Symbol 2", "Symbol 3", "Symbol 4", "Symbol 5", "Symbol 6", "Symbol 7" ];
var my_ib = new ImageBar( image_mc, // Target MC
1, 		// Depth
200, 		// view width
50,		// view height
icon_array,// icons
50,		// icon width
50,		// icon height
5 );  		// icon space

The code above builds the ImageBar in the movie clip image_mc at depth 1. Sets the width to 200 and the height to 50. Adds images to the bar from the array icon_array. Each image on the bar is defined with a width of 50 and a height of 50 and a spacing of 5 between each.

The Imagebar provides several methods and properties that determine how the icons movie on the bar. The example files show some of the various ways ImageBar can be used.

ImageBar Class

public function ImageBar( host_clip:MovieClip,
depth:Number,
width:Number,
height:Number,
array_of_images:Array,
image_width:Number,
image_height:Number,
image_spacing:Number )

Create an instance of ImageBar with the constructor.

public function set_border( stroke_weight:Number, stroke_color:Number ):Void

Set the border for an instance of ImageBar. Assign a stroke weight and color.

public function scroll_inside_box( onOff:Boolean ):Void

Call this function and pass true to make the ImageBar scroll only when the cursor is within the area of the ImageBar. Or, false to have the ImageBar scroll always, regardless of where the cursor is at.

public function auto_scroll( auto:Boolean ):Void

Call this function and pass true to make the ImageBar scroll automatically. When ImageBar scrolls automatically it scrolls in relation to the cursor position. When this is set to false the ImageBar does not scroll in relation to the cursor. Use a false setting in conjunction with buttons or other elements to trigger scrolling in the ImageBar.

public function shift_icons( n:Number ):Void

Use this function in conjunction with auto_scroll( false ) to shift the ImageBar from a button or other input. Pass the number of images to shift. For example ImageBar.shift_icons( 3 ) moves the ImageBar three images widths to the right. Negative numbers will shift to the left.

public function shift_left( ):Void

Use this with auto_scroll( false ). Shifts the ImageBar it’s width to the left.

public function shift_right( ):Void

Use this with auto_scroll( false ). Shifts the ImageBar it’s width to the right.

public function scroll_percent( n:Number ):Void

Use this method with auto_scroll( false ). Moves the ImageBar from 0 to 100% along it’s entire length of travel.

public function get_icon_symbol_array():Array

Returns an array of Symbols that have been attached to the ImageBar instance.

public function get_icon_instance_array():Array

Returns an array of all of the images instances attached to the ImageBar instance.

public function set_speed( n:Number ):Void

Pass this function a value that sets the speed the ImageBar scrolls.

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.