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/09/flash-8-bitmapdata-image-reflection.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(backgroundOb j, 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(fillT ype, 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._widt h, picture_mc._height/2);
picture_mc.gradientMask_mc.lineTo(picture_mc._widt h, 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.gradientM ask_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.
http://www.nssclan.org/km/TextOnSurface.png

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:

http://www.nssclan.org/km/PaperHQ_tn.png

or a folder
http://www.nssclan.org/km/folder_closed_small.png

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 :)