Home

Tutorials for Flash Programming, Animation and Web Development

PHOTOSHOP VIDEO TUTORIALS

New Flash Tutorials on Video Available

Flash 8 Drop Down Menus

Posted on November 23, 2015

In this very basic Flash 8 dropdown menu tutorial I am going to show you how to make a simple dropdown menu using a gotoAndStop command. The basic theory is that on frame 1 you have the top menu button only appearing. Then when you press this button the timeline goes to another frame and that is where the other submenu buttons are put under the top menu level. On this frame if you press the top menu button then you get sent back to frame 1 and the sub menu items disappear. It is very simple and you dont have to deal with making movieclips visible and a whole lot of hocus pocus. But be careful with this one because if you use loadMovie with it then the loaded movies will get loaded over the top of the drop down menu. You will have to think carefully about this. My sneaky little trick would be load the dropdown menu/navigation movie into a really high _level such as _level100.

Create a new Flash 8 doc 700×400.
Create a new layer and call it buttons.
Make 5 buttons 150×30 each and put them under one another.
Give them the instance names of menu1_btn, menu2_btn, etc etc,up to menu5_btn.

Make a new keyframe(F6) on frame 10 of the buttons layer.
The top button will be the main menu button.
The other buttons, 2-5, will be sub-menu items.
Go back to frame 1, buttons layer and delete buttons 2-5.

Create a new layer and call it “actions”.
You will need code to stop the timeline and move the timeline to frame 10 when button 1 is pressed.
Here is the code:

stop();
menu1_btn.onRelease = function(){
  gotoAndStop(10); // go to frame 10	
}

On frame 10 of the actions layer put the code for your submenu button items.
And the code to send the timeline back to 1 when the top button is pressed.
Examples could be:

stop();
// send timeline back to frame 1
// and hide submenu items
menu1_btn.onRelease = function(){
    gotoAndStop(1);	
}
// submenu items actions
menu2_btn.onRelease = function(){
	getURL("http://www.video-animation.com/", "_self");
}
menu3_btn.onRelease = function(){
	getURL("http://www.blah.com/", "_self");
}
// etc etc

Flash ActionScript 2.0 – Class Inheritance

Posted on November 18, 2015

Every Flash Actiosnscript class has attributes and behaviours. Attributes can describe the state or qualities of an object:
Say we have a Car class. It might have the attributes of :
Color: red, green, blue.
Style – sedan, station wagon, urban assault vehicle.
Make – Toyota, Holden, Ford , Daihatsu
Attributes can also have information about its state.
has4WheelDrive – true , false;
currentGear – 1,2,3,4,R;
Let’s define a Car class(save it as Car.as) with what we have so far:

class Car{
	// declare attributes
	private var carColor:String;
	private var make:String;
	private var year:Number;
	private var style:String;
}

Methods

Methods define the behaviours of our classes. What do we want our car to do? how about move.. and stop. Lets add them..

class Car{
	// declare attributes
	private var xpos:Number;
	private var ypos:NUmber;
	private var speed:Number;
	private var carColor:String;
	private var make:String;
	private var year:Number;
	private var style:String;
	// Methods
	public function move(){
		xpos +=speed;
	}
	public function stop(){
		speed = 0;
	}
	
}

Programming Actionscript 3.0

Posted on August 06, 2015

Actionscript 3.0 is the new Flash Actionscript language that was designed to build rich Internet Applications using Object Oriented Programming (OOP). The New ActionScript Virtual Machine that is built into the flash 9 player executes ActionScript 3.0 code ten times faster than older Actionscript. Actionscript 3.0 will let Flash CS3 programmers to write efficient and complex code that responds quickly to user needs. Actionscript 3.0 is a subset of the ECMAScript which adds various capabilities for XML. This changes XML into a native data type thus making XML processing straight forward and easy.

ActionScript 3.0 now has more robest runtime exception handling for the most common error situations that improve debugging and error handling. Runtime errors show stack traces that have the source file and line number that will simplify finding errors in your code. Sealed classes have been introduced that have only the predefined set of functions and properties for compiling. Extra properties and functions can be added but must use the dynamic keyword.

Actionscript 3.0 Datatypes

