专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Flash教程 » actionscript3.0:ActionScript 3.0 Step By Step系列(一):工欲其善 先利其器(Flex Builder) »正文

actionscript3.0:ActionScript 3.0 Step By Step系列(一):工欲其善 先利其器(Flex Builder)

来源: 发布时间:星期五, 2009年1月23日 浏览:2次 评论:0
  “砍柴需先磨柴刀”这是长辈们从小就对我们说对于个从小在贫穷农村长大我来说我决对肯定这句话是对ActionScript 3.0 Step By Step系列(<img src='/icons/51207yi.gif' />):工欲其善,先利其器(Flex Builder)大人们上山砍柴前都会先磨柴刀眼见为识哈哈!!很明显这就是所谓“工欲其善,先利其器”道理

  这个系列我将会以Adobe Flex Builder作为开发环境和大家起学习ActionScript3这们技术本文主要介绍ActionScript开发环境Adobe Flex Builder最后以大家都非常熟悉“Hello Wrold”举例收场

  、下载/安装Adobe Flex Builder

  Adobe Flex Builder软件Software大家可以去官方或是其他相关提供下载站点下载大家都是学软件Software下在软件Software这步我想就不用多说了吧

   2、启动Flex开发环境

  这步也不用多说了个启动软件Software呵呵!下面整两张图先看看Flex Builder开发环境

  ActionScript 3.0 Step By Step系列(<img src='/icons/51207yi.gif' />):工欲其善,先利其器(Flex Builder)

  下面为Flex开发环境:

  ActionScript 3.0 Step By Step系列(<img src='/icons/51207yi.gif' />):工欲其善,先利其器(Flex Builder)

  用过Eclipse朋友看到这个开发环境界面应该很熟悉了Flex工作界面和Eclipse界面非常相似在使用上相差也不是很大熟悉Eclipse朋友在Flex环境下很快就可以入手ActionScript开发

   3、创建"Hello Wrold"Flex项目

  创建项目这个就不用我说也清楚文件--新建--**,同Microsoft Visual Studio开发环境Flex也是类似步骤创建项目OK下面我们便来建立个"Hello World"项目如下图示:

  ActionScript 3.0 Step By Step系列(<img src='/icons/51207yi.gif' />):工欲其善,先利其器(Flex Builder)

  新建项目中详细设置这里暂时就不介绍本系列前半部分主要是介绍ActionScript基础没有涉及到数据交互和通信相关知识点比如应用服务器这些暂时还用不到不过需要注意本系列所有文章我都将会使用Web应用方式来写所以在建立项目时候将项目类型设置为"Web Application(runs in Flash Player)",如上图

   4、开发"Hello World"

  通过前面几张图我想大多数朋友多ActionScript已经有了个大概认识了那好下面我们起来看看在Flex环境下如何去开发ActionScript 

  在Flex项目开发中有个很重要文件MXML他相当于是个工作舞台(和Flash场景/舞台有类似效果)所有用户交互界面都是基于此文件来开发详细我将在后面介绍在上面我们建立Flex项目里就默认创建了个MXML文件OK有了这个文件那我们就基于此基础上来做"Hello World"在Flex项目开发中重要技术就是基于组件开发这点和.NET里Control控件差别不大本文举例中将用到Button和TextArea组件有关组件我也将在后续文章里详细介绍这里就先笔代过

  举例构思是界面上放置两个按扭单击个按扭就将"Hello World"显示在TextArea组件上个按扭则完成清空TextAreaControl控件功能

  如同VS开发环境下如果说WinFrom或是aspx是工作舞台那么工具箱是干什么我想大家是非常清楚那么在Flex下开发ActionScript同样如此MXML则是舞台组件箱则等同和VS里工具箱到这里或许大家已经想到了Flex开发模式是不是和VS拖拽Control控件到界面上来做交互界面开发呢?答案是肯定其实不管是在Flex还是Flash环境下开发ActionScript都是这种开发模式先看看下面这张图示:

  ActionScript 3.0 Step By Step系列(<img src='/icons/51207yi.gif' />):工欲其善,先利其器(Flex Builder) 

  通过上图可以很清楚知道在舞台上有两个按扭(点我、清空)和个空白文本域Control控件通过右边设计器上可以看出“点我”按扭id为btnClick显示内容为:点我,同时还给他单击事件指定了个思路方法:OnClick

  如上界面设计便会生成相应mxml标记如同ASP.NET下生成HTML我们可以通过“源视图”查看到所生成MXML代码我们接下来要写代码也是嵌入在这些MXML代码中代码如下:

