zoukankan      html  css  js  c++  java

  • [转载]白手起家学习使用flex

    1. 下载flex SDK: 2. 这篇文章，如何搭建环境：

    http://help.adobe.com/en_US/air/build/WS2d8d13466044a7337d7adee012406959c52-8000.html#WS2d8d13466044a73328ed2239124110d12b3-8000
    基本上，对于AIR， 先下载ZIP包（FLEX-SDK-4.5.1.zip) ，然后解压缩，然后把bin 路径添加到PATH 系统变量中。
    3. 先把台阶弄低点，从HTML 入手（见这个文章： Creating your first HTML-based AIR application with the AIR SDK  http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html  )

    Create the project files Create the AIR application descriptor file Create the application HTML page Test the application Create the AIR installation file Next Steps For a quick, hands-on illustration of how Adobe® AIR® works, use these instructions to create and package a simple HTML-based AIR “Hello World” application.
To begin, you must have installed the runtime and set up the AIR SDK. You will use the AIR Debug Launcher (ADL) and the AIR Developer Tool (ADT) in this tutorial. ADL and ADT are command-line utility programs and can be found in the bin directory of the AIR SDK (see Installing the AIR SDK). This tutorial assumes that you are already familiar with running programs from the command line and know how to set up the necessary path environment variables for your operating system.
Note: If you are an Adobe® Dreamweaver® user, read Create your first HTML-based AIR application with Dreamweaver. Note: HTML-based AIR applications can only be developed for the desktop and the extendedDesktop profiles. The mobile and tv profiles are not supported. Create the project files
Every HTML-based AIR project must contain the following two files: an application descriptor file, which specifies the application metadata, and a top-level HTML page. In addition to these required files, this project includes a JavaScript code file, AIRAliases.js, that defines convenient alias variables for the AIR API classes.
Create a directory named HelloWorld to contain the project files. Create an XML file, named HelloWorld-app.xml. Create an HTML file named HelloWorld.html. Copy AIRAliases.js from the frameworks folder of the AIR SDK to the project directory.


    这个文件应该是在这里： D:\flex_sdk_4.5.1\frameworks\libs\air
    说的不太清楚。意思是： 1. 首先，建立个文件夹，名字随便取。 2. 在这个 新文件夹中，建立几个文件。  $ls AIRAliases.js  hello_bird.html  hellow_bird-app.xml
    3. 比较关键的 项目描述文件的内容：

    Java代码 
    1 <application xmlns="http://ns.adobe.com/air/application/2.6">
  2     <id>examples.html.HelloWorld</id>
  3     <versionNumber>0.1</versionNumber>
  4     <filename>hello_bird</filename>
  5     <initialWindow>
  6         <content>hello_bird.html</content>
  7         <visible>true</visible>
  8         <width>400</width>
  9         <height>200</height>
 10     </initialWindow>
 11 </application>

    注意：   xmlns="http://ns.adobe.com/air/application/2.7"  是行不通的。会出现错误： invalid application descriptor: Unknown namespace: http://ns.adobe.com/air/application/2.7
    把2.7 改成 2.6 就好了。（参考：http://forums.adobe.com/thread/879313 )
    4. 然后，对应的HTML 文件（hello_bird.html) 的内容为：

    Java代码
      
     1 <html>
  2     <head>
  3         <script src="AIRAliases.js" type="text/javascript"></script>
  4         <script type="text/javascript">
  5         function appLoad(){
  6             air.trace("Hello World in console");
  7         }
  8         </script>
  9         <title>Hello World</title>
 10     </head>
 11     <body onLoad="appLoad()">
 12         <h1>Hello World in HTML file! !!!</h1>
 13     </body>
 14 </html>

    5. 编译，运行： cd <your folder name> adl hellow_bird-app.xml
    可以看到console和HTML的内容都显示了出来。 还是挺爽的。
    至此，还是感觉不错的。起码看到了效果。
    但是下一步进行不下去了： $ adt -package -storetype pkcs12 -keystore sampleCert.pfx HellowBird.air hello_bird.html hellow_bird-app.xml AIRAliases.js password: D:\workspace\bird_bird\hello_bird\hello_bird.html: error 101: Namespace is missing
    太郁闷了。 这个Namespace 搞不定啊。没任何资料。 官方给的2个： 2.7, 3.0 都不行。莫非是我在公司防火墙？ 但是 2.0, 2.6 都可以用啊。
    算了， 先放着。 反正上午开始的 1G 的flash builder 5已经下载好了。 走走action script的路子吧。 

    1. 下载FLASH BUILDER 5. 从官网。地址是： http://trials3.adobe.com/AdobeProducts/FLBR/4_5/win32/FlashBuilder_4_5_LS10.7z 很大， 1G。 使用7Z 格式，需要专门的解压缩软件打开。 
    2. 大约4小时之后，下载完毕。解压缩到某个目录。
    3. 但是无法启动，提示说 "failed to create java virtual machine".  奇了怪了，哥安装了JDK6啊。。。。  GOOGLE了一下，发现这个问题很普通，已经有了解决方案： 修改 FlashBuilder.ini 文件 中的这个2段中的一段 : -XX:MaxPermSize=128m -XX:PermSize=64m
    全文如下：

    Java代码 
    -nl
