1 Reply Latest reply on Feb 23, 2010 5:40 AM by Ned Murphy

    need help with finding picture size

    pcman2020 Level 1

      dont know much about AS yet and need help finding picture size.

      i think i highlighted the relevant code. The pictures get loaded when movie starts i think.

       

      if i could just get a example of the code i might be able to figure the rest out

       

      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=165;

       

      photoHolder.y=75;

       

      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="Double Click Image To View";

       

          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();
         
         
      }