Flash AS3制作个性的旋转圆形网页导航

核心提示:Flash AS3制作个性的旋转圆形网页导航教程。

  Flash AS3制作个性的旋转圆形网页导航。

1、用矩形工具绘制一个黑色的矩形,转换为MC影片剪辑,打开属性窗口

2、双击这个影片剪辑编辑它,使用文本工具,设置为动态文本,绘制一个区域,设置颜色是白色,命名实例名为abelBtn。

3、回到场景1,删除掉刚刚建立的影片剪辑。

4、我们选择第一帧,然后打开动作面板,输入下面代码,主要是为了导入Tweenlite engine。

import com.greensock.*;

import com.greensock.easing.*;

5、然后创建一个数字,动态调用每个菜单的项目文字。

var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];

var menu:Sprite = new Sprite();

menu.x= stage.stageWidth / 2;

menu.y=stage.stageHeight /2;

addChild(menu);

6、用一个函数buildMenu来实现每个菜单项目。

function buildMenu(){

 var btn:myButton;

 var angle:int=360/menu_items.length;

 for (var i:int = 0; i< menu_items.length; i++){

  btn = new myButton();

  btn.buttonMode=true;

  btn.labelBtn.text = menu_items[i];

  btn.mouseChildren=false;

  menu.addChild(btn);

  TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});

 }

}

7、最后添加一个监听单击事件的代码。

 menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{

 // TO DO ...

 trace(myButton(e.target).labelBtn.text);

}

8、所有代码如下。

import com.greensock.*;

import com.greensock.easing.*;

var menu_items:Array = ["HOME","ABOUT ME","PORTFOLIO","BLOG","CONTACT"];

var menu:Sprite = new Sprite();

menu.x= stage.stageWidth / 2;

menu.y=stage.stageHeight /2;

addChild(menu);

buildMenu();

function buildMenu(){

 var btn:myButton;

 var angle:int=360/menu_items.length;

 for (var i:int = 0; i< menu_items.length; i++){

  btn = new myButton();

  btn.buttonMode=true;

  btn.labelBtn.text = menu_items[i];

  btn.mouseChildren=false;

  menu.addChild(btn);

  TweenLite.to(btn,2,{rotation: -i*angle,ease:Bounce.easeOut});

 }

}

menu.addEventListener(MouseEvent.CLICK,clickHandler );

function clickHandler(e:MouseEvent ):void{

 // TO DO ...

 trace(myButton(e.target).labelBtn.text);

}
1全文阅读
提示:试试"← →"键,翻页更方便哦!

时间: 2024-09-27 22:56:42

Flash AS3制作个性的旋转圆形网页导航的相关文章

Flash AS3制作交互式3D旋转动画效果

  效果演示: 使图标具有交互性: 当鼠标单击某个图标时使之旋转,并让图标显示在屏幕的最前面. //定义旋转的最终角度 var endAngle:Number = 90; //保存已经旋转的角度 var tempAngle:Number = 0; //保存旋转的状态 var isRotating:Boolean = true; //注册图标的单击事件 mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation); //定义侦听器函数 funct

Flash AS3制作茶杯震动gif动画效果

 下面小编就为大家介绍Flash AS3制作茶杯震动gif动画效果,教程很不错哦,也很简单,一起来学习吧! 效果如下:(用鼠标指向右侧的茶壶可以看到震动效果) 制作过程如下: 首先准备一个图片当做背景,如下: 然后再建立一个新图层,导入一个茶壶素材,然后把它转变为影片剪辑,之后命名实例名字. 目前存在两个图层,然后我们再新建立一个放置ACTION的图层,代码如下:   代码如下: var coordX:Number = shaker_mc.x;  var coordY:Number = shak

Flash AS制作的仿苹果机的导航菜单

菜单|导航 06年学类时,写的菜单效果.模仿苹果机中的菜单效果,鼠标经过图标时,以该图标为中心向两边缩放. /**  *MacintoshMenu(仿苹果机菜单)  *Auther:流浪儿  *Versoin:MacintoshMenu 1.0 **/ class MacintoshMenu {  //属性  private var target:MovieClip;  private var imageContainer:MovieClip;  private var imageArr:Arr

用CSS制作的很不错的简洁的网页导航下拉菜单

用CSS和javascript制作的非常简洁的网页导航菜单,而且还具有下拉的功能啊!呵呵 <style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/<

Flash AS3简单制作百叶窗图片特效

Flash AS3简单制作百叶窗图片特效,适合初学者的教程,希望大家能练习! 图片百叶窗特效: 制作过程: 任意选择一个图片,当做本例动画中的图片,我们将使该图片达到百叶窗动画特效. 然后按Ctrl+J修改文档的属性,设置任何颜色为背景都可以,大小调整到和自己选择的图的大小一样大就可以了,幁频设置为38fps 就可以. 把图层1命名为photo,把外部准备的图片导入到舞台,然后按F8转变为原件,类型是影片剪辑, 然后拖拽到舞台,打开属性面板,设置如下:

Flash AS3简单制作美女图片缓动特效gif动画

  Flash AS3简单制作美女图片缓动特效gif动画过程,本教程主要适合初学者,希望大家练习,可以先看下相关文章:Flash AS3简单制作图片变成百叶窗特效教程 制作步骤: 新建立文档,调整文档属性,如下图设置: 和上一个实例教程一样,导入一个图片是影片剪辑,然后制作一个文字按钮,设置如下: 然后再建立一个新图层,在第一帧中添加如下代码: 代码如下: import fl.transitions.*; import fl.transitions.easing.*; myButton.addE

Flash AS3简单制作图片变成百叶窗特效教程

  Flash AS3简单制作图片变成百叶窗特效方法,适合初学者的教程,希望大家能练习! 图片百叶窗特效: 制作过程: 任意选择一个图片,当做本例动画中的图片,我们将使该图片达到百叶窗动画特效. 然后按Ctrl+J修改文档的属性,设置任何颜色为背景都可以,大小调整到和自己选择的图的大小一样大就可以了,幁频设置为38fps 就可以. 把图层1命名为photo,把外部准备的图片导入到舞台,然后按F8转变为原件,类型是影片剪辑, 然后拖拽到舞台,打开属性面板,设置如下: 然后创建一个新图层,绘制一个文

Flash AS3实例教程:快速制作烟雾动画

本例利用flash快速制作烟雾动画,主要利用AS3的类来实现.   首先我们在Photoshop中制作一个烟雾的照片,这里主要使用Photoshop的画笔来实现. 图1 图2 图3 之后我们导进到FLASH中来,然后转变为影片剪辑原件,命名为smokepuff.之后我们打开库,然后右击该元件,设置链接. 图4 然后编辑种别,代码如下. package com.asgamer.graphics { import flash.display.BlendMode; import flash.displ

flash as3.0实用公式

基础三角函数的计算: 角的正弦值 = 对边 / 斜边 角的余弦值 = 邻边 / 斜边 角的正切值 = 对边 / 邻边 弧度转换为角度以及角度转换为弧度: 弧度 = 角度 * Math.PI / 180 角度 = 弧度 * 180 / Math.PI 向鼠标(或者任何一个点)旋转: // 用要旋转到的 x, y 坐标替换 mouseX, mouseY dx = mouseX - sprite.x; dy = mouseY - sprite.y; sprite.rotation = Math.ata