en_US
-startup
eclipse/plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
--launcher.library
eclipse/plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.1.R36x_v20100810
--launcher.defaultAction
openFile
-vmargs
-Xms256m
-Xmx512m
-XX:MaxPermSize=128m
-XX:PermSize=64m
-Dorg.eclipse.equinox.p2.reconciler.dropins.directory=eclipse/dropins
-Declipse.application=com.adobe.flexbuilder.standalone.FlashBuilderApplication

    4. 就好了。可以正常启动。 进来一看，我了歌曲，这个不就是Eclipse吗？  温习一下久而不用的快捷键。 ctrl + f7, ctrl + f8, 挺有感觉啊~~~ 

    按照前文  http://sg552.iteye.com/blog/1277793 ，我们安装好了Flash Builder 5, 下面开始第一个项目吧~！~~
    ( 根据 http://www.adobe.com/devnet/air/articles/getting_started_air_as.html Follow these steps to start building your first ActionScript application on Adobe AIR:
    Download the Adobe AIR runtime. You need the runtime to launch AIR applications. Download and install your preferred development environment: Adobe Flash Builder 4.5 (formerly Flex Builder) Flex 4.5 SDK Adobe Flash CS5.5 Professional  ) 按照官方文档所说，要进行项目，需要： 1. Flash Professional CS5 2. Flash Builder 3. Flex SDK
    所以，我们先下载着 Professional CS5 ，同时进行这篇文章的操作。 (这个东东是必须要用下载器下载的，速度很慢。我找不到连接） 如图：
    然后，我们根据这个文档： http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118676a28bd-8000.html 使用 Flash Builder建立第一个FLEX/AIR 项目。
    过程非常简单：

    • Open Flash Builder.
    • Select File > New > Flex Project.
    • Enter the project name as AIRHelloWorld.
    • In Flex, AIR applications are considered an application type. You have two type options:
      • a web application that runs in Adobe® Flash® Player a desktop application that runs in Adobe AIR Select Desktop as the application type.
    • Click Finish to create the project.

    建立好项目之后，是这样的：
    修改第一个文件(flash_test2.mxml)，内容是：：

    Xml代码 
    <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       title="hihihihihi">
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
            
            skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.9"; 
        }          
    </fx:Style>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Label text="Hello AIR1!!!!!! by siwei" horizontalCenter="10" verticalCenter="30"/> 
</s:WindowedApplication>

    第二个文件(  flash_test2-app.xml)修改2处就好了：

    Xml代码 
            <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
        <systemChrome>none</systemChrome>

        <!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
