Links to Flash8 examples

[transit media]

Check out some examples and techniques for Flash 8.
T Tutorials

View site with intro transit-media.com

[Lin Evans]

Notes on On2 Technologies Flix Pro - the good and bad of it in my experience:

With a little help from many testers across the web I've finally got a demo working correctly using Flix Pro. The original slideshow test file was created with a PC and ProShow Gold. The file was output as an MPG then converted via Flix Pro to a Flash 8 FLV movie at 640x480 screen display size and a 512K bps bitrate with audio.

The up side of Flix Pro with Flash 8 is that it produces a very good quality video at very low bitrates vis a vis earlier Flash implementations. Formerly I used Riva Producer Lite to create similar quality output but it took nearly three times the bitrate and four times the file size to create similar quality. This made web play quite problematic. The Flash 8 implementation is very good with VP-6.

The Flix Pro user interface is fairly easy to understand, but there are some serious "niggles" about it which need attention in later revisions. In order to use Flash 8 the "client" side (the viewer over the web) must have the Flash 8 player installed on their computer. So to avoid issues a Flash Detection pop-up is desired. The Flix Pro software can create this, but unfortunately only for an SWF export. Obviously, with the 16,000 frames per instance limitation of SWF and the issues with syncing video beyond two minutes, most who produce video slideshows will prefer the progressive or "spooling" advantages of FLV as well as the ability to keep sound perfectly in sync throughout. So FLV export is a very important feature of Flix Pro.

The only way I could figure out a way to export the Flash Detection pop-up html file was to create a "dummy" SWF export with the same file names and player dimensions as the FLV export. Then erase the "dummy" SWF and port the created Flash Detection pop-up to the web along with the SWF shell for the FLV player. This is a rather "kludge" way IMHO and On2 Technologies needs to remedy this. Only a few lines of code would be necessary to "fix" this in their software. I found their technical support to be very willing to help, but not terribly proficient at explaining this issue which I had to dope out on my own primarily by trial and error.

The Flash Detection pop-up contains Java code which first determines whether the client side computer has the proper Flash implementation then either provides a rather cryptic "Flash Required" link which ports the browser to the Macromedia site for Flash 8 download or launches the SWF shell which in turn launches the FLV movie. There are a couple issues with this. First, it assumes that the client has Java enabled. Not necessarily a valid assumption. Then rather than providing an elegant explanation about what needs to be done (install a proper Flash player) - it simply leaves the visitor looking a very cryptic "Flash Required" text message which also proves to be the link. This could use some serious revision.....

There are many features and if one purchases the additional Powerplayer 8 players it's possible to customize some of them with you own "logo" by including a small SWF file which must be named "playerlogo.swf" On the example link provided, you will see the text "Lin Evans Photography" across the top of the player which was created with Wild FX Pro and saved as "playerlogo.swf". Just toss it in the same folder on your web site with the other files and all players having an "L" in the player name will pick it up and place it on the top left of your player. It can be text or a small "logo" or both I suppose.

Flix Pro also allows the user to implement optional preload buffering. This allows a selected percentage of the file to download before the movie begins and helps those with less bandwidth see better quality movies with greater bandwidth than would normally be possible. My sample uses 10% preload so that the client sees a "percent loaded" text until 10% of the file has been captured then spooling begins.

Click the link below to see the sample. This one has been tested on multiple PC's and MacIntosh systems and on a number of different browsers and seems to be pretty stable. The small amount of "jerkiness" you see when the first image scrolls to the right (from the body to the head of the jewelry bear) was in the original and not an artifact of the Flash implementation. Also a bit of jerkiness in the fast zoom out of the strawberry scene was part of the original. A bit of flicker on highly detailed images in pulse sync with the key frame about every three seconds is also normal and can't be avoided as far as I know. All in all a pretty nice improvement over earlier Flash implementations with excellent quality at lower bitrates and very good compression.

Link below:

http://www.lin-evans.net/flixtest/flixpopup.html

Lin

[dudeqwerty]

here's a few of mine.

Liquify Tool

Liquage

Perlin Displacement

Pixelation Tool (click and draw)

Animated Pixelation

Particle Fire Thingy (meh not very good)

[jAQUAN]

It's not so much bad documentation. New features in flash (ie. components) always tend to border on bloatware at first. They could have made them much easier. The FMP plugin is proof of that.

Great examples dudeqwerty, any chance of you posting where you learned that stuff or are you self taught?

[dudeqwerty]

thanks boys.

jAQUAN, im self taught and always have been, cant stand people trying to teach me their way of doing things.

