哎！哟！

Flex 学习笔记之二

Tue, 19 Aug 2008 15:29:58 +0000

    学习已经开始迈上正轨了，这几天在看容器控制布局：分别有管理程序布局，窗口布局及动态布局，导航布局，表单布局。
到今天为止才看完动态布局。
   管理程序布局有：Application   Canvas  VBox 和 HBox  DividedBox
     窗口布局：Panel 组件  TitleWindow 组件
   Panel组件就是这样一个窗口组件，它直接继承Container。和它的子类TitleWindow都具有窗口程序的特点：有标题条，可以放置其他内容，形成一个整体。
   ControBar是 Panel的一个容器，位置不可调整总是在底部，布局模式跟HBox相同。可以放置按钮等组件。
   动态布局：Tile   Grid组件
   Tile直接继承Container，使用起来非常方便。适合重复排列的元素。
   tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。
   Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。

   然后就是导航组件啦，偶今天看了第一个   Accordion
    在写代码的时候  对Combox进行数据绑定，偶自己写的不行啊，检查也没错误，考人家的过来就有OK啦，很奇怪！！！

Flex学习笔记

Mon, 18 Aug 2008 06:19:00 +0000

1. MXML语法
   MXML语言是专门用于Flex程序中，描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据、与服务器端通信的WebService、组件的数据源等。
    1.1 命名规范 MXML区分大小写，且文件名和变量标示名都区分大小写。MXML文件以mxml作为扩展名，文件名要遵循AS中变量的命名规则。所有的MXML都被视为用户自定义的组件，相当于对象，可以使用代码动态创建。变量名必须以字母或下划线开始，且只能包含字母、数字和下划线。不能命名为application ，application 是主程序文件的默认标记，不可再使用。程序不能使用“mx”做为目录名，mx 是官方组件库的命名空间。
    2.2 MXML 文件结构
   MXML为标准的XML文件。





     第一行声明XML文件采用的语法版本version 和编码格式encoding（默认为utf-8）。
   mx:Application：在每个Flex项目中，可能有多个MXML文件，mx:Application为根节点标示程序入口的运行文件。    xmlns:mx=http://www.adobe.com/2006/mxml ：将mx定义为XML的命名空间，对应路径为http://www.adobe.com/2006/mxml ，Flex的配置文件中将这个路径定义为一个全局资源标识符，并对应了一个列出mx命名空间下的所有标签的文件。flex-config.xml中配置了命名空间。
  该文件可在Flex Builder2的安装路径下的Flex SDK 2\frameworks目录中找到。并找到如下代码。
  Xml代码


                    http://www.adobe.com/2006/mxml
        mxml-manifest.xml






           http://www.adobe.com/2006/mxml
          mxml-manifest.xml
    从上面的配置发现，http://www.adobe.com/2006/mxml 这个URI和mxml-manifest.xml文件对应，找到该文件，里面列出了所有标签和与标签相关联的类文件路径。
    Xml代码



           ....................
           ....................








   中的id代表标签名，class表示类文件路径。  xmlns:comp="comps.*" 定义一个命名空间，因为使用了通配符“*”，comps目录下的所有MXML和AS类（不包括子目录的文件）都被包括在comp命名空间下。如comps下有Login.mxml，则在程序中可这样调用： Application 还有一个属性layout ，定义了该节点下元素的布局方式，也就是程序的总体布局方式。absolute 表示绝对定位，所有子元素将按照各自的x、y坐标来定位。

  2. 使用组件
     定义一个按钮组件如果组件中未包含其他子元素可这样写：
    组件分类：
   布局类：包括所有的容器组件，如：HBox、Panel等，Spacer、HRule、VRule不是容器，但是主要用于布局。
   导航类：菜单条、按钮条等各种导航功能的组件。
   交互类：内容展示、数据交互相关组件，如：按钮、下拉框、图片、视频等。
     IDE中的组件面板列出了所有的可视化组件，可直接拖入编辑区使用。
    通过IDE的代码提示输入
   3. 自定义MXML组件
     基于组件开发模式是Flex的一个特色，程序中所有的MXML和AS类文件，都被当作用户自定义的组件。
   我们来建一个MXML组件：New->MXML Component在弹出的窗口输入组件的文件名Filename，并选择扩展哪一种组件Based on，我们这里选择Image对象。然后Finish。然后点击Image组件，在属性面板的Source属性设置图片的路径。
    Xml代码



      然后在程序中就可以使用该自定义的组件，将其从用户面板拖入到编辑区，图片显示正常。
     Xml代码


                    internal function doClick():void{
                  private function _btn_click(event:MouseEvent):void{
    tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
  }
         }
         ]]>






