Flash、Flex、RIA、web、Linux和我的生活
Flex和Flash调试工具列表
看这里,包含了很多有用的调试工具。其中我比较感兴趣的是Debugging AS3 with firebug’s console,可以在Firebug中显示调试信息。另外Flash Switcher extension for Firefox我一直在用了,目前最新版本是2.1.5。alcon是第一次看到,貌似用起来很简单。
不过,Flex的mx.logging包已经足够强大,有时间的话,自己写个调试器也是不错的。
2008年5月1日16:07:22更新:
| 这篇文章由zrong于2008-04-8 23:58发表在技术。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有评论
没有引用
[转]十个Flex/Air疑难杂症及解决方案简略
大约2月前 - 没有评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: [转]十个Flex/Air疑难杂症及解决方案简略
今天寻找原来写的关于FXG的文章,无意中发现sban写的几篇很不错的文章都看不到了,原来他的博客挂了。google到新的博客,也没有发现原来的博文。但又找到几篇不错的文章,看来还是转过来保险
原文作者:sban
原文地址:http://sban.biz/239
以下为转载
杂症病因及解决方案简略:
1, 在TileList中如果选择档过多,会出现卷轴,当拖动卷轴时,渲染的进度条会出现花屏现象;
并非TileList有这个问题,在Flex3内,DataGrid,List,Tree等控件如果使用不当,均存在这个问题;在先前的fl组件包内的TileList组件也有类似阴影。根本原因在于,使用ItemRenderer的大数据控件,其在渲染时,并不会一次创建所有数据列/行的显示对象 (ItemRenderer),它仅会创建在屏幕上可见的数据列/行,并且重复利用这些显示对象,以提交运行时效率。
可以做这样一种代码实验,以帮助人们理解这种机制:在一个TileList控件内,它本身有滚动条,它的ItemRenderer也使其有滚动条,在多屏数据的情况下,任意滚动一个ItemRenderer的滚动条,然后滚动TileList的滚动条到另一屏,你会发现,虽然数据已经变了,你从未滚动过这个数据,但它与你先前滚动过的那个数据具有相同的滚动位置。
从严格意义上讲,这并不能算是Adobe的bug,因为如果你严格按照Adobe的官方说明使用,多数情况下,是不会出现的,因此这个bug的复现也颇具难度。从Flex SDk 3.5开始,Adobe Flex团队,对所有基于ItemRenderer实现的数据控件针对开发者遇到的问题进行了改良,优化了SDK内部控件实现方法,并且添加了一个 offscreenExtraRowsOrColumns属性,该属性意为非显示区域的行或列数,用于帮助开发者在特定情况下遇到的花屏问题。
如果遇到这个问题,如果解决(方案按优先级自上向下排列):
1) 修改策划
显示大数据时,传统滚动条是一个糟糕的设计,因为人的眼晴对于大量的,重复结构的数据,很难定位上次查看的位置,多数人都是边察看边用指在屏幕上做标记。此种情况下,
a)要么不使用滚动条,使用翻页,用户每次翻页后,重新取数据、向数据控件赋值,在这种情况下,DataGrid,TileList等均不会出现花屏问题,因为压根儿就不会有滚动,但在此时,使用Repeater效率更高。
b)要么设计一种粗粒度滚动条,在这种粗粒度滚动中,每一个点相关于翻页设计中的一页,用户拖动时还相当有手感,相对传统滚动条要好许多,这种设计在许多产品中都已经开始使用。
2)在更新DataProvider时手动刷新控件视图
每次当data有变化,均手动再次设置一次ItemRenderer,大意如下:
list.itemRenderer = new ClassFactory(YourItemRenderer);
注:在Gumbo中,如果使用Bindable绑定数据,FB在编译时已经做了代码优化。所以,多数时候,按照官方方法可以避免很多问题。
3)使用offscreenExtraRowsOrColumns属性调整
这是最BT的方案,让人感觉是Adobe自己用算法难已处理了,所以请用户告诉控件目前有多少数据列/行在显示区外。具体用法请参照livedoc说明。
2-4,电子白板中,控制权转移;录制;画面同步
在白板开发中,控制权转移,画面同步,录影属于基本功能点。在技术技巧上,录影使用ImageSnapshot取得数据,剩下的便是系统架构师的事情。白板若要做好,方方面面必须设计好,特别是多人同时在线应用。
最基本的白板实现方案是基于ShareObject,但这种实现是demo级的,既浪费资源性能又低,比较合理的设计,作者认为应该是这样:
1)控制权转移实则是多人数据同步,数据同步不要使用SO,当控制权变化时,由Server处理并向Client广播,如果在同一时间内白板只充许有一人控制,此时仅需向二人广播,如果其它人也需要知道当前人控权者是谁,通过另外统一的状态广播实现。
2)画面同步必须设计出二种机制,一种为指令绘制型,另一种为图像同步型。对于后来进入观看白板的人用户,它第一次需要向server请求当前最新的白板画面,server选择一个最可靠的client的白板数据发给新来者,或者使用p2p技术直接由client端发送。指令绘制型用于在活动用户之间更新白板数据、动作。指令需自行设计,这种设计可以轻松实现白板重绘。
3)录影在这里有两种实现,一种为ImageSnapshot,另一种为指令重绘型。
5,FLASH的置顶问题
默认情况下,在网页中swf对象之上放置不了浮动层,解决方案是修改FlashVars属性值,把wmode修改为opaque,同时对照其它对象,排列z-index。
6,聊天表情無法复制粘贴,由于聊天表情是动态文本,所以添加到textflow中的是一个sprite对象
这个问题没有一步到位的方案,属于架构师考虑的设计问题。自定义一种输入框,自定义一套emoticon标签,每一个表情用一个自定义标签标识,监听输入框的copy与paste事件,送入剪辑板的数据仅包含emoticon标签,而不是图像数据,在paste时进行解析、替换。
7,老板模式,当系统焦点离开air程序后,无法检测到系统的key_down事件
系统焦点离开AIR后,即使在AIR中有KEY_DOWN事情监听也无济于事。解决方案是,rumtime升级到AIR 2.0,在AIR程序启动时,同时启动一个C++ native progress,当AIR程序最小化至系统托盘后,由C++程序负责监听系统按键,以此实现AIR程度快捷键呼出。
8,Air注册表操作(登陆启动look程序)
Air直接写不了,解决方案有两种方向:
1)与问题7同,使用nvtive progress写注册表
2)不使用AIR,使用替换解决方案Flex4U
9,在1.5的air运行时环境下,中文不能输入问题,因为客户端可能已经安装1.5的运行时,在网页安装中只能检测客户端是否安装了运行时,却无法检测到版本信息或者更新运行时
这里面有二个问题,第一个,对于必须要求rumtime为2.0的air程序,在编译时指定,强制用户升级。
第二个,在网页中安装air,如何知道用户的air rumtime版本?
Adobe的air网页在线安装是通过这个swf实现的:
http://airdownload.adobe.com/air/browserapi/air.swf
下载,反编译后,里面使用一个叫做ProductManager的类进行客户端环境的签别,验证。一共有两个类文件:AIR.as与 AIRLCEndpoint.as。
从原理上讲,可以hack反编译之后的源码,重新编译为自已的air.swf,然后自定义bridge网页安装实现。
10,隐藏window边框后,鼠标在拖动窗口边界改变窗口大小时,不能设置系统光标样式
这个问题不复杂。如果不使用系统镶边,自定义光标显示对象,添加进显示列表,并添加事情监听实现缩放与拖动逻辑。在livedoc中官方曾见有示例,有兴趣的朋友可以查一查。
两篇介绍ActionScript类库和工具的文章
大约7月前 - 1个评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: 两篇介绍ActionScript类库和工具的文章
List of 34 More ActionScript 3.0 APIs,还有中文版
36 New, Cool Flex and AS3 Tools, Libraries and Components
[译]20个不能错过的ActionScript类库
大约7月前 - 没有评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: [译]20个不能错过的ActionScript类库
本文译自20 Flash Resources and Tools You’ll Want
原文比较老了,所以里面很多东西我改了。
TweenLite 最快的补间动画引擎。看这个测试。仅3K大小,可用于AS3和 AS2。 滤镜看这里:TweenFilterLite 引擎。
Papervision3D 最流行的3D引擎。
Away3D另一个3D引擎。查看范例
WOW Engine AS3 3D 物理引擎。与 Papervision3D 或者 Away3D配合使用不错。
FIVe3D还是3D动画引擎。
Ribbit – An amazing technology that lets Flash call a phone and use the microphone on your computer. Enables Flash pieces to receive phone calls. Visual voice mail, with speech to text capabilities.
Flex4 Beta中的viewports和scrolling介绍
大约8月前 - 1个评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: Flex4 Beta中的viewports和scrolling介绍
下面是IViewport的几个基本属性以及它们分别都代表什么。
width, height, contentWidth, contentHeight, horizontalScrollPosition, verticalScrollPosition.
详细介绍见:Introduction to viewports and scrolling in Flex 4 beta
在Flex中实现聊天表情图片支持-实战篇
大约10月前 - 16个评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: 在Flex中实现聊天表情图片支持-实战篇
2009年10月29日更新:今天发现,有几个问题,Flash Builder beta2自带的SDK已经解决了(下面标出了),看来beta确实是不能用于正式产品啊……
2009年10月8日更新:Flash Builder beta 2发布后,spark组件中有些类的名称修改了,比如TextFilter改为TextConverter,SimpleText改为Label,TextArea.textview.textFlow改为TextArea.textFlow……因此如果使用beta2,那么下面的源码可能不会编译通过,请自行修改。
我发布“在Flex中实现聊天表情图片支持-资料篇”后,便有许多朋友找我要那个范例的源码。我在文章中就已提过那范例是从网上down来,并非我所做,自然没有源码。不过,也只需要用一个烂大街的方法就能获取源码了(这方法已经被许多老师采用过了,拿一个别人的课件改个名字就能来参赛 ),也不知道为啥要源码的同志不想动动手……
那好吧,源码来了。
例子很简单,所有的代码加起来都不到400行,但做的时候却很痛苦。因为要了解spark组件和FXG的特点,还要了解新的skin的做法。不过总算做好了,总结一下,纠结的地方主要有下面几点:
采用内嵌表情还是采用外部表情图片。
为了获得更小的文件(Flex4比Flex3编译的文件大了200多K),一直是采用外部表情图片的。在本机调试都正常。但上传到网上后,就无法显示图片。调整了swf的base属性之后,图片可以在输入框和文字框中显示,就是不能显示在图片选择面板中。最后一气之下改成了内嵌图片。后来发现有可能是浏览器缓存问题,不过改就改了,也就没再纠缠这个问题。
要注意的是,spark的BitmapImage是不支持外部图片的,必须要内嵌。所以如果要用外部图片,就必须用Halo组件中的Image。而由于TLF中的InlineGraphicElement又仅支持URL或者DisplayObject,而BitmapImage无法提供URL(本来嘛,是内嵌的撒)因此在我将外部图片转成内嵌后,原来的程序出了问题。原因是BitmapImage的source属性返回的是BitmapData对象,如果将其提供给InlineGraphicElement的source属性,就会报错。因此在提供图片信息的时候,必须要提供Bitmap才行。
图片插入到TextInput之后不更新。
检查发现,InlineGraphicElement已经作为textFlow的元素存在了,但是在TextInput中却不显示出来,但如果再输入一些文字的话,图像又可以显示出来。因此判断是textFlow更新后没有执行flowComposer.updateAllControllers。把这个操作放在StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED事件后就行了。
Flex4 spark中的TextInpu焦点定位的怪问题。(Flash Builder beta2自带的SDK已经解决了这个问题)
在发送输入框文字之后,再将文字清空,如果使用按钮来发送文字,则清空过后还能重新定位回输入框继续输入文字;而如果使用TextInput的enter事件来完成这个动作,则清空后返回虽然能重新定位输入框,并显示闪烁的输入光标,但无论如何也无法输入文字了,必须重新单击一次输入框,才能再次输入。后来用一个变通的方法解决了。就是在为输入框重新设置焦点之前,先将焦点移到按钮上,再移回来…… 很无语
当时在这里发帖求助,可没人理,也无语
flowComposer自动清空为null的问题。(Flash Builder beta2自带的SDK已经解决了这个问题)
flowComposer偶尔会自动清空,造成flowComposer.compose()或者flowComposer.updateAllControllers()失效,后来发现在界面大小变更的时候以及通过text=”设置文字清空的时候,flowComposer都可能会清空为null。而只需要重新将ti或者ta设置焦点就可以填充flowComposer的值。
滚动条不更新的问题。
输入的文字超过一屏之后,TextArea会自动出现滚动条。在Halo组件中,我是通过valueCommit事件来更新滚动条,但在spark中没有。不仅valueCommit没用,change等统统没用。后来改为用updateComplete来更新滚动条。其实,如果用textFlow的事件来更新,应该更加保险。
另外,spark的scroller组件也是蛮纠结的,在Halo中用ta.verticalScrollPosition = ta.maxVerticalScrollPosition就可以了,可spark又整了个viewport出来。这不,更新语句又要改成ta.scroller.viewport.verticalScrollPosition=ta.scroller.viewport.contentHeight。
还有几个麻烦的事情,比如ParagraphElement要进行深复制才能用,比如format和hostFormat……算了,不说了,直接看效果好了
了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料
大约11月前 - 没有评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: 了解Flex4中新的的Skin、CSS、Layout、NameSpace相关资料
Differences between Flex 3 and Flex 4 beta(比较Flex3和Flex4的区别,很全面,值得一看)
了解一下Flex 4里的fx、mx以及s命名空间
Introducing skinning in Flex 4 beta(强烈推荐!简单地介绍了Skin part、state、skinClass的编写方法以及FXG语法,有范例)
Overview of custom component changes in Adobe Flex 4 beta(自定义组件在Flex4中的改变)
Spark layouts with Flex 4 beta(不了解Flex4新的布局机制的,看看这个吧)
Enhanced States Syntax – Functional and Design Specification(新的state使用方法详细介绍)
MXML 2009 – Functional and Design Specification(着重介绍了Flex4的Namespace、Declarations、Private、Library标签的用法,以及Flex4与Flex3之间的区别)
Flex4:DataGroup and ItemRenderers
Flex 4 & Custom Layouts(Flex4与自定义布局,中文在这里)
视频专题
视频:Flex4中的高级CSS
视频:在Flex4中为组件和程序换肤
Learn to Use Flash Builder
Flex4 中有哪些出色的新特性?
大约11月前 - 没有评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: Flex4 中有哪些出色的新特性?
文中介绍了Flex4的命名空间(namespaces)、FXG、布局(layout)、状态(state)和新的mxml标记(如fx:Declarations、fx:Definition、fx:Library等),值得一看。
译文:http://blog.csdn.net/lihe111/archive/2009/08/10/4431579.aspx
原文:http://www.sitepoint.com/article/whats-new-flex-4/
Flash Text Engine、Text Layout Framework在Flex、Flash中的实现
大约11月前 - 没有评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: Flash Text Engine、Text Layout Framework在Flex、Flash中的实现
在在Flex中实现聊天表情图片支持-资料篇一文中,我提到了FTE(Flash Text Engine)和TLF(Text Layout Framework)。它们的强大自不必多说,可去该文章提供的网址查看,或者直接看这个Demo。但是,在Flex与Flash中有对应的组件可以使用么?FTE和TLF是什么关系?下面就来说说吧
关系
用下面这张图来说明是最好的了。TLF是建立在FTE的基础上的。或者说TLF在FTE的基础上实现了“高级功能”。直接使用FTE是很难受的(后面我会专门写文章演示代码),连Adobe都这样说:
“FTE 提供对文本度量、格式和双向文本的复杂控制的低级别支持。尽管可以使用 FTE 创建和管理简单的文本元素,但设计 FTE 的主要目的在于为开发人员创建文本处理组件提供基础。”
请注意加粗的部分。Adobe认为FTE并不适合做文本处理。因此,Adobe又做了TLF,并且将TLF整合到了Flex SDK 4.0(Gumbo)中。但TLF同样不是组件。不过TLF已经可以将需要显示的文本输入到DisplayObject当中,并加入了对选择文本、编辑文本、快捷键、事件的支持,虽然仍不能直接支持滚动条(配合事件和滚动条组件是可以支持的),但这已经前进了一大步,更方便我们使用了。
那我们就基于TLF来开发么?不是。我需要的是像Flash或者Flex中的TextArea组件一样来简单的使用TLF。为了实现我这个美好的愿望,Adobe针对Flash CS4制作了Text Layout Component组件,针对Flex的组件则包含在新的spark包中。
下载Text Layout Component:
说到这里,这个关系就比较顺了。TLF就是FTE的扩展,这个扩展其实还是代码层面多些。而Text Layout Component和spark中的相关组件又是TLF的扩展,它们才是真正的组件级别的应用。所以,我把主要的精力放在熟悉组件的功能与特性上(人懒,没办法 )。当然,对于TLF和FTE我也做了了解,毕竟它们是底层。
本图片采用国产软件EDrawMax绘制,本图片的源文件下载:
Flash Builder Beta(Flex4,Gumbo):新特性不完全说明
大约11月前 - 没有评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: Flash Builder Beta(Flex4,Gumbo):新特性不完全说明
Flash Builder确实很让人激动,我最喜欢的是下面这几个特性:
中文界面
增强的包管理
包重载
新的spark皮肤和组件
自动生成getter/setter
自动生成事件管理函数
主题管理器
新的调试器和概要分析器
中文界面
中文界面看起来就是舒服啊
增强的包管理
包重载
我有个不好的喜欢,过2个月后再看原来的代码,就喜欢把它们重新换个package,这个习惯让我经常头疼于几十上百的类文件的包修改,原来是使用在文件中查找替换进行的,现在FlashBuilder提供这个功能了。
新的spark皮肤和组件
关于这点,我将单独写一篇文章说明
自动生成getter/setter
不说了,直接看图
自动生成事件管理函数
这个功能实在是太太太太方便了,即使没有为组件命名,FlashBuilder也会自动为组件设置一个id。充分方便我这懒人
主题管理器
还是直接看图
新的调试器和概要分析器
这个就看这篇文章吧,英文。
使用Flex、Flash Media Server和Flash Media Encoding Server创建视频共享程序
大约11月前 - 3个评论
若需转载本站原创文章,请注明: 转载自zrong's Blog
本站转载的文章标题会标明[转]。
本文链接地址: 使用Flex、Flash Media Server和Flash Media Encoding Server创建视频共享程序
Adobe devnet的文章,详细介绍了如何利用Flex从客户端上传视频,用Flash Media Encoding Server在服务器端转换视频,然后利用FMS流发布视频的流程。浅显易懂,值得一看。
Creating a video sharing web application using Flex, Flash Media Server, and Flash Media Encoding Server
Flash Media Encoding Server好是好,就是太贵了,6K美刀啊 (看完文章我才发现,早知不看这鸟文)……还是ffmpeg比较靠谱
Use OpenOffice.org