Extend randompaint

The easy extensibility of randompaint is the greatest advantage compared with other software. Macromedia Flash provides a set of fuctions to create, transform and dublicate objects very simple. In addition to that I developed an environment consisting of variables and functions for you to use the features of randompaint.
In this part of the randompaint help I will explain the randompaint Action Script functions you can use and show some interesting Action Script elements which may be interesting for you developing your funcitons.

Note: All functions and variables are accessed on the main time line using _root / _level0!

Structure:

  1. Variables
  2. Functions
  3. Example
  4. Action Script Elements

Variables

  1. paintvars.paintpath // movieclip
  2. paintvars.layers // number
  3. paintvars.counter // number
  4. paintvars.colors // array
  5. paintvars.red, paintvars.green, paintvars.blue // number
  6. paintvars.fill // boolean

1. paintpath

Description

Movieclip; a variable in which the movieclip, respecively the path to the movieclip you can paint on, is stored. It changes each time the selection of the layers changes.

Example

_root.paintvars.paintpath.moveTo(0, 0);
_root.paintvars.paintpath.lineTo(100, 100);
// draws a diagonal line from x0, y0 to x100, y100

2. layers

Description

Number; describes the amount of layers existing in the layer panel.

Hint: Using this variable might be interesting in combination with the function selectLayer(number).

Usage

var myLayers = _root.paintvars.layers;

3. counter

Description

Number; an incremental variable. After using the variable it is supposed to be incremented (++). This ensures that no movieclips are replaced due to elements loaded on the same depths.

Example

var myLevel = _root.paintvars.counter;
_root.paintvars.paintpath.loadMovie("paintmovie.swf", myLevel);
_root.paintvars.counter++;

4. colors

Description

Array; a list of colors of which elements can be accessed randomly, added and deleted. The colors are displayed on the randompaint interface.

Example

myColor = _root.paintvars.colors[random(_root.paintvars.colors.length)];
_root.paintvars.paintpath.lineStyle(1, myColor, 100);

5. red, green, blue

Description

Number; the decimal values of the color channels red, green and blue. These variables enable functions depending on color values.

Usage

_root.paintvars.red, _root.paintvars.green, _root.paintvars.blue

6. fill

Description

Boolean; functions using the curveTo or lineTo method use this variable if the user has the choice whether the painting shape should be filled or not.

Example

if(_root.paintvars.fill){ beginFill(myFillColor, 100) };

 

Functions

  1. paintfunctions.mouseDownFunction()
  2. paintfunctions.mouseUpFunction()
  3. controlfunctions.setColorRed(Number), setColorGreen(Number), setColorBlue(Number)
  4. controlfunctions.setVarX(Number), setVa(Number), setVarZ(Number)
  5. controlfunctions.getLayer()
  6. controlfunctions.selectLayer(Number)

1. mouseDownFunction

Usage

_root.paintfunctions.mouseDownFunction = function(){
   ... your mouse down function ...
}

Description

Function; this is the most important funciton which must be defined in the second frame of the plug-in file. It defines the paintfunction which is called each time the mouse button is pressed. Use the variables from above and the functions below to create you randompaint function.

Example

_root.paintfunctions.mouseDownFunction = function(){
     var myWidth = random(_root.paintvars.x);
     var myHeight = random(_root.paintvars.y);
     var myColor = _root.paintvars.colors[random(_root.paintvars.colors.length)];
     with(_root.paintvars.paintpaht){
		lineStyle(1, myColor, 100);
		moveTo(_xmouse - myWidth, _ymouse - myHeight);
		lineTo(_xmouse + myWidth, _ymouse + myHeight);
     }
}

2. mouseUpFunction

Usage

_root.paintfunctions.mouseUpFunction = function(){
   ... your mouse down function ...
}

Description

Function; defining the mouse up event. Mostly this will end up the paint function, like closing a shape etc. If there is no mouse up function required the function should be set null to avoid functions left from other plug-ins causing unwanted effects.

Example

_root.paintfunctions.mouseUpFunction = function(){
	null
}

3. setColorRed(Number), setColorGreen(), setColorBlue()

Usage

_root.controlfunctions.setColorRed(Number);

Description

Function; sets the color controller to the value Number. The controller may be set to any value between 0 and 255. Setting any of the color controller to another value causes the first color in the array to change instantly. The effect will be displayed on the randompaint interface (color panel and color palette).

Example

_root.controlfunctions.setColorRed(random(256));

4. setVarX(Number), setVarY(), setVarZ()

Usage

_root.controlfunctions.setVarX(Number);

Description

Function; sets the parameters controller to the value Number. The controller may be set to any value between 0 and 200. The effect of the changed value will differ from plug-in to plug-in.

Example

_root.controlfunctions.setVarX(random(201));

5. getLayer()

Usage

var myIndex = _root.controlfunctions.getLayer();

Description

Function; returns the index of the currently selected layer in the layers panel.

6. selectLayer(Number)

Usage

_root.controlfunctions.selectLayer(Number);

Description

Function; selects the layer in the layers panel with the index Number. The vairable paintvars.layers provides the amount of how many layers there are.

Example

myLayers = _root.paintvars.layers;
_root.controlfunctions.selectLayer(random(myLayers));

 

Explanation of the "line" Plug-in Function

The following part describes how a plug-in is built and how it works by the the example of the "line" plug-in.

Code of the Second Frame in the plugin.swf: 