Actionscript 3.0 has new primitive datatypes. Originally Actionscript 2.0 only had the datatype of Number for all numerics whether they were integers, floating point numbers, doubles, etc. Now there is a new datatype int which is a 32 bit signed integer datatype that makes processing faster for non-decimal numbers such as loops and counter, for example. It is also suggested that variables be strongly typed. That is, they should be declared formally. Like this for instance:

var someValue:Number;
Constants can be declared like this:

const SPEED:Number = 10;

Actionscript 3.0 Classes

Classes can contain properties, methods, and/or events. Properties of a class are the variables of that class and could beb a value something like the acceleration of a clas instance:

var accel:Number;

A method is an action that can be done by a class or any of its instances. Say for example if you have a Rocket class you might want to make it fire:

var rocket1:Rocket = new Rocket();
rocket1.fire();

or do collision detection:

rocket1.collision();

Actionscript 3.0 Events

Events are usually actions initiated by the user. Usually the program has to sit idle and wait for the user to click the mouse or hit a key. Events tell the Actionscript program about the user-initiated actions. Events are usually listened for with a Listener and then handled. Say if a user clicks a menu item , then the Event handler may load a particular sequence associated with that menu item. To create a new Object or class instance you will need the use the keyword “new”. For example if you had a Car class and you wanted to create a blue car, then you might do so like this:

var blueCar:Car = new Car(“blue”);

Actionscript 3.0 Operators

Operators are special symbols that are used to perform calculations and to compare one value against another to see if it is larger, smaller or the same. Some types of operators are Addition (+) :
var sum:Number = heightUp + heightDown;
or Multiplication (*):
var product = SPEED * accel;
Other operators include equality (==), greater than (>) , less than (<).

.

Flash Actionscript Programming Basics

Posted on May 12, 2015

This course is adapted from the book “C++ Primer” by Stanley Lippman.
There are currently 2 versions of Actionscript. Actionscript 1.0 (AS 1.0) is the version that works with Flash MX. Actionscript 2.0 (AS 2.0) is the new language that ships with Flash MX2004. Most items in these tutorials will cover both AS 1 and AS 2. Where there is a difference I will indicate it. Actionscript 1.0 will work with Flash MX2004 but Actionscript 2.0 will not work with Flash MX.

To enter actionscript code, open the Actions window by hitting the F9 key or selecting menu item “Window” – “Actions”, and start writing in that window.
Start Now!
Open the Actions window and type in this code:

var myNumber;

What you have done is a simple VARIABLE DECLARATION. You have reserved space in memory where some information/data is to be stored.
Now write this in place of above.:

var myNumber = 10;

You have assigned a value to the variable. i.e. stored the value 10 in the variable myNumber.

The trace( ) function prints whatever is between the parentheses to the output window. It displays the value of the argument of trace. To sequence text and variables in a trace function use “+” to add text to number and variables etc.
e.g.

trace("some Text " + someVariable);

So, here is our complete script,

var myNumber = 10;
trace("The value is " + myNumber);

Now execute or run the script. To execute a script hit the keys “Control + Enter” together, or use menu item “Control” – ” Test Movie”.

After a script is written, the next step is to compile it. Compiling means to write to bytecode that Flash understands. The compiler has 2 jobs:

  1. error checking – the compiler will examine the script for language correctness or errors.
  2. Translate what we have to instructions that the machine can understand.

Java Arrays

Posted on December 23, 2014

Java Arrays

Arrays are lists of similar objects or datatypes. they are ordered in a numbered sequence starting from 0 until the end or last item in the array. Here is an array of integers (int’s). Note the format.
{12, 7, 32, 15, 113, 0, 7}
Here is how they will be stored with their number in the list :

index 0 1 2 3 4 5 6
value 12 7 32 15 113 0 7

The array items’ number in the list is called its index. To get the value of an array item or element you give its index inside [ ] square brackets after the array’s name. We could call the above array scoreArray.

Declaration of Arrays

We can declare arrays in Java in 2 ways:

	int scoreArray[] ;
	int[] scoreArray ;

This declaration tells the compilers what type of variables (datatype) the array contains. No actual array is created until the keyword NEW is invoked or used. e.g.

	int [] scoreArray ;
	scoreArray = new int[7] ;

