FLASH制作个性的旋转圆形网页导航(（推荐10篇））由网友“灰飞灰”投稿提供，以下是小编收集整理的FLASH制作个性的旋转圆形网页导航，仅供参考，希望对大家有所帮助。
篇1：FLASH制作个性的旋转圆形网页导航
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);
}
篇2：制作简单的FLASH导航菜单
菜单
相信大家都对现在的FLASH导航情有独钟,但是对一些的FLASH特效望尘莫及（我就是其中一位：），特别是复杂的AS动作脚本，不过，通过自己的学习发现，一些很难理解的程序可以通过简单的AS动作脚本表现出同样的效果,今天我就来讲一个例子,可以让一些和我一样的FLASH的初学者（懂基础AS动作脚本程序的FLASHER）！希望大家有所体会，有所收获（在下献丑了-_-！）
预览：
先来说说知名的《闪客帝国》的导航栏：
这种效果的导航栏在国内国外的例子很多的，很实用！只不过他们表现的形式不一样罢了，比如一些是子菜单是横向出现的www.flashemprie.com，一些是向下笔直出现的www.designnet.co.kr/...不一一举例了。
1.分析他的动作原理
a.当的鼠标点击菜单栏的其中一个栏目时（比如资讯中心）（如图一），相应的[资讯中心栏目]的子菜单出现效果,(以《闪客帝国》为例，就是子栏目(频道首页 业界 动漫 帝国 活动 杂谈)向下运动,出现一些可以点击进入相应栏目的按扭，
b.当的鼠标点击菜单栏的另一个栏目时（比如闪客帝国）(见图二),[资讯中心栏目]的子栏目消失，相应的[闪客帝国栏目]的子菜单出现效果．知道了他的原理就可一大家大胆的去尝试各种方法.
2.动手制作(我知道有时候动手很难:)
a.做好你要的菜单栏,和相应的子菜单(由于主要是讲将程序简单化，其他的细节就不多说了！)
b.选择其中一个栏目[比如公司介绍],把他相应的子菜单拖入主场景,定义子菜单的实例名称为b(见图三);再选择其中一个栏目[比如医学],把他相应的子菜单拖入主场景,定义子菜单实例名称为c(见图四),其他栏目一样的做法！
c.点击一个栏目[比如公司介绍],打开他的动作面版输入以下代码（不要想到代码就闪,坚持看下去,代码很简单的：）（见图5）
篇3：简单的FLASH导航菜单制作
菜单|导航
相信大家都对现在的FLASH导航情有独钟,但是对一些的FLASH特效望尘莫及（我就是其中一位：），特别是复杂的AS动作脚本，简单实用的FLASH导航菜单制作
。不过，通过自己的学习发现，一些很难理解的程序可以通过简单的AS动作脚本表现出同样的效果,今天我就来讲一个例子,可以让一些和我一样的FLASH的初学者（懂基础AS动作脚本程序的FLASHER）！希望大家有所体会，有所收获。预览：
源文件下载
先来说说知名的《闪客帝国》的导航栏：
这种效果的导航栏在国内国外的例子很多的，很实用！只不过他们表现的形式不一样罢了，比如一些是子菜单是横向出现的www.flashemprie.com，一些是向下笔直出现的www.designnet.co.kr/...不一一举例了。
1.分析他的动作原理
a.当的鼠标点击菜单栏的其中一个栏目时（比如资讯中心）（如图一），相应的[资讯中心栏目]的子菜单出现效果,(以《闪客帝国》为例，就是子栏目(频道首页 业界 动漫 帝国 活动 杂谈)向下运动,出现一些可以点击进入相应栏目的按扭。
b.当的鼠标点击菜单栏的另一个栏目时（比如闪客帝国）(见图二),[资讯中心栏目]的子栏目消失，相应的[闪客帝国栏目]的子菜单出现效果．知道了他的原理就可一大家大胆的去尝试各种方法!2.动手制作(我知道有时候动手很难:)a.做好你要的菜单栏,和相应的子菜单(由于主要是讲将程序简单化，其他的细节就不多说了！)
b.选择其中一个栏目[比如公司介绍],把他相应的子菜单拖入主场景,定义子菜单的实例名称为b(见图三);再选择其中一个栏目[比如医学],把他相应的子菜单拖入主场景,定义子菜单实例名称为c(见图四),其他栏目一样的做法！
c.点击一个栏目[比如公司介绍],打开他的动作面版输入以下代码（不要想到代码就闪,坚持看下去,代码很简单的：）（见图5）on (rollOver) { //当鼠标放上去的时候
b.gotoAndPlay(2);//场景中实例名称为b的影片剪辑开始从第2帧运动
a.gotoAndStop(1);//场景中实例名称为a的影片剪辑停在第1帧
c.gotoAndStop(1);//场景中实例名称为c的影片剪辑停在第1帧
d.gotoAndStop(1);//场景中实例名称为d的影片剪辑停在第1帧
e.gotoAndStop(1);//场景中实例名称为e的影片剪辑停在第1帧
f.gotoAndStop(1);//场景中实例名称为f的影片剪辑停在第1帧
}
on (press) { //当鼠标点击的时候
getURL(“../intro.asp”, “_self”);//连接相应的网页.并在同一窗口打开
}
再来分析一下上面的程序(是不是很简单啊:)
当我们点击一个栏目的时候,和他对应的子栏目开始运动,其他的子栏目全都停在第1帧(用心体会这是关键所在-_-!)，如果你这里搞懂了,就可以举一反三做出很多其他效果的菜单栏了（但是只换汤不换药）！
d.其他栏目输入的程序都一样,就是对应的子栏目的实例名称为改一下哦!
3.补充
至此，一个简单实用的菜单就做好了，可是，你会发现，这个菜单还存在着一个缺陷：当鼠标点击某一个主菜单，出现相应的子菜单，可是鼠标离开菜单之后，子菜单不能随之自动消失，虽然是个细节，但总让人觉得不够完美，下面我们就用一个相对巧妙却简单的方法来解决这个问题。
（1）首先在原来的导航栏中，在主菜单和子菜单以外用一个隐形按钮填充。注意隐形按钮只要在点击区做一块相应的图形,图形要以导航栏的形状不同改变的。如下图
（2）在主场景上新建一层，在第5帧按F6插入空白关键帧，拖入刚才做好的隐形按钮，然后给按钮增加如下AS代码：
on (rollOver) {
a.gotoAndStop(1);
b.gotoAndStop(1);
c.gotoAndStop(1);
d.gotoAndStop(1);
e.gotoAndStop(1);
f.gotoAndStop(1);
}
于是实现当鼠标离开菜单（或者说当鼠标旋停在隐形按钮上）时，子菜单随之消失。如下图
3.总结一下
其实很多的程序都通过简单语句编的,这样做简单、易懂不是吗?（但是适合相我这样的初级用户吧-_-!）关于这类FLASH的制作我之前也问过很都的高手,但是他们给我的都是很复杂的代码我真看不下哦！人不可能一步登天的！很多东西都要慢慢学的,希望这个教程对你们有点点帮助和启发吧！（说到这了，不会有朋友什么都没看懂吧!）
篇4：PS制作黑色网页导航菜单
这篇教程教的朋友们用PS制作黑色网页导航菜单，教程难度一般，是最基础的网页界面设计教程。转发过来和的朋友们一起学习。先看看效果图：
FEVTE编注：PS教程讨论交流和PS作品请到论坛PS交流区，地址：bbs.fevte.com/forum-51-1.html
具体制作步骤如下：
1、我们要做的第一件事情就是创建一新的文档。在这个教程中我们使用400×400像素的文档大小。
2、将背景色更改为#000000。
3、接下来使用圆角矩形工具画出如下的一选区，半径为10px。
4、我们想让矩形更生动一些，因此在图层面板中的矩形图层上点击右键，选择混合模式，使用如下设置。
5、这时你应该得到如下图的效果：
6、下一步我们要做的是使用矩形选区工具做出如下图的选区，将其填充为白色。
7、很显然，我们并不需要白色，因此我们在图层上点击右键，应用如下设置
8、你应该得到和下图类似的效果：
9、下一部分我们要做标题的折叠效果，
这样就有了透视的feel。使用多边形套索工具创建一如下的选区，将其填充为白色。
10、然后我们给这个图层应用如下图层样式：
11、然后给另外一边重复上面的步骤，你会得到如下的结果：
12、下一步我们要做的是给内容区添加标题，选择文字工具添加标题文字。
13、白色有些过于平淡，所以我们给文字也添加图层样式。
14、你会得到类似于下面的效果。看上去好多了。
15、还有一步要做，将文字图层复制一遍，关掉新图层的混合选项，文字颜色设置为#FFFFFF。将这个图层放置于原始图层的下方，使用方向键将其向下移动1个像素。
16、这个效果太强烈了，我们要让它变得更温顺一些。我们将不透明度调整为28%左右，这样你会得到如下结果：
17、这就是全部的步骤。你还可给内容区添加一小图标，然后添加一些链接完成整个设计。
FEVTE编注：PS教程讨论交流和PS作品请到论坛PS交流区，地址：bbs.fevte.com/forum-51-1.html
篇5：xhtml+css制作不规则导航网页设计
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下，结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。
先看图（图片只是大致做了一下）
效果展示：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
xhtml结构部分内容：
菜单
菜单
菜单
css部分内容：
* {margin:0;padding:0;font:normal 12px/25px “宋体”;}
body {background:#f8f8f8;}
ul {list-style.:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(www.linxz.cn/blog2/attachments/month_0804/d43194011.gif) center center no-repeat;}
a:hover {color:#000;background:url(www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}
思路：
主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片，
从而实现了不规则导航的菜单。
过程：
1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;
2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让菜单这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。
这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。
个人认为比较重要的几个属性：
li中的负边距，实现叠加效果
hover中的position:relative
a是内联元素，要触发haslayout，可以使用float:left来触发
注：
以上内容或许讲得不是非常明白，不过大家可以仔细分析一下源码，然后交流一下。如果觉得好也请不要回帖说顶，收藏，谢谢之类的话，你们的点击就是对我的支持了。
来自：bbs.blueidea.com/thread-2843421-1-1.html
篇6：Flash AS制作的仿苹果机的导航菜单
菜单|导航
学类时，写的菜单效果，模仿苹果机中的菜单效果，鼠标经过图标时，以该图标为中心向两边缩放。
/**
*MacintoshMenu(仿苹果机菜单)
*Auther:流浪儿
*Versoin:MacintoshMenu 1.0
**/
class MacintoshMenu {
//属性
private var target:MovieClip;
private var imageContainer:MovieClip;
private var imageArr:Array;
private var total:Number;
private var spanX:Number = 5;
private var ypos:Number = Stage.height/2+50;
//构造函数
public function MacintoshMenu(target:MovieClip, imageArr:Array, scale:Number) {
this.target = target;
this.imageArr = imageArr;
//
total = imageArr.length;
imageContainer = target.createEmptyMovieClip(“imageContainer”, 1);
attachMc(scale);
resetPosition;
}
//加载图片
private function attachMc(scale:Number):Void {
for (var i:Number = 0; i
var menu:MovieClip = imageContainer.attachMovie(imageArr[i], “menu”+i, i);
mouseControlZoomEffect(menu, scale);
menu.onRollOver = function() {
//trace(this._name);
};
}
}
//鼠标控制缩放比例效果
private function mouseControlZoomEffect(mc:MovieClip, scale:Number):Void {
var owner:Object = this;//用一个临时变量指向当前类
mc.onEnterFrame = function() {
var mouseX:Number = Math.abs(this._x+this._width/2+owner.imageContainer._x-owner.imageContainer._parent._xmouse);
//trace(mc._name+“>>> ”+mouseX);trace(“”);
if (owner.imageContainer.hitTest(owner.target._xmouse, owner.target._ymouse)) {
if (mouseX
var num:Number = 100+scale-mouseX;
owner.zoomEffect(this, num);
} else {
owner.zoomEffect(this, 100);
}
} else {
owner.zoomEffect(this, 100);
}
updateAfterEvent();
};
}
//缩放效果
private function zoomEffect(mc:MovieClip, scale:Number):Void {
var ratio:Number = .4;
mc._xscale = mc._yscale += (scale-mc._xscale)*ratio;
}
//重新设置各菜单的位置
private function resetPosition():Void {
var owner:Object = this;
target.onEnterFrame = function() {
for (var i:Number = 0; i
var menu:MovieClip = owner.imageContainer[“menu”+i];
menu._x = owner.imageContainer[“menu”+(i-1)]._x+owner.imageContainer[“menu”+(i-1)]._width+owner.spanX;
menu._y = owner.ypos-menu._height;
owner.imageContainer._x = (Stage.width-owner.imageContainer._width)/2;
}
updateAfterEvent();
};
}
//转义(位置、间距等)
public function get _ypos():Number {
return this.ypos;
}
public function set _ypos(values:Number):Void {
this.ypos = values;
}
public function get _spanX():Number {
return this.spanX;
}
public function set _spanX(values:Number):Void {
this.spanX = values;
}
public function get _x():Number {
return this.target._x;
}
public function set _x(values:Number):Void {
this.target._x = values;
}
public function get _y():Number {
return this.target._y;
}
public function set _y(values:Number):Void {
this.target._y = values;
}
}
篇7：Flash制作超酷的旋转像册效果
这个源文件是从一个国外站点上下载来的！简单给大家讲解一下制作过程，
先看效果和源文件。（演示效果文件184K，如果您网速慢可能会多等会）
点击这里下载源文件（Flash源文件压缩包大小220K）
简单给大家说一下制作步骤。
首先修改文档属性，准备好动画中用的图片和缩略图。
然后制作影片剪辑，先制作一个背景。 影片剪辑的图层效果如下所示。thumbs是存放缩略图的，mask是画一个正圆，作为遮照使用，images是原图，bg是放上面那个背景的。 其中注意要把图片转变为电影剪辑。其它图片都是类似，在这里给大家截个图。 为了把图片缩略图放置好位置，我们利用一个技术。这样缩略图的位置就解决了！ 每个小的缩略图的制作方法很简单，给大家截图。把缩略图用遮照遮好！ 最后把添加一个加载loading...，第一帧的action是stop(); 第二帧的action是：stop();
positions = [];
imageTotal = 8;
pauseGallery = false;
var current:MovieClip;
for (var i = 0; i var t = gallery.thumbHolder[“thumb”+i]; t.image = “image”+i; t.onPress = function() { removeMovieClip(current); current = gallery.imageHolder.attachMovie(this.image, this.image, i); pauseGallery = false; }; t.onRollOver = function() { pauseGallery = true; }; t.onRollOut = function() { pauseGallery = false; }; } current = gallery.imageHolder.attachMovie(“image0”, “image0”, 1000); this.onEnterFrame. = function() { if (!pauseGallery) { for (var j = 0; j gallery.thumbHolder[“thumb”+j]._rotation -= 0.5; } gallery.thumbHolder._rotation += 0.5; } }; 最后可以测试了！就给大家这样解释了这个动画的大体的制作过程！如果想深入学习就把源文件下载了好好研究下吧！
篇8：Flash AS轻松制作旋转可控立方体特效
特效|旋转
可以控制立方体的旋转：
cubeCenter = new point3d(0,0,0);
geom.addCube(cubeCenter, 80, 0xFFF2CC);
geom.addCube(cubeCenter, 20, 0xFFF2CC);
geom.addSolidCube(cubeCenter, 20, 0xC2B898, 30);
point1 = new point3d(-80,80,80);
point2 = new point3d(-80,80,-80);
point3 = new point3d(80,80,-80);
point4 = new point3d(80,80,80);
point5 = new point3d(-80,-80,80);
point6 = new point3d(-80,-80,-80);
point7 = new point3d(80,-80,-80);
point0 = new point3d(80,-80,80);
// attach a movie from the library and then add it
for (g=0; g<8; g++) {
attachMovie(“glowball”, “gb”+g, depth++);
mx3dInstance.addClip(eval(“point”+g), eval(“gb”+g));
}
源文件下载：点击这里下载源文件
篇9：Flash精彩实例制作旋转的花朵
旋转
最终效果如下：//创建第一个椭圆
createEmptyMovieClip(“l0”, 0);
with (l0) {
beginFill(0xff0099, 50);//填充色
moveTo(30, 0);
for (var i = 0; i<=2*Math.PI; i += Math.PI/180) {
lineTo(30*Math.cos(i), 50*Math.sin(i));
}
endFill;//结束填充
}
r = 0;//变量初始化
nEnterFrame. = function () {
r += Math.PI/60;
//创建空数组
x = new Array();
y = new Array();
du = new Array();
//复制第一个椭圆
for (var i = 1; i<5; i++) {
l0.duplicateMovieClip(“l”+i, i);
}
//设置椭圆们的运动及旋转
for (var i = 0; i<5; i++) {
eval(“l”+i)._x = 273+50*Math.cos(2*Math.PI/5*i+r);
eval(“l”+i)._y = 200+50*Math.sin(2*Math.PI/5*i+r);
//为数组元素赋值
x[i] = -Math.cos(2*Math.PI/5*i+r);
y[i] = -Math.sin(2*Math.PI/5*i+r);
du[i] = Math.atan(y[i]/x[i])*180/Math.PI;
//设置椭圆们旋转的角度
eval(“l”+i)._rotation = x[i]>0 ? 90+du[i] : du[i]-90;
}
};
//发挥你丰富的想象力,精彩的效果等着你!
篇10：PS制作漂亮质感网页导航按钮
FEVTE编注：更多鼠绘教程讨论交流和鼠绘作业提交请进入论坛PS鼠绘交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=90
具体的制作步骤如下：
1.填充背景为深灰色，设置远景色，新建图层1，绘制圆色矩形
2.为图层1添加图层样式(投影,内阴影,外发光,渐变叠加,描边);
3.选择图层1,使用滤镜>杂色>添加杂色(根据情况调整杂色的数目);
4.按CTRL键点击图层1,调出图层1的图形选区之后,新建图层2,填充任意色彩,选择矩形选框工具,按向上方向键,将选区向上移动1个像表的间隔,再按删除键删除选区内的色彩.再CTRL+D,取消选区.这样我们就得到了按钮底部的高光了
5.选图层2,添加图层样式(渐变叠加);
6.按CTRL键,点击图层1,调出层1选区,再新建图层3,使用渐变工具(径向渐变,白到玄色,从按钮的上中位置拖到按钮的下右位置),CTRL+D取消选区,改变层3的图层样式;如图设置
7.选择圆角矩形工具,建立与按钮同等宽度的圆色矩形路径,再选用转换点工具,移动右下角两个节点.使其变成梯形,新建图层4,设置远景色为白色,进入路径面板,填充路径(白色).按CTRL键点击层1,选图层4,为图层4添加图层蒙板.再设置图层混合模式,产生按钮的高光效果
8.输入文字,添加图层样式
完成终极效果
FEVTE编注：更多鼠绘教程讨论交流和鼠绘作业提交请进入论坛PS鼠绘交流区：bbs.fevte.com/forumdisplay.php?fid=51&filter=type&typeid=90
★ 教学课件制作
★ 网页设计论文
★ 信息技术教案3
【FLASH制作个性的旋转圆形网页导航（推荐10篇）】相关文章：
用Fireworks制作温馨母亲节动画贺卡2022-09-18
小学动画《FLASH入门》课件2023-01-26
小学三年级信息技术教学反思2022-05-24
人教版小学数学课件2022-06-16
flash遮罩动画教学设计2023-12-31
Flash中帧的教学解析2022-07-06
极简主义网站设计的首选色彩:灰色2022-04-30
初中生信息技术教案2022-10-20
企业形象策划优秀建议书2023-07-13
flash教学课件2022-06-22