这是模仿的一个网站的菜单效果,现在那个网站也不存在了,就不放链接了。O(∩_∩)O~
菜单内容没做,O(∩_∩)O~
源码:
package com.litefeel
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.MouseEvent;
import gs.easing.Strong
import gs.TweenLite;
/**
* www.litefeel.com
* lite3@qq.com
* qq:735486078;
* @author lite3
*/ [SWF(width="800", height="400", frameRate="30", backgroundColor="#cccccc")]
public class MenuEffect extends Sprite
{
private var top:Number = 50;
private var middle:Number = 150;
private var btnHeight:Number = 30;
private var speed:Number = 600;
private var myPanel:MyPanel = new MyPanel();
private var panelMask:Shape = new Shape();
public function MenuEffect()
{
initUI();
}
private function initUI():void
{
myPanel.x = 100;
myPanel.y = middle;
myPanel.buttonMode = true;
addChild(myPanel);
myPanel.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
myPanel.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
panelMask.graphics.beginFill(0);
panelMask.graphics.drawRect(0, 0, 150, btnHeight);
panelMask.graphics.endFill();
panelMask.x = 100;
panelMask.y = middle;
addChild(panelMask);
myPanel.mask = panelMask;
}
/**
* 鼠标离开的效果
*
* @param e
*/ private function overHandler(e:MouseEvent):void
{
var time:Number = (myPanel.height - panelMask.height) / speed;
TweenLite.to(myPanel, time, { y:top, ease:Strong.easeOut } );
TweenLite.to(panelMask, time, { y:top, height:myPanel.height, ease:Strong.easeOut } );
}
private function outHandler(e:MouseEvent):void
{
var time:Number = (panelMask.height - btnHeight) * .5 / speed;
TweenLite.to(myPanel, time, { y:middle, ease:Strong.easeOut } );
TweenLite.to(panelMask, time, { y:middle, height:btnHeight, ease:Strong.easeOut } );
}
}
}
import flash.display.Sprite;
import flash.text.TextField;
/**
* 所有菜单项都在这里定义,O(∩_∩)O~,测试用的,没写那么多
*/class MyPanel extends Sprite
{
public function MyPanel()
{
graphics.beginFill(0xFFFF00);
graphics.drawRect(0, 0, 150, 320);
graphics.endFill();
var txt:TextField = new TextField();
var logo:String = "<a href="http://www.litefeel.com" target="_blank"><img src="http://www.litefeel.com/logo/logo.jpg" alt="" vspace="20" /></a>";
txt.htmlText = "A, this is head!\n\n\n\n" + logo;
txt.htmlText += "\n\n\n\n\n\n\n\n\n\n\nC\nD\nE\nF\nG\nH\nI\nJ\nK, this is end!";
txt.width = 130;
txt.height = 320;
txt.selectable = false;
txt.wordWrap = true;
addChild(txt);
}
}
» 转载请注明来源:www.litefeel.com » 《另类菜单效果》
» 本文链接地址:https://www.litefeel.com/cool-menu-effect/
» 订阅本站:www.litefeel.com/feed/
» Host on Linode VPS
» 本文链接地址:https://www.litefeel.com/cool-menu-effect/
» 订阅本站:www.litefeel.com/feed/
» Host on Linode VPS
This post was last modified on 2019 年 03 月 04 日 01:31