The 2 lines above put an array of 7 ints into the array called scoreArray and they are all given a default value of 0 .
An array can be declared, constructed, and initialized in a single statement . e.g.

int[] scoreArray = {12, 7, 32, 15, 113, 0, 7 } ;

Note the use of the { } curly brackets and commas between the elements of the array.

Calling an Array Element

To retrieve an element in an array we simply put its index number in square brakets [] after the array name. e.g. scoreArray[0] ;

Exercise:

  1. what does scoreArray[0] equal ?
  2. What is the value of scoreArray[5] ?

Remember – arrays start at index 0 . So, the 5th element in an array will be arrayName[4] .
Here is a formula:

	nth Element     =>     arrayName[n-1]

Changing Java Array values

If you want to change an array element value, just go something like this :

	scoreArray[3] = 56 ;
	scoreArray[1] = 27 ;

To put an array element into another variable , just do something like this :

	int myScore ;
	myScore = scoreArray[4] ;

If you printed out myScore(printLine(myScore) ; ) , it would print 113.
Lets write a program after all that theorizing !

	void main() {
		// declare , initialize array
	int[] scoreArray =  {12, 7, 32, 15, 113, 0, 7 } ;
		// print scores
	for(int i = 0; i<7 ; i++ )
	{
		printLine("Score "+ i + " = " + scoreArray[i]);
	}
	}

Java Problem :

You have been given the job by the ACB to write a program to enter the scores for the Australian cricket teams one day match scores.
Output the scores and the Runs Per Over. A One Day Game has 50 overs.
It could have an output like this :

Player 1 : 23
Player 2 : 66

Player 11 : 7

Runs Per Over = 4.03

Lets first write out the steps that our program will take, in plain English .

  1. Declare array of ints containing 11 elements
  2. Loop through these items to read each score- input
  3. Add each score to a total
  4. Calculate the Runs Per Over
  5. Print out the scores.
  6. Print out the Runs Per Over

What we have just done is write the program’s

ALGORITHM

.
An Algorithm is the series of steps written in plain English that would make our program run successfully or accomplish its task.

Lets write it ! You have a go on your own first.

What did you get ?
..

When you have done it, try to read in and output each cricketer’s name instead of Player 3 e.g.
Calculate the Average score for the team.
And print out those above it and those below the average.

Exercise:

  1. Are these statements legal ?
    a. int[ ] numberArray[ ] ;
    b. String[ ] name ;
    c. double price[ ] ;
    price = new double[12] ;
  2. What are the default initialization values for int, double, String , boolean ?

Flash 8 Video Tutorials

Posted on November 08, 2014

Flash 8 Video Tutorials  Put your tutorials here.

Basic Create a Movieclip

Posted on October 03, 2014

Creating MovieClips in Flash MX

This tutorial will show you the basics of creating and using Movieclips in Flash MX. Most of the information will also be applicable to Flash MX2004.

  • First up, draw something that will be the first frame of your movieClip.
  • Make sure that you have created a new layer to contain your movieclip.
  • Select the whole of the drawing with the Selection Tool (The black Arrow).

mc_01

  • Hit the key F8 (or select Menu Items “Insert” – “Convert to Symbol” ), Tick the MovieClip radio button , and give it an actionscript name.
  • Open the library by hitting key F11 or selecting Menu Items “Window” – “Library”.
  • Double click on the bird_mc movieclip in the library
  • This will open up the editing stage for movieclip

 

  • Move the character around a bit. I just moved the wings a bit. Create another keyframe on frame 3. Move the animation around a bit more. Create as many frames until you have an animation that loops from finish to start.
  • Drag the movieclip from the library to the stage. With the movieclip selected, open the properties window and find the “instance Name” textfield.
  • Write the name for its stage name in that textfield. I chose “bird”. That will be the actionscript name that i will use when coding the movieclip.

Flash CS3 Actioncript 3.0 Introduction

Posted on July 12, 2014

Flash CS3 Actioncript 3.0 Introduction

This tutorial on Programming Actionscript 3.0 describes in text what you will be taught in the FLASH CS3 VIDEO TIP – Introduction to Actionscript 3.0 Preview which demonstrates how to get your object to move to a specific point on the stage.