<transparent>true</transparent>

    然后，运行第二个文件（ F11 或者 Run -> Debug. )就可以看到效果。 很简单。不截图了。
    最后，导出！看看可以发布的AIR到底是啥东东。。。（第一篇日志中，使用命令行模式的 FLEX SDK 4.5 导出，失败。。。）
    点击： project -> export release build...， signed AIR package
    第一次导出的时候，需要提供一个认证文件（certificates file），没关系，按照说明一点点的创建它就好。

    然后机会发现，项目文件夹下多了一个文件： flash_test2.air 双击它，就会安装。。。。
    最后，它生成了2个文件：  exe 文件和 swf 文件。前者双击就可以在 windows 下运行~~~

    参考资料：
    http://www.flashutvecklaren.se/info/en/first-actionscript-project.php
    上一步非常简单。极其简单
    1. 建立一个actionscript project 2. 建立一个文件 Hello.as，内容为：

    Java代码 复制代码 收藏代码
    1. package 
    2. { 
    3.     import flash.display.Sprite; 
    4.     import flash.text.TextField; 
    5.      
    6.     publicclass Hello extends Sprite 
    7.     { 
    8.         public function Hello() 
    9.         { 
    10.             var tText:TextField; 
    11.             tText = new TextField(); 
    12.             tText.text = "Hello World"; 
    13.             addChild(tText); 
    14.              
    15.         } 
    16.     } 
    17. }  
    package
{
	import flash.display.Sprite;
	import flash.text.TextField;
	
	public class Hello extends Sprite
	{
		public function Hello()
		{
			var tText:TextField;
			tText = new TextField();
			tText.text = "Hello World";
			addChild(tText);
			
		}
	}
}

    3. 运行，看到了hello world.
    下一步，我们想运行复杂一点的东东。。。 运行一下 box2d的代码。 见 http://www.emanueleferonato.com/2011/03/25/create-a-flash-prototype-of-the-moops-combos-of-joy-step-2/
    根据 BOX2D 入门指导：http://www.emanueleferonato.com/2009/01/27/box2d-tutorial-for-the-absolute-beginners/
    我们去下载  box2d for flash: http://sourceforge.net/projects/box2dflash/files/latest/download?source=files
    根据这个提示(http://orenyomtov.com/box2d-flash-action-script-3-compile-errors-fix.html) ，我们需要下载 2.0.2 (http://sourceforge.net/projects/box2dflash/files/box2dflash/Box2DFlashAS3_2.0.2/Box2DFlashAS3_2.0.2_.zip/download) 然后解压缩，比如到 d:\box2d_flash\
    然后，把 d:\box2d_flash\Box2D 文件夹，copy到 当前的 project 目录下。如图：
    现在，基本大部分"import" 错误都消除了，只剩下2个东东，IDE提示说找不到： birdMC 和 backgroundMC. 

    下次继续。。。

    上次说到，在创建第一个项目的时候，出现了import的错误。解决之后，仍然有两个类找不到： birdMC, 和backgroundMC.

    google了好久， 几乎没有解决方案。也没有找到线索，所以只好留到 Flash Professional 下载好，看看fla文件中有什么线索。

    果然，今天早上，使用flash professional打开那个fla文件，发现其中有2个东东：


    不知道如何引用它们，又没有快速查看的文档，于是去官网看。。。里面的文章写的非常含糊，不相关。google了好多关键字，基本是：  "flexbuilder, not found, import symbol." 等等。。。（因为其中的2个，都叫symbol）， 又看了如何在 flash professional中运行 actionscript， 建立项目，又查看如何在flex builder中建立 actionscript 与 flex 项目的区别。。。各种迷惑。。。。

    终于，在尝试了 “import symbol in actionscript” 这个关键字之后，google出了答案：
    Flash Tutorial: How to Import MovieClips into a Flash Builder ActionScript Project
    （原来，这个symbol叫 MovieClips )

    大体的步骤是：

    1. 假设已经有了一个fla文件：


    2. 在LIBRARY 面板上，点中它，右键菜单，选择它的properties:


    3. 在弹出的窗口中，勾选： 
    export for actionscript,
    export in frame1，并且保存。 如图。


    4. 然后，我们需要处理这个fla. 点击 File -> Publish Settings, 然后设置好 导出swc的选项。（所以，可以看到,SWC 就是可以被flex builder所引用的库，可以认为是java中的jar包）


    5. 导出之后，我们在Flex Builder IDE中， 假设我们的project是创建好的， 右键项目名字，然后properties, 然后设置 Build Path，把刚才生成的  swc加进去。



    6. 现在，我们可以在package explorer中看到它了：




    7. 上面几个文件都是借用于原文的，( htmlgoodies.com），下面的这个图片就是我的项目中，引用了 SWC 文件之后的效果，可以看到，原来的找不到变量的错误现在都消失了。


    8. run ! 成功看到了 浏览器中的效果。呵呵呵呵。。。  不容易啊！ 
  • 相关阅读:
    Linux平台下卸载MySQL的方法
    Linux自带mariadb卸载
    ubuntu下mysql的安装
    Java基础-方法区以及static的内存分配图
    Linux新建用户后的必要设置
    vim 个性化设置和操作
    centos6 下查看SELinux状态 关闭SELinux
    查看CentOS版本信息
    Linux下 tar 命令详解
    linux下 利用 rz 命令上传文件
  • 原文地址：https://www.cnblogs.com/oneLight/p/2601636.html
Copyright © 2011-2022 走看看