Archive for the 'Flex' Category

Flash中国地图开源项目flash-china-map

Flash 中国地图
Flash中国地图,以Object为数据源,便于实现基于中国地图的可视化项目。

特征:

  • swc,便于导入到Flex项目中
  • 数据源为Object,比静态XML更方便
  • 数据驱动的地图块颜色和Hover颜色
  • 可配置是否显示省份名

Code License: Apache 2.0
Author: ComingX Jingle
Download: Git Repo
Demo Show:

使用方法:

  • 创建Flex项目,拷贝ChinaMap.swc至项目libs目录下
  • map = new Map()

Flex导入地图

<?xml version="1.0" encoding="utf-8"?>
<!--
* ComingX.com Business License
* 
* Copyright 2013. All rights reserved.
*
* @Author: Jingle
* @Email: jingdongemail@gmail.com
* @Created date: 2013-6-27
-->
<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="application1_creationCompleteHandler(event)"
			   >
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.comingx.jingle.chinamap.MapBase;
			import com.comingx.jingle.chinamap.ProvinceItem;
			import com.comingx.jingle.chinamap.domains.InitData;
			import com.comingx.jingle.chinamap.utils.ColorUtil;
 
			import flash.display.Sprite;
 
			import mx.controls.Alert;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			private var map:MapBase;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				map = new Map();
 
				map.addEventListener(MouseEvent.CLICK, provinceClicked);
 
				var ui:UIComponent = new UIComponent();
				ui.addChild(map);
				test.addElement(ui);
				var initData:InitData = new InitData();
				initData.isShowProvinceName = false;
				initData.provinceDataArray = [
					{"id":11,"name":"beijing","color":0xff4400,"hoverColor":0xff0000},
					{"id":12,"name":"tianjin","color":0xccffcc,"hoverColor":0xff0000},
					{"id":13,"name":"hebei","color":0xbbffbb,"hoverColor":0xffff00},
					{"id":14,"name":"shanxi","color":0xffee00,"hoverColor":0xff2200},
					{"id":15,"name":"neimenggu","color":0xaaffaa,"hoverColor":0xff2200},
					{"id":21,"name":"liaoning","color":0xddffdd,"hoverColor":0xff2200},
					{"id":22,"name":"jilin","color":0xddffdd,"hoverColor":0xff2200},
					{"id":23,"name":"heilongjiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":31,"name":"shanghai","color":0xddffdd,"hoverColor":0xff2200},
					{"id":32,"name":"jiangsu","color":0xddffdd,"hoverColor":0xff2200},
					{"id":33,"name":"zhejiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":34,"name":"anhui","color":0xddffdd,"hoverColor":0xff2200},
					{"id":35,"name":"fujian","color":0xddffdd,"hoverColor":0xff2200},
					{"id":36,"name":"jiangxi","color":0xddffdd,"hoverColor":0xff2200},
					{"id":37,"name":"shandong","color":0xddffdd,"hoverColor":0xff2200},
					{"id":41,"name":"henan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":42,"name":"hubei","color":0xddddff,"hoverColor":0xff2200},
					{"id":43,"name":"hunan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":44,"name":"guangdong","color":0xddffdd,"hoverColor":0xff2200},
					{"id":45,"name":"guangxi","color":0xddeeff,"hoverColor":0xff2200},
					{"id":46,"name":"hainan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":50,"name":"chongqing","color":0xddffdd,"hoverColor":0xff2200},
					{"id":51,"name":"sichuan","color":0xffffdd,"hoverColor":0xff2200},
					{"id":52,"name":"guizhou","color":0xddffdd,"hoverColor":0xff2200},
					{"id":53,"name":"yunnan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":54,"name":"xizang","color":0xddeffe,"hoverColor":0xff2200},
					{"id":61,"name":"shannxi","color":0xddffdd,"hoverColor":0xff2200},
					{"id":62,"name":"gansu","color":0xddffdd,"hoverColor":0xff2200},
					{"id":63,"name":"qinghai","color":0xddffdd,"hoverColor":0xff2200},
					{"id":64,"name":"ningxia","color":0xddffdd,"hoverColor":0xff2200},
					{"id":65,"name":"xinjiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":71,"name":"taiwan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":81,"name":"xianggang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":82,"name":"aomen","color":0xddffdd,"hoverColor":0xff2200}
				];
				map.init(initData);
 
				for(var i:int = 0; i<9; i++)
				{
					var ui2:UIComponent = new UIComponent();
					ui2.addChild(drawRect(ColorUtil.caculateColor(i*2,0xffffff,0xff0000,0,16)));
					ui2.x = i*20;
					ui2.y = 400;
					this.addElement(ui2);
				}
			}
 
			protected function provinceClicked(evt:MouseEvent):void
			{
				var provinceItem:ProvinceItem = evt.target as ProvinceItem;
				var provinceId:int = provinceItem.province.id;
				var provinceName:String = provinceItem.province.name;
				Alert.show("Province id is " + provinceId +"; Province name is " + provinceName +";");
			}
 
			public function drawRect(color:uint):Shape{
				var shape:Shape = new Shape();
				shape.graphics.beginFill(color);
				shape.graphics.drawRect(0,0,20,20);
				shape.graphics.endFill();
				return shape;
			}
 
		]]>
	</fx:Script>
	<s:Group id="test">
 
	</s:Group>
