Innovation through Creation - Flash | PHP | HTML | XML | CSS | SQL - By Eliott Robson

Posts tagged Filters

AS3 Greyscale Filter

Apr21
2011 Leave a Comment Written by Eliott
This entry is part 26 of 25 in the series Effects And Filters Tutorial

Grey is gooooood

Anyway, to begin we need something to turn grey So go ahead and draw something, import something or generally just make something into a movie-clip within the AS3 flash document. Why not instance name it as “Object” or something…

Now, the fun bit:

1
2
3
4
5

import flash.events.MouseEvent;
import flash.display.MovieClip;
 
Object.addEventListener(MouseEvent.ROLL_OVER, makeGreyscale)
Object.addEventListener(MouseEvent.ROLL_OUT, makeColour)

So, when the Object movie-clip is rolled over with the mouse it triggers the makeGreyscale function and upon roll out the makeColour function is called.

1
2
3
4
5
6

function makeGreyscale(evt:MouseEvent){
	greyscale(Object)
}
function makeColour(evt:MouseEvent){
	colour(Object)
}

Here we simply pass into the function the arguments from the listener then call two more functions which will actually do the work.

1
2
3
4
5
6
7
8
9
10
11
12
13

function greyscale(Object:MovieClip){
	var b:Number = 1 / 3;
	var c:Number = 1 - (b * 2);
	var matrix:Array = [c, b, b, 0, 0,
		b, c, b, 0, 0,
		b, b, c, 0, 0,
		0, 0, 0, 1, 0];
	var matrixFilter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
	Object.filters = [matrixFilter];
}
function colour(Object:MovieClip){
	Object.filters = [];
}

And all in all you get:

Get Adobe Flash player
Posted in Actionscript, Flash, Tutorials - Tagged ,

The gradient glow filter

Sep02
2010 Leave a Comment Written by Eliott
This entry is part 25 of 25 in the series Effects And Filters Tutorial

The last of the filters which I promised to show you!

OK, let’s begin. You know the format!

1

import flash.filters.GradientGlowFilter
1

gradientGlow = new GradientGlowFilter(Distance, Angle, Colors, Alphas, Ratios, Blur X, Blur Y, Strength, Quality, Type, Knockout)

And as usual – you only need to edit some settings to get it to work. Considering this is very similar to the gradient bevel filter I have duplicated the parameters below making some minor changes!

Distance
The distance of the glow, this should be given as a number equating to pixels.

Angle
The angle of the glow, this should be given as a number between 0 and 360, if 0 is used then there is no offset and will have no effect on the glow.
READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged

The gradient bevel filter – part 2

Aug31
2010 2 Comments Written by Eliott
This entry is part 24 of 25 in the series Effects And Filters Tutorial

Let’s make a button

That’s what i’m talking about :)

Get Adobe Flash player

So, in order to do this make a button, mine is 175×50. And choose the colours for it to be (mine will be blue).

Now, the code – in the following code you should change the colour codes to represent the colour of your button!
READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged ,

The gradient bevel filter

Aug29
2010 Leave a Comment Written by Eliott
This entry is part 23 of 25 in the series Effects And Filters Tutorial

Like a bevel – but with gradients

As always, we need to import the API:

1

import flash.filters.GradientBevelFilter

And apply the parameters:

1

gradientBevel = new GradientBevelFilter(Distance, Angle, Colors, Alphas, Ratios, Blur X, Blur Y, Strength, Quality, Type, Knockout)

Most of these are described on the bevel filter, i have duplicated those below for ease of use (omitting the irrelevant values):

Distance
The distance of the bevel, this should be given as a number equating to pixels.

Angle
The angle of the bevel, this should be given as a number between 0 and 360, if 0 is used then there is no offset and will have no effect on the bevel.
READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged

The glow filter

Aug27
2010 Leave a Comment Written by Eliott
This entry is part 22 of 25 in the series Effects And Filters Tutorial

The glow filter

Let’s see:

1
2
3

import flash.filters.GlowFilter
glow = new GlowFilter([settings])
Object.filters = [glow]

Now – onto the parameters / settings!

Colour
The color of the glow in hexadecimal, search “hexidecimal” (no quotes) on this site to find a small auto generated selection of colours!

Alpha
The alpha transparency of the glow, it should be given as a number between 0 and 100.

blur X
The amount of horizontal blur, it should be given as a number between 0 and 255.
READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged

The drop shadow filter – part 2

Aug25
2010 Leave a Comment Written by Eliott
This entry is part 21 of 25 in the series Effects And Filters Tutorial

So, we’ve looked at the drop shadow filter:

Heres a short demo :)

(Mouse controlled – click into each of the segments to alter their variable)

Get Adobe Flash player
Posted in Actionscript, Flash, Tutorials - Tagged

The drop shadow filter

Aug23
2010 Leave a Comment Written by Eliott
This entry is part 20 of 25 in the series Effects And Filters Tutorial

One of the easiest filters

What is a drop shadow?
Adobe represents it as :

Which they display on their website.

Now, the filter:

The actual implementation is as simple as the rest…

1
2
3

import flash.filters.DropShadowFilter
dropShadow = new DropShadowFilter(15, 45, 0x000000, .8, 16, 16, 1, 3, false, false, false)
Object.filters = [dropShadow]

Simple, but it’s the parameters that really make a difference:

Distance
The offset distance for the shadow, in pixels.

Angle
The angle of the shadow.

Color
The color of the shadow.

Alpha
The alpha transparency value for the shadow color.

Blur X
The amount of horizontal blur.
READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged

Getting a 2d image to look at the mouse

Aug21
2010 Leave a Comment Written by Eliott

Getting a 2d image to look at the mouse!

Sounds complex, but not really – remember our last tutorial – that’s all the complex stuff we just need to add more!

Part 1 : setting up. I opened Poser, a 3d people modelling application and took a snapshot of Simon. A default character which i’ll be using.

I made some displacement maps and added his face to the center like this:

Man > Head > (SimonG2 Picture)
Displacement > (Displacement Map)

READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged

The displacement map filter – part 2

Aug19
2010 3 Comments Written by Eliott
This entry is part 19 of 25 in the series Effects And Filters Tutorial

Coding time

Last tutorial was probably boring for you, but now. We code. So add those movieclips we made last time to the stage. The background (checkered) and instance name it as “Background”, no quotes. Then drag the displacement on top, instance it as “Displacement”, no quotes.

Sorted, now in the timeline containing these movieclips (_root) open up the actions and take a look at this.

Ok, so like every filter so far – we need to import the right files:

1
2
3

import flash.filters.DisplacementMapFilter
import flash.display.BitmapData
import flash.geom.Point

Easy, now let’s begin setting some settings:

1
2
3
4
5
6

Displacement._visible = false
channel1 = 1
channel2 = 2
xMultiplier = 30
yMultiplier = 30
mode = "clamp"

These are all basic settings that we looked at last time… We also make the displacement map invisible so we can see what’s happening!

We also need to do the complex stuff…

1
2
3
4
5

offset = new Point(0, 0);
bmp = new BitmapData(500, 300)
displacementMap = new DisplacementMapFilter(bmp, offset, channel1, channel2, xMultiplier, yMultiplier, mode)
bmp.draw(Displacement)
Background.filters = [displacementMap]

Nothing too new, only the offset variable… This is just a coordinate from where to base the effect, by changing the numbers changers where the displacement will appear.

So, if you’ve done it properly you should have:

Get Adobe Flash player

And as usual, here’s the source:

  Displacement - CS4/CS5/CS5 Uncompressed Universal (90.8 KiB, 24 hits)

Posted in Actionscript, Flash, Tutorials - Tagged

The displacement map filter

Aug17
2010 1 Comment Written by Eliott
This entry is part 18 of 25 in the series Effects And Filters Tutorial

OOh, what’s this then

The displacement map filter, capable of displacing an image…

Let’s see what adobe says…

The DisplacementMapFilter class uses pixel values from a BitmapData object (known as the displacement map image) to perform a displacement effect on a new object. The displacement map image is typically different than the actual display object or BitmapData instance to which the filter is being applied. A displacement effect involves displacing pixels in the filtered image–in other words, shifting them away from their original location to some extent. This filter can be used to create a shifted, warped, or mottled effect.

And that’s what we’ll be doing, we’ll be creating a sphere effect which we will be able to put onto a globe or something similar.

Let’s begin, with how it will work:

Map point: The point on the image to be filtered where this is the top-left point. Only to be used if you want to only affect a certain area.

X component: Which colour channel on the displacement map affects the x position of pixels.

Color channels are :
Red: 1
Green: 2
Blue: 4
Alpha: 8

Y component: Which colour channel on the displacement map affects the y position of pixels.

X scale: How strong the x axis displacement is.

Y scale: How strong the y axis displacement is.

Filter mode: Determines what Flash Player should do in any empty spaces created by pixels being shifted away.

Display the original pixels: “ignore”
Wrap the pixels from the other side of the image: “wrap” (default)
Use the nearest shifted pixel: “clamp”
Fill with a colour: “colour”

If you select the “colour” option, you will need to specify the alpha and colour properties of the filter.

Sorted, now we shall begin experimenting…

Let’s firstly begin making our images, for the background i am using a pattern which i made:

Now the actual map, we need 3 elements to the map; the red, the green and the smoothing.

So, let’s take a look at one to make a sphere effect…
The red:

The green:

As you can see we are going to use the green channel as the Y component and the red as the X component. But we need to smooth it out,

This smooth part is just a rectangle filled with #808080 and with a circle of the same dimensions as the red and green components in the middle. This component looks like this,

The left-most point being 0% alpha, the middle one has 55% alpha and the right point has 100% alpha.

Ok, enough setting up – in two days we’ll begin coding the effect!

Posted in Actionscript, Flash, Tutorials - Tagged
123

Donate

Support the blog and help it survive.

Categories

Facebook