A Flash Developer Resource Site














Internet Commerce

Partners & Affiliates














Developer Channel

internet.com


Featured Flash FLA
Gallery Downloads 11337 Flash Movies | 1 New Flash Movies Added
What's New | Top 100

Featured FLA

» Author: Bugra Ozden
» Title: Skatalog v9 - product catalog
» Description: Create your product catalog easly and publish on your website or Create your image gallery, documents list, portfolio. Fully XML Driven
» More by Bugra Ozden


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

Featured Site

» Posted in the Flash Kit Links section
» Title: Creative DW Image Show PRO
» Description: Creative DW Image Show PRO is a Dreamweaver extension which enables the user to create multimedia presentations. It combines the features of the popular Creative DW Image Show with the ability to add professional text effects to slides (similar to After Effects). The product is very customizable: the user can choose the duration of the transition effects, the slide motion start and end position, zoom and panning type for both images and texts.


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

» Make a Flash Slide Show Screen Saver
» Simple flash making tutorial for thanksgiving
» Create flash banner for website
» Create xml slideshow with free template
» How to Insert a Multilingual Subtitle Into Your Flash Video Studio
» How to Create Cool Halloween Slideshow
» Debugging flash using the Firebug console
» Create Flash Slideshow on Blogger
» FLASH TRICKS IN WEB ADVERTISING: FLASH BANNERS
» Unknown Tag: Title10
Random Tutorial | Add Site

Sr Instructional Designer D2L-Moodle,Clearance
WSI Nationwide, Inc.
US-NJ-Fort Monmouth

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
     
       
     

    internet.commediabistro.comJusttechjobs.comGraphics.com

    Search:

    WebMediaBrands Corporate Info

    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs