pixelbender | Kenneth Sutherland

3D Cube Component (multi-sided)

By Kenneth | April 30, 2009 | Comments 1 comment

After recently posting about an odd effect from putting in a Sin() instead of a Cos(), I’ve manage to finish what I was working on. Well finish as in it works, but its not a fully customisable component yet. That will entirely depend on whether or not I get ask to make it into one.

Full Aim (hopefully coming soon)

The full aim is to create the cube component that can take any number of sides (the example below has 5 sides), each side is a Sprite so that anything can be added. I’ve made each face/side of the cube a Sprite as the project had to be in actionscript only (the example has some flex in it though) but for the project it was to be used in it had to be pure actionscript as I was handing it over to one of our flash developers to work with in CS4.

Ideally it will be able to rotate in both X or Y directions and have the choice of clockwise or anticlockwise directions, but for now it just rotates around the Y axis and goes in a clockwise direction.

It can already be resized to any size and have any number of side/faces.

The scroll bars could be improved by letting the user define the graphics for them, and if moving it to a flex project I could just use the standard flex scrollbars so that they could be reskinned easily.

Rotation speed and delay are variable as are the easing functions.

The lighting has been taken care of using my first pixelBender file which was interesting to play around with, I’m also going to try and add some blurring depending on the speed of rotation and I think that’s about it. So it’s pretty much there 🙂

Example

To illustrate the example I’ve added 5 faces –

Rotating cube example
Funny video
Image (png)
blank purple Sprite
Floaty, throbbing yellow circles (with no background)

Mouse over the example to have the cube stop spinning and use the scrollbars to control the cube.

[kml_flashembed fversion=”10.0.22″ movie=”/flex/MultiCube/BannerTestArea2.swf” targetclass=”flashmovie” publishmethod=”static” width=”300″ height=”500″]

[/kml_flashembed]

Enjoy, now that I’ve done this I might actually get around to doing a tutorial on some 3D stuff + maybe a bit of pixel bender.

[ad]

Flex and Pixelbender

By Kenneth | April 2, 2009 | Comments 0 Comment

Want to use flex and pixelbender…?
Well first you should get the pixelbender toolkit from Adobe labs

I’m going to use one of the supplied filters with the toolkit just to show how straightforward it is to use with flex.
If you open the pixelbender toolkit and then open the sepia filter (this is the one I’ve use in the demo – right click on swf file for source), load an image then build and run. You can now see the image being transformed inside pixelbender.

Now to integrate that with flex :),
first export for flash and save the pjb file for use in your flex project.

Now run the demo below and check out the source code to explain how I’ve done it.
[swfobj src=”/flex/pixel_bender/PixelBender.swf” alt=”<p>go get flash player 10.0.22 or above at www.adobe.com</p>” width=”400″ height=”400″ align=”center” ]

Now feel free to copy and modify the code and try out some of the other filters.

All DisplayObject’s can have filters so you can use this method on pretty much anything in flex.
For more info check out the video Pixel Bender Unleashed by Ryan Taylor (if the link doesn’t work – supplied by adobe RSS feed, wasn’t working when I filed this post try this link actual flv link This will play in any flv viewer such as Adobe media player )

[ad name=”ad-1″]