Kingnare Blog

接着上文
这回把文件夹独立出来。并完成了配合CTRL和SHIFT键进行文件选择功能
使用了两个临时数组来存储选择和未选择的文件
使用了FOR语句，可能会影响效率，对于优化代码后篇再考虑，目前先实现效果
点击这里查看效果
点击这里查看源码
下面图片为点住CTRL键时选择文件

目的：模拟视窗系统的文件选择
解决方法：可以知道，用鼠标进行大范围的选择时，会产生一个半透明的矩形区域，被该区域触及的文件或文件夹都会被选中。因此，可以生成一个Canvas来做为这个矩形区域，当鼠标点击并移动时，使其受控于鼠标的位置，并实时检测与文件和文件夹的碰撞。
问题：如果使用实时检测，会不会耗费大量的CPU计算
实现：
打开FLEX，建立一个FLEX项目：MultiFileSelection
编写代码，编写与调试过程这里略掉(目前CTRL和SHIFT功能键并未加入)
点击这里查看效果
点击这里查看源码

下次把CTRL，SHIFT的功能加入，并将文件独立为一个类进行处理

发现可以利用CSS来传递数据，莫不是我火星了？
点击查看DEMO
下面说一下思路：
将需要的数据写入到CSS样式表中，编译成SWF文件，供FLEX程序调用。例如，下面是给一个Canvas定义样式：
[code]
/* CSS file */
.MyCanvasStyle {
borderStyle: "solid";
borderColor: #FF6600;
backgroundColor: #FF6600;
backgroundAlpha: 0.2;
/* 自定义属性 */
textInTheCSS: "Hello, World!";
imageURLInTheCSS: "Apple_03.png";
imageInTheCSS: Embed("Apple_03.png");
}
[/code]
前四个属性是正常的样式设置，后面三个就是自定义的了。
textInTheCSS是示例中使用的文本
imageURLInTheCSS是示例中要加载的图片路径
imageInTheCSS是示例中嵌入的图片对象
接下来在主程序中加入一个Canvas实例：

指定其styleName为自定义样式名”MyCanvasStyle”
接着再加入一个按钮，注册点击事件：

private function clickEvent(event:MouseEvent):void
{
var styleI:IEventDispatcher = StyleManager.loadStyleDeclarations(“Style.swf”);
styleI.addEventListener(StyleEvent.ERROR, loadError);
styleI.addEventListener(StyleEvent.COMPLETE, loadComplete);
}

激活此事件后，注册样式监听并开始加载样式
当样式文件加载成功后调用事件：

private function loadComplete(event:StyleEvent):void
{
infoLabel.text = styleCanvas.getStyle(“textInTheCSS”);
styleImg.source = styleCanvas.getStyle(“imageInTheCSS”);
styleImg0.source = styleCanvas.getStyle(“imageURLInTheCSS”);
}

上面事件处理中，通过getStyle来获得此实例的样式数据。
详细请见：
源代码
个人认为当更换样式时如果不方便再开一个线程访问服务端得到样式的其他配置数据(例如使用AS动态控制样式)，就可以用这个来传递一些和样式有关的数据。
测试环境：FLEX 2 (Hotfix 2), flashplayer version:9.0.47.0, IE 6.0
以上~~~
P.S. 突然就感冒了，今天开始咽痛，流鼻涕，头痛，真是难受啊，现在说话都困难了，希望快些好

虽说TabBar等组件可以通过设置direction属性使其竖直排列.但是文字却还是横向排列
于是稍微想了下,使用List快速创建竖直文字排列的TabBar.
当然功能上有限制,但是进行ViewStack切换还是可以的,呵呵
点击查看实例:VertyicalTab
主要使用了List组件的移过事件和点击事件.
至于文字排列使用了来换行,这样标题就不能直接用等标记了,要先进行转码,嘿嘿
源文件下载:
点击下载此文件

提示信息通常使用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

客户要求在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感兴趣了…

学习到了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过程中又碰到问题了。
例如有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

最近用到了模块部分,开始研究
谁料昨天卡在了模块高宽设置上一个下午,找了些资料,解决了.
问题:
当模块设置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