Skip to content


[AS 3] Bevel Filter Animation

A simple animation that will load in an external image and by pressing your mouse over the image it will apply the a bevel using the BevelFilter class.

Here is the document class:

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
   	import flash.display.LoaderInfo;

	import flash.net.URLRequest;

	import flash.filters.BevelFilter;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BitmapFilterType;

   	import flash.events.Event;
   	import flash.events.ProgressEvent;
	import flash.events.MouseEvent;

	import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	public class BevelFilterDemo extends Sprite
	{
		private var loadStatus:TextField;
		private var myImg:Loader = new Loader();
		private var distance_ct:Number = 0;

		public function BevelFilterDemo()
		{
			init();
		}

		private function init():void
		{
			// get the preloader text box ready
			CreateTextField();

			// let's load the image
			try {
                myImg.load(new URLRequest("http://manewc.com/projects/flash/BevelFilter/gahlord.jpg"));
            } catch (error:Error) {
                loadStatus.text = "Unable to load requested document.";
            }

			myImg.contentLoaderInfo.addEventListener(Event.OPEN,open);
			myImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progress);
			myImg.contentLoaderInfo.addEventListener(Event.COMPLETE,result);
		}

		public function open(evt:Event):void
		{
			loadStatus.text = "Opening File";
       	}

		public function progress(evt:ProgressEvent):void
        {
			loadStatus.text = "loading: " + evt.bytesLoaded + " bytes out of " + evt.bytesTotal;
        }

		public function result(evt:Event):void
        {
			loadStatus.text = "Press your mouse over the image to change the bevel";
			addChild(myImg);
			myImg.y = loadStatus.height;
			myImg.x = (stage.stageWidth / 2) - (myImg.width / 2);

			// NOW GET THE IMAGE TO RUN THROUGH THE BEVEL EFFECT
			// stage.addEventListener(Event.ENTER_FRAME,changeBevel);

			addEventListener(MouseEvent.MOUSE_DOWN, ApplyChangeBevel);
			addEventListener(MouseEvent.MOUSE_UP, RemoveChangeBevel);

		}

		private function CreateTextField():void
		{
			loadStatus = new TextField();
            loadStatus.autoSize = TextFieldAutoSize.LEFT;
            loadStatus.background = false;
            loadStatus.border = false;

			var format:TextFormat = new TextFormat();
            format.font = "Arial";
            format.color = 0xffffff;
            format.size = 10;
            format.underline = false;

			loadStatus.defaultTextFormat = format;
            addChild(loadStatus);
		}

		private function ApplyChangeBevel(e:MouseEvent):void
		{
			stage.addEventListener(Event.ENTER_FRAME,changeBevel);
		}

		private function RemoveChangeBevel(e:MouseEvent):void
		{
			stage.removeEventListener(Event.ENTER_FRAME,changeBevel);
		}

		private function changeBevel(e:Event):void
		{

			// Create the bevel filter and set filter properties.
			var bevel:BevelFilter = new BevelFilter();
			bevel.distance = distance_ct;
			bevel.angle = 45;
			bevel.highlightColor = 0xff3300;
			bevel.highlightAlpha = 0.8;
			bevel.shadowColor = 0x666666;
			bevel.shadowAlpha = 0.8;
			bevel.blurX = 5;
			bevel.blurY = 5;
			bevel.strength = 5;
			bevel.quality = BitmapFilterQuality.HIGH;
			bevel.type = BitmapFilterType.INNER;
			bevel.knockout = false;

			// Apply filter to the image.
			myImg.filters = [bevel];

			if (distance_ct <= 20)
			{
				distance_ct++;
			}
			else
			{
				distance_ct = 0;
			}
		}
	}
}

Posted in Actionscript 3, Image Effects.


0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

or, reply to this post via trackback.