FLEX 简易信息警示窗

提示信息通常使用Alert组件就OK了.但是有时候想个性化一些,比方说在提示出现与移除时加些效果,或者让Alert定时消失等.使用Alert组件实现这些有些麻烦,要对其扩展.
找个容易上手的方法,自己写了个,呵呵
模仿Alert的形式,调用类静态方法,不用实例化,这里命名为AlertTip
使用Canvas作为基本容器,包含Text组件
考虑到若将Canvas及Text放置到AlertTip中生成过于复杂,所以将Canvas容器单独做为一个component来供AlertTip使用.
Canvas容器,这里命名为AlertCanvas
使用PopUpManager显示
示例:

Flash动画
在线播放

代码:
点击查看AlertCanvas.mxml文件
说明一点,把Canvas的visible属性设置为false是因为显示前AlertTip是不可见的.
主类,AlertTip
点击查看AlertTip.as文件
[code]
/**
* By AuZn
* Kingnare.com
*/
package com.kingnare {
import mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;
import flash.display.Sprite;
import mx.core.Application;
public class AlertTip{
public static var globalDelay:uint = 1000;
public function AlertTip(){
}
/**
* 提示显示方法
* message:提示信息
* delay:可显示的时间
* modal:背景变灰
* initValue:初始化数值
* parent:父级
*/
public static function show(message:String="", delay:int=-1, modal:Boolean=false, initValue:Object=null, parent:Sprite=null):void{
if(delay

.AlertTip{
backgroundColor: #000000;
backgroundAlpha: 0.6;
borderStyle: "solid";
borderColor: #DDDDDD;
cornerRadius: 4;
dropShadowColor: #000000;
dropShadowEnabled: true;
shadowDirection: "center";
shadowDistance: 1;
color: #00FFFF;
textAlign: "center";
fontSize: 12;
}

[/code]
其中的AlertTip为提示窗口的样式
功能很有限,只起到个提示作用.
要扩展成Alert那样有标题及按钮的估计就不能用Canvas组件了,用Panel组件扩展起来容易些
还要加上事件处理,呵呵
源代码打包: AlertTip.zip

平滑Image

客户要求在Flash里加入扫光、海浪、破碎等效果,以前只是听说AE能做,便恶补了AE才做出来。结论:这年头什么都要会些 -_-!
睡前写个小东东:
在使用Image组件时发现没有平滑效果的设置和方法(有可能是自己太笨,找不到),就自己写了个简单的,对于普通的小应用应该够用了。
效果:
SmoothImage.swf
加载用的图片:
Apple_04.png
新建文件:SmoothImageTest.mxml
[code]

[/code]
其中的SmoothImage就是下面要新建的类文件:
SmoothImage.as
[code]
package {
import mx.controls.Image;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
public class SmoothImage extends Image {
private var sourceURL:String;
private var pictLdr:Loader;
public function SmoothImage():void{
super();
pictLdr = new Loader();
pictLdr.contentLoaderInfo.addEventListener(Event.INIT, loaderInit);
}
private function startLoadImg():void{
pictLdr.load(new URLRequest(sourceURL));
}
private function loaderInit(event:Event):void{
var myDataBitmap:BitmapData = new BitmapData(pictLdr.width,pictLdr.height,true, 0x00ffffff);
myDataBitmap.draw(pictLdr);
var myBitmap:Bitmap = new Bitmap(myDataBitmap,"auto",true);
source = myBitmap;
}
public function set ImgURL(_url:String):void{
sourceURL = _url;
startLoadImg();
}
public function get ImgURL():String{
return sourceURL;
}
}
}
[/code]
原理非常简单,就是用Loader加载图片,然后绘制出一个Bitmap来做为Image组件的source.
Bitmap使用平滑打开,OK了
如有达人知道更好的方法,一定要告诉我,先谢谢啦
PS. 这几天的大事很多哈。
FLEX3 BETA1出世,FLASH PLAYER 升级,AIR(原APOLLO)BETA现身。
嗯,我们经理也开始对FLEX感兴趣了…

FLEX-PopUpManager小试

学习到了PopUpManager。
便想利用这个来实现一个效果:在图片上左键单击后 在图标附近出现一相关的菜单供用户使用。
例如将专辑中的某首歌曲转移到其他专辑中,当单击转移图标后,会列出所有可选用的专辑。
刚开始做的时候选择了Menu来做为弹出对象。但是发现个问题,如果专辑数目过多会超出舞台。
于是把Menu换成了List
最后差一个问题,单击弹出的List以外部分要移除List
这个可以用FlexMouseEvent.MOUSE_DOWN_OUTSIDE来监听
Demo:

Flash动画
在线播放

Code:
PopUpTestApp.mxml
PopUpList.mxml
源文件下载:
PopUpTestApp.zip
参考资料:FLEX 帮助文档
P.S. 最近大事还真不少哈。关于FLEX3的消息很多,看了很兴奋哈。有新的组件可以用(虽说目前这些还有没用过的),据说还要把Flex framework整合到player中,可以大大减少FLEX程序的size,更有利于FLEX的应用和传播。
还出现了GIF播放类。难道当时开发小组没有做对动态GIF播放功能就是想到了以后可以用AS3代码实现?
APOLLO Beta将內建SQLite小型数据库

FLEX List组件拖拽时数据重复

学习FLEX过程中又碰到问题了。
例如有A、B两个List组件。 将A中的某项多次拖到B中后,发现这些项并不是作为新生成项加到B的dataProvider中.我在下例中给接收数据的List组件数据源加了个监听。
当数据更改后会在每项前加个序号
看下例:

Flash动画
在线播放

点击查看MXML文件
若将左列表同一项多次拖至右边列表中,可以看到输出文本显示的是列表中相邻两项相同(序号也相同)
这里用的是“===”符号来比较的。说明默认拖动列表的数据源是不会产生新项,具体原因没有研究,有知道的大虾指点下下 呵呵
最后在FLEX DOC TEAM找到了解决方法:就是自定义dragDrop事件
MXML文件及自定义事件:
[code]
private function dragDropEvent(event:DragEvent):void {
//检测数据结构
if (event.dragSource.hasFormat("items")){
//取消默认事件处理
event.preventDefault();
event.currentTarget.hideDropFeedback(event);
//获取拖拽接收对象
var dropTarget:List=List(event.currentTarget);
//获取拖拽对象数据
var itemsArray:Array = event.dragSource.dataForFormat("items") as Array;
//获取拖拽对象数据第一项
var tempItem:Object = {label: itemsArray[0].label, data: itemsArray[0].data};
//获取插入位置
var dropLoc:int = dropTarget.calculateDropIndex(event);
//插入项
IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);
}
}
[/code]
更改过的实例如下:

Flash动画
在线播放

点击查看MXML文件
实例下载
参考:[color=Black]FLEX DOC TEAM DRAGDrop PDF文档及实例

http://blogs.adobe.com/flexdoc/2007/02/drag_and_drop_documentation_up.html

FLEX Module 模块高宽百分比设置

最近用到了模块部分,开始研究
谁料昨天卡在了模块高宽设置上一个下午,找了些资料,解决了.
问题:
当模块设置width及height为100%时,加载到父级容器后会发现模块并不能自动填充,即使ModuleLoader的width和height均设置为100%
若在模块中只加入Canvas测试,发现加载后其高宽值均为0.
解决:
(方法1)直接在模块参数中加入percentWidth=”100″ percentHeight=”100″
例:

(方法2)在模块加载完成后设置模块percentWidth,percentHeight属性值为100
例子见源文件
部分源码说明:
设置ModuleLoader高宽为适应100%并注册ready,resize,error事件

ModuleLoader的Ready事件:
重设模块的percentWidth和percentHeight.如果模块按方法1进行设置后,这两个可以不设置
private function readyModule(event:ModuleEvent):void{
var tmpModule:ModuleLoader = event.target as ModuleLoader;
var Mchild:* = tmpModule.child;
Mchild.percentWidth = 100;
Mchild.percentHeight = 100;
}
演示文件及源代码:
Demo(MainApp.swf)
DemoSource(FLEX_Module_Resize.zip)
编译过程
产生类库列表
[color=Blue]mxmlc -link-report=report.xml MainApp.mxml
编译主程序
[color=Blue]mxmlc MainApp.mxml
编译模块
[color=Blue]mxmlc -load-externs=report.xml MyModule.mxml
编译过程原文档:

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=modular_083_4.html

参考资料:http://livedocs.adobe.com/flex/201
P.S.
ADOBE关于模块化开发的例子和文档: http://blogs.adobe.com/flexdoc/modules/
FLEX错误代码WIKI: http://editthis.info/flexerrorcodes/Main_Page
Flash版:http://judahfrangipane.com/errorsearch/ErrorLookup.html

Page 7 of 7« First...34567