就是我们拖入的自定义组件，程序自动添加了ns1命名空间。我们改变自定义组件的位置放到view文件夹，代码变成：

4. 编写ActionScript
   MXML文件经过编译最后也是被转换  成AS来执行，在一个Flex程序中，主程序会被转换为Application对象的子类，自定义对象会被转换为父级对象的子类。

   4.1 在MXML中使用AS在组件的事件属性中使用AS来处理事件比如
    Xml代码

    上面代码中的click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"会被编译为
    Xml代码
private function _btn_click(event:MouseEvent):void{
          tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
    }
    这个函数被注册为按钮的点击事件侦听器，一旦点击事件触发，函数就会被调用。
   在MXML中插入AS块Xml代码

           //这里是AS代码
       ]]>


    此标签可以放在根节点内的任何位置，同时必须用CDATA将代码包起来。
CDATA不能嵌套使用。
AS中的注释是
//单行注释
    /*多行注释*/
MXML中的注释和XML一样


     4.2 创建外部AS文件
     New->ActionScript file 可以创建一个外部AS文件
     Xml代码
        在程序中可以使用上面的代码导入。

    4.3 创建AS类文件New->ActionScript Class 可以创建一个AS类文件
     Xml代码
      package
   {
       public class Test
        {
           function Test(){
                trace("Test");
          }
        }
   }

上面代码创建了一个Test类，在构造函数Test()中在控制台打印Test。

  在主程序中可调用：
  Xml代码



                        internal function initApp():void{
                 var myTest:Test = new Test();
              }
          ]]>



applicationComplete是Application对象的一个事件，程序初始化后触发此事件。var myTest:Test = new Test()这个代码的作用是创建一个Test对象，创建对象用new关键字。

   5 编辑非可视化对象创建数据
     Xml代码

   Flex developer
     Flash developer
     Web developer
     Mobile developer


   定义1个包含4个字符串元素的数组，定义好数组之后，可以作为List或者其他组件的数据源dataProvider



   Xml代码













       创建一段XML做为Tree树型组件的数据源。

       用MXML语句创建类实例
     这样就创建了之前定义的Test类的实例。相当于用AS new一个出来
Tags - flex

Flex网站的seo问题

Sun, 17 Aug 2008 11:34:29 +0000

       这2天接触flex网站，一直有个问题困惑着我，那就是flex网站的seo问题如何解决。
     众所周知，flex网站最后发布为swf文件共浏览者浏览，swf文件本身的内容是不能被蜘蛛抓取的，那么，我们用flex开发的网站如何才能够被蜘蛛抓取呢？
     那就是生成一个xml文件来供蜘蛛抓取，同时用xsl文件来定义布局。这个好像就比较麻烦了····  要求对xsl有一定的了解····
       例如：
     Flex Directory是Ted Patrick维护的一个Flex资源站点，列出了一些提供Flex技术咨询、服务的公司的信息，包括联系方式，方便业务联系和求职。

      这个站点使用flex制作，但又有点特别。这个站点使用了很WEB2.0的元素，就是XML+XSL，主页index.html其实是一个标准的XML格式的文件，真正的布局在http://directory.onflex.org/template003.xsl中定义。熟悉XML和XSL的WEB开发者很容易发现这点，在浏览器中，查看页面的源文件，可以清楚看到站点的代码。

      使用这种方式，很巧妙地解决了SWF文件中使用的数据无法被搜索引擎识别的问题，并且一些常规的SEO手段都可以在HTML中实现。

     由此可见在seo方面，flex好像没法跟Ajax相提并论吧，如果Adobe能解决好这个问题，我想Flex肯定会更受欢迎！

Tags - css , flexseo , 网站推广

今天买flex的书了····

Sat, 16 Aug 2008 14:29:46 +0000