as for the filters, the documentation is a little thin, but all you need is there, all you have to do is to apply some creativity. something which i find difficult myself.

[dudeqwerty]

a couple more:

Motion Blur Gallery (half a meg)

Bevel Blob

[Teseo]

Dinamic border detection images, text, fonts, etc. and fill shapes. Conversion and vectorize any image. Flash8.
http://www.cristalab.com/foros/viewtopic.php?t=23405
http://www.telecable.es/personales/t...circo%2006.swf

[dudeqwerty]

here's thet LiquifyFilter Class i said i was going to make:

edit: i have fixed the scope problems, and i have updated the usage example,

have fun!

// LiquifyFilter.as
/*
class created and owned by:

*****************************************
*            ****************************
**********   ****************************
*********   ******* * ********** * ******
********   ********   **********   ******
*******   *********   **********   ******
******   ******  Z++ inc. **           **
*****   ***********   **********   ******
****   ************   **********   ******
***   ************* * ********** * ******
**   ************************************
*   *************************************
*            ****************************
*****************************************

zlatan ->dot<- bratovic ->at<- gmail ->dot<- com
_________________________________________
*/
import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.geom.ColorTransform;
import flash.filters.BlurFilter;
class com.zlatan.LiquifyFilter {
	private var brush:MovieClip;
	private var innerBM:BitmapData;
	private var clip:MovieClip;
	private var filterMapBitmap:BitmapData;
	private var rect:Rectangle;
	private var zeroPoint:Point;
	private var blurFilter:BlurFilter;
	private var blurredMapBmp:BitmapData;
	private var displacementFilter:DisplacementMapFilter;
	private var down:Boolean;
	private var temp:Object;
	private var d_r:Number;
	private var g:Number;
	private var b:Number;
	public function LiquifyFilter(linkage:String, width:Number, height:Number) {
		d_r = Math.PI/180;
		innerBM = new BitmapData(width, height);
		clip = _root.createEmptyMovieClip("clip", _root.getNextHighestDepth());
		filterMapBitmap = new BitmapData(width, height, false, 0x808080);
		rect = new Rectangle(0, 0, width, height);
		zeroPoint = new Point(0, 0);
		blurFilter = new BlurFilter(8, 8, 2);
		blurredMapBmp = filterMapBitmap.clone();
		displacementFilter = new DisplacementMapFilter(blurredMapBmp, zeroPoint, 2, 4, 100, 100, "clamp");
		down = false;
		brush = buildBrush(45);
		brush._visible = false;
		innerBM.draw(BitmapData.loadBitmap(linkage));
		clip.attachBitmap(innerBM, clip.getNextHighestDepth());
		temp = new Object();
	}
	private function buildBrush(r:Number):MovieClip {
		var toReturn:MovieClip = _root.createEmptyMovieClip("brush", 100000000000);
		toReturn.beginGradientFill("radial", [0x00FF00, 0xFFFFFF], [100, 0], [110, 255], {matrixType:"box", x:-r, y:-r, w:r*2, h:r*2, r:0});
		toReturn.moveTo(Math.cos(0)*r, Math.sin(0)*r);
		for (var z = 1; z<=360; z++) {
			toReturn.lineTo(Math.cos(z*d_r)*r, Math.sin(z*d_r)*r);
		}
		toReturn.endFill();
		return toReturn;
	}
	public function startLiqufiy():Void {
		down = true;
		temp = {x:_xmouse, y:_ymouse};
	}
	public function endLiquify():Void {
		down = false;
	}
	public function liquificate() {
		liquification();
	}
	private function liquification():Void {
		if (down) {
			brush._x = _xmouse;
			brush._y = _ymouse;
			g = 128+Math.min(121, Math.max(-128, -(_xmouse-temp.x)*2));
			b = 128+Math.min(121, Math.max(-128, -(_ymouse-temp.y)*2));
			var ct:ColorTransform = new ColorTransform(0, 0, 0, 1, 128, g, b, 0);
			temp = {x:_xmouse, y:_ymouse};
			filterMapBitmap.draw(brush, brush.transform.matrix, ct, "hardlight");
			blurredMapBmp.applyFilter(filterMapBitmap, rect, zeroPoint, blurFilter);
			clip.filters = [displacementFilter];
		}
		updateAfterEvent();
	}
	public function erasing() {
		clearLiquify();
	}
	private function clearLiquify():Void {
		if (down) {
			temp = {x:_xmouse, y:_ymouse};
			brush._x = _xmouse;
			brush._y = _ymouse;
			var nct:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);
			nct.rgb = 0x808080;
			filterMapBitmap.draw(brush, brush.transform.matrix, nct, "normal");
			blurredMapBmp.draw(brush, brush.transform.matrix, nct, "normal");
			blurredMapBmp.applyFilter(filterMapBitmap, rect, zeroPoint, blurFilter);
			clip.filters = [displacementFilter];
			updateAfterEvent();
		}
	}
	public function reset():Void {
		filterMapBitmap.fillRect(rect, 0x808080);
		blurredMapBmp.fillRect(rect, 0x808080);
		blurredMapBmp.applyFilter(filterMapBitmap, rect, zeroPoint, blurFilter);
		clip.filters = [displacementFilter];
	}
}

