gradient

Dec 2, 2009

Moved the monolithic documentation to a multi-page hierarchical document that includes everything we had before plus many links, many terms attached to all pages (tags, English words.) And revision of most of the text for better English and clarification in some places.

Strengthen the formatting with CCK fields so all declarations look alike.

Broken up the actions from one large table to a set of pages.

It is possible in SWF to use gradient fills. The gradient definitions are pretty raw and require you to draw large objects (that you can scale down later if you wish). A radial fill will usually be used to draw a round corner or a big & smooth dot. A linear fill can be used to draw objects which go from one color to another. The linear fill goes from left to right by default. It can be rotation as required though. Yet, in either case what is drawn in the shape object needs to be at the right scale and in the right direction. This may not always prove easy to deal with!

/* the filter type */
struct swf_filter_type {
	unsigned char	f_type;
};

struct swf_filter_glow {
	swf_filter_type	f_type;		/* 0, 2, 3, 4 or 7 */
	if(f_type == GradientGlow || f_type == GradientBevel) {
		unsigned char		f_count;
	}
	else {
		f_count = 1;
	}
	swf_rgba		f_rgba[f_count];
	if(f_type == Bevel) {
		swf_rgba		f_highlight_rgba[f_count];
	}
	if(f_type == GradientGlow || f_type == GradientBevel) {
		unsigned char		f_position[f_count];
	}
	signed long fixed	f_blur_horizontal;
	signed long fixed	f_blur_vertical;
	if(f_type != Glow) {
		signed long fixed	f_radian_angle;
		signed long fixed	f_distance;
	}
	signed short fixed	f_strength;
	unsigned		f_inner_shadow : 1;
	unsigned		f_knock_out : 1;
	unsigned		f_composite_source : 1;
	if(f_type == Bevel) {
		unsigned		f_on_top : 1;
	}
	else {
		unsigned		f_reserved : 1;
	}
	if(f_type == GradientGlow || f_type == GradientBevel) {
		unsigned		f_passes : 4;
	}
	else {
		unsigned		f_reserved : 4;
	}
};

struct swf_filter_blur {
	swf_filter_type		f_type;	/* 1 */
	unsigned long fixed	f_blur_horizontal;
	unsigned long fixed	f_blur_vertical;
	unsigned		f_passes : 5;
	unsigned		f_reserved : 3;
};

struct swf_filter_convolution {
	swf_filter_type	f_type;		/* 5 */
	unsigned char	f_columns;
	unsigned char	f_rows;
	long float	f_divisor;
	long float	f_bias;
	long float	f_weights[f_columns × f_rows];
	swf_rgba	f_default_color;
	unsigned	f_reserved : 6;
	unsigned	f_clamp : 1;
	unsigned	f_preserve_alpha : 1;
};

struct swf_filter_colormatrix {
	swf_filter_type	f_type;		/* 6 */
	long float	f_matrix[20];
};

struct swf_any_filter {
	swf_filter_type			f_fitler_type;
	swf_filter_blur			f_filter_blur;
	swf_filter_colormatrix		f_filter_colormatrix;
	swf_filter_convolution		f_filter_convolution;
	swf_filter_glow			f_filter_glow;
};

A filter defines how to transform the objects it is attached to. The first byte is the filter type. The data following depend on the type. Because each filter is much different, they are defined in separate structures. You can attach a filter to an object using an ActionScript or the PlaceObject3 tag.

The following describes the different filters available since version 8.

struct swf_gradient_record {
	if(f_tag == DefineMorphShape || f_tag == DefineMorphShape2) {
		unsigned char	f_position;
		swf_rgba	f_rgba;
		unsigned char	f_position_morph;
		swf_rgba	f_rgba_morph;
	}
	else if(f_tag == DefineShape3 || f_tag == DefineShape4) {
		unsigned char	f_position;
		swf_rgba	f_rgba;
	}
	else {
		unsigned char	f_position;
		swf_rgb		f_rgb;
	}
};

The first record position should be 0 and the last 255. The intermediate should use the corresponding value depending on their position in the gradient effect.

struct swf_gradient {
	if(tag == DefineShape4) {
		unsigned		f_spread_mode : 2;
		unsigned		f_interpolation_mode : 2;
		unsigned		f_count : 4;
	}
	else {
		unsigned		f_pad : 4;
		unsigned		f_count : 4;
	}
	swf_gradient_record	f_gradient_record[f_count];
	/* f_type is defined in the swf_fill_style encompassing this gradient */
	if(f_type == 0x13) {
		signed short fixed	f_focal_point;
	}
};

This structure defines a gradient. This is a set of colors which are used to define an image with colors smoothly varying from one color to the next. The gradient can be radial (circular) or linear (rectangular).

The f_count field is limited depending on the tag used and the version of SWF as defined below:

Image & text at the top and bottom

The Cute Menu Module is all about making your menu look cute... This is achieved, in part, by the nice top bar, and a gradient in your dropdown. But what makes it even better are the images that you can make appear inside your menus.

There are two areas for that purpose: the Header and the Footer. Both are handled the same way, it is just a flag in your menu item that changes between one and the other.

This page explains how a graphics person can work with us to create a web design that will immediately work with Drupal 6.x and Drupal 7.x.