Navigation

Previous

Archives

2008年3月21日 @ 13:53

Graffiti - AS3 Bitmap Drawing Library

引用内容 引用内容
The Graffiti AS3 Bitmap Drawing Library is designed for developers to easily integrate drawing functionality into a Flash, Flex or Air application. It is free to use and modify for noncommercial projects.

Flash动画


http://www.nocircleno.com/graffiti/
SourceCode

2007年10月25日 @ 15:43

Text在应用rotation属性后消失问题的解决方法

这个问题在Adobe Bug System已经有人提交了,原文地址:http://bugs.adobe.com/jira/browse/SDK-11241
官方的答复:只有嵌入的字体才可以旋转(Note that only embedded text can be rotated.).
英文字体无所谓,反正那么小,中文字体就惨了,动辄十几M,难道就没有其他方法了吗?答案是肯定的.
可以先把text组件生成Bitmap,然后再旋转Bitmap就可以了
源码:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalScrollPolicy="off">
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.core.UIComponent;

              public function save2bmp():void{
                var target:Image = new Image();
                 var bd :BitmapData = getBitmapData( UIComponent( txt ) );
                target.source = new Bitmap( bd );
                canvas.addChild(target);
                canvas.setChildIndex(target, canvas.numChildren - 1);
             }                                    
            private function getBitmapData( target :UIComponent ) : BitmapData
            {
                var bd : BitmapData = new BitmapData( target.width, target.height );
                var m : Matrix = new Matrix();
                bd.draw( target, m );
                return bd;
            }
        ]]>
    </mx:Script>
    <mx:Spacer height="200"/>
<mx:Canvas id="canvas" width="200" height="100" rotation="{HS.value}"  click="canvas.setChildIndex(txt, canvas.numChildren - 1)">
    <mx:TextArea id="txt" width="100%" height="100%" mouseFocusChange="save2bmp()"/>
</mx:Canvas>
        
<mx:HSlider id="HS" minimum="0" maximum="360" />       
<!--<mx:Button label="save" click="save2bmp()"/>-->
</mx:Application>

2007年9月3日 @ 10:42

draw a canvas to another canvas

From: http://www.jamesward.org/wordpress/2006/08/16/flex-paint-flex-display-object-to-png/#more-66
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox width="300" height="300">
<mx:Canvas id="c" width="500" height="500" backgroundColor="#ffffff">
<mx:Label left="0" top="0" text="top left"/>
<mx:Label left="0" bottom="0" text="bottom left"/>
<mx:Label right="0" top="0" text="top right"/>
<mx:Label right="0" bottom="0" text="bottom right"/>
</mx:Canvas>
</mx:VBox>
<mx:Canvas id="p" width="500" height="500"/>
<mx:Button label="duplicate canvas">
<mx:click>
import flash.display.BitmapData;
var bd:BitmapData = new BitmapData(c.width,c.height);
bd.draw(c);
p.graphics.clear();
p.graphics.beginBitmapFill(bd);
p.graphics.drawRect(0, 0, c.width, c.height);
</mx:click>
</mx:Button>
</mx:Application>

2007年8月27日 @ 09:40

Flex 2 BitmapData Tricks and Techniques

Form: http://www.cynergysystems.com/blogs/page/andrewtrice?entry=flex_2_bitmapdata_tricks_and
Most seasoned flash developers know that the Bitmap API has been around in the Flash player since the relase of FP8. Those that know all about the Bitmap API appreciate it for its many benefits... Those that don't know about it, trust me, you appreciate it too... you just don't know it. In Flex 2, you can take advantage of the Bitmap API to implement some very powerful and useful techniques that simply are not possible in non-Flash-based web applications.

Some of you may be asking: What is the Bitmap API?
The Bitmap API refers to the flash player's functionality that renders every visual object within a swf as a bitmap (which gets cached), rather than redrawing the entire object every frame interval. Only objects that are marked as "dirty" will be redrawn. The amount of resources used to render each frame is significantly reduced, thus improving the runtime performance of swf files on the client machine. You can find some more information on the Bitmap API at:

