Hi,
The following block of code represents a sphere that is made from several pictures. The project contains small jpg thumbnails and their corresponding photos that are loaded when the thumbs are of course clicked.
I have a problem in figuring out how to make these small thumbs change color once they are clicked, and to remain in that state/color, so the user knows what thumbs he has been clicking on, when he returns to the “board”.
I am trying to put a nested function inside the following function:
function setUpPics():void {
//first circle
thumbsArray[0]=[new Bitmap(new Small1(70,53))];
function thumbsClicked(e:MouseEvent):void {
thumbsArray[0].visible=false;
if Small1 clicked, then color it RED... something like this...
}
but I cant figure out how to proceed, and if its the right way to do it. The “Small1” is the linkage name for the small1.jpg thumb that is in the library.
Here is the entire code with comments:
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.filters.GlowFilter;
import flash.events.MouseEvent;
//align, scaleMode are Public Properties
stage.align = StageAlign.TOP;
stage.scaleMode = StageScaleMode.NO_SCALE;
var posX = 390;
//Number=stage.stageWidth/2;
var posY = 300;
//:Number=stage.stageHeight/2;
stage.dispatchEvent(new Event(Event.RESIZE)); //
/*
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=200;
/*
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.
*/
/*
The size of thumbnails. Change t4e values to reflect the size of your
images.
*/
var thumbWidth:Number=75;
var thumbHeight:Number=58;
/*
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=[];
/*
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]); //number of images on the each circle
var thetaStep:Vector.<Number>=new Vector.<Number>();
thetaStep=Vector.<Number>([0,60,36,30,36,60,0]); // number of degrees on circle
//The vertical angle between circles.
var phiStep:Number=30;
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;
this.transform.perspectiveProjection.fieldOfView=60;
//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="Press and move the mouse over the sphere & double click a thumbnail to load an image.";
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=-30;
photoHolder.y=105;
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'.
*/
var spSphere:Sprite=new Sprite();
board.addChild(spSphere);
spSphere.x=0;
spSphere.y=0;
spSphere.z=rad;
spSphere.graphics.moveTo(10, 20);
setUpPics();
buildSphere();
spSphere.rotationY=0;
spSphere.rotationX=0;
spSphere.rotationZ=0;
spSphere.filters=[new GlowFilter(0x1C3E75,1.0,6.0,6.0,2)];
rotateSphere(0,0,0);
setUpListeners();
function drawBoard():void {
board.graphics.clear();
board.graphics.lineStyle(1,0xFFFFFF, -100);
board.graphics.beginFill(0xFFFFFF, -100);
board.graphics.drawRect(-140,-140,380,380);
board.graphics.endFill();
}
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);
}
}
}
function holderClicked(e:MouseEvent):void {
board.visible=true;
photoHolder.visible=false;
infoBox.text="Press and move the mouse over the sphere to rotate. DOUBLE CLICK a thumbnail to load an image.";
manualOn=false;
autoOn=true;
}
function picClicked(e:MouseEvent):void {
var targName:String="";
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, and to return to the gallery.";
photoHolder.visible=true;
loadBox.text="";
loadBox.visible=false;
}
//Listeners responsible for mouse rotations and auto-rotation.
function autoRotate(e:Event):void {
if(autoOn && !manualOn){
//velocity of rotation
spSphere.transform.matrix3D.prependRotation(-1.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();
}
}
function thumbsClicked(e:MouseEvent):void {
thumbsArray[0].visible=false;
}
function setUpPics():void {
//first circle
thumbsArray[0]=[new Bitmap(new Small1(70,53))];
picsArray[0]=["pic1.jpg"];
//second circle
thumbsArray[1]=[new Bitmap(new Small2(70,53)),new Bitmap(new Small3(70,53)),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","pic14.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","pic24.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","pic36.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"];
}
//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*pStep)*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
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.
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();
}