安装Flex Builder 3 （翻译的一本啥书来着）

从下载Flex Builder 3集成开发工具来开始我们的Flex之旅吧。可以到Adoble网站(http://adobe.com/flex )点击Try Flex Builder3链接免费下载。FB3确实很大，因此当你下载的时候可以跳到第二章找找灵感，看看Flex都能做什么。
安装IDE

Flex Builder的安装更其它软件在WINDOWS,MAC或者LINUX系统的安装时一样的。小小的不同就是安装的时候应该关闭所有浏览器，这样安装程序 就会把你的Flash Player版本升级到Debugger版本。你应该很喜欢，因为这样就可以使用Flex Builder3所有的调试功能了。调试系统非常重要的，花费时间来熟悉它是很值得的。
我强烈建议下载FB3的时候订阅Adobe的邮件通知。这些邮件会提供关于Flex的最新消息和钻研一些技术的重要信息.

图1-1 启动画面
一旦安装完毕，启动它应该看到图1-1的启动画面。
在启动画面上可以看到Build on Eclipse.Eclipse是由IBM开发的在JAVA界非常受欢迎的跨平台IDE。然而，你也可以用它来开发PHP，Ruby on Rails等等，在这里，用来开发Flex应用。
如果你熟悉Eclipse那你也很熟悉图1-2.

图1-2 空的开始页面
图1-2展示了没有创建任何工程的IDE。左上角是工程和文件区域。左下角是Outline，显示Flex应用文件的一些嵌套标签。右上边是默认的开始页 面。你应该签出开始页面的链接来帮助你获得有用的材料。有下面的面板，带Problems标签的，是Flex代码的错误（例如语法错误）的提示区域来保证 Flex Builder可以成功的编译。
来玩点图片
用Flex来快速的开发一个应用吧，在File菜单中选新建Flex工程。随便写一个你喜欢的工程名字，我用“starter”.在电脑里随便选个图片，重命名为myimage.jpg,然后拖到工程的src文件夹里。
下一步，双击工程里的MXML文件把Example 1-1的代码加进去。

Example 1-1. Starter.mxml

1. <?xml version="1.0" encoding="utf-8" ?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="absolute" >
4. <mx:Image source="@Embed('mypicture.jpg')" height="100"
5. top="30"
6. left="30" rotation="−10" >
7. <mx:filters >
8. <mx:DropShadowFilter />
9. </mx:filters >
10. </mx:Image >
11. </mx:Application >

（小鱼注：程序里的rotation="−10"负号有问题，试验时候删掉自己打一个就好了）

现在使用Run菜单里的Run命令来运行程序吧。你会发现图片旋转了，并且有阴影效果。你会发现Flex能做一些浏览器里很难做的一些事。
我们的下一步要给示例加一些动态的行为，旋转控制，大小，和图片的可见性。更新的代码如下例子1-2

Example 1-2. Starter.mxml updated with controls

1. <?xml version="1.0" encoding="utf-8" ?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
3. <mx:HBox top="10" left="10" >
4. <mx:HSlider minimum="-30" maximum="30" value="-10" toolTip="Rotation" change="myimg.rotation=event.currentTarget.value" liveDragging="true" />
5. <mx:HSlider minimum="100" maximum="300" value="100"
6. toolTip="Size"
7. change="myimg.height=event.currentTarget.value"
8. liveDragging="true" />
9. <mx:CheckBox label="Visible" change="myimg.visible=
10. event.currentTarget.selected"
11. selected="true" />
12. </mx:HBox >
13. <mx:Image id="myimg" source="@Embed('mypicture.jpg')"
14. height="100" top="60" left="30" rotation="-10" >
15. <mx:filters >
16. <mx:DropShadowFilter />
17. </mx:filters >
18. </mx:Image >
19. </mx:Application >

  现在我们有了两个滑块和一个复选框。一个滑块控制旋转，另外一个控制图片大小。复选框隐藏或者显示图片。图1-3显示了结果。

为了使得示例更加有趣，来给图片显示很隐藏效果在加个渐入渐出效果吧。示例3展示了更新的代码。

图片1-3 我们的starter应用

Example1-3 更新的image代码

1. <mx:Image id="myimg" source="@Embed('mypicture.jpg')"
2. height="100" top="60" left="30" rotation="-10" >
3. <mx:filters >
4. <mx:DropShadowFilter />
5. </mx:filters >
6. <mx:showEffect >
7. <mx:Fade alphaFrom="0" alphaTo="1" duration="1000" />
8. </mx:showEffect >
9. <mx:hideEffect >
10. <mx:Fade alphaFrom="1" alphaTo="0" duration="1000" />
11. </mx:hideEffect >
12. </mx:Image >

（小鱼注：此处只更新了image处的代码）
我已经使用了渐变效果，但是还有许许多多不同的过滤器和效果提供给任何的Flex控制。你可以同时结合使用这些效果或者按顺序创建非常酷毙了的效果，即使不写一行ActionScript.