之前写了两篇Blog
1·Flex Skin使用方法
2·Flex与Flash组合开发最佳实践__Combain Flex&Flash
本篇Blog应该是对上两篇的一个延伸。
就目前来说,在Flex4中Adobe并未提供Flex Skin Design Extensions ,并且由于Flex4对Skin方面进行了很大的改进,所以在Flex4中使用SWF所元件的皮肤,和在3中有很大的却别。
1·创建皮肤
制作一个元件,使用“Convert Symbol to Flex Component”转换为Flex中可以使用的元件
由于是自己建立的元件,所以默认状态下9-缩放切片并未勾选,如果需要的话可以将这个勾选上。
将生成的SWC文件导入FlashBuilder4 下
2·建立CrossButtonSkin组件,继承自spark.skins.SparkSkin
MXML语言:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:local="*"
minWidth="30"
minHeight="30"
width="100%">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function state1_enterStateHandler(event:FlexEvent):void
{
zoomInEffect.end();
zoomInEffect.play();
}
protected function state1_exitStateHandler(event:FlexEvent):void
{
zoomOutEffect.end();
zoomOutEffect.play();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Scale id="zoomInEffect"
duration="100"
autoCenterTransform="true"
target="{this}"
scaleXTo="1.1"
scaleYTo="1.1"/>
<s:Scale id="zoomOutEffect"
duration="100"
autoCenterTransform="true"
target="{this}"
scaleXTo="1"
scaleYTo="1"/>
</fx:Declarations>
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up"/>
<s:State name="over"
enterState="state1_enterStateHandler(event)"
exitState="state1_exitStateHandler(event)"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<local:SkinButtonCross id="crossButonAsset"
width="100%"
height="100%"/>
</s:SparkSkin>
<local:SkinButtonCross id="crossButonAsset"
width="100%"
height="100%"/>
这个部分就是从Flash 中导出的资源文件,注意width,height需要设置为100%
3·使用皮肤
在主场景中拖拽出来一个Button控件,再右边选择样式->外观->skin.CrossButtonSkin
这样就可以把一个swf元件作为皮肤,导入Flex4里面来了。
Demo
- 大小: 37.2 KB
- 大小: 11.8 KB
分享到:
相关推荐
NULL 博文链接:https://iamzealotwang.iteye.com/blog/486516
Flex4实现仪表盘功能,可自定义各种样式和大小,重现了缓冲类,CPU占用率变小
flex2_tag_library_for_jsp.zip flex-bootstrap-jsp.jar flex-webtier-jsp.jar
These templates, in conjunction with the Flex Component Kit for Flash CS3 Professional, enable you to create and export a skin in Flash CS3 and then import it into Flex Builder using the Skin Import ...
Flex4开发与实践,
arcgis_api_for_flex_2_0 arcgis_api_for_flex_2_1 arcgis_api_for_flex_2_2 arcgis_api_for_flex_2_3 arcgis_api_for_flex_2_4 arcgis_api_for_flex_2_5 arcgis_api_for_flex_3_0
Flex_4[1].0_RIA开发详解讲义Flex_4[1].0_RIA开发详解讲义Flex_4[1].0_RIA开发详解讲义Flex_4[1].0_RIA开发详解讲义
使用Maven对Flex项目进行构建,无需依赖于FlexBuilder进行编译开发。
flexbuilder_linux_install_a5_112409.bin网上难得下载,现提供给广大程序员
flex4源码 超酷menu导航 flex4
Flex4开发实践PPT,讲解Flex4开发实践,从基础到实践的分析讲解,让你对flex技术达到深入了解。
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
Flex4开发与实践
Flex flashplayer_10_ax_debug模式,我今天找了好久,终于可以调试Flex程序.
Flex_3_RIA开发详解与精深实践.pdf 中文版 清晰无误 学习flex开发的必备资料
一.flex2的全屏代码 在仅仅使用Flex Builder2(我下载的是FLXB_2.0_Win_WWE.exe)的时候,写全屏代码竟然找不到flash.display.StageDisplayState,于是下载了Flex 2.0.1升级包(官方地址:...
skin_Flex_程序皮肤skin_Flex_程序皮肤skin_Flex_程序皮肤skin_Flex_程序皮肤skin_Flex_程序皮肤
基于flex4技术从零开发flex博客系统 : 1 开发环境配置与hello world(1) - 豆豆网 flex+blazeDs与Ext+dwr比较_蓝色幻想_百度空间 基于blazeDS的flex4与spring的程序实例步骤 - dreamming_now的专栏 - CSDN博客 在...
《flash+flex+air移动开发入门经典——适用于android、ios和blackberry》 第1章 flash、flex和air简介 1 1.1 adobe flash 1 1.2 actionscript 3.0 2 1.2.1 ecmascript 2 1.2.2 关键概念 3 1.3 flex框架 11 ...