萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Flash教程 >> Flash繪制旋轉的3D效果菜單動畫

Flash繪制旋轉的3D效果菜單動畫

   演示:

  ≯全屏顯示或下載≮

  1、新建Flash文件,設置寬、高屬性為 550 × 400 。

  2、用圓角矩形工具,畫一個 158 × 35的長方形。筆觸為8白色,填充色#0 F7E 88。圖1:

Flash繪制旋轉的3D效果菜單動畫 三聯

  3、將長方形轉換成名為 Menu Item 的影片剪輯。設定注冊點為中心。圖2:

  4、雙擊舞台上的影片剪輯,進入編輯狀態。創建動態文本,在它裡面輸入需要的本文。圖3

  5、在屬性面板中輸入實例名字 menuItemText 。

  6、按下字符嵌入按鈕,插入下列字型。圖4:

  7、切換回主場景1,刪除舞台上的影片剪輯,實例將由代碼生成。

  8、打開庫元件面板,右鍵單擊影片剪輯,(CS3選鏈接、CS4選屬性)給元件添加一個綁定類。類名 MenuItem 。圖5:

  9、選中第1幀,打開動作面板輸入代碼:

  復制內容到剪貼板代碼:

  //The total number of menu items

  const NUMBER_OF_ITEMS:uint = 20;

  //This array will contain all the menu items

  var menuItems:Array = new Array();

  //Set the focal length

  var focalLength:Number = 350;

  //Set the vanishing point

  var vanishingPointX:Number = stage.stageWidth / 2;

  var vanishingPointY:Number = stage.stageHeight / 2;

  //We calculate the angleSpeed in the ENTER_FRAME listener

  var angleSpeed:Number = 0;

  //Radius of the circle

  var radius:Number = 128;

  //Calculate the angle difference between the menu items (in radians)

  var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180;

  //This loop creates and positions the carousel items

  for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

  //Create a new menu item

  var menuItem:MenuItem = new MenuItem();

  //Calculate the starting angle for the menu item

  var startingAngle:Number = angleDifference * i;

  //Set a currentAngle attribute for the menu item

  menuItem.currentAngle = startingAngle;

  //Position the menu item

  menuItem.xpos3D = - radius * Math.cos(menuItem.currentAngle) * 0.5;

  menuItem.ypos3D = radius * Math.sin(startingAngle);

  menuItem.zpos3D = radius * Math.cos(startingAngle);

  //Calculate the scale ratio for the menu item (the further the item -> the smaller the scale ratio)

  var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);

  //Scale the menu item according to the scale ratio

  menuItem.scaleX = menuItem.scaleY = scaleRatio;

  //Position the menu item to the stage (from 3D to 2D coordinates)

  menuItem.x = vanishingPointX + menuItem.xpos3D * scaleRatio;

  menuItem.y = vanishingPointY + menuItem.ypos3D * scaleRatio;

  //Assign an initial alpha

  menuItem.alpha = 0.3;

  //Add a text to the menu item

  menuItem.menuItemText.text = Menu item + i;

  //We don’t want the text field to catch mouse events

  menuItem.mouseChildren = false;

  //Assign MOUSE_OVER, MOUSE_OUT and CLICK listeners for the menu item

  menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);

  menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);

  menuItem.addEventListener(MouseEvent.CLICK, itemClicked);

  //Add the menu item to the menu items array

  menuItems.push(menuItem);

  //Add the menu item to the stage

  addChild(menuItem);

  }

  //Add an ENTER_FRAME listener for the animation

  addEventListener(Event.ENTER_FRAME, moveCarousel);

  //This function is called in each frame

  function moveCarousel(e:Event):void {

  //Calculate the angle speed according to mouseY position

  angleSpeed = (mouseY - stage.stageHeight / 2) * 0.0002;

  //Loop through the menu items

  for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

  //Store the menu item to a local variable

  var menuItem:MenuItem = (MenuItem)(menuItems[i]);

  //Update the current angle of the item

  menuItem.currentAngle += angleSpeed;

  //Calculate a scale ratio

  var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);

  //Scale the item according to the scale ratio

  menuItem.scaleX=menuItem.scaleY=scaleRatio;

  //Set new 3D coordinates

  menuItem.xpos3D=- radius*Math.cos(menuItem.currentAngle)*0.5;

  menuItem.ypos3D=radius*Math.sin(menuItem.currentAngle);

  menuItem.zpos3D=radius*Math.cos(menuItem.currentAngle);

  //Update the item’s coordinates.

  menuItem.x=vanishingPointX+menuItem.xpos3D*scaleRatio;

  menuItem.y=vanishingPointY+menuItem.ypos3D*scaleRatio;

  }

  //Call the function that sorts the items so they overlap each other correctly

  sortZ();

  }

  //This function sorts the items so they overlap each other correctly

  function sortZ():void {

  //Sort the array so that the item which has the highest

  //z position (= furthest away) is first in the array

  menuItems.sortOn(zpos3D, Array.NUMERIC | Array.DESCENDING);

 

copyright © 萬盛學電腦網 all rights reserved