Text reflections

[HScott]

I need help how to make text reflection on shinny surface?

[blanius]

Couple of ideas.

1)Convert the text into a movieclip then duplicate it and flip it then open this second clip and add a rectangle over the text and apply a gradient fill will all white fills or what ever the background is then adjust transparency so it looks like a reflection.

2)Use flash 8 bitmapdata and create a copy and apply a matrix transform and then apply the bitmap data to the movieclip holding the text.

[blanius]

Here's some code from http://pixelfumes.blogspot.com/2005/...eflection.html
that you could adapt.

import flash.display.BitmapData;
import flash.geom.*;

var targetImgURL:String = "leaves.jpg";

//create the picture clip
this.createEmptyMovieClip("picture_mc",this.getNextHighestDepth());
picture_mc._visible = false;

//create the background
picture_mc.createEmptyMovieClip("background_mc",2);
var backgroundObj:BitmapData = new BitmapData(200, 200, false, 0x00FFFFFF);
picture_mc.background_mc.attachBitmap(backgroundObj, 1);

//create the image holder
this.picture_mc.createEmptyMovieClip("image_mc",3);
this.picture_mc.image_mc.loadMovie(targetImgURL);

//watch load
var loadWatch:Number = setInterval(checkLoad,200);

function checkLoad(){
	if(picture_mc.image_mc.getBytesLoaded() == picture_mc.image_mc.getBytesTotal() && picture_mc.image_mc.getBytesTotal() > 10 ){
		clearInterval(loadWatch);
		//size picture
		picture_mc.image_mc._width = 300;
		picture_mc.image_mc._height = 194;
		
		//size bg
		var padding:Number = 7;
		picture_mc.background_mc._width = picture_mc.image_mc._width + padding*2;
		picture_mc.image_mc._x = padding;
		picture_mc.background_mc._height = picture_mc.image_mc._height + padding*2;
		picture_mc.image_mc._y = padding;
		
		
		
		//create a bmp obj out of it
		var myBitmapData:BitmapData = new BitmapData(picture_mc._width, picture_mc._height, false, 0x00FFFFFF);
		myBitmapData.draw(picture_mc.image_mc);
		reflectPicture();
	}
}

function reflectPicture(){
	//get a copy of the image we loaded
	var myBitmapData:BitmapData = new BitmapData(picture_mc._width, picture_mc._height, false, 0x00FFFFFF);
	myBitmapData.draw(picture_mc);
	picture_mc.createEmptyMovieClip("reflect_mc",4);
	picture_mc.reflect_mc.attachBitmap(myBitmapData,1);
	picture_mc.reflect_mc._yscale = -100;
	picture_mc.reflect_mc._y = picture_mc._height;
	
	//create the gradient mask
	picture_mc.createEmptyMovieClip("gradientMask_mc",5);
	
	var fillType:String = "linear"
	var colors:Array = [0xFFFFFF, 0xFFFFFF];
	var alphas:Array = [100, 0];
	var ratios:Array = [0, 255];
	var matrix = {matrixType:"box", x:0, y:0, w:picture_mc._width, h:picture_mc._height/4, r:(90/180)*Math.PI};

	picture_mc.gradientMask_mc.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod); 
		
	picture_mc.gradientMask_mc.moveTo(0, 0);
	picture_mc.gradientMask_mc.lineTo(0, picture_mc._height/2);
	picture_mc.gradientMask_mc.lineTo(picture_mc._width, picture_mc._height/2);
	picture_mc.gradientMask_mc.lineTo(picture_mc._width, 0);
	picture_mc.gradientMask_mc.lineTo(0, 0);
	picture_mc.gradientMask_mc.endFill();
	
	picture_mc.gradientMask_mc._y = picture_mc._height/2;
	
	picture_mc.reflect_mc.cacheAsBitmap = true;
	picture_mc.gradientMask_mc.cacheAsBitmap = true;
	
	picture_mc.reflect_mc.setMask(picture_mc.gradientMask_mc);
	
	//slight skew
	//trans = new flash.geom.Transform(picture_mc);
	//trans.matrix = new flash.geom.Matrix(1,-.02,0,1,0,0);
	
	//blur reflection

	
	//do the final positioning and add drag
	picture_mc._x = 400/2 - picture_mc._width /2;
	picture_mc._y = 80
	picture_mc.image_mc.onPress = function(){
		this._parent.startDrag(false,0,0,400-picture_mc._width,400-picture_mc._height/2);
	}
	picture_mc.image_mc.onRelease = picture_mc.image_mc.onReleaseOutside = function(){
		stopDrag();
	}
	 picture_mc.reflect_mc._alpha = 10;
	picture_mc._visible = true;
}

blur = new flash.filters.BlurFilter(10, 10, 2);
picture_mc.reflect_mc.filters=[blur];
	
var checkboxListener:Object = new Object();
checkboxListener.click = function(evt_obj:Object) {
 if (evt_obj.target.selected) {
  picture_mc.reflect_mc.filters=[blur];
 } else {
  picture_mc.reflect_mc.filters=[];
 }
};
blur_ch.addEventListener("click", checkboxListener);


var listenerObject:Object = new Object();
listenerObject.change = function(eventObject:Object) {
    picture_mc.reflect_mc._alpha = eventObject.target.value;
};
num_nstep.addEventListener("change", listenerObject);

[HScott]

Thank you so much Bret.

[dniezby]

You can create the image you need in Gimp or some other type of graphics program without any code.

This is just a simply design to illustrate a point.


I create almost all of my graphical elements outside of KM and use KM to make it all work together.

Here are some other examples, I needed an old piece of paper so I made this:



or a folder


While KM is a VERY powerful alternative to flash, it does have it's limitations. Advanced imagery is one - if not the only - limitation that I have found.

[Stoke Laurie]

I create almost all of my graphical elements outside of KM and use KM to make it all work together.

I agree totally, I see Km as the theatre and I supply the backdrops.

[dniezby]

That is a great analogy.

[ant_Z]

I agree totally, I see Km as the theatre and I supply the backdrops.

what can I say? so... when i make some new layouts i use (almost) ONLY KoolMoves. Its so easy and clearly, and also powerful, that i use it almost all the time. Im making only "aqua" buttons outside KM. but it doesnt matter.

[xzerox_xzerox]

i use imageprograms like photoshop and cinema 4d and then save as a png to get the background transparent works fine with km