呵呵本来约好灰哥一起去买的，结果他有事来不了，就自己中途找了个人去了，书不多，《flex第一步》是大家都推荐给我的，就一定要买了。再加上自己用的flex3 所以还买了一本《精通flex3.0》唉，每次买书的时候都很积极，买了就丢下来了···希望这次不会了哈····
加油！！！！
Tags - flex

下定决心学flex

Fri, 15 Aug 2008 10:43:26 +0000

   犹豫了很久，也准备了很久，终于下定决心学好flex了。
  一直以来我都是一个做什么事情不能持久的人，希望这次的flex一定要改掉以前的臭毛病，不能学一点点就放弃了。想想自己这些年来学了好多东西，都是浅尝辄止，没有恒心，这些好了，终于下决心要学好了。
  晚上约灰哥明天去书市买书，:-)，灰哥可是编程高手哦！
Tags - flex

七八十年代最流行的顺口溜

Wed, 23 Jul 2008 15:11:43 +0000

出生在七八十年代的同龄人,小时候流传着很多经典的顺口溜,那时候,我们刚在学校里学会了说普通话,就用那半京腔半家乡腔一遍一遍的对着同伴们哼唱着这些顺口溜,稚嫩的脸上写满了天真和得意……
　　你打我,我不怕,我去北京找我爸,我爸拿着机关枪,照你屁股打三枪!
　　你妈的头,像皮球,一脚踢到黄鹤楼,黄鹤楼，没人要，一脚踢到臭粪缸！
　　**（地名）的山,**（地名）的水,**（地名）的XX爱臭美,金钩鼻子蛤蟆嘴,老虎眼睛猪屁股,外加一双罗圈腿,看你臭美不臭美
　　xx的屁,震天地,一屁崩到了意大利,意大利的国王正在看戏,闻到这股屁,非常的满意,派兵派将一起来放屁
　　哥俩小,哥俩好,哥俩凑钱买冰糕,我吃冰糕你吃棍儿,我拉粑粑你闻味儿
　　胖子胖，打麻将，输了钱，不还帐
　　老师老师别生气,都怪**不争气,抽烟喝酒跳霹雳,男女厕所他都去
　　脚踏黄河两岸,手拿机密文件,前面机枪扫射,后面定时炸弹
　　太阳当空照,花儿对我笑,小鸟说早早早,你为什么背上炸药包?我去炸学校,校长不知道,一拉线快逃跑,轰隆一声学校炸没了!
　　你妈*,你妈蛋,你妈死在火车站,全国人民都来看,你妈是个山药蛋
　　我叫阿里巴巴身高一米八八看你可怜巴巴给你一袋锅巴叫我一声姑妈
　　对不起，起不对，八个老婆跟你睡
　　一二三四五，上山打老虎，老虎不在家，放屁就是他。
　　一巴，哗啦啦，日本鬼子到你家，抠你爸爸大脚丫,拿起棍子夯你妈！
　　你妈头象皮球，你妈腰像镰刀，你妈屁股像面包！
　　学习雷锋，好榜样，吃喝嫖赌打麻将。
　　有屁不放，憋坏心脏；没屁硬挤，锻炼身体！
　　对不起，敬个礼。放个P，送给你
　　小姐小姐别生气让我带你去看戏，什么戏，游戏，什么游，酱油，什么酱，豆酱，什么豆，豌豆，什么湾，台湾，什么台，（这句不雅~）台你mm进棺材
　　还有火风的《大花轿》最绝：
　　太阳出来我爬电杆，
　　爬上了电杆我想触电，
　　一触触到了高压电，
　　把我送到了阎王殿，
　　阎王爷抽烟我点火，
　　阎王爷给我压岁钱，
　　一年一年又一年，
　　终于回到了人世间，
　　我嘴里头吃的是大大泡泡糖，
　　我心里头想的是日本花姑娘
　　唐僧骑马咚哩个咚,后面跟着个孙悟空;孙悟空跑的快,后面跟着个猪八戒;猪八戒鼻子长,后面跟着个沙和尚;沙和尚挑着箩,后面跟着个老妖婆;老妖婆心眼坏,骗过了唐僧和八戒;唐僧八戒真糊涂,多亏孙悟空眼睛亮,眼睛亮,冒金光;救了师傅唐三藏

Tags - 顺口溜七八十年代 , 流行

我们都是有病的孩子