Now you may now be asking: What does this have to do with my Flex application? All Flex components that can be visually represented within your Flex application apply to this. They are drawn initially, and then cached as a Bitmap within the Flash player. This is where things get really interesting. Not only does this increase application performance, but it gives us access to the rendered bitmap of the instantiated object. Below you will find a very small, yet powerful, function that will allow you to capture the BitmapData of ANY visual flex component. I just used the UIComponent class as a parameter b/c it is the base class for virtually all flex components.
private function getUIComponentBitmapData( target : UIComponent ) : BitmapData
{
var bd : BitmapData = new BitmapData( target.width, target.height );
var m : Matrix = new Matrix();
bd.draw( target, m );
return bd;
}

So now what? You can capture the BitmapData from any visual component. Why would you ever want to do that? I've got a few reasons (and this is just the tip of the iceberg).
  1. Bitmap-Based Imaging Effects
  2. UI Component Mirroring
  3. Application Sharing
  4. Screen Exports
Did you know that you can set the source of a Image object to a Bitmap object? Did you also know that you can create a Bitmap object from a BitmapData object. This means that you can easily take the BitmapData from an existing visual component, and push it into an Image object.

My first example shows how to put this code to use, although its rather boring compared to my other examples. It takes the BitmapData of the specified UI component and pushes it into an Image object. This code example can also be found on JAM.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function captureFullScreen() : void
{
var bd : BitmapData = getBitmapData( UIComponent( mx.core.Application.application ) );
targetImage.source = new Bitmap( bd );
}
private function captureHiddenDatagrid() : void
{
var bd : BitmapData = getBitmapData( UIComponent( hiddenDg ) );
targetImage.source = new Bitmap( bd );
}
private function getBitmapData( target : UIComponent ) : BitmapData
{
var bd : BitmapData = new BitmapData( target.width, target.height );
var m : Matrix = new Matrix();
bd.draw( target, m );
return bd;
}
]]>
</mx:Script>
<mx:Button
id="captureButton"
label="Capture Full Screen"
click="captureFullScreen()" />
<mx:Button
id="captureButton2"
label="Capture Hidden Datagrid"
click="captureHiddenDatagrid()"
x="153"/>
<mx:Image
id="targetImage"
x="10"
y="30"/>
<mx:DataGrid
x="99"
y="64"
id="hiddenDg"
visible="false">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Launch Application
View Source
Download Source

Bitmap-Based Imaging Effects
Wouldn't it be cool if you moved one thing around on the screen, and it left motion trails? What if you wanted to capture part of a component, distort the image (colors, blur, size, crop, etc...) and then show it in a different part of your application? Well, the getUIComponentBitmapData function makes this difficult-sounding task much easier.

In this example, I have an image that is at 0,0 (top left corner) and is the exact same size as my application. The alpha on that image is 90%. On every "ENTER_FRAME" event, it takes a snapshot of the entire application and pushes it into the image. This causes the "trail" effect that you will see. Since the alpha is only 90%, it will eventually fade out, creating the fading image effect. The code is amazingly short, powerful and efficient.



Note: This process will become very processor intensive at high resolutions.

Launch Application
View Source
Download Source

User Interface Component Mirroring
Have you ever had the need to mirror the user interface? I know, this is not a common need but take it a step further (which I will do later in this post), and you have some really useful tools in your toolbox. This next example takes the BitmapData from a tree inside of a panel and pushes it into an Image inside of another panel. This occurs every 100 milliseconds. You'll see that there is a slight delay, but overall it mirrors the interaction very effectively.



Launch Application
View Source
Download Source

The next example acutally mirrors a flv file by pushing the BitmapData of the video playback's current frame into an Image object on every "ENTER_FRAME" event. You'll notice that a few frames are dropped per second, but you really have to look very closely to see the difference. One thing to keep in mind, more frames will be dropped on slower client machines.



Disclaimer: This video clip was downloaded from Google video. This is a scene from the surfing movie Billabong Odyssey, which is a great movie (that I do personally own). I highly reccommend it.

Launch Application
View Source
Download Source

Application Sharing
In my opinion, this next example is really amazing. It is also incredibly simple, yet powerful. I've extended my "User Interface Mirroring" example to share data between two different browsers using local shard objects. Keep in mind, this code only works on the same machine, but who is to say that you can't change that. You could easily chage the local shared object to a remote shared object, incorporating Flash Media Server, and this will work across different client machines. Also, what is stopping you from doing a RemoteObject call to push the image data to a server? This would enable you to pull down the image from the server to any client machine, without the use of Flash Media Server.



