1. Home
  2. Computing & Technology
  3. Animation

Deconstructing the Paint Application VI: The Gradient Rectangle Tool

By Adrien-Luc Sanders, About.com

6 of 8

Understanding beginGradientFill

First let’s look at the part that actually draws the gradient rectangle, and most importantly the begingradientfill() function; then we can look at breaking down the parts that fit into it.
if (_root.isactive=="gradientrec"){
_root.layer.lineStyle(0,_root.currentcolor,0);
_root.layer.moveTo(_root.linex,_root.liney);
_root.layer.beginGradientFill("linear", _root.layer.colors, _root.layer.alphas, _root.layer.ratios,_root.layer.matrix);
_root.layer.lineTo(_root.linex,_root._ymouse);
_root.layer.lineTo(_root.linex,_root.liney);
_root.layer.lineTo(_root._xmouse,_root.liney);
_root.layer.lineTo(_root._xmouse,_root._ymouse);
_root.layer.lineTo(_root.linex,_root._ymouse);
_root.layer.endFill();
_root.rectracker.clear();
}
Broken down like this, it looks almost exactly like [link url=http://animation.about.com/od/flashanimationtutorials/ss/paintapp5_3.htm]the code to draw the solid rectangle

- only instead of using beginFill, it uses beginGradientFill and many more parameters.

beginGradientFill takes the following format:

myMovieClip.beginGradientFill (fillType, colors, alphas, ratios, matrix)

fillType can only be one of two: linear, or radial. Colors, alphas, and ratios are all arrays, containing the values for the gradient colors (usually in hexadecimal format), the values for the opacities (usually numeric), and the ratios (values defining the color distribution and where each color is at 100%, usually numeric). You’ll notice each addendum says “usually”. In ours, we use variables, the reason that we had to parse our strings into numeric values in the previous steps.

The last part, the matrix, is a transformation matrix that defines the properties of the rectangle drawn.

Explore Animation
About.com Special Features

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Easy ways to connect two computers for networking purposes. More >

  1. Home
  2. Computing & Technology
  3. Animation
  4. Flash Animation Tutorials
  5. Deconstructing the Paint Application VI: The Gradient Rectangle Tool

©2009 About.com, a part of The New York Times Company.

All rights reserved.