`

Flex皮肤设计制作的捷径

 
阅读更多
转自: http://www.css88.com/archives/1386

Flex皮肤设计制作我也就做过一个项目,就是我博客右下角的绿色的搜道聊吧,这个是用flex实现的聊天室。看看flex的皮肤2009-06-08_234356

红色部分就是flex的皮肤,外框是网页,js的。

下面我说说我做Flex皮肤设计制作的一些经验,仅供大家参考,毕竟这方面也是第一次,经验不住请见谅。

(转载请注明出处:WEB前端开发 http://www.css88.com/)

一、要知道你要做什么:

我做flex的时候,MXML是程序员写好的,在他的基础上我做了部分修改。MXML其实和xhtml一样是一种基于XML的标记语言,在Flex技术中,MXML用于设计用户界面,实现丰富的Flex表现层。从作用上说,MXML和xHTML的功能是基本一致的,都是设计用户界面,但是MXML提供了较xHTML更为丰富的界面组件,并且在开发上更为结构化,条理更加清晰。MXML的编写同样类似于HTML,它通过标签来定义和描述组件。

你要制作皮肤必须了解MXML的标签来定义和描述组件,还有各个标签的属性。

大家可以通过一些书本,工具等学习这些:

1.http://examples.adobe.com/flex3/componentexplorer/explorer.html,这里有很多关于MXML的实例几乎每个标签都有;如图:

2009-06-09_000356

2.flairbuilder:http://www.flairbuilder.com/这个是一个flex的布局工具,你可以通过这个工具做一些布局设计,甚至直接到处MXML;

2009-06-09_001138

3.Tour de Flex component explorer:安装地址:http://www.adobe.com/devnet/flex/tourdeflex/;这个工具也是MXML的实例,不过这个工具有MXML的标签,属性甚至样式,几乎包含了MXML每个标签,组件和该标签的所有属性,值,适用样式属性等等。

如果这些MXML都有程序员写,那么你只要需要设计和制作皮肤就好了。但是个人认为还是要熟知MXML每个标签,组件和该标签的所有属性,值,适用样式属性等等。

(转载请注明出处:WEB前端开发 http://www.css88.com/)

二、设计皮肤要注意的地方

首先搞清楚需不需要设计,很多人做flex皮肤一般都不设计,直接在flex默认皮肤上通过修改css样式来实现。那么可以使用Flex Style Explorer这个工具经过简单的操作得到你要的css样式。如果你想设计的更加漂亮丰富的皮肤那么我建议你完整的设计一套皮肤。即时是自己设计很多地方也要使用到Flex Style Explorer(Flex2 Style Explorer在线版(http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html)这个是针对flex2的,当然flex 3绝大部分也可以使用, 这个工具最新的是针对flex3的Flex3 Style Explorer V3.0 Beta,下载flex3styleexplorer_v3beta ;)使用非常简单,如图:

2009-06-09_014108

我们回到设计,设计我不在行,我只说一些注意点:

1.尽量根据MXML的标签设计元素;

2.如果flex要换肤,那么就要考虑皮肤的换肤方便。

3.组件的大小最好根据组件的默认尺寸设计,比如滚动条宽度,下拉框高度得的。

4.设计工具看你在行哪个,photoshop,illustrator,flash,fireworks都可以。

5.保持控件的统一性,尽量将各个控件统一样式(控件尺寸可以通过样式修改),比如按钮,下拉框什么的,实在需要,也可以多设计几种样式,就好比我们做网页前端开发,到不了多张图片,多个样式类。

(转载请注明出处:WEB前端开发 http://www.css88.com/)

三、切图

设计好之后怎么应用的flex中去呢,就像网页前端开发一样,你需要将设计稿中有用的元素分离出来,将其转化成在Flex中能用的元素图片。那么怎么转化呢?

根据你的设计工具下载以下文件,这里已经将flex中绝大多数的组件和各个主讲状态都列出来,并有默认控件的样式文件,

2009-06-09_004246下载flex_skins_fireworks

2009-06-09_004359下载flex_skins_photoshop

2009-06-09_004344下载flex_skins_illustrator

2009-06-09_004304下载flex_skins_flash

以photoshop为例,将你设计稿上的各个元素拷贝的下载下来的源文件(flex_skins.psd)上,并覆盖源文件该控件的该状态(这是我的做的这一步,点击下载,晕本地没文件,明天更新),这是针线活,注意仔细,特别要注意改切片的大小,您的元素不能超过源文件该控件的该状态切片大小,如果超过了,那么请修改切片大小,如果需要,还要给css上的一些属性值。

(转载请注明出处:WEB前端开发 http://www.css88.com/)

如果有些空间没在你项目中用到,那么就不用覆盖了,如果你想做一整套的皮肤也可以把所有的控件样式都做出来,呵呵。

完成后就要到处图片,覆盖压缩包中的images目录下的图片文件,一套皮肤就OK了。

注意几点,1.注意图片目录;2.以默认设置导出图片(png24位),3.导出时隐藏源文件中的背景层文件夹(如图);

2009-06-09_011706

这样一套皮肤就初步完成了,就可以用到项目中去调试了。一个flex_skins.css和一个images文件夹就是你要用到的文件。

其他工具设计的flex皮肤我没试过,但是我觉得大致上是一样的;

PS:以上源文件由Narciso Jaramillo提供:http://www.adobe.com/devnet/flex/articles/flex_skins.html

(转载请注明出处:WEB前端开发 http://www.css88.com/)

四、相同空间的多种样式处理

继续制作皮肤,还是以以photoshop为例。

如果你设计了两种(或多种)样式的按钮,一种常用的可以在这个在这个皮肤上完成,那么剩下的一个或几个按钮怎么办呢?这个其实和我们做网页的前端开发差不多,首先我们要把其他按钮的各个状态图片切出来,按一定的规则命名,我觉flex_skins.psd的切片命名规则蛮好的,你可以在那基础上稍作修改就可以了,然后把它保存到images目录下。

接下来就要修改css文件了,打开flex_skins.css,找到如下代码:
01 Button
02 {
03 disabledSkin: Embed(source="images/Button_disabledSkin.png",
04 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
05 downSkin: Embed(source="images/Button_downSkin.png",
06 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
07 overSkin: Embed(source="images/Button_overSkin.png",
08 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
09 upSkin: Embed(source="images/Button_upSkin.png",
10 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
11 }

复制一份,命名你的类名,这个我们网页上的css写法差不多,例如:
01 Button.myButton
02 {
03 disabledSkin: Embed(source="images/你的图片名",
04 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
05 downSkin: Embed(source="images/你的图片名",
06 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
07 overSkin: Embed(source="images/你的图片名",
08 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
09 upSkin: Embed(source="images/你的图片名",
10 scaleGridLeft="4", scaleGridTop="4", scaleGridRight="60", scaleGridBottom="18");
11 }

其中:disabledSkin,downSkin,overSkin,upSkin表示按钮的4种状态。

其中的scaleGridTop=”4″, scaleGridLeft=”4″, scaleGridRight=”60″, scaleGridBottom=”18″即是限定了范围,定义了顶、左、右、底部的4个放缩位置;其实flex皮肤都是用九宫格布局来伸缩的,就是上面这些属性。按钮如图:

885ccb23415a595c9922edd1

MXML中要引用myButton类的按钮样式,你只要这么写就可以:

<mx:Button label=”Prettym Skinned Button” styleName=”myButton” /> 这个和我们页面中引用css类差不多。

其他的控件也是一样的方法。

(转载请注明出处:WEB前端开发 http://www.css88.com/)

五、在项目中的调试,修改;

接下来我们就要到flex中测试了,如果你的css语法错误是flex是无法编译通过的。在实际测试中我们经常要调整css等,甚至有些是错位什么的。



六、相关链接:

auzn经典Flex教程–KingnareStyle皮肤制作简介 http://blog.minidx.com/2008/06/26/1000.html

Flex皮肤下载:http://www.scalenine.com/gallery/

flairbuilder:http://www.flairbuilder.com/

Flex皮肤下载:http://www.fillcolors.com/

adobe Flex Developer Center:http://www.adobe.com/devnet/flex/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《Flex皮肤设计制作的捷径》
分享到:
评论

相关推荐

    flex皮肤flex皮肤

    Flex皮肤是一种专为Adobe Flex应用程序设计的用户界面样式。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它使用ActionScript编程语言和MXML标记语言。在Flex中,皮肤是可定制的外观组件,允许开发者根据...

    flex 皮肤 大集合

    flex皮肤 大集合 很齐全 对flex开发人员很有帮助

    Flex 皮肤大全,各种样式的Flex控件皮肤大全

    Flex是Adobe公司开发的一种用于构建富互联网应用(RIA)的框架,它允许开发者创建具有丰富图形界面和交互功能的应用程序。在Flex中,皮肤是一种重要...同时,对于初学者,这些皮肤也是了解和学习Flex皮肤设计的好材料。

    flex 经典 皮肤主题

    Flex的经典皮肤主题是其强大UI设计能力的一个体现,通过CSS样式和自定义皮肤,开发者可以打造出各种风格的应用。通过理解Flex项目的结构和皮肤系统的工作原理,我们可以更好地定制和优化应用程序的外观,提升用户...

    很炫经典的flex 皮肤主题

    在本压缩包中,我们看到的"很炫经典的flex 皮肤主题",这通常指的是开发者为Flex应用设计的一系列视觉样式,以提升用户体验和界面美观度。 在Flex应用中,皮肤(Skin)是一种可替换的外观组件,允许开发者根据需求...

    flex皮肤主题36款

    flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤...

    FLEX4的皮肤skin

    在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...

    经典收藏 Flex 皮肤

    Flex皮肤是一种广泛应用于富互联网应用(Rich Internet Applications, RIA...同时,良好的皮肤设计也能够提高代码复用率,降低维护成本。因此,深入学习和实践Flex皮肤技术对于任何Flex开发者来说都是必不可少的技能。

    Flex皮肤(手绘风格)

    综上所述,手绘风格的Flex皮肤设计不仅涉及到图形艺术,还需要深入理解Flex的皮肤机制、组件结构以及交互设计原则。通过精心设计和实现,手绘风格的Flex皮肤可以为用户提供独特的视觉和交互体验,提升整个应用的艺术...

    三个Flex的皮肤

    描述中提到的"三款漂亮的Flex的皮肤主题"意味着我们可以期待三个美观的设计,它们可能各有特色,适合不同的应用场景或者用户群体的审美需求。例如,一款可能是简洁现代风格,另一款可能是深色神秘风格,还有一款可能...

    Flex样式设计工具

    Flex样式设计工具是一种用于开发Adobe Flex应用程序的辅助软件,它帮助开发者更轻松地管理与定制Flex组件的外观和样式。Flex是一种开源框架,主要用于构建富互联网应用程序(RIA),尤其是在使用ActionScript和MXML...

    FLEX4 皮肤制作教程

    ### FLEX4 皮肤制作教程知识点详解 #### 一、SparkSkin介绍 1. **基本概念**: - SparkSkin是Adobe Flex 4 (Gumbo)框架中的一个关键类,用于自定义用户界面(UI)组件的外观。它提供了一种机制,允许开发者通过...

    flex设计模式flex设计模式flex设计模式

    flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式flex设计模式

    Flex help之Flex 皮肤

    压缩包中的"关于皮肤.pdf"文件可能是对Flex皮肤更深入的指南,包括更复杂的皮肤设计技巧、自定义皮肤的注意事项以及最佳实践。这份文档可能会涵盖如何处理皮肤状态(如鼠标悬停、按下等)、如何使用9-patch图像以...

    flex4自定义组件皮肤

    - 使用Flex Builder或IntelliJ IDEA等IDE进行调试,可以帮助快速定位问题并优化皮肤设计。 总之,自定义Flex4组件皮肤是一项涉及组件模型、状态管理、图形绘制等多个方面的任务。通过学习和实践,你可以创建出符合...

    itunes7 flex的皮肤

    《深入理解iTunes7 Flex皮肤设计与应用》 在数字媒体播放领域,界面美观与用户体验是至关重要的元素,而iTunes7的Flex皮肤正是这样的一个杰出代表。Flex皮肤以其独特的设计风格和高度可定制性,为用户带来了...

    flex4 皮肤

    Flex4 是Adobe公司推出的Flash平台开发工具Flex的一个版本,它主要使用ActionScript3.0语言,为构建富互联网...通过熟练掌握Flex4的皮肤设计,开发者可以创造出更加个性化、吸引人的用户界面,提升应用程序的整体质量。

    Flex万年历记事本_flex源码

    9. **样式和皮肤**:Flex支持样式和皮肤,开发者可以通过定义CSS样式来改变组件的外观,使应用符合特定的设计风格。 10. **响应式设计**:考虑到跨设备兼容性,开发者可能使用Flex的弹性布局(Flexbox)或响应式...

Global site tag (gtag.js) - Google Analytics