zlatan

[jAQUAN]

That FKing kicks ass dude! I'm going to have to study it for a bit to see how you did it. Very well writen.

[dudeqwerty]

me again,

got a bitmapData resizing algorithm for ya

view it here

and the fla is here

the main part of the script is a modification of the bitwise left shift operator (<<)

it works like this:

function bitwiseLeftShift(a, b) {
	return int(a/(.5/b));
}

i modified it to:

function pixelShift(a, b) {
	return int(a/(b/1));
}

the reason i used this method ( apart from the fact i dont know any other image resizing algorithms, yet ) is i was playing around with setPixel and i realised if you <<'d the pixels by one it would down scale the image by 2^n.
so i made a little trace table of different values <<'d by 1, 2, 3..... then i worked out the formula from there.

will probably be usfull to some ppl,

zlatan

p.s. with bigger images like the one in the example, a scale factor of more than 3 will crash most ppl machines

[dudeqwerty]

hi, me AGAIN....

i Really liked how this experiment turned out so i thought i'd share it with you;

check it out

using a modified 3D engine, i used perlin noise on a bitmapData to calculate the z co-ordinates for the particles.

let me know what you think,

zlatan

edit: here is a version with random letters, the speed is ok but could be better, the frame rate of both example is only 35fps

edit 2: ok, i have really tidied up the code in this example, its MUCH more efficient now, still a little slow on the server tho

[jAQUAN]

you're way beyond me now dude. Someday I'll have time to study the bitmap class and when I do I coming here first.

[dudeqwerty]

its quite simple when you figure it out.

heres a simplified explanation:

the displacment filter map works with colour values, bluey colours shift the pixels up, greeny colours shift the pixels left, redish purple right and yellowy browns down,

if you go on the original liquify tool link i posted up, if you press "s" it will show you the colours you are drawing on a buffer bitmap with supply the colour data for the displacment filter. (press "h" to hide it again)

so its just a matter of getting flash to "draw" the right colours according to mouse movement.

zlatan

[jAQUAN]

the displacment filter map works with colour values, bluey colours shift the pixels up, greeny colours shift the pixels left, redish purple right and yellowy browns down

That sentence alone probably saved me a couple hours of trial and error.

[dudeqwerty]

some more 3d for you, gotta admit i stole the idea from senocular, but i'd say mines more functional.

http://zlatan.surfimpress.co.uk/pictureCube.html (600+ KB)

im undecided as whether or not to release the source, what d'yall think?

zlatan

[slinx]

Well I for one would appreciate it!

[steve1312]

dudeqwerty,

I have been trying to get your "LIQUIFY.as" to function but cannot.
I downloaded the ZIP file and placed your AS CODE in a '.AS' file called "LiquifyFilter.as" but it doesn't work . . .can you send along some advice.

Thanks!

[dudeqwerty]

slinx here is the code for the flash 8 version, and believe it or not the code for a flash 7 version!

flash 8:

