banner ad

Tuesday, August 29, 2006

Follow path physics v1 »

Making a clip follow a along a curved path while rotating is achieved by combining the rotation of the mouse formula with the previousely posted follow path physics  technique.

Rotating the mouse »

Rotating a clip along a curved path is largely based on the rotation of the mouse formula.  In this example the clip follows the mouse cursor using this simple formula :  dx = _xmouse - clip._x; dy = _ymouse - clip._y; // roate clip...

Follow path physics v0 »

Going back to the  cubic Bezier equations post. The Bezier equation  is evaluated for an arbitrary number of values of t between 0 and 1. What that means is that there exists a variable defined as "t " that will move the clip along...

Friday, August 25, 2006

additions and fixes »

I have made some adjustments and fixes to the way you access reflektions|miniml.  The archive and category sections are now listing the topics withouth previewing the flash. I realised that showing 50 swf files on the same page made the CPU slow...

Thursday, August 24, 2006

follow curve no anchor v0 »

The last post used  the correct equation for a quadratic bézier curve.  Inspired to go further, I decided to drop those anoying control points.  In theory you need P0, P1, and P2.  3 point,...two endpoints and a control...

Tuesday, August 22, 2006

Follow curved path v5 »

A quick search on wikipidea on bézier curves pointed out that the  formula used in the previous examples  c = (x1 - x0) b = (x2 - x1) this._x= b*t*t + c*t +x0 can be re-written by the following equation. This is the correct...

Monday, August 21, 2006

3D rotation menu v5 »

Use your mouse to rotate left/right and choose your item in this latest addition to the previous 3D rotation menu.  I added one extra lines to the code, it simply tracks the user horizontal mouse  position and adds or substracts to the rotation...

Follow curved path v4 »

We had to add a few loops to duplicate and create multiple clips, this is similar to the multiple clips following path post,  only that this time we got the clips to move along a curved bezier path defined by multiple origin and endpoints. ...

Friday, August 18, 2006

Follow curved path v3 »

In the last post,  we got a clip to move along a bezier path defined by multiple origin and endpoints.  This is an extension of the example, I am simply using a for loop in order to get the clip to follow multiple curves. Once the clip hits...

Thursday, August 17, 2006

Follow curved path v2 »

In the last post, by knowing the coordinates for any 3 points, we drew and computed the path of the bezier curve using the following equation. c = (x1 - x0) b = (x2 - x1) this._x= b*t*t + c*t +x0 In the fillowing example I am moving from one...

Follow curved path v1 »

Generally, a cubic Bezier curve is defined by four points. The origin and destination endpoint. There are also 2 control points. The equation defining the points on the curve is evaluated for an arbitrary number of values of t between 0 and 1. c...

Wednesday, August 16, 2006

Follow curved path v0 »

What is a Bézier curve? Before jumping into the mathematics, lets see how do draw one using the flash drawing API. We can draw a curve by creating an origin and a destination point (p0,p1) we will also need a control point to set the angle of...

Tuesday, August 15, 2006

Follow path v3  »

Originally developed by Pierre Bézier in the 1970's, bezier curves are used by flashes drawing API to create curved lines.  We can use the cubic equation to create animations and calculate motion along a curve. The major improvement to...

Follow path v2 »

Multiple clips following a drawn path.  This might look like some magic kinematics trick, yet its not! Its another improvement on the code from the last post. We simply create a multiple number of clips and set them to follow a newly drawn path....

Friday, August 11, 2006

Follow path v1 »

This improves on the code from the last post by adding the option of multiples.  Thats right, set the number of anchor points you want to see and click on redraw and the clip will follow a newly drawn path. If you were a reader of the last post...

Thursday, August 10, 2006

Follow path v0 »

In the next few posts I will explore the properties of a movieClip dynamically following paths drawn using the drawing API.  I will start out with a simple example and work my way to curved paths and paths in 3D worlds.  If you are interested...

Wednesday, August 09, 2006

3D flip »

If you want to work in 3D and flash you will soon notice that a  mocieClip has no depth (a.k.a it is 1 pixel deep) and no back side.  I mean, if you were to rotate a clip in 3D along the y axis you will soon find out that the back is only...

3D rotation menu v4 »

I had to add a blur effect on the last 3D rotation menu. Many people commented on its necessity as it makes this carousell feel real.  I added a few extra lines to the code, mostely implementing the blur class and changing clips blur values according...