View Captivate Demo
Launch Broadcaster Application
Launch Receiver Application
View Source
Download Source

Side Note: If you looked at the source, you might be wondering why I didn't use getPixels and setPixels instead of my own functions to loop through the pixel arrays. I found a bug in the Flash player and get an "End Of File" error when using get pixels and set pixels on items rendered within the player memory. I'm putting together a test case to send to Adobe for this. I didn't use a BitmapData object on the local shared object because the player can't deserialize it back into a BitmapData object when reading the object back from the local shared object. Instead, I saved it in the LSO as a ByteArray.

Screen Exports
I think this next example is really cool too. Have you ever wanted to export your flex application's current view to the client machine? Using this approach, you can capture the UI as a jpg that can be downloaded by the user. This technique could have a number of uses:
  • Capture the user's screen when an error occurs
  • Save the current image within the application: possibly for a flex-based image editing solution... yes, I am working on one of those as a side project :-)
  • Distributed application sharing... this could be a great asset for remote application assistance
In this example, I capture the UI BitmapData, convert it to a JPG ByteArray using a modified version of the JPGEncoder class that is a part of the source code to the ActionScript 3 corelib project available at Adobe Labs. I push it to the server using a RemoteObject call and save the JPG ByteArray in the active session. On the ResultEvent, I make a request to the server and pull down the jpg into a new window on the client machine's browser (completely outside of Flex). Its amazing how easy that was. This is another one of the incredibly rich interactions that is just not possible with an AJAX (DHTML)-based RIA. I used ColdFusion as a backend on this one. Sorry, Im not sharing the all of the source to this example, but you will be able to see a portion of it.



Note: this last example is hosted at tricedesigns.com, that is my personal ColdFusion server.
View Captivate Demo
Launch Application
View Partial Source
Download Partial Source

Questions or comments, you can contact me at andrew.trice( at )cynergysystems.com.

2007年6月22日 @ 22:28

Flex2:使用BitmapData抓图

http://www.51as.com/article.asp?id=50

使用Flex中,所有的UI组件显示其最终的内部表示都是bitmapData,所以使用BitmapData对象可以对任何Flex2 UI组件进抓图,一下是范例代码,代码很简单,其精髓就是使用了BitmapData.draw(source:IBitmapDrawable, matrix:Matrix = null,...)方法,所有的FLEX2 UI组件都是DisplayObject的子类,而DisplayObject实现了IBitmapDrawable接口:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function captureFullScreen() : void
{
var bd : BitmapData = getBitmapData( UIComponent( mx.core.Application.application ) );
targetImage.source = new Bitmap( bd );
}
private function captureHiddenDatagrid() : void
{
var bd : BitmapData = getBitmapData( UIComponent( hiddenDg ) );
targetImage.source = new Bitmap( bd );
}
/**********************************************************
This function is the real "meat" of this code snippet.
**********************************************************/
private function getBitmapData( target : UIComponent ) : BitmapData
{
var bd : BitmapData = new BitmapData( target.width, target.height );
var m : Matrix = new Matrix();
bd.draw( target, m );
return bd;
}
]]>
</mx:Script>
<mx:Button
id="captureButton"
label="Capture Full Screen"
click="captureFullScreen()" />
<mx:Button
id="captureButton2"
label="Capture Hidden Datagrid"
click="captureHiddenDatagrid()"
x="153"/>
<mx:Image
id="targetImage"
x="10"
y="30"/>
<mx:DataGrid
x="99"
y="64"
id="hiddenDg"
visible="false">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

运行示例

来源:onflex.org


2007年6月22日 @ 20:52

as3利用Bitmap实现动态倒影效果

http://www.51as.com/article.asp?id=132

Flex Box 上看到了几个反射效果,觉得效果很不错,看过源代码之后,基本有了大致的了解:主要是利用位图操作像素,首先提取目标像素资料,然后反转后再画出来。
Bitmap支持混合模式,所以可以将几个图形混合在一起。因此为了实现倒影的渐变效果,需要再混合一层渐变的图形,把这两层用BlendMode的透明方式合并,就完成了最后的效果。

 

 


Page:[«]1[»]

Categories

Lately left messages

Comments

Linkage

Misc