Say we have a MovieClip that we want to move around the stage. With Actionscript 3.0 we can move that MovieClip to wherever we want using using the programming language that is native to Flash CS3, ie, AS 3.0. Create a MovieClip ball_mc on its own layer, call that layer ball, and then create a new layer and call it actions. Click on frame one of the actions layer and open the Actions window.

In this tutorial we are going to create a timer and a function that will move the ball. Always use comments so that you know later what was going on and so that other people can follow your code.
Here is the code that you will put in the Actions window:

// create the Timer object
// set it to tick every 40 milliseconds
var myTimer:Timer = new Timer(40);
// add event listener to timer object 
// and tell it to listen for moveBall function
myTimer.addEventLister(TimerEvent.TIMER, moveBall);
myTimer.start();
//
// declare variables
// intitialise start to original position
var startX:Number = ball_mc.x;
var startY:Number = ball_mc.y;
// initialise end points to a number
var endX:Number = 400;
var endY:Number = 300;
// declare and initialise counter
var i:Number = 0;
//
// moveBall function
function moveBall(event:Event):void
{
	// we want to run the function ten times
	// check if counter is less than ten
	if(i < 10)
	{
		// move ball
		ball_mc.x += (endX - startX)/ 10;
		ball_mc.y += (endY - startY) / 10;
	}
	else
	{
		myTimer.stop();	
		// trace end position
		//trace(ball_mc.x);
		//trace(ball_mc.y);
	}
	// increment counter 
	i++;
}

The code above will move the ball to the position (400,300). If we want to make the ball slower then you can test the counter to see if it has reached the number 20 and then halve the amount the ball moves in each loop. So these lines would appear thus:

// ....
if(i < 20)
{
	ball_mc.x += (endX - startX) / 20;
	ball_mc.y += (endY - startY) / 20;
}	
// ...

Another way to slow it down would be to change the timer increment so that instead of it running every forty milliseconds it will run every eighty milliseconds. Like so:

var myTimer:Timer = new Timer(80);

So there are numerous ways that this animation can be slowed down or speeded up. You can change the amount that the ball moves every tick of the timer or you can change the amount the timer ticks over at. You can also change the number 10 or 20 to a variable called speed and then you only have to change it once when it is initialised:

 //..
 var speed:Number = 20;
 // ...
 if(i < speed)
 {
	ball_mc.x += (endX - startX) / speed;
	ball_mc.y += (endY - startY) / speed;
	// ..	 
 }
 

Flash CS3 Resources

.

AS2.0 Vector and Enumerator class

These classes are used in Flash MX2004. They mimic the Java Vector and Enumeration classes. The Vector class sort of extends the Array class/type. It makes an array which is dynamically extendable. And provides methods for accessing and searching the Vector.

I have called the class MyVector because I already have a Vector class which is used for 3D vertices.These classes are also fairly similar to the C++ STL templates of Vector and Iterator (??).M The Vector class was adapted from a JVector class in C++ by Michael Olivero from mike95.com.So this class has done a very circuitous route from Java, to C++ and hence to Actionscript 2.0.

Note for Actionscript 1.0 luddites, this and any other class can be very easily adapted to AS1 by just changing the methods to prototypes and the class name to a function. It is that simple. .
Anyway , here is the MyVector class :