</s:Application>

Demo下载

Flex4 的 Scroller Viewport

Flex4提供了一个IViewport接口,所有可滚动组件必须实现它,而Scroller就是用来使可滚动组件实现滚动交互的组件。这种滚动交互在图形化界面里面很常见,Flex4的Scroller相比Flex3能够更加高效率。

许多Flex组件,像List, TextArea等组件在其皮肤中已经包含了Scroller和viewport,所以开发者不用担心是否可以滚动。这篇文章为了说明IViewport接口的工作原理,并包含一个简单的Scroller实例。如果你想创建自己的滚动组件或者想更好的理解Flex的滚动组件工作原理,继续阅读。
继续阅读 [ Flex4 的 Scroller Viewport ]

ActionScript自定义苹果风格圆角按钮

实现一个纯AS的文字和图片的按钮组件

点击图片查看效果,右击Flash,view source查看源码。
备注:
在Actionscript项目中添加view source的方法,在入口方法中添加
com.adobe.viewsource.ViewSource.addMenuItem(this,”srcview/index.html”);
然后,project->Export Release Build,勾选view source。

[FW]Flex组件生命周期详解

探究Flex组件生命周期

Flex 根据变量动态创建自定义组件

在构建视图时,通常会根据变量来构建不同的视图,变量改变时,视图相应改变。这篇文章尝试一种简单的方法,同时求一种更好的方法。目的是为了实现,根据一个ArrayCollection,创建一个Accordioin,并在Accordoin中创建一个List。
继续阅读 [ Flex 根据变量动态创建自定义组件 ]

Flex Flash开发框架比较PPT[转]

Flash Builder 4.5 开发移动项目之Hello World

FB4.5不负众望,增加了对移动平台的支持,针对当前移动平台系统的混乱、应用空前繁荣的形势,Flash从早先Flash Lite就一直关注移动平台的开发,此次Android和iOS对Flash的支持,给Flash在移动平台的开发展示了一个美好的未来。Flash移动平台之于手机就像AIR之于电脑,其跨平台的一致性是众多开发者之最爱,但又一直苦于其运行效率的不乐观,因此AIR在电脑端的发展并不象预想的那么好。那么,思考Flash在移动领域的开发是否会象AIR一样鸡肋?鄙人愚钝,暂不敢预测此未来,仅从以下分析:
1. Flash在Android平台可以直接打包成apk文件安装,比在电脑端安装runtime要方便多了。
2. Flash强大的跨平台能力是解决多个平台之间开发成本高的有效方法,如今各个网站,各个系统都在向移动平台进军,但是面对iOS、Android、黑莓、WM、Symbian等各种手机平台,这样的开发成本让小公司难以承受。Flash是否是一个好的解决方案呢?
3. Flash凭借其自身优异的UI开发优势,较之Android开发,能提供更多的绚丽效果,这是移动平台都要关注的问题。
废话不多说了,上教程吧。 继续阅读 [ Flash Builder 4.5 开发移动项目之Hello World ]

URL传递变量给Flash

在网页中嵌入flash,经常需要给flash传递参数,这里介绍参数传递的方法,很简单,两步:
第一步:通过后台语言给flash嵌入容器的flashvars赋值,由fb4生成的flash及其容器html都有这样一段

<script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "10.0.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
<!--注意此处我添加了一个变量testvar=3。将在flash中获取它-->
            var flashvars = {testvar:'3'};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "TestURLVars";
            attributes.name = "TestURLVars";
            attributes.align = "middle";
            swfobject.embedSWF(
                "TestURLVars.swf", "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
			<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
			swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>

第二步:在fb中获取该变量
使用this.parameters[‘testvar’],代码如下:

<?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="application1_creationCompleteHandler(event)"
			   >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				trace("hello,testvar is:"+this.parameters['testvar']);
			}
 
		]]>
	</fx:Script>	
</s:Application>

warning: unable to bind to property处理方法

当绑定Object数据到组件时,可能会出现这样的错误

warning: unable to bind to property 'trigger1' on class 'Object' (class is not an IEventDispatcher)

遇到这种情况原因时Object不具备抛出改变事件的能力,此时需要ObjectProxy取代Object。代码如下:

//如果你这么写,会报警告
[Bindable]
private var data:Object = {id:1,title:"你好"};
 
 
//应该这样
private var data:Object = {id:1,title:"你好"};
 
[Bindable]
private var dataProxy:ObjectProxy = new ObjectProxy(data);

mouseChildren属性,设置子对象不接受鼠标事件

如下代码中btn的点击事件将被忽略

<mx:Canvas mouseChildren="false">
	<mx:Image id="img" toolTip="请拖动图片到设计区" />
	<mx:Image id="btn" buttonMode="true" click="{this.removeElement(event)}"  />
</mx:Canvas>