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.

Dec 14, 2008

Started work on the Load() feature of the SSWF library. This helped fixing several small mistakes in the documentation.

May 18, 2008

Fixed the ...

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.

... Value Name Version 0 Drop Shadow 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:

struct swf_setbackgroundcolor {
	swf_tag			f_tag;		/* 9 */
	swf_rgb			f_rgb;
};

This tag is used to specify the background color. It should always be included at the start of every .swf file (after the FileAttributes and Protect tags). Only an RGB color can be used (i.e. there is no alpha channel for that color, whatever the SWF version.)

To create a Flash animation that's transparent (so we can see the website gradient, for example) you use the wmode parameter in the HTML tag with the value "transparent", in which case the background color will be ignored and replaced by a fully transparent background. For example:

<embed width="440"  ...

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.