Posts Tagged ‘Flash’

Fun with Trigonometry

Monday, May 14th, 2012

To find the direction from one object to another, we need to use some trig functions. First we need to know the positions of those objects. Then we can find the change in X and Y. From there we can find the distance between them and the angle from one to the other.

Here’s an example: Point A is located at coordinates (-10, -20), and Point B is located at (110, 70). To go from A to B is a change of (120, 90).

To find the angle from A to B, we use the arc-tangent function.

var distX = objectB.x - objectA.x;
var distY = objectB.y - objectA.y;
 
var angle_radians = Math.atan2(distY, distX);
var angle_degrees = radiansToDegrees( angle_radians );
function radiansToDegrees(r){
    return r * 180 / Math.PI;
}

In Javascript and ActionScript, the Math function atan2 will take y and x, and return the direction in radians. That means the returned value will be between -π and π. to convert radians to degrees, we multiply by 180 and divide by π. In this example, the angle is about 36.87°.

To find the distance between them, we use the Pythagorean theorem: a2 + b2 = c2, or:

var dist = Math.sqrt(distX * distX + distY * distY);

In this example, the distance is 150.

Now you can set the rotation of the first object to look at the second object. OK, but how do you move it forward at a constant rate? If you update its x and y position by 120 and 90, respectively, it would reach the goal in one step. Not much of an animation. Instead, give it a speed and use trigonometry to figure out the change in the x and y positions.

var speed = 6;
 
var deltaX = Math.cos(angle_radians) * speed;
var deltaY = Math.sin(angle_radians) * speed;
 
objectA.x += deltaX;
objectA.y += deltaY;

First we decide what speed to use. This is in pixels per frame. Each frame the object will move by 6 pixels in its forward direction. Then each frame, calculate the change in the x and y positions using the cosine and sine functions. This time we need to use radians, not degrees. These functions will return a value between -1 and 1. Now just multiply by the speed and apply it to the object.

To make the object turn smoothly, as in the example above, is a little more complicated, so I’ll save that for another time. But to give you a hint, it starts with a turning speed. You can see how it’s done in the attached FLA: trigTest.fla


Flash 3D Coming Soon

Wednesday, November 10th, 2010

At MAX 2010, Adobe announced new APIs for Flash player. Code named ‘Molehill’, they give developers low level access to 3D hardware acceleration through the GPU.

The current version of Flash provides us with 2.5D content; not quite 3D. But with frameworks and libraries like Away3D, we could stuff a 3D engine into Flash. Now the engine will be built-in with GPU support, allowing content with faster frame rates, more triangles, and better lighting and shaders. But because the APIs are low-level, developers will need to use frameworks to simplify development. Check out these videos for all the details:

3D APIs for Adobe Flash Player and Adobe AIR

Flash Player 3D Future


Options for Online 3D Content

Thursday, September 2nd, 2010

3D movies, 3D TVs, 3D cameras and camcorders, 3D cell phone displays… The 3D craze is well underway. So here’s a list of my favorite 3D development apps.

3D in Flash – Since Flash CS4, Movie Clips could have 3D transformations (position and rotation, but not scale). It’s a primitive 3D engine. In fact, Adobe calls it 2.5D. It’s more than 2D, but not quite 3D.

There are also 3D libraries such as Papervision3D and Away3D that can be imported into your Flash project that will give you a real 3D engine. These are great if you need to use Flash for your project, but you’re still limited to bending a primarily 2D program into 3D. Also, Flash comes with a lot of overhead and it is not the most efficient or fast solution for 3D content.

Virtools – Virtools offers a unique coding experience in which the programmer adds functionality by linking together behavior blocks in a schematic drawing, similar to a flow chart. It’s a very fast way to get basic functionality on your game assets. For example, to make a box rotate, just drop the box model in the 3D view to add it to the scene, then drop the Rotate behavior on it. In the schematic view, draw a link from the output of the Rotate behavior back to its input and you’re done. There’s not a single character of code to write, and it only takes about 5 clicks of the mouse. Of course, this is a pretty simple example, but most of it really is that easy. If you want more control, you can click a few more times to specify how fast it rotates and in which axis. You can also create your own behavior blocks if the hundreds that come with Virtools doesn’t have what you need. The downside to Virtools is that it is ridiculously expensive. Seriously, Virtools, offer a free version and lower the price to build your install base. You’d make up for it in volume.

Unity3D – Like Virtools, Unity is an integrated development environment (IDE) for building 3D games and simulations. I just started playing with it, but so far I like it a lot! Programming in it is not nearly as easy as in Virtools, but it is about the same as coding with Actionscript. It beats Flash with Papervision or Away3D when it comes to everything else. It’s a pain in the neck to get 3D models into Flash. In Unity, just save your assets in the Assets folder. They’ll now show up in your assets list in Unity. Also, because Unity is a real 3D engine, Flash can’t compare in visual quality to what you can do with Unity. Unity comes in a free version and a pro version, plus add-ons for developing for iOS or Android. And Unity 3.0 is coming out soon!

So there you have it; 4½ 3D development solutions (Flash by itself only counts for ½).


How to Read a Binary Watch

Wednesday, August 11th, 2010

A while ago, I received a Binary watch as an anniversary gift. Since then, I frequently get asked how I read it. So let me break it down for you.

First, note the Flash app to the left. I built this for my Chumby, but the inspiration came from my watch. The main differences are that I put in a line of bits to show seconds, and I gave it the ability to show the date. Tap the watch face to view the date for five seconds. If you’re reading this, 01 The One, take some notes.
(more…)


Duplicate MC in AS3

Thursday, July 15th, 2010

So, the other day I was looking for a way to duplicate a movie clip that the user clicks on. In my case, I had lots of buttons made of the MCs that I wanted to copy. I could have made a big switch statement like this:


(more…)


Database access with a Chumby

Thursday, May 6th, 2010

Chumby, Database AccessIn my earlier posts, I’ve writen about writing a Chumby widget, writing a configuration widget, and accessing the accelerometer. Now we’ll look at accessing a database from a Chumby widget.

First, you’ll need to set up a database. I’ll assume you have access to a web server and know how to create a database, tables, and code to access it. I use MySQL and PHP.

You’ll also need a Chumby widget.

And to connect the two, you’ll need a crossdomain.xml file.
(more…)


Accessing the Chumby Accelerometer

Friday, March 26th, 2010

Chumby Accelerometer
Let’s take a look at the Chumby accelerometer. It’s the thing inside Chumby that tells it if it’s looking up or down, sideways, or up-side-down. It also detects sudden changes in acceleration. It’s basically an electronic inner ear. So if you shake Chumby, knock him on the side of the head, or drop him on the floor, the accelerometer will detect this and report how hard and in what direction the jolt happened. Disclaimer: I do not recommend or endorse violent behavior to Chumby, including hitting, shaking, throwing, or dropping.

If you’re familiar with Actionscript, you know that it’s pretty easy to find the position of the mouse cursor on the stage. Well, it’s also easy to get data from the accelerometer. The trick, however, is making use of it. Let’s take a look.
(more…)


More Fun With Flash

Monday, March 22nd, 2010

Here’s a little thing that I wrote a while ago while learning the Flash particle system.  It just makes little light blurbs generate from your mouse pointer.  It’s pretty neat, and if you don’t know how to generate particle effects in Action Script 3, the code might help you out.  Check it out if you want to.

If you find it helpful or fun, let me know in the comments.  Thanks for reading!  Code when you click through…



(more…)


Creating a Chumby Configuration Widget

Friday, February 26th, 2010

In my last post, we quickly went over Writing your first Chumby widget. This time, we’ll expand on that by adding a configuration widget.

A configuration widget is another Flash file that sets up parameters for your Chumby widget, so those settings are available when the widget loads into your Chumby. For example, perhapse you have an analog clock widget. You could create a configuration widget that allows someone to choose a color for the face of the clock, or whether or not to display the second hand. The user could choose a color and save their preferences in the Chumby database. Then, when their Chumby loads your clock widget, it would look for and download any settings for that widget.

Here’s what we’ll need:

(more…)


Zoom Creates a Self Promo—For Reel

Thursday, February 11th, 2010

Yesterday our amazingly talented, patient, smart, nerdy, impatient, committed, ingenious, thoughtful, creative, resourceful and brilliant development team put the finishing touches on the Zoom Creates self-promo reel. These guys are absolutely unbelievable. We described our vision for the reel and they told us: “That’s impossible. You can’t do that. The technology doesn’t exist. You cannot change the laws of physics. We will need super-computers, expensive software, years to write code, more chips, salsa and milkshakes than you can afford.” Then, five minutes later (slight exaggeration) came back to us with a solution–an ingenious solution: open-source software. The only hitch was they had to teach themselves how to use it. And that they did. They figured out how to use Blender for the 3d animation and Kdenlive for the video post processing. Sprinkle in some Flash and great ideas of their own (watch the mouse pointer jump from one panel to the next and the animated atom) and there is no stopping these guys.

They even used math! Lots of math. That was the most mind-boggling thing I witnessed. I like math and all but if it were me putting this thing together, I think I would have approached it more organically, finding the music then individually timing and positioning the pieces. Not these guys. After the look and feel/animation comps were completed, they looked at the music, the number of pieces and the frame rate etc. and gave each piece a number and had it all laid out on a table with little pieces of paper. Independently, Kurtis worked on the music while Kris positioned all the pieces and when they put them both together, it was like magic. The animation synced up with the music almost perfectly. It was unbelievable. These guys know what they talking about. Well done, lads.

This entire project has been such a great team effort. Everyone here at Zoom Creates contributed. The countless hours of concepting, discussing, designing, scheduling, production, learning, listening, laughing and collaborating have truly produced a project to be proud of. Not only does it show off some of Zoom’s best work, it is a portfolio piece in itself.