Tag: flash 10

3D Cube Component (multi-sided)

3D Cube Component (multi-sided)

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 –

  1. Rotating cube example
  2. Funny video
  3. Image (png)
  4. blank purple Sprite
  5. 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″]

Get Adobe Flash player

[/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]

Side effect from cube effect

Side effect from cube effect

Well I’ve been working on creating some cube style effects at my work and in particular an actionscript project that will take any number of containers and then rotate them in a cube style using the new flash 10 libaries.

Anyway I got a Sin() mixed up for a Cos() and the following effect happened which I thought was quite a cool effect. Ignore the colours and its roughness it’s just a prototype swf but I thought I stick it up just to show the side effect that I never expected 🙂

Not Expected

[kml_flashembed movie=”/flex/3d_experiment_wrong/WrongWay.swf” height=”500″ width=”600″ /]

 

 

Expected

[kml_flashembed movie=”/flex/3d_experiment_wrong/CorrectWay.swf” height=”500″ width=”600″ /]

 

[ad]

Flex / Flash 10 3D examples

Flex / Flash 10 3D examples

I’ve been doing a bit of R&D around the new 3D features in flash 10 for my work recently and seeing as there is very little info/tutorials out there on the subject I thought I’d add what I’ve found out.

Firstly I’ll just post some of the examples I’ve done and I’ll create a step by step guide next.

Example 1 is a simple VBox that rotates on its Z-axis (if you try to just rotate a container or similar in flex 3 it will rotate around the registration point, which isn’t exactly very useful in most circumstances). So you have to use the new Matrix3D class.
Should you come across this post before I create the tutorial, key points to note
You must translate the object in reference to its parent container
Take a copy of its 3D matrix before you do anything, then only apply transformations on that matrix.

Example 2, the obligatory spinning cube without textures.

Example 3, the obligatory spinning cube with textures. Again if you’re looking at this before I do a tutorial on the subject take note
You must add 24 vertexes (4 for each side) for the bitmap textures to map properly using the uvt data. This caught me out for ages as a cube really has 8 vertexes and I was reusing the same points when building the cube!

 

[ad]