_root.paintfunctions.mouseDownFunction = function(){
	myColor = _root.paintvars.colors[ random(_root.paintvars.colors.length) ];
	xpos = _root.paintvars.paintpath._xmouse;
	ypos = _root.paintvars.paintpath._ymouse;
	_root.paintvars.paintpath.moveTo(xpos, ypos);
	_root.paintvars.paintpath.onEnterFrame = function(){
		var x = random(_root.paintvars.x) - _root.paintvars.x / 2;
		var y = random(_root.paintvars.y) - _root.paintvars.y / 2;
		var line = _root.paintvars.z;
		with(_root.paintvars.paintpath){
			lineStyle(line, myColor, 100);
			lineTo(_xmouse + x, _ymouse + y);
		}
	}
}
_root.paintfunctions.mouseUpFunction = function(){
	delete _root.paintvars.paintpath.onEnterFrame;
}

Step by Step

Each part of the code above is explained seperately.

Code:

_root.paintfunctions.mouseDownFunction = function(){

Explanation:
The first line defines the path to the function which is triggered when the mouse button is pressed on the drawing area. This function / line is always the same in each paint plug-in.

Code:

	myColor = _root.paintvars.colors[ random(_root.paintvars.colors.length) ];
	xpos = _root.paintvars.paintpath._xmouse;
	ypos = _root.paintvars.paintpath._ymouse;

Explanation:
Variables are defined for use further down in the function. To define the first variable a color from the paintvars.colors array is picked randomly from the length of the array. The other two variables read the mouse x and y position. They are required to start the line from the right position.

Code:

	_root.paintvars.paintpath.moveTo(xpos, ypos);

Explanation:
moveTo sets the starting point of the lineTo(x, y) and curveTo(x, y) methods to the x and y coordinates in brackets in the targeted movie clip. Here the variables with the mouse coordinates are used from above.

Code:

	_root.paintvars.paintpath.onEnterFrame = function(){

Explanation:
onEnterFrame is a event handler which executes the defined function in the interval of the movie's frames per second (which is in this case 20fps). So the function is executet 20 times in a second. This makes it possible to paint, not click each time to create a new object.

Code:

		var x = random(_root.paintvars.x) - _root.paintvars.x / 2;
		var y = random(_root.paintvars.y) - _root.paintvars.y / 2;
		var line = _root.paintvars.z;

Explanation:
Variables are set with help of values from the parameter coltroller. They are used for the paint function as the distance between the mouse cursor and the point the line will be drawn to. The last variable (line) represents the thickness of the stroke.

Code:

		with(_root.paintvars.paintpath){
			lineStyle(line, myColor, 100);
			lineTo(_xmouse + x, _ymouse + y);
		}

Explanation:
In this code the lines are drawn now. The "with" statement just says where the paint functions take place. It is also possible to write "_root.paintvars.paintpath." in front of (nearly) each line. lineStyle specifies the appearence of the stroke. The last parameter is the _alpha value. Transperancy / values lower than 100 will not be printed correctily. At last the line is drawn to the mouse position plus the randomly defined values.

Code:

_root.paintfunctions.mouseUpFunction = function(){
	delete _root.paintvars.paintpath.onEnterFrame;
}

Explanation:
In this example the mouseUpFunction is very important. Here the onEnterFrame function defined with the mouseDownFunction is deleted again. If it was not deleted, it would not stop paintig. Deleting the function again is very easy with the delete operator.
You also my want to look it up in your Flash help.

 

Interesting Action Script Elements

The following links will referre to Macromedia livedocs, explaining each element.

Action Script Description
_height read and set height
_rotation read and set rotation
_width read and set width
_x read and set x position
_xmouse read mouse x position
_xscale read and set the width scaling
_y read and set y position
_ymouse read mouse y position
_yscale read and set the height scaling
Array() a list of variables
attachMovie() load a movieclip from the library
beginFill() fill a shape created with curveTo or lineTo with color
beginGradientFill() fill a shape created with curveTo or lineTo with a gradient
clear() clear a movie clip from painted shapes (lineTo / curveTo only)
createEmptyMovieClip() create an empty instance of a new movie clip
curveTo() draw a curved line
delete delete variables, functions, etc.
duplicateMovieClip() create a new instance of an existing movie clip
endFill() stop filling a drawn shape
for looping actions under a certain condition
for … in executes actions for each element in an object (e.g. movie clips)
if execute actions under certain conditions
lineStyle() set the appearance of the stroke for the lineTo and curveTo mehtods
lintTo() draw a straight line
loadMovieNum() load an external *.jpg or *.swf file on a level above the program
Mouse.addListener() execute functions on certain mouse events (mouse move …)
MovieClip class all movie clip methods, properties and handlers
MovieClip.loadMovie() load an external *.jpg or *.swf file into a movie clip
MovieClip.loadVariables() load plain text files
MovieClipLoader class extended possibilities to load images or swf files
onEnterFrame trigger actions continually at the movie frame rate
random() returns random numbers
setMask() mask an object with a movie clip
with() apply various actions to a movie clip

Note: Macromedia livedocs is the most current help database for Flash action script. Due to the changes made in new versions, the actions may not work in randompaint anymore!

 

Introduction : Download : Using randompaint : Extend randompaint : Colorstripping Tool
 
Drawing Area Variables Controller Color / Fill Panel RGB Mixer Pan Hand Drag Layer Print Button Layer Panel Plug-in Panel Color Import Color Palette Zoom Controller