我们先来看看要做到什么效果,我要说明的是这个效果是在AIR中使用效果更好,因为web的方式使用有些不伦不类的感觉,在AIR桌面程序中,在顶部菜单之下加入一行图片菜单,那么我们将要实现的功能就是针对与这个图形菜单效果:
在鼠标没有碰触之前: ,在鼠标碰触后:
那么这么看是两幅图片,实际上我在实现的时候也是利用的图片切换的原理是先这个效果的:
请看AS代码:
package customClass
{
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.IBitmapDrawable;
import flash.events.MouseEvent;
import mx.controls.LinkButton;
public class MyCustomCanvas extends LinkButton
{
[Embed(source="delete_icon.png")]
private var img:Class;
[Embed(source="adobelogo.jpg")]
private var img1:Class;
public function MyCustomCanvas()
{
super();
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w,h);
var myImage= new img();
var bitMapData:BitmapData = new BitmapData((myImage as DisplayObject).width,(myImage as DisplayObject).height,true);
//var myImage:Bitmap = new Bitmap(bitMapData);
bitMapData.draw(myImage as IBitmapDrawable);
graphics.clear();
graphics.beginBitmapFill(bitMapData);
graphics.drawRect(0,0,w,h);
graphics.endFill();
}
override protected function rollOverHandler(event:MouseEvent):void
{
event.preventDefault();
var myImage= new img1();
var wi:Number = ((event.target) as DisplayObject).width;
var he:Number = ((event.target) as DisplayObject).height;
var bitMapData:BitmapData = new BitmapData((myImage as DisplayObject).width,(myImage as DisplayObject).height,true);
bitMapData.draw(myImage as IBitmapDrawable);
graphics.clear();
graphics.beginBitmapFill(bitMapData);
graphics.drawRect(0,0,wi,he);
graphics.endFill();
}
override protected function rollOutHandler(event:MouseEvent):void
{
event.preventDefault();
var wi:Number = ((event.target) as DisplayObject).width;
var he:Number = ((event.target) as DisplayObject).height;
var myImage= new img();
var bitMapData:BitmapData = new BitmapData((myImage as DisplayObject).width,(myImage as DisplayObject).height,true);
//var myImage:Bitmap = new Bitmap(bitMapData);
bitMapData.draw(myImage as IBitmapDrawable);
graphics.clear();
graphics.beginBitmapFill(bitMapData);
graphics.drawRect(0,0,wi,he);
graphics.endFill();
}
/* override protected function clickHandler(event:MouseEvent):void
{
} */
}
}
MXML调用页面:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:myComponent="customClass.*">
<mx:HBox>
<myComponent:MyCustomCanvas width="40" height="25">
</myComponent:MyCustomCanvas>
<myComponent:MyCustomCanvas width="40" height="25">
</myComponent:MyCustomCanvas>
<myComponent:MyCustomCanvas width="40" height="25">
</myComponent:MyCustomCanvas>
<myComponent:MyCustomCanvas width="40" height="25">
</myComponent:MyCustomCanvas>
<myComponent:MyCustomCanvas width="40" height="25">
</myComponent:MyCustomCanvas>
</mx:HBox>
</mx:Application>
这样基本上就实现了这个效果,很显然有些粗糙,你可以再继续重写一些方法,或者多加一些方法,那么出现的效果更加直观,比如你可以在数据库中取出图片的地址和链接的地址以及链接的方式等,就写到这里吧,有时间我会完善该功能并上传源代码。
- 大小: 7.7 KB
- 大小: 424 Bytes
- 大小: 697 Bytes
分享到:
相关推荐
这个"flex3D菜单"项目显然利用了Flex的强大功能来创建一个具有三维效果的交互式菜单,该菜单能够跟随用户的鼠标移动,提供流畅的用户体验。在Flex中,3D效果通常通过Stage3D API实现,这是一个底层的硬件加速图形...
总之,“flex自定义多级系统菜单”涉及到的主要知识点有:XML数据绑定、Flex组件(如`Menu`和`MenuBar`)、数据源管理、事件处理以及可能的图形资源加载。通过这些技术,我们可以构建出灵活且易于维护的多级菜单系统...
在Flex中实现3D切换效果,主要依赖于MXML和ActionScript的结合使用,以及Flash Player或Adobe AIR对3D图形的支持。 要实现"Flex 3D切换效果",首先你需要了解以下关键概念和技术: 1. **Transform3D对象**:这是...
在Flex中,可以创建库(Library),将常用的组件、图形等资源存储在其中,便于复用。`library.swf`是库的编译结果,`catalog.xml`则用于描述库中的资源。在自定义菜单中,如果需要使用库中的图标或动画,可以通过`...
在IT行业中,Flex是一种基于ActionScript 3.0的开源框架,主要用于...压缩包中的"3dmenu"文件可能是实现这种3D菜单效果的源代码或资源文件,通过学习和研究,开发者可以掌握创建富有创新性和吸引力的3D用户界面的技巧。
"Flex 鱼眼特效"指的是在Flex应用中实现的一种视觉效果,它模拟了鱼眼镜头的透视变形,通常用于创建吸引人的交互式菜单或展示元素。这种特效能够使用户界面更加生动有趣,增加用户的互动体验。 在Flex中实现鱼眼...
- 效果库:Flex SDK内含的Effect类库提供了许多预定义的动画效果,如Fade、Slide等,可以直接应用于菜单导航。 4. 源码分析: - MXML文件:主要负责界面布局,包括菜单栏的创建和菜单项的定义。 - ActionScript...
为了实现3D效果,可能还需要借助Stage3D技术,这允许Flex应用程序进行硬件加速的图形渲染,从而提高性能和视觉质量。 在压缩包中的"PopupEffect"可能是一个包含了这些效果的示例代码或资源文件。PopupEffect通常指...
5. **Flex Builder**:Flex Builder是Adobe提供的集成开发环境(IDE),它提供了图形化的界面和代码编辑功能,方便开发者快速构建Flex应用。在Flex Builder中,你可以直接拖放组件,设置属性,添加动画,以及调试...
它提供了丰富的用户界面组件和强大的图形编程模型,使得开发者能够创建交互性强、视觉效果优秀的Web应用。在Flex4中,自定义右键菜单是提升用户体验的重要一环,尤其对于需要更多上下文操作的应用来说。 标题中的...
标题提到的"Flash 11.2新功能,Flex屏蔽右击菜单"是指在使用Adobe Flash Player 11.2及Flex框架进行开发时,如何阻止用户通过鼠标右键点击在应用程序上弹出默认的上下文菜单,以及如何自定义自己的右键菜单。...
Flex Builder(现在已更名为Flash Builder)是一款强大的集成开发环境,它提供了图形化的布局编辑器和调试工具,方便开发者设计和测试菜单组件。通过拖放操作,可以直接在设计视图中构建菜单结构,并实时预览效果。 ...
这些效果的实现通常涉及到自定义渲染器和图形操作,如使用BitmapData和BlendMode来创建视觉效果。此外,为了模拟窗口拖放和缩放功能,开发者可能会使用鼠标事件监听器(MouseEvent监听器)和交互式组件的dragDrop、...
在图形下拉菜单中,CSS3的特性如伪类选择器、变换(transition)和动画(animation)被广泛应用,以实现平滑的展开和收起效果,以及吸引用户的视觉焦点。 这个"jQuery&CSS图形下拉菜单"可能包含以下关键知识点: 1...
Flex 3是Adobe开发的一个开源框架,主要用于构建富互联网应用程序(RIA),尤其适用于创建交互性强、图形丰富的Web应用。 在Flex 3中,组件是构建用户界面的基本单元,它们可以是按钮、文本输入框、列表等常见的UI...
- **效果介绍**:讲解了 Flex 中的效果系统及其基本概念。 - **Spark 效果**:介绍了 Spark 框架下的效果实现方法。 - **使用 MX 效果**:讲述了如何在 MX 框架下应用效果。 - **视图状态**:介绍了视图状态的概念...
Flex3是一个强大的工具,它允许开发者构建富互联网应用程序(RIA),并提供丰富的图形和动画效果。这个项目的重点是实现导航菜单的折叠和展开功能,以增强用户体验和界面的易用性。 首先,让我们了解Flex3的基本...
Flex是一个开源框架,用于构建富互联网应用程序(RIA),它允许开发者使用MXML和ActionScript来创建交互式、图形丰富的Web应用。Flex 3.0在当时是一个重要的版本,因为它引入了诸多改进和新特性,比如更强大的组件库...
通过这些文件名,我们可以推断这篇博文可能会深入讲解Flex报表的各个重要方面,从基础的数据绑定和图表创建,到高级的自定义注解和3D效果。然而,要获取更具体的信息,还需要直接查看原文档或访问提供的博客链接。
这个"鱼眼"特效是Flex4中的一个特殊视图效果,它模拟了现实世界中鱼眼镜头产生的夸张弧形视野,使得菜单或界面元素在视觉上呈现独特且引人注目的动态效果。鱼眼菜单通常用于提供一种创新的用户交互方式,尤其是当...