class MyVector {
	// mimics Java Vector class
	// and the C++ STL Vector 
	//  Author: Michael Olivero
	//  Email:  mike95@mike95.com
	//  adapted to AS2 by steve happ 
	// 7/3/04
	//	====================================
	// 	------	MEMBER VARIABLES		//
	//	================================
	var m_size:Number;
	var m_capacity:Number; 	// initial capacity
	var m_increment:Number;
	var m_pData:Array;
	//=============================
	//		 constructor
	//=============================
	function MyVector(initialCapacity, capacityIncrement:Number) {
		m_size = 0;
		m_capacity = initialCapacity;
		m_pData = new Array(m_capacity);
		m_increment = capacityIncrement;
	}
	//	-------	CAPACITY	----	//
	function capacity():Number {
		return m_capacity;
	}
	//	-----	CONTAINS	--------//
	function contains(elem):Boolean {
		for (var i = 0; i<m_size; i++) {
			if (m_pData[i] == elem) {
				return true;
			}
		}
		return false;
	}
	//	-------	COPY INTO	------	//
	function copyInto(array:Array):Void {
		for (var i = 0; i<m_size; i++) {
			array[i] = m_pData[i];
		}
	}
	//	-------		ELEMENT AT	----	//
	function elementAt(index:Number) {
		//verifyIndex(index);
		return m_pData[index];
	}
	//	-----	FIRST ELEMENT	---	//
	function firstElement() {
		if (m_size == 0) {
		trace("MyVector.firstElement - array is empty");
		}
		return m_pData[0];
	}
	// ---------- INDEX OF	--------//
	function indexOf(elem):Number {
		for (var i = 0; i<m_size; i++) {
			if (m_pData[i] == elem) {
				return i;
			}
		}
		return -1;
	}
	// -------	IS EMPTY	-------------//
	function isEmpty():Boolean {
		return m_size == 0;
	}
	//	------	LAST ELEMENT	--------//
	function lastElement() {
		if (m_size == 0) {
			trace("MyVector.lastElement - its empty");
		}
		return m_pData[m_size-1];
	}
	//	--------	LAST INDEX OF	------//
	function lastIndexOf(elem):Number {
		//check for empty vector
		if (m_size == 0) {
			return -1;
		}
		var i = m_size;
		do {
			i -= 1;
			if (m_pData[i] == elem) {
				return i;
			}
		} while (i != 0);
		return -1;
	}
	//	----------	SIZE	----------//
	function size():Number {
		return m_size;
	}
	//	------	ADD ELEMENT	--------//
	function addElement(obj) {
		if (m_size == m_capacity) {
			ensureCapacity(m_capacity+m_increment);
		}
		m_pData[m_size++] = obj;
		
	}
	//	-------	ENSURE CAPACITY	------	//
	function ensureCapacity(minCapacity:Number):Void {
		if (minCapacity>m_capacity) {
			var i;
			m_capacity = minCapacity;
			var temp = new Array[m_capacity]();
			//copy all the elements over upto newsize
			for (i=0; i<m_size; i++) {
				temp[i] = m_pData[i];
			}
			delete m_pData;
			m_pData = temp;
		}
	}
	// 	-------	INSERT ELEMENT AT	-------	//
	function insertElementAt(obj, index) {
		if (index == m_size) {
			addElement(obj);
		} else {
			verifyIndex(index);
			//this will throw if true
			if (m_size == m_capacity) {
				ensureCapacity(m_capacity+m_increment);
			}
			var newItem = obj;
			//pointer to new item
			var tmp;
			//temp to hold item to be moved over.
			for (var i = index; i<=m_size; i++) {
				tmp = m_pData[i];
				m_pData[i] = newItem;
				if (i != m_size) {
					newItem = tmp;
				} else {
					break;
				}
			}
			m_size++;
		}
	}
	//	-------	REMOVE ALL ELEMENTS	-------	//
	function removeAllElements() {
		//avoid memory leak
		for (var i = 0; i<m_size; i++) {
			delete m_pData[i];
		}
		m_size = 0;
	}
	function removeElement(obj) {
		for (var i = 0; i<m_size; i++) {
			if (m_pData[i] == obj) {
				removeElementAt(i);
				return true;
			}
		}
		return false;
	}
	//	-------	REMOVE ELEMENT AT	-------	//
	function removeElementAt(index) {
		verifyIndex(index);
		delete m_pData[index];
		for (var i = index+1; i<m_size; i++) {
			m_pData[i-1] = m_pData[i];
		}
		m_pData[i];
		m_size--;
	}
	//	---------	SET ELEMENT AT	-----	//
	function setElementAt(obj, index) {
		verifyIndex(index);
		m_pData[index] = obj;
	}
	// --------	SET SIZE	----------	//
	function setSize(newSize:Number) {
		if (newSize>m_capacity) {
			ensureCapacity(newSize);
		} else if (newSize<m_size) {
			for (var i = newSize; i<m_size; i++) {
				delete m_pData[i];
			}
			m_size = newSize;
		}
	}
	//
	function trimToSize() {
		if (m_size != m_capacity) {
			var temp = new Array[m_size]();
			var i;
			for (i=0; i<m_size; i++) {
				temp[i] = m_pData[i];
			}
			delete m_pData;
			m_pData = temp;
			m_capacity = m_size;
		}
	}
	//	--------	MIN	-------------	//
	function min(left, right:Number):Number {
		return left<right ? left : right;
	}
	//	---------	VERIFY INDEX	------	//
	function verifyIndex(index:Number) {
		if (index>=m_size) {
			trace("MyVector.verifyIndex - is too big");
		}
	}
}

