トップページ -> プログラミング -> 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」をクリック

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

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

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

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

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

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

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

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

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

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

    [image]
  8. 「Install Now」をクリック

    [image]
  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. 画面左下の「コンポーネント」ビューから, サンプルプログラムに使用する以下の要素をドラッグ・ドロップで配置  

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

    [image]
  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>
      

      デバッグ実行

      • ブレークポイントの設定

        ソースコードのエディタの画面を使い,簡単にブレークポイントを設定できる

      • ブレークポイントでは,変数の値の確認が簡単にできる
      • ブレークポイントで停止時の操作
        • ステップイン:次のブレークポイントまで進む. F5 キーを押す
        • ステップオーバー:次の行まで進む. F6 キーを押す
        • 再開:停止した状態から動作を再開する
        ・虫マークを押してデバッグを実行 ・パースペクティブの設定は「常にこれを使用する」と設定 ■テストアプリの完成 ・計算結果を表示する1文を追加

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

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

      • パースペクティブを「Java」に切り替えた後、 Android のプロジェクト新規作成
      • アプリケーション名を設定する.アプリケーション名は覚えておく
      • その他設定は省略
      • Android 2.3.3に設定

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

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

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

      2. TextAreaを追加したいので,「コンポーネント」ビューからコントロール(control)→TextAreaを追加
      3. 「デザイン」内の TextArea をクリックし,IDを「varY」のように設定
    3. 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));//計算結果を表示
          }
      }
      
    4. デバッグ

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

      • 名前:CS-Sample02
      • プロジェクト:CS-Sample02を参照
      • ターゲットタブ:Android2.3.3に設定

        実行


    本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

    問い合わせ先: 金子邦彦(かねこ くにひこ) [image]