需求描述:调色板(假设通过RGB调节),可以通过选择或者输入改变,也收到socket发送的RGB值后改变。另外,主界面有滑动条调节亮度。如果不用socket发送RBG,则可以直接参照列出的参考网址2即可。
成品及文件的说明如下:
CustomSocket.as完整代码:
package {
import flash.errors.*;
import flash.events.*;
import flash.net.Socket;
public class CustomSocket extends Socket {
public var receivetext:String = "";
public function CustomSocket(host:String = null, port:uint = 0) {
super();
configureListeners();
if (host && port) {
super.connect(host, port);
}
}
private function configureListeners():void {
addEventListener(Event.CLOSE, closeHandler);
addEventListener(Event.CONNECT, connectHandler);
addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
}
private function closeHandler(event:Event):void {
trace("closeHandler: " + event);
}
private function connectHandler(event:Event):void {
trace("connectHandler: " + event);
}
private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
private function securityErrorHandler(event:SecurityErrorEvent):void {
trace("securityErrorHandler: " + event);
}
private function socketDataHandler(event:ProgressEvent):void {
trace("socketDataHandler: " + event);
receivetext = readUTFBytes(bytesAvailable);
}
}
}
socket文件的一些说明:
1、主要用到的函数是连接函数和读取,其他只是由于程序完整性列出。
2、由于客户端需要收到RGB值进行改变,所以需要添加read,即最后一个函数
mxml完整代码:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="initApp()">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.utils.ColorUtil;
public var socket:CustomSocket = new CustomSocket("127.0.0.1", 8001);
protected function ChangeHandler():void{
var brite:uint=slider.value;
var adjustedColor:uint = ColorUtil.adjustBrightness(colorPicker.selectedColor, brite);
box.setStyle("backgroundColor",adjustedColor);
socket.writeUnsignedInt(colorPicker.selectedColor);
socket.flush();//发送当前RGB
}
protected function initApp():void{
socket.addEventListener(ProgressEvent.SOCKET_DATA,socketDataHandler);
}
protected function socketDataHandler(event:ProgressEvent):void{
colorPicker.selectedColor = Number(Number("0x" + socket.receivetext).toString(10));
box.setStyle("backgroundColor",colorPicker.selectedColor);
}
]]>
</fx:Script>
<mx:ColorPicker x="59" y="168" change="ChangeHandler()" id="colorPicker"/>
<s:HSlider x="145" y="168" width="288" height="22"
maximum="150" minimum="0"
change="ChangeHandler()" id="slider"/>
<s:Label x="145" y="198" text="亮度" height="19"/>
<s:BorderContainer x="57" y="257" id="box"/>
<s:Label x="57" y="370" text="示范颜色" width="51" height="11"/>
</s:Application>
关于MXML的一些说明:
1、ColorPicker控件只根据选择的或者收到的RGB值显示颜色,对亮度没有影响,所以添加BorderContainer控件用于显示示范颜色,在收到socket发送的RGB值时,2个控件同时更新,所以直接将selectedColor属性赋值为收到的值,且container直接setStyle为selectedColor
2、考虑到socket发送值可能改变RGB值,所以程序启动就开始监听socket
3、Hslider和ColorPicker中值的变化都会改变显示,所以两个共用change响应函数。一点小问题是,当发送当前RGB到服务器验证的时候,由于滑动,会收到过多的数据
4、滑动条主要用到ColorUtil类。ColorUtil 类是一个全静态类,其方法用于处理 Flex 内的 RGB 颜色。不创建 ColorUtil 的实例;只是调用如 ColorUtil.adjustBrightness()
之类的静态方法。这里调用的adjustBrightness()方法,虽然理论上,第二个参数范围为 -255 到 255;-255 生成黑色,255 生成白色。如果此参数为 0,则返回的 RGB 颜色与原始颜色相同。不过这里由于调解后效果不明显, 改为0-150了,另外,可以参考adjustBrightness2()方法。
6、为了更清晰的表示RGB,我们可以参考网址1添加函数,然后label控件绑定,将colorPicker的selectedColor用如下函数:
private function fixedInt(value:int, mask:String):String
{
return String(mask + value.toString(16)).substr(-mask.length).toUpperCase();
}
运行结果:
服务端输入RGB:66ff66后
客户端变为:(当然,初始时为黑色)
调解颜色后:
此时,server也收到传送的RGB值,当然,由于滑动条的原因,比较多,不过数值为66ff66
至此,搞定。
至今搞定的flex都是小东东,只是可能性设计,明天居然让搭web服务器,哎。。。。
参考网址:
1、http://javacrazyer.iteye.com/blog/732631 //获取单独的flex值
2、http://blog.minidx.com/2008/08/02/1209.html //利用colorutil调节亮度