MyVector Usage

Here is an example of how the MyVector class can be used. So here is my test fla.
Try it out and write your own test code…

var m1 =1;
var m2 = 2;
var m3 = 3;
var m4 = 4;
var v1:MyVector = new MyVector(10,10);
trace(v1.capacity());
v1.addElement(m1);
v1.addElement(m2);
v1.addElement(m3);
v1.addElement(m4);
v1.addElement(5);
v1.addElement(6);
v1.addElement(4);
if(v1.contains(m3)) trace("v1 contains m3");
trace(v1.elementAt(2));
var copyto = new Array();
v1.copyInto(copyto);

for(var i=0;i<copyto.length;i++){
	trace(i +" = " + copyto[i]);
}

//	--------	first element	-----	//
trace("First element = "+ v1.firstElement());
trace("index of m3 = " + v1.indexOf(3));
trace(v1.isEmpty());
trace("last element is "+v1.lastElement());
trace("last index of " + v1.lastIndexOf(4));
v1.insertElementAt(0,0);
trace(v1.firstElement()+" = first Element");	
//		remove element at index no.
v1.removeElementAt(7);
trace(v1.lastElement());
v1.setElementAt(7,7);
trace(v1.lastElement());
v1.setSize(6);
trace(v1.size());
trace(v1.lastElement()+" = last ");
trace(v1.min(m2,m3));
v1.verifyIndex(24);
//////////////////////////////
//	Enumerator
/////////////////////////////
var enum = new Enumerator(v1);

trace(enum.getElement(4));
//trace(enum.getNextElement());
//trace(enum.getNextElement());
//trace(enum.getNextElement());

//
while(enum.hasMoreElements()){
	trace(enum.getNextElement());
}

Enumerator class

This is a rip of the Java Enumeration class. It is pretty self explanatory . See the above test code for usage.

class Enumerator {
	// mimics Java's Enumeration class 
	// members
	 var currentElement:Number;
	 var target:MyVector;
	// constructor
	public function Enumerator(ptarget:MyVector) {
		currentElement = 0;
		target = ptarget;
	}
	public function hasMoreElements():Boolean {
		return (currentElement < target.size());
	}
	function getElement(index:Number):Object {
		return target.elementAt(index);
	}
	public function getNextElement() {
		return hasMoreElements() ? 
			getElement(currentElement++) : null;
	}
	
}

Java Animation

Posted on May 17, 2014

Java Animation

In a for loop draw an object with moving x or y coordinates.
use the delay(time) function to animate.
use clearDrawing as well.
Here is an example. Imagine it is an alien coming toward you .

	void main()
	{
	setColor(red);
	for(int count = 0 ; count < 50; count++)
	{
		fillCircle(150, count*5, 50);
		delay(0.1);
		clearDrawing();
	}
	}

Try it without clearDrawing() by commenting out that line. e.g.

	//clearDrawing();

Notes on Above Java Code

  1. Set the color of the drawing object
  2. Do a loop for 50 times
  3. Draw a filled circle. The X coordinate (150 ) will stay constant, as it needs to only move down, not across. The Y co-ordinate will increase by 5 (count*5) each time the loop goes round(iterates).
    If count = 0 , then y = count * 5 = 0 * 5 = 0 , Add 1 to count
    if count = 1 , then y = count * 5 = 1 * 5 = 5 , add 1 to count
    if count = 2 , then y = count * 5 = 2 * 5 = 10 , add 1 to count
    So you can see that y increases by 5 every time the loop goes round, until count = 49. Then y will equal 49 * 5 = 245 .
  4. delay(0.1) – stops the program executing for a tenth of a second.
  5. clearDrawing() – clears the screen so you only see that frame being painted
Page 1 of 11