トップページ -> 実践知識 -> JavaScript による Web プログラミング -> Adobe Flash ビルダー (Adobe Flash Builder) 体験版のダウンロードとインストールとテスト実行
[サイトマップへ], サイト内検索:

Adobe Flash ビルダー (Adobe Flash Builder) 体験版のダウンロードとインストールとテスト実行

サイト構成 連絡先,業績など 実践知識 コンピュータ 教材 サポートページ

この Web ページで行うこと.


前準備


Adobe Flash ビルダー (Adobe Flash Builder) のダウンロードとインストール

  1. ダウンロードのWebページ

    http://www.adobe.com/downloads/

    参考 Web ページ: http://www.adobe-education.com/jp/membership/flex01.html

  2. 「Flash Builder 4.6」を選び「Go」をクリック

  3. 言語、Windows / Mac を選択し,「Download now」をクリック

  4. (オプション)Adobe ID の取得

    Adobe ID の取得をまだ行なっていない場合は,「Create an Adobe Account」をクリック

  5. 「Sign in」をクリックして,サイン・イン

  6. 初回のダウンロードでは,Akamai Download Manager がインストールされる

    手順は,およそ次のようになる

    1. ファイル(Adobe_Flash_Builder_4.6-AkamaiDLM.exe)がダウンロードされる

    2. Adobe_Flash_Builder_4.6-AkamaiDLM.exe プログラムの起動
    3. ライセンス条項の確認

      同意できる場合のみ続行する

    4. Akamai NetSession Interface がインストールされる

  7. FlashBuilder_4_6_LS10.exe がダウンロードされる. このファイルには、 スタンドアロン版とプラグイン版の両方が同封されている(2012年5月時点の情報)

  8. 「Install Now」をクリック

  9. ライセンス条項を確認の上,指示に従う

ActionScript プログラム作成

ActionScript プロジェクト作成

  1. Adobe Flash Builder の起動
  2. 「体験版」のウィンドウが表示されたら、内容を確認しておく
  3. Adobe ID を入力するように指示されたら指示に従う
  4. 「ファイル」→「新規」 → 「その他」と操作して ,新プロジェクトの作成を始める
  5. プロジェクトの種類とてして 「Flash Builder」 → 「Flexモバイルプロジェクト」 を選ぶ
  6. プロジェクトの場所」のウインドウ

    プロジェクト名を設定する.

    ここでのプロジェクト名がアプリの表示名になる.それ以外の設定はデフォルト。「次へ」をクリックし,設定内容を確認しておく。

  7. モバイル設定」のウインドウ

  8. サーバー設定」のウインドウ

    設定はデフォルトのまま。「次へ」をクリック

  9. ビルドパス」のウインドウ

    設定はデフォルトのまま。「終了」をクリック

プロジェクトの作成が終わると自動的に Main<プロジェクト名>View.mxml という名前のファイルのエディタ画面が開く. このファイルを編集S流.

画面説明

実行方法

  1. ツールバーの「実行」→「実行構成」→「モバイルアプリケーション」→「新規」と操作する
  2. 起動方法の設定
  3. ツールバーの「実行」→「デバッグ」:不完全なプログラムのテストを行うモード
  4. ツールバーの「実行」→「実行」:完成したプログラムの動作を確認するモード

Action Script プログラムを作成してみる

2次方程式のXの値をボックス1(TextImput)に入力し、ボタンを押すとボックス2(TextArea)にYの値を出力する

※ 以降の説明は、画面表示が「Flash」パースペクティブになっているものとする.

ビューファイル:Main<プロジェクト名>View.mxml の編集

  1. ビューファイル:Main<プロジェクト名>View.mxml を開いているウィンドウの左上「ソース/デザイン」タブの「デザイン」をクリック

    左下に「コンポーネント」ビューが表示される

  2. 画面左下の「コンポーネント」ビューから, サンプルプログラムに使用する以下の要素をドラッグ・ドロップで配置  

    ※ 詳細な配置図はスクリーンショット(下図)を参照

  3. 各要素のプロパティの設定

イベントハンドラの作成

※ イベントハンドラ設定時にウィンドウの左上「ソース/デザイン」タブが「ソース」へと切り替わっているので、このままソースの記述を行う.

  1. ファイルの「ソース」にイベントハンドラを記述

    <fx:Declaration>の直前に以下の内容を入力

      <fx:Script>
        <![CDATA[
    protected function calBtnHandler(Event:MouseEvent):void {
    
    }
    ]]>
        </fx:Script>
    

    入力中に候補が出てくるので、その中から適切なものを選ぶと自動的に必要な内容が補完される

  2. プログラム作成

    ローカル変数locX、locYを定義. locXにXの値を代入. locYに2次方程式の解を代入

    <?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    		xmlns:s="library://ns.adobe.com/flex/spark" title="sample02">
    	<fx:Script>
    		<![CDATA[
    			protected function calBtnHandler(Event:MouseEvent):void {
    				var locX:Number;
    				var locY:Number;
    				var locZ:Number;
    				locX = Number(varX.text);
    				locZ = Number(varZ.text);
    				locY = locX * locX + locZ * locZ; 
    				trace("locX="+locX,"locY="+locY,"locZ="+locZ);
    				varY.text = String(locY);	
    			}
    		]]>
    	</fx:Script>
    	<fx:Declarations>
    		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
    	</fx:Declarations>
    				<s:Label x="75" y="63" fontSize="64" text="X="/>
    				<s:Label x="75" y="160" fontSize="64" text="Z="/>
    				<s:Label x="75" y="429" fontSize="64" text="Y="/>
    				<s:Button x="120" y="284" label="計算します" click="calBtnHndller(event)" fontSize="72"/>
    				<s:TextInput id="varX" x="160" y="55" width="140" height="60"/>
    				<s:TextInput id="varZ" x="160" y="154" width="140" height="60"/>
    				<s:TextArea id="varY" x="160" y="422" width="140" height="60"/>
    </s:View>
    

デバッグ実行


Java プログラムを作成してみる

前準備として, Eclipse をインストールし,プラグイン版のAdobe Flash Builderをインストールしておく.

ビューファイル: ・・・View.mxml での作業

  1. 「デザイン」をクリック

    左下に「コンポーネント」ビューが表示される

  2. TextAreaを追加したいので,「コンポーネント」ビューからコントロール(control)→TextAreaを追加
  3. 「デザイン」内の TextArea をクリックし,IDを「varY」のように設定
  • Java プログラムの編集
     
    package com.cs.sample;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.TextView;
    public class CSSample02Activity extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
    
           TextView  varY = new TextView(this);
    
           int locX = 2;	
           int locY;		
           int locZ = 3;	
    
           locY = locX * locX + locZ * locZ ;
    
           varY.setText(String.valueOf(locY));//計算結果を表示
    	}
    }
    
  • デバッグ

    右クリック→デバッグ→実行の構成