1<?xmlversion="1.0"encoding="utf-8"?>
2<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"borderColor="#3B8BF9"
3  themeColor="#FAFDFF"backgroundGradientAlphas="[1.0,1.0]"
4  backgroundGradientColors="[#4D4DF6,#FFFFFF]"
5  width="313"cornerRadius="0"height="172">
6  <mx:Buttonx="24"y="35"label="点我"id="btnClick"height="34"width="63"fontSize="14"
7    click="OnClick"/>
8  <mx:TextAreax="125.5"y="24"height="119"id="txt"maxChars="200"fontSize="14"
9    color="#070108"editable="true"/>
10  <mx:Buttonx="24"y="96"label="清空"id="btnClear"height="34"width="63"fontSize="14"
11    click="OnClear"/>
12</mx:Application>


  要完全实现"Hello World"现在只差最后步编码了完成OnClick思路方法定义在Flex项目下开发ActinScript本文前面已经给出了很多和VS下开发.NET相同点那么写代码是不是也是和VS下开发模式呢?对是完全下面便是嵌入到MXML中ActionScript代码: 

1<mx:Script>
2<![CDATA[
3  ernalfunctionOnClick:void{
4    txt.text="HelloWorld!";
5  }
6      
7  ernalfunctionOnClear:void{
8    txt.text="";
9  }
10  ]]>
11</mx:Script>


  通过<mx:Script></mx:Script>标签来嵌入ActionScript代码到MXML中MXML最终会生成个.swfFlash文件我们可以直接打开swf文件运行也可以通过生成html文件来运行本文举例(点击可在线测试)

   5、MXML编程模型

  MXML是种基于XML标记语言在Flex技术中MXML用于设计用户界面实现丰富Flex表现层从作用上说MXML和HTML功能是基本都是设计用户界面但是MXML提供了较HTML更为丰富界面组件并且在开发上更为结构化条理更加清晰MXML编写同样类似于HTML它通过标签来定义和描述组件这点可以从本文前面部分体会到在MXML编程模型中需要注意主要有 3点:

  1、<mx:Application></mx:Application>标记

  2、<mx:Script></mx:Script>标记

  3、用户自定义可视化组件标记 

  第点就不用多说了这是每个MXML应用必须具备配置节点然后便上<mx:Script></mx:Script>标记我们可以通过<mx:Script></mx:Script>标签来嵌入ActionScript代码(详见本本前面部分资料图)除了在里面直接嵌入ActionScript代码外我们还可以引入外部ActionScript类/接口等文件(.as),这点和Java编程模型是通过Import 类/接口全限定名d方式导入相应接口或是对象最后便是用户自定义组件了这个很简单就可以理解这里就不用多说了如上面<mx:Button></mx:Button>便是用户根据实际需要而定义组件  

  文章出处:http://beniao.cnblogs.com/

  相关文章:

  ActionScript 3.0 Step By Step系列( 9):使用样式(style)和皮肤(Skin)两大画笔为应用界面画妆   

  ActionScript 3.0 Step By Step系列( 8):动态数据展现源于灵活数据绑定  

  ActionScript 3.0 Step By Step系列( 7):使用XML和XMLList类处理XML数据   

  ActionScript 3.0 Step By Step系列( 6):学对象事件模型从点击按扭开始  

  ActionScript 3.0 Step By Step系列( 5):走在面向对象开发路上,以类为基础去研究编程问题   

  ActionScript 3.0 Step By Step系列( 4):来自面向对象开发的前呐喊:“学会写可重用代码”   

  ActionScript 3.0 Step By Step系列( 3):学学流程控制编编- & switch & while & for   

  ActionScript 3.0 Step By Step系列( 2):建立扎实ActionScript 3.0语法基础   

  ActionScript 3.0 Step By Step系列():工欲其善,先利其器(Flex Builder)  



  相关资源 :

  Flash ActionScript 3.0(1) - 数据类型、操作符和流程控制语句

  Flash ActionScript 3.0(2) - 包、类、包外类、命名空间、属性、思路方法、接口和继承

  Flash ActionScript 3.0(3) - 以文本形式、XML形式和JSON形式和ASP.NET通信



相关文章

读者评论

  • 共0条 分0页

发表评论

  • 昵称:
  • 内容: