There are no products in your shopping cart.
For those of you who don’t know who Tinic is, he is one of the masterminds behind the Flash Player. He and the rest of the development team are responsible for all of the cool new features coming in Flash Player 10. Tinic’s blog is a mandatory addition to your RSS reader as it is chock full of detailed information straight from the Flash team. In Tinic’s latest post he dispels a lot the myths behind some critic’s attacks on Flash Player performance. He also gives some excellent advice for Flash developers on things they can do to limit the amount of resources that Flash uses. Great stuff!
Lee
I just finished uploading a new tutorial that shows you the basics of getting started with Pixel Bender. This can be scary for people who don’t have a background in pixel shader programming (i.e. me). Over the last few days I have finally figured out enough to be able to record a tutorial on it. This is part 1 of 2 and it shows you how to create a couple of simple filters. Part 2 will show you how to export and load those filters into your Flash movies. Check it out at http://www.gotoandlearn.com.
Lee
Today I spent a few hours getting up to speed with Pixel Bender. It definitely has a steep learning curve but it is well worth the effort. Below you can check out my first creation called SquarePattern for lack of a better word. This filter essentially samples the current pixel as well as a different pixel and averages them out. Which pixel is dependent on the amount parameter. The result is a kind of crosshatch effect.
I was actually really excited earlier because I created a cool blur effect but I couldn’t export it to Flash because you can’t use for loops if the filter will be used in the player. Bummer! To do a blur, you essentially average a certain amount of pixels together. The number of pixels you average determines the strength of the blur. Oh well, I hope we add loops to Pixel Bender soon.
Click on the image below to see the filter in action. You must have Flash Player 10 RC installed to view it.
">The Pixel Bender code is below. I will be doing a tutorial on this very soon so don’t worry if it looks scary.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <languageVersion : 1.0;> kernel QuadBlur < namespace : "com.leebrimelow.filters"; vendor : "Lee Brimelow"; version : 1; description : "Creates a four-direction blur."; > { input image4 src; output pixel4 dst; parameter int amount < minValue:0; maxValue:100; defaultValue:0; >; void evaluatePixel() { pixel4 orig = sampleNearest(src, outCoord()); float2 pos = outCoord(); orig += sampleNearest(src, outCoord()-float2(cos(float(pos.x))*float(amount),0)); orig += sampleNearest(src, outCoord()-float2(sin(float(pos.y))*float(amount),0)); orig += sampleNearest(src, outCoord()-float2(0,cos(float(pos.x))*float(amount))); orig += sampleNearest(src, outCoord()-float2(0,sin(float(pos.y))*float(amount))); dst = orig/4.0; } }The ActionScript 3 code that I used to import the new shader is shown below. I left out the code for the throw slider as I’ve already shown that before.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var l:URLLoader = new URLLoader(); l.dataFormat = URLLoaderDataFormat.BINARY; l.addEventListener(Event.COMPLETE, onComplete); l.load(new URLRequest("squarepattern.pbj")); var shader:Shader; var filter:ShaderFilter function onComplete(e:Event):void { shader = new Shader(l.data); filter = new ShaderFilter(shader); image.filters = [filter]; addEventListener(Event.ENTER_FRAME, loop); } function onChange(p:Number):void { p *= 50; shader.data.amount.value = [p, p, p]; image.filters = [filter]; }You can download the PBJ file if you want this odd effect in your Flash movies.
Lee
That’s right we will be officially announcing the 4th version of the Creative Suite on September 23rd. Now before you get the wrong idea, this is NOT the release date but rather our official unveiling of it. You can register to view a special web broadcast that will take place on the 23rd. I highly recommend you check it out if you want to learn more. Get plenty of sleep now as you will have more new toys than you’ll know what to do with very soon.
Lee
Here is another class that I wrote thanks to this old tutorial. This is similar to the Arc class except that it draws wedges instead. These are great for doing lightweight charting stuff. You can get the code at my Google Code repository. The example below rapidly animates new wedge shapes creating a cool effect. You can click on the image below to check it out.
Below is the source code for the above example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 import com.leebrimelow.drawing.*; import com.leebrimelow.utils.*; var bmd:BitmapData = new BitmapData(600, 400, true, 0x000000); var bm:Bitmap = new Bitmap(bmd); addChild(bm); function createArc():void { var sp:MovieClip = new MovieClip(); sp.radius = Math2.random(20, 400); sp.endAngle = Math2.random(130, 400); sp.color = Math.random() * 0xFFFFFF; sp.count = 0; sp.filters = [new DropShadowFilter(10, 45, 0x000000, 0.5)]; sp.addEventListener(Event.ENTER_FRAME, loop); addChild(sp); } addEventListener(Event.ENTER_FRAME, loop); function loop(e:Event):void { var sp:MovieClip = e.target as MovieClip; sp.graphics.clear(); sp.graphics.beginFill(sp.color); sp.graphics.lineStyle(5, 0x000000); Wedge.draw(sp, 300, 200, sp.radius, sp.count, 0); sp.count += 20; if(sp.count > sp.endAngle) { sp.removeEventListener(Event.ENTER_FRAME, loop); bmd.draw(sp); removeChild(sp); sp = null; createArc(); } } createArc();Lee
It seems nowadays that there has been a resurgence of experimentation happening with Flash. Seeing Natzke’s generative art at Flash Forward and checking out Keith’s new book site has gotten me inspired to do more artistic experimentation.
One of the things that I have always wanted to do is to draw perfect arcs using the drawing API. After much research, I happened across this old tutorial on the Adobe site by Ric Ewing. It has a bunch of code samples in ActionScript 1.0 for doing a wide variety of drawing effects. I ported this code into an ActionScript 3.0 class named Arc. It contains a single static method called draw().
I have create a Google Code repository for any classes that write. At the moment it is pretty bare but I will be adding more soon. Check out the code and let me know if you have any questions.
Below is the source code for the above example. It uses the Arc class as well as one of the random functions from the Math2 class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 import com.leebrimelow.drawing.*; import com.leebrimelow.utils.*; var bmd:BitmapData = new BitmapData(550, 400, false, 0x000000); var bm:Bitmap = new Bitmap(bmd); addChild(bm); var t:Timer = new Timer(50); t.addEventListener(TimerEvent.TIMER, createArc); t.start(); function createArc(e:Event):void { var sp:MovieClip = new MovieClip(); sp.radius = Math2.random(50, 400); sp.sx = Math2.random(20, 500); sp.sy = Math2.random(20, 400); sp.thick = 2; sp.startAngle = Math2.random(20, 270); sp.endAngle = Math2.random(sp.startAngle, 360); sp.color = Math.random() * 0xFFFFFF; sp.count = 0; sp.filters = [new DropShadowFilter(0x000000)]; sp.addEventListener(Event.ENTER_FRAME, loop); addChild(sp); } function loop(e:Event):void { var sp:MovieClip = e.target as MovieClip; sp.graphics.clear(); sp.graphics.lineStyle(sp.thick, sp.color, 1, false, LineScaleMode.NORMAL, CapsStyle.NONE); Arc.draw(sp, 275, 200, sp.radius, sp.count, sp.startAngle); sp.count += 10; if(sp.count > sp.endAngle) { sp.removeEventListener(Event.ENTER_FRAME, loop); bmd.draw(sp); removeChild(sp); sp = null; } }The Arc class can form the basis of many different types of generative art and effects. It can also be helpful for building things like circular preloaders.
Lee