Mon, 21 Jul 2008 11:20:57 +0000

      我们迷恋谎言的真实，却沦陷为世人眼中的怪兽。我们，却绝对依旧地相信且寻找着海伦那的魔法镜，因为we belive in originality!
      我们迷恋坦诚的秘密，就算所有的人都把我们遗弃。我们信仰唯心的所有，哪怕沦落为这精神病院关起的过客，只要还相信着创意就是生命的真谛！
    我们迷恋平静的疯狂，因为潘朵拉的玻璃瓶从未摔碎。我们为创意而生，因自由而名，追究所有的名誉只为成就无懈可击的“达人”。
    我们是一群别人眼中的怪物，过分追求完美的事物，可是在生活中却一遍又一遍的受伤！我们却肆意的享受着这痛楚！我们，都是有病的孩子！！！
Tags - 设计师设计 , 性格

GO ON!

Fri, 18 Jul 2008 13:01:26 +0000

真不知道咋回事，在一个地方待久了就觉得日子没趣了··· 天天重复同样的工作，总是那些事情，好像找不到那种激情了···
事情的经过并不像想象的那样，唉罢了，我已经习惯了····
Tags - 网站设计 , 设计师 , 网站推广 , 网站建设

然后怎样？？？？？

Sun, 13 Jul 2008 15:09:55 +0000

生活总是这样，在你满怀希望的时候给你一个沉重的打击，然后该怎样？
    我不知道！
    明天该怎样？
    我毫无方向！
    背上我的背囊，却不知道该往哪去流浪！
    在生活的空挡，我们也还是继续成长！
    我的快乐来自何方，
    生活不敢停站，望向远方！



完成了所谓的理想

放纵了情绪的泛滥

汗都流亁天都微亮然后怎样

拥有了旅行的空档

却遗失流浪的背囊

沿着轨道一直流浪然后怎样

假期过完有什么打算

走过一个天堂少一个方向

谁在催我成长让我失去迷途的胆量

我怕谁失望我为谁而忙

我最初只贪玩为何变负担

为何我的问题总得等待别人的答案

我的快乐时代灿烂

才领悟代价多高昂

不能满足不敢停站然后怎样

页面设计之个性元素与共性元素

Fri, 04 Jul 2008 01:42:17 +0000

前言：看本教程，必须先仔细看前言的内容,否则会进入误区！

最近在做个性休闲服装内网站的设计课程，过程中发现，个性元素的应用成为最难的问题，第一项目风格适合使用什么样的个性元素；其次，个性元素如何把握，什么样的元素才是个性元素，才能突出项目定位；
这里聊的共性与个性纯粹是在本人对网页设计中的装饰元素总结的应用，不代表其它方面的解释，“共性与个性”也是个人用来区分常规元素与个性元素的用词，大家可以理解为正规的突破的；

了解共性与个性
1、共性解释：共性就是常规的东西，自然存在并被人们认可的；比如一条直线，是恒久不变的元素，这就是共性；又比如我们穿的衣服，长袖、短袖、长裤、短裤，按正常人标准生产的；这些也是共性；
2、个性解释：个性是相对与共性来说的，与共性不同的元素，就是个性；比如每个人画出来的随意的线是千差万别的，这就是个性的元素；又比如，本来是正常的牛仔裤，年轻人最喜欢把他剪破，或者打个补丁什么的，显得与众不同，这也是个性。

举例：
1、掌握共性元素与个性元素；把共性元素变异形成个性元素；
常理，把线条按等距离平均排列看起来很整齐，只要按照等距排列，最终效果是一样的，没有特色也没有缺陷，大家都不会觉得有问题；个性处理，随意排列线条，使得线条间距不等，形成随意的节奏感；每个人排列的最终效果都不一样，最终会有好有差，所以比较难把握；

常理：我们用很多元素连成一条线，感觉很整齐；个性，把元素分散随意摆放，形成大小不一，间距不一的点，使得它们组成的图形富有节奏感；
严重注意：效果是为页面服务，效果必须符合页面风格；

效果始终是为页面风格服务的，如果你没有搞清楚页面要表达的风格，而随意的使用不同效果，最终是没有说服力的；

案例分析

风格定位：CONVERSE是一个非常个性的服饰品牌，从它的官方网站中我们可以看到，设计非常个性，代言人也是特意选择很有个性的摇滚乐明星，所以，设计定位要体现其个性的风格；
我们来分析一下整个设计过程：

