Need help with finding picture size

Question

ok here is  my problem i have this sphere and it works great except when you click the thumbnails to display the picture, depending on the size of the picture, the pictures can get pushed to far over, and i understand why. the x and y coord never change. now my idea is to get the size of picture and use that to adjust the x-coord accordingly. my question is. how do i get the picture size? if i can. do the pictures have to be in the fla?
heres code:
The radius of the sphere, 'rad'. You can change it if you wish
especially if you use thumbnails of a different size than our thumbnails.
var rad:Number=380;
The position of 'board' that will be defined later. 'board' is the main
container containing the sphere and the black background
that reponds to mouse actions.
var posX:Number=stage.stageWidth/2;
var posY:Number=stage.stageHeight/2;
The size of thumbnails. Change the values to reflect the size of your
images.
var thumbWidth:Number=70;
var thumbHeight:Number=53;
The thumbnail images have been imported to the Library and linked to AS3
under the names 'Small1', 'Small2',....,'Small46'. The corresponding
Bitmap objects will be stored in the array 'thumbsArray'.
var thumbsArray:Array=[];
The addresses of the images corresponding to the thumbnails are stored
in 'picsArray'. The images will be loaded at runtime when the user
clicks on each thumbnail.
var picsArray:Array=[];
The Bitmap object corresponding to each thumbnail will be placed
in a Sprite, holdersArray[i][j], as its child. We have to do this
to make thumbnails responsive to mouse clicks.
var holdersArray:Array=[];
In order to depth-sort images on the sphere, we will need to keep
track of their midpoints and the position of each midpoint in 3D.
The midpoints will be stored in 'midsArray'.
var midsArray:Array=[];
The only part of our spherical menu that is hard-wired (and a bit harder
to customize) is the number of thumbnails and their placement on the sphere.
We have 46 thumbnails placed along 7 horizontal 'circles' on the sphere.
The 'jLen' vector describes the number of thumbnails on each circle.
The first 'circle' is the north pole and contains 1 image; the second
is the circle corresponding to the vertical angle of 30 degrees
from the negative y axis. That circle contains 6 images. The next one,
at 60 degree of vertical displacement contains 10 images;
the one after that, at 90 degrees from the negative y axis, is the equador
of the sphere and contains 12 images. Past that, we go symmetrically:
10, 6, and 1 image at the south pole.
All our arrays are organized to reflect that placement of thumbnails.
For example, thumbsArray is an array of arrays, thumbsArray[i], where
i corresponds to the number of each circle. thumbsArray[i][j] is the
j-th image on the i-th of the seven circles.
var jLen:Vector.<Number>=new Vector.<Number>();
jLen=Vector.<Number>([1,6,10,12,10,6,1]);
We use the almost standard parametrization of a sphere:
phi is the vertical angle measured from the vertical axis
pointing upwards (in Flash's coordinate system this is the negative
y-axis), theta is the horizontal angle measured from the
horizontal axis pointing away from the screen; that is,
the negative z-axis. phi changes from 0 to 90 degrees,
theta from 0 to 360 degrees. For each circle, phi is constant:
0, 30, 60, 90, 120, 150, 180. 'thetaStep' contains the angular
distances between thumbnails on each circle. Except
for the north and the south pole, for each circle
the angular distance between thumbnails equals to 360 divided
by the number of thumbnails on the circle.
var thetaStep:Vector.<Number>=new Vector.<Number>();
thetaStep=Vector.<Number>([0,60,36,30,36,60,0]);
//The vertical angle between circles.
var phiStep:Number=30;
To make images tangent to the sphere, we need to tilt them
vertically and horizontally. Horizontal tilt is always
equal to the theta angle of the midpoint
of the image and changes along each circle;
the vertical tilt is based on the values
of phi and is constant for each circle of thumbnails.
var phiTilt:Vector.<Number>=new Vector.<Number>();
phiTilt=Vector.<Number>([-90,-60,-30,0,30,60,90]);
//The next four variables are related to auto-rotation
//and rotation by the user.
var autoOn:Boolean=true;
var manualOn:Boolean=false;
var prevX:Number;
var prevY:Number;
//The amount of perpective distortion. Higher values give more distortion.
//Values have to be between 0 and 180 as they correspond to the view angle.
this.transform.perspectiveProjection.fieldOfView=70;
//We define and position the container 'board'.
var board:Sprite=new Sprite();
this.addChild(board);
board.x=posX;
board.y=posY;
//We call the function that draws the border and the background
//of 'board'.
drawBoard();
//Settings for our dynamic text boxes present on the Stage.
infoBox.mouseEnabled=false;
infoBox.wordWrap=true;
infoBox.text="";
loadBox.mouseEnabled=false;
loadBox.wordWrap=true;
loadBox.text="";
loadBox.visible=false;
When the user double-clicks on a thumbnail, the corresponding image
will be loaded into 'loader' - an instance of the Loader class.
'loader' is a child of the Sprite, 'photoHolder', which is a child
of the MainTimeline.
var photoHolder:Sprite=new Sprite();
this.addChild(photoHolder);
photoHolder.x=200;
photoHolder.y=100;
var loader:Loader=new Loader();
photoHolder.addChild(loader);
photoHolder.visible=false;
We will literally 'build' a shere of thumbnails by positioning
them in a Sprite called 'spSphere'. The moment we assign
any of the 3D properties to 'spSphere', for example a value for the z coordinate,
spSphere becomes a 3D container. That means we can place elements in it
in 3D. We will also be able to apply 3D methods to 'spSphere', e.g. rotations.
When 'spSphere' becomes a 3D display object, it has transfrom.matrix3D property.
The latter property holds all the information about the current 3D state
of 'spSphere'.
var spSphere:Sprite=new Sprite();
board.addChild(spSphere);
spSphere.x=0;
spSphere.y=0;
//We move 'spSphere' backwards to avoid distortion of the front thumbnails.
//You can experiment with different values for the z coordinate.
spSphere.z=rad;
//We call several functions defined later in the script.
//They names tell it all.
setUpPics();
buildSphere();
spSphere.rotationY=0;
spSphere.rotationX=0;
spSphere.rotationZ=0;
spSphere.filters=[new GlowFilter(0x666666,1.0,6.0,6.0,2)];
rotateSphere(0,0,0);
setUpListeners();
//The function that draws the black rectangle behind our sphere.
//You can change the values below to change the size and the color
//of the background. Those values do not affect the sphere itself.
function drawBoard():void {
      board.graphics.clear();
      board.graphics.lineStyle(0,0x333333);
      board.graphics.beginFill(0x000000, 0);
      board.graphics.drawRect(-640,-490,1180,1080);
      board.graphics.endFill();
//We add all the necassary listeners. They are self-explanatory.
//Note that holdersArray[i][j] is the Sprite that contains the
//j-th thumbnail on the i-th circle.
function setUpListeners():void {
          var i:int;
          var j:int;
          this.addEventListener(Event.ENTER_FRAME,autoRotate);
          board.addEventListener(MouseEvent.ROLL_OUT,boardOut);
          board.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
          board.addEventListener(MouseEvent.MOUSE_DOWN,boardDown);
          board.addEventListener(MouseEvent.MOUSE_UP,boardUp);
          loader.contentLoaderInfo.addEventListener(Event.COMPLETE,doneLoad);
          loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
          photoHolder.addEventListener(MouseEvent.CLICK,holderClicked);
         for(i=0;i<7;i++){
            for(j=0;j<jLen[i];j++){
                holdersArray[i][j].doubleClickEnabled=true;
                holdersArray[i][j].addEventListener(MouseEvent.DOUBLE_CLICK,picClicked);
The functions that are executed in response to events to which we listen.
The next one runs when a loaded picture is clicked.
function holderClicked(e:MouseEvent):void {
    board.visible=true;
    photoHolder.visible=false;
    infoBox.text="";
    manualOn=false;
    autoOn=true;
'picClicked' is executed when any of the thumbnails is double-clicked.
Note that in the function 'buildSphere' below, we assigned names to
all holders, holderArray[i][j]. We need those names now to know
which thumbnail was clicked and which image to load.
function picClicked(e:MouseEvent):void {
    var targName:String="Double Click Image To View";
    var i:int;
    var j:int;
    targName=e.currentTarget.name;
    i=int(targName.charAt(3));
    j=int(targName.substring(5,targName.length));
    board.visible=false;
    loader.load(new URLRequest(picsArray[i][j]));
    infoBox.text="";
    loadBox.text="Loading...";
    loadBox.visible=true;
function loadingError(e:IOErrorEvent):void {
    loadBox.text="There has been an error loading the image. The server may be busy. Refresh the page and try again.";
function doneLoad(e:Event):void {
    infoBox.text="Click the image to close it.";
    photoHolder.visible=true;
    loadBox.text="";
    loadBox.visible=false;
//Listeners responsible for mouse rotations and auto-rotation.
function autoRotate(e:Event):void {
         if(autoOn && !manualOn){
             spSphere.transform.matrix3D.prependRotation(-0.5,Vector3D.Y_AXIS);
             zSortPics();
function boardOut(e:MouseEvent):void {
            autoOn=true;
            manualOn=false;
function boardDown(e:MouseEvent):void {           
            prevX=board.mouseX;
            prevY=board.mouseY;
            autoOn=false;
            manualOn=true;
function boardUp(e:MouseEvent):void {
            manualOn=false;
     function boardMove(e:MouseEvent):void {
                var locX:Number=prevX;
                var locY:Number=prevY;
                if(!autoOn && manualOn){
                prevX=board.mouseX;
                prevY=board.mouseY;
                rotateSphere(prevY-locY,-(prevX-locX),0);
                e.updateAfterEvent();
The function setUpPics populates the arrays thumbsArray and picsArray.
Note the organization of thumbnails by circles on which they reside:
thumbsArray[0] - the north pole, thumbsArray[1] thumbnails of the first circle
down from the north pole, etc. 'picsArray' is organized similarly.
You can, of course, subsitute your own images, use thumbnails of
dimensions different from ours. Changing the number of thumbnails and their organization
would, however, require rewritting the script a bit.
function setUpPics():void {
    thumbsArray[0]=[new Bitmap(new Small1(70,46))];
    picsArray[0]=["pic1.jpg"];
    thumbsArray[1]=[new Bitmap(new Small2(70,105)),new Bitmap(new Small3(70,105)),new Bitmap(new Small4(70,53)),new Bitmap(new Small5(70,53)),new Bitmap(new Small6(70,53)),new Bitmap(new Small7(70,53))];
    picsArray[1]=["pic2.jpg","pic3.jpg","pic4.jpg","pic5.jpg","pic6.jpg","pic7.jpg"];
    thumbsArray[2]=[new Bitmap(new Small8(70,53)),new Bitmap(new Small9(70,53)),new Bitmap(new Small10(70,53)),new Bitmap(new Small11(70,53)),new Bitmap(new Small12(70,53)),new Bitmap(new Small13(70,53)),new Bitmap(new Small14(70,53)),new Bitmap(new Small15(70,53)),new Bitmap(new Small16(70,53)),new Bitmap(new Small17(70,53))];
    picsArray[2]=["pic8.jpg","pic9.jpg","pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg","pic1 4.jpg","pic15.jpg","pic16.jpg","pic17.jpg"];
    thumbsArray[3]=[new Bitmap(new Small18(70,53)),new Bitmap(new Small19(70,53)),new Bitmap(new Small20(70,53)),new Bitmap(new Small21(70,53)),new Bitmap(new Small22(70,53)),new Bitmap(new Small23(70,53)),new Bitmap(new Small24(70,53)),new Bitmap(new Small25(70,53)),new Bitmap(new Small26(70,53)),new Bitmap(new Small27(70,53)),new Bitmap(new Small28(70,53)),new Bitmap(new Small29(70,53))];
    picsArray[3]=["pic18.jpg","pic19.jpg","pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg","pi c24.jpg","pic25.jpg","pic26.jpg","pic27.jpg","pic28.jpg","pic29.jpg"];
    thumbsArray[4]=[new Bitmap(new Small30(70,53)),new Bitmap(new Small31(70,53)),new Bitmap(new Small32(70,53)),new Bitmap(new Small33(70,53)),new Bitmap(new Small34(70,53)),new Bitmap(new Small35(70,53)),new Bitmap(new Small36(70,53)),new Bitmap(new Small37(70,53)),new Bitmap(new Small38(70,53)),new Bitmap(new Small39(70,53))];
    picsArray[4]=["pic30.jpg","pic31.jpg","pic32.jpg","pic33.jpg","pic34.jpg","pic35.jpg","pi c36.jpg","pic37.jpg","pic38.jpg","pic39.jpg"];
    thumbsArray[5]=[new Bitmap(new Small40(70,53)),new Bitmap(new Small41(70,53)),new Bitmap(new Small42(70,53)),new Bitmap(new Small43(70,53)),new Bitmap(new Small44(70,53)),new Bitmap(new Small45(70,53))];
    picsArray[5]=["pic40.jpg","pic41.jpg","pic42.jpg","pic43.jpg","pic44.jpg","pic45.jpg"];
    thumbsArray[6]=[new Bitmap(new Small46(70,53))];
    picsArray[6]=["pic46.jpg"];
In the next function we actually create a 3D sphere of thumbnails by positioning
them in 3D within spSphere. Note the center of the sphere is at (0,0,0) of
spSphere. It might be worth recalling that with our interpretation of
phi and theta each point P=(x,y,z) on the sphere corresponding to given values
of phi and theta is given by:
x = rad * sin(phi) * sin(theta),
y = -rad * cos(phi),
z = -rad * sin(phi) * cos(theta).
Within the function, we populate 'holdersArray' and 'midsArray'. We assign thumbnails
to holdersArray elements, position holdersArray elements, tilt them, give them names.
We literally build our sphere.
function buildSphere():void {
    var i:int;
    var j:int;
    var tStep:Number;
    var pStep:Number=phiStep*Math.PI/180;
    for(i=0;i<7;i++){
        holdersArray[i]=[];
        midsArray[i]=[];
        tStep=thetaStep[i]*Math.PI/180;
        for(j=0;j<jLen[i];j++){
            midsArray[i][j]=new Vector3D(rad*Math.sin(i*pStep)*Math.sin(j*tStep),-rad*Math.cos(i*pStep),-rad*Math.sin(i*p Step)*Math.cos(j*tStep));
            holdersArray[i][j]=new Sprite();
            holdersArray[i][j].name="pic"+String(i)+"_"+String(j);
            holdersArray[i][j].addChild(thumbsArray[i][j]);
            thumbsArray[i][j].x=-thumbWidth/2;
            thumbsArray[i][j].y=-thumbHeight/2;
            spSphere.addChild(holdersArray[i][j]);
            holdersArray[i][j].x=midsArray[i][j].x;
            holdersArray[i][j].y=midsArray[i][j].y;
            holdersArray[i][j].z=midsArray[i][j].z;
            holdersArray[i][j].rotationX=phiTilt[i];
            holdersArray[i][j].rotationY=-j*thetaStep[i];
      zSortPics();
'zSortPics' depth-sorts all thumbnails corresponding to each view of
the sphere. It sorts thumbnails by removing them (or more precisely
their holders, holdersArray[i][j], as children of spSphere and then reassigning
them based on the z-coordinates of their midpoints.
function zSortPics():void {
    var distArray:Array=[];
    var dist:Number;
    var i:int;
    var j:int;
    var k:int;
    var curMatrix:Matrix3D;
    var curMid:Vector3D;
    curMatrix=spSphere.transform.matrix3D.clone();
    while(spSphere.numChildren>0){
        spSphere.removeChildAt(0);
        for(i=0;i<7;i++){
            for(j=0;j<jLen[i];j++){
            curMid=curMatrix.deltaTransformVector(midsArray[i][j]);
            dist=curMid.z;
            distArray.push([dist,i,j]);
      distArray.sort(byDist);
      for(k=0;k<distArray.length;k++){
          spSphere.addChild(holdersArray[distArray[k][1]][distArray[k][2]]);
          holdersArray[distArray[k][1]][distArray[k][2]].alpha=Math.max(k/(distArray.length-1),0.5) ;
function byDist(v:Array,w:Array):Number {
     if (v[0]>w[0]){
        return -1;
      } else if (v[0]<w[0]){
        return 1;
       } else {
        return 0;
The function that rotates the sphere in response to the user moving the mouse.
Note we are setting the z coordinate to 0 before rotation. Otherwise,
the non-zero translation coefficients produce undesirable effects.
Note also that we do not use this function in 'autoRotate'. That is because
when the sphere auto-rotates we want it to revolve about is pole-to-pole
axis. That means prepending rather than appending rotation.
See the function 'autoRotate' above.
function rotateSphere(rotx:Number,roty:Number,rotz:Number):void {
      spSphere.z=0;
      spSphere.transform.matrix3D.appendRotation(rotx,Vector3D.X_AXIS);
      spSphere.transform.matrix3D.appendRotation(roty,Vector3D.Y_AXIS);
      spSphere.transform.matrix3D.appendRotation(rotz,Vector3D.Z_AXIS);
      spSphere.z=rad;
      zSortPics();

Answer 1

I won't be searching thru all that code to try to find something relevant to your post, but if you are using a Loader to load the images, you can get the width and height as soon as the loading is complete using the loader object (loader.width, loader.height).  You just need to wait until loading is complete, so you'll need a listener for that if you don't have one already.