import flash.geom.Matrix;
var af:Object = {x:0, y:0, rd:3000, e:5, c:0, t:0, sl:300};
var points:Array = [{x:-(af.sl/2), y:-(af.sl/2), z:-(af.sl/2)}, {x:(af.sl/2), y:(af.sl/2), z:-(af.sl/2)}, {x:-(af.sl/2), y:(af.sl/2), z:-(af.sl/2)}, {x:-(af.sl/2), y:-(af.sl/2), z:(af.sl/2)}, {x:(af.sl/2), y:-(af.sl/2), z:(af.sl/2)}, {x:(af.sl/2), y:(af.sl/2), z:(af.sl/2)}];
var pos:Array = [{x:-1, y:-1}, {x:-1, y:0}, {x:-2, y:-2}, {x:-3, y:0}, {x:0, y:2}, {x:-2, y:1}];
_root.createEmptyMovieClip("cont", _root.getNextHighestDepth())._x=Stage.width/2, cont._y=Stage.height/2;
for (var z = 1; z<=6; z++) {
	addClick(cont.createEmptyMovieClip("f"+z, z).createEmptyMovieClip("cont", 0).attachMovie("pic"+z, "b"+z, 0));
}
function flatten(p:Array, r:Object):Array {
	var toReturn:Array = new Array();
	for (var z = points.length; z--; ) {
		toReturn.unshift({x:Math.cos(r.z)*(Math.sin(r.y)*(Math.sin(r.x)*p[z].y+Math.cos(r.x)*p[z].z)+Math.cos(r.y)*p[z].x)-Math.sin(r.z)*(Math.cos(r.x)*p[z].y-Math.sin(r.x)*p[z].z), y:Math.sin(r.z)*(Math.sin(r.y)*(Math.sin(r.x)*p[z].y+Math.cos(r.x)*p[z].z)+Math.cos(r.y)*p[z].x)+Math.cos(r.z)*(Math.cos(r.x)*p[z].y-Math.sin(r.x)*p[z].z)});
	}
	return toReturn;
}
function renderFace(clip:MovieClip, a:Object, b:Object, c:Object):Void {
	clip._visible = !(((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)<0) ^ (a.x<=b.x == a.x>c.x));
	if (!clip._visible) {
		return;
	}
	clip.transform.matrix = new Matrix((a.x-b.x)/clip.cont._width, (a.y-b.y)/clip.cont._width, (c.x-b.x)/clip.cont._height, (c.y-b.y)/clip.cont._height, b.x, b.y);
}
onMouseMove = function () {
	af.c = 0;
	delete af.t.onEnterFrame, Mouse.show();
};
cont.onEnterFrame = function() {
	if (Key.isDown(Key.UP)) {
		af.x -= .03, af.c=1, delete af.t.onEnterFrame;
	}
	if (Key.isDown(Key.DOWN)) {
		af.x += .03, af.c=1, delete af.t.onEnterFrame;
	}
	if (Key.isDown(Key.LEFT)) {
		af.y += .03, af.c=1, delete af.t.onEnterFrame;
	}
	if (Key.isDown(Key.RIGHT)) {
		af.y -= .03, af.c=1, delete af.t.onEnterFrame;
	}
	if (!af.c) {
		af.y -= this._xmouse/af.rd, af.x += this._ymouse/af.rd;
	}
	var pp:Array = flatten(points, {x:af.x, y:af.y, z:0});
	renderFace(cont.f1, pp[2], pp[0], pp[3]), renderFace(cont.f2, pp[5], pp[1], pp[2]), renderFace(cont.f3, pp[0], pp[2], pp[1]), renderFace(cont.f4, pp[4], pp[3], pp[0]), renderFace(cont.f5, pp[3], pp[4], pp[5]), renderFace(cont.f6, pp[1], pp[5], pp[4]);
};
function addClick(clip:MovieClip):Void {
	clip.onPress = function() {
		Mouse.hide(), af.c=1, af.t=this;
		var ind:Number = (this._name.split("b").join(""))-1;
		this.onEnterFrame = function() {
			af.x += ((pos[ind].x*1.57)-af.x)/af.e;
			af.y += ((pos[ind].y*1.57)-af.y)/af.e;
		};
	};
}

.....

[dudeqwerty]

.........

flash 7:

var af:Object = {x:0, y:0, rd:3000, e:5, c:0, t:0, sl:300};
var points:Array = [{x:-(af.sl/2), y:-(af.sl/2), z:-(af.sl/2)}, {x:(af.sl/2), y:(af.sl/2), z:-(af.sl/2)}, {x:-(af.sl/2), y:(af.sl/2), z:-(af.sl/2)}, {x:-(af.sl/2), y:-(af.sl/2), z:(af.sl/2)}, {x:(af.sl/2), y:-(af.sl/2), z:(af.sl/2)}, {x:(af.sl/2), y:(af.sl/2), z:(af.sl/2)}];
var cont:MovieClip = _root.createEmptyMovieClip("cont", _root.getNextHighestDepth());
for (var p = 1; p<=6; p++) cont.createEmptyMovieClip("f"+p, p).attachMovie("pic"+p, "inner", 0), addClick(cont["f"+p]);
cont._x=Stage.width/2, cont._y=Stage.height/2;
function flatten(p:Array, r:Object):Array {
	var toReturn:Array = new Array();
	for (var z = points.length; z--; ) toReturn.unshift({x:Math.cos(r.z)*(Math.sin(r.y)*(Math.sin(r.x)*p[z].y+Math.cos(r.x)*p[z].z)+Math.cos(r.y)*p[z].x)-Math.sin(r.z)*(Math.cos(r.x)*p[z].y-Math.sin(r.x)*p[z].z), y:Math.sin(r.z)*(Math.sin(r.y)*(Math.sin(r.x)*p[z].y+Math.cos(r.x)*p[z].z)+Math.cos(r.y)*p[z].x)+Math.cos(r.z)*(Math.cos(r.x)*p[z].y-Math.sin(r.x)*p[z].z)});
	return toReturn;
}
function distance (pt1:Object, pt2:Object):Number {
	var dy:Number = pt2.y-pt1.y;
	var dx:Number = pt2.x-pt1.x;
	return Math.sqrt(dy*dy+dx*dx);
}
function skew(obj:MovieClip, pt0:Object, ptH:Object, ptW:Object):Void {
	var angleP2:Number = Math.atan2(ptW.y-pt0.y, ptW.x-pt0.x);
	var angleP1:Number = Math.atan2(ptH.y-pt0.y, ptH.x-pt0.x);
	var dAngle:Number = (angleP1-angleP2)/2;
	var arm:Number = Math.sqrt(2)/2/Math.cos(dAngle);
	obj._x = pt0.x, obj._y = pt0.y, obj._yscale = 100;
	obj._rotation = (180/Math.PI)*(angleP1-dAngle);
	obj.inner._rotation = -45;
	obj._yscale = 100*Math.tan(dAngle);
	obj.inner._xscale = distance(ptW, pt0)*100/arm/af.sl;
	obj.inner._yscale = distance(ptH, pt0)*100/arm/af.sl;
}
function renderFace(clip:MovieClip, a:Object, b:Object, c:Object):Void {
	clip._visible = !(((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)<0) ^ (a.x<=b.x == a.x>c.x));
	if (!clip._visible) return;
	skew(clip, b, c, a);
}
onMouseMove = function(){ af.c = 0; delete af.t.onEnterFrame, Mouse.show(); };
cont.onEnterFrame = function() {
	if(Key.isDown(Key.UP)) af.x -= .03, af.c = 1, delete af.t.onEnterFrame;
	if(Key.isDown(Key.DOWN)) af.x += .03, af.c = 1, delete af.t.onEnterFrame;
	if(Key.isDown(Key.LEFT)) af.y += .03, af.c = 1, delete af.t.onEnterFrame;
	if(Key.isDown(Key.RIGHT)) af.y -= .03, af.c = 1, delete af.t.onEnterFrame;
	if(!af.c) af.y -= this._xmouse/af.rd, af.x += this._ymouse/af.rd; 
	var pp:Array = flatten(points, {x:af.x, y:af.y, z:0});
	renderFace(cont.f1, pp[2], pp[0], pp[3]), renderFace(cont.f2, pp[5], pp[1], pp[2]), renderFace(cont.f3, pp[0], pp[2], pp[1]), renderFace(cont.f4, pp[4], pp[3], pp[0]), renderFace(cont.f5, pp[3], pp[4], pp[5]), renderFace(cont.f6, pp[1], pp[5], pp[4]);
};
function addClick(clip:MovieClip):Void {
	clip.onPress = function(){
		Mouse.hide(), af.c = 1, af.t = this;
		var ind:Number = (this._name.split("f").join(""))-1
		this.onEnterFrame = function(){
			af.x += (([{x:-1, y:-1}, {x:-1, y:0}, {x:-2, y:-2}, {x:-3, y:0}, {x:0, y:2}, {x:-2, y:1}][ind].x*1.57) - af.x)/af.e
			af.y += (([{x:-1, y:-1}, {x:-1, y:0}, {x:-2, y:-2}, {x:-3, y:0}, {x:0, y:2}, {x:-2, y:1}][ind].y*1.57) - af.y)/af.e
		}
	}
}

for each example you need to have the images in the library in the form of movieClips they should have the linkage names of "pic1" "pic2" "pic3" ...

the red part of the code is what you edit, it is the value for the slide length of your pictures, so if your pics are 200x200 px you change it to 200.

steve1312, this is because the class path is not correct as you arent putting the class in the right place, look in flash's help files about class paths, if you still cant get it to work come back here and i'll sort if for ya

zlatan

sorry about the 2 part post, didnt let me post it as one

[harrisonmulline]

hi
have you got any examples of how to get a movie clip button to stop on its rollover state after being pressed then go back to its up state after pressing another button
heres an example http://www.visiondigitalstudio.com/1/
thanks