1、第一步，确定好页面必要元素，比如，标志，广告文字，模特，版权等，这些必要元素；然后确定大概色调，要体现比较酷的个性，使用灰色系比较容易达到效果；这里使用偏暖的色调搭配黑色，使用红色为突出色；此时，整个版面中规中矩，使用的都是共性的一些元素，有任何特色及个性，与一般页面设计没有区别；

2、根据产品的风格定位，逐步把页面个性化；为了体现自由、个性，我们把底部的黑色块做变化处理，使用一些随意的线条装饰，使得黑色与灰色交界不那么死板，形成随意的衔接；

共性：黑灰组合，简单直白的交界，没有特色，但是也无可挑剔缺陷
个性：黑灰组合，使用随意的线条过渡，方法较简单，可以使用笔刷，也可以使用直线工具画折线；每个人画出的效果会不一样，注意疏密有间，随意自然！

3、背景：灰色渐变背景稍显简单，但是也不一定要使用非常复杂的背景，这里使用深浅不同的色块交错，使得画面背景一些就可以了；

4、个性化装饰元素：这一点是比较难把握的，因为个性化比较抽象，我们都不好把握；这里要做到的就是，装饰元素要符合页面风格，要与页面整体风格统一协调；
这里使用了接近插画的处理效果，随意流畅，大小有致，有主有次；目的是要表达对人物的束缚或者简单的理解为装饰；

共性：使用大小一致的元素，整齐、协调，但是没有任何变化与个性；
个性：元素做大小、位置等的变化，形成非常有节奏感和空间的的图形，组成有个性的元素；所有元素都是随意摆放，每个人都可以摆出不同的图形；不过要把握这些元素组成图形的整体感，不要太松散，要有对比；
以下页面，元素有大小的变化，距离位置的变化，但是整体感觉松散，有些散乱；

应该像以下案例要做到有疏有密，有主有次，近大远小，进密远疏，随意自然！

5、个性化人物：这里先要分析人物可不可以做修饰处理，什么修饰适合他；比如，如果我们做正式装，那么我们就不应该用一些元素去修饰人物了；而个性休闲装可以适当的做修饰，使得产品的个性风格更加凸显；
这里根据人物动作造型和画面空间考虑修饰，使用类似翅膀的造成，这样可以衬托产品自由休闲的特性，又给人视觉上的不同；但是这里并没有使用真实的翅膀，而是象形的元素；使用真实的翅膀容易显得太具象，与画面风格不符合；当然也可以使用画出来的翅膀，只要你能画！
共性：方形色块，最普通的元素，没有什么特色，但是也没有什么问题，但是我们可以给它造型；
变化：我们把他改变成翅膀的大体形状，这个你应该知道吧，如果不知道翅膀的形成，到网上找张图片看看，只要像翅膀，随便画成什么形状；
个性：一大块色彩显得呆板，没有张力，为了体现翅膀的张力，把色块做分隔，分隔成若干小色块，分隔应该注意，斜线才会显得有速度和张力感，随意分隔才会显得个性十足；

6、广告文字个性化：选择好合适的字体，可以对文字做修饰，以符合页面风格

共性：最正式的字体，常规而没有特色，当然，也找不出什么问题；
变化：为了迎合画面效果，可以做适当变化，不过变化要符合页面风格，不可以为了变化而变化；
个性：为了体现产品特征的自由随意，另类个性感觉，把文字做随意切割处理，即符合画面风格效果，又显得个性化，文字的切割各人也可以处理出多种不同效果；
到这里页面已经完成了；

总结：共性》变化》个性，这是一个流程，共性的元素规矩，没有特色但是也没有缺陷；变化是在共性中找出常见的变化，只是变化，而不能体现个性，比如，文字由大到小的缩放，每个人操作后都可以是一个结果，而把图形切割，则是各人得到的结果不同，这就是个性；

最后说明，由于这不是写作，文中的用词及语句都是简单通俗的文字，表达中肯定有不经如人意的地方，如有此类问题在此表示致歉，希望不至于误导观众；另外，个中案例非正式项目，是个人根据需求进行的设计演示，非商业用途！

Tags - 网站设计 , 设计师 , 网站建设 , 设计 , 性格