A Flash Developer Resource Site














Internet Commerce

Partners & Affiliates














Developer Channel

internet.com


Featured Flash FLA
Gallery Downloads 11303 Flash Movies | 7 New Flash Movies Added
What's New | Top 100

Featured FLA

» Author: Nitin Tikhe
» Title: Cart
» Description: This Animation Tut is a fun and useful for kids below 15 years. Watch the Flag, Doors, Stick and Horse movements.
» More by Nitin Tikhe


Random FLAs | Add Flash Movie
Featured Flash Site
Gallery Downloads 6008 Flash Sites | 0 New Flash Links
What's New | Top 100 Flash Site

Featured Site

» Posted in the Flash Kit Links section
» Title: Banana Swimwear
» Description: This is a banana swim wear interactive catalog we designed and animated in Flash


Random Links | Add your own Flash Related Links
Flash Tutorials 1255 Tutorials 7 New Tutorials Added!
What's New | Top100

» Make flash video player for broadcasting live streaming video / TV on website
» How to convert the project file of Flash Demo Builder 2.0 into FLV file
» FLV to PSP for Mac - How to convert YouTube video to PSP on mac
» How to Convert FLV to MP4 for Playback on iPod
» how to download and convert youtube video to AVI with Leawo Free FLV converter
» Flash Multi-player Game Tutorial - TicTacToe
» How to make Flash elearning tutorials with screen recorder?
» Fader API:Slideshow with MovieClips on stage
» How to convert MS PPT file into an FLV File
» Unknown Tag: Title10
Random Tutorial | Add Site

Network Design Manager
The Computer Merchant, Ltd
US-VA-Hampton

Justtechjobs.com Post A Job | Post A Resume


Tutorials Home What's New Top Rated Submit myTutes Random!

Search Tutorials


Tutorials Tutorials » 3D

Categories Lighting on 3D Objects
Author: Mr10 | Website: http://www.mr10.net |

 
Page 3
«prev 1 2 3 4 5 6 next»

In-depth: The Math

We'll have to calculate a number of things:

  • the angle of the facets on the z-axis
  • the angle of the facets on the xy-axis
  • the angle of the light source on the z-axis - the light source has a fixed distance: the radius of the sphere
  • the angle of the light source on the xy-axis
  • the whiteness of each facet - depending on both angle (50%) and distance (50%) of the light source
  • the path the light source will follow in 'automatic' mode

What was the deal with these trigonometric functions again?
trigonometrics
 sin(a) = B / C  cos(a) = A / C  tan(a) = B / A 
 sin(b) = 1 (deg)  cos(b) = 0 (deg)  tan(b) = endless 
 sin(c) = A / C  cos(c) = B / C  tan(c) = A / B 

And this pythagoras thingy?

 C = sqrt(A*A + B*B) 

Important! - Flash works in radians! The formula for calculating degrees from radians is:

 radian = math.PI/180 * degree 

Calculating the facet angles

To save me some serious paper filling calculations I've built in an angle detector (it's the lower left button). Just drag point1 and point2 parallel with the desired angle ;-)
The front and side view can be accesed with the top right button.
The use of atan is discussed in the next topic. The formula code is on the angle detection line mc:

onClipEvent (enterFrame) {
 //place the line between mcs point1 and point2
 //notice the width and height of this line are 100
 this._x = _root.angledetect.point1._x;
 this._y = _root.angledetect.point1._y;
 this._xscale = (_root.angledetect.point2._x-_root.angledetect.point1._x);
 this._yscale = (_root.angledetect.point2._y-_root.angledetect.point1._y);
 // Math.atan for angles
 xa= this._width;
 ya= this._height;
 _parent.angle=(Math.atan(ya/xa))/(Math.PI/180);
 // -------------------------------
 // make less decimals and calculate angle2
 _parent.angle=(int(_parent.angle*100))/100
 _parent.point1.angle= _parent.angle
 _parent.point2.angle= 90 - _parent.angle
 // -------------------------------
}

The light source angle on the xy-axis

We'll use Math.atan to calculate this angle: we know A and B (distance base to light source on x and on y):

xt= xm - xb;
yt= ym - yb;

xb and yb are the base coordinates, xm and ym the coordinates of the light source.

_root.DgrMouseX=int(Math.atan(yt/xt) / _root.convrad);

  • convrad= math.PI/180
  • This function gives a flash angle, further on we'll recalculate this angle to an angle between 0 and 360 degrees.

    The light source angle on the z axis

    The fixed distance of the light source lets us calculate the angle it has. We know that side (C) will be the radius of the sphere, in this case 180. We calculate A (DeltaX) by using pythagoras on xt and yt.

    _root.DeltaX=Math.sqrt(xt*xt+yt*yt);

    Then we use the Math.acos on A and C to calculate the z-angle:

    _root.DgrMouseZ=(Math.acos(_root.DeltaX/180))/_root.convrad);

    Flash and angles

    Flash treats degrees a little different than we're used to, so we'll re-calculate them to something more handable:

    if(xt <0 && yt> 0){
     _root.DgrMouseX += 270;
    } else if(xt <0 && yt <= 0){
     _root.DgrMouseX += 270;
    } else if(xt>= 0 && yt <= 0){
     _root.DgrMouseX += 90;
    } else if(xt>= 0 && yt>= 0){
     _root.DgrMouseX += 90;
    }
    

    This'll return any angle to one between 0 and 360 degrees counting from 0 at the top clockwise to 360.

    On to the whiteness!

    Each facet calculates it's own whiteness. The whiteness is done by setting the _alpha of a white facet MC over the background of the object.
    Each facet has 2 variables: FacetX (its xy-angle) and FacetZ (its z-angle).
    We'll use the Math.cos function so that one side of the object is lit (cos(x)=1) and the other side is not (cos(x)=-1).

    function SinMouseX(AngleX) {
     return Math.cos(Math.PI/180 * (_root.DgrMouseX - AngleX));
    }

  • AngleX= FacetX

  • This function sets the most fierce point at FacetX and the less fierce point at (FacetX - 180) degrees.
    Then we set the _alpha. The ratio is 50% so z-angle and xy-angle have an equally strong influence:

    function AlphaMouseX(Z,X) {
     return ((_root.DgrMouseZ/Z) * _root.ratio + X * (100 - _root.ratio));
    }

  • Z= FacetZ
  • X= FacetX
  • «prev 1 2 3 4 5 6 next»

    » Level Advanced

    Added: : 2001-11-06
    Rating: 8.18 Votes: 203
    Hits: 10852
    » Author
    Mr10 stands for Maarten van de Voorde, Graphic Design student from Holland. Being in his forth year he hopes to be employed by January, but for now he has some sparetime to do some free-lance assignments while graduating.
    » Download
    Download the files used in this tutorial.
    Download (99 kb)
    Get conversion and unzipping tools for PC and Mac here!

    » Forums
    More help? Search our boards for quick answers!

    Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.
    10 9 8 7 6 5 4 3 2 1
    Read or Post Comments