例：基本的なアプリケーションの作成
ActionScript 3.0 は、Flash Professional や Flash Builder ツール、任意のテキストエディターなどの様々なアプリケーション開発環境で使用できます。
この例では、Flash Professional または Flash Builder を使用した簡単な ActionScript 3.0 アプリケーションの作成と拡張を、手順を追って学習します。作成するアプリケーションは、ActionScript 3.0 の外部クラスファイルを Flash Professional および Flex で使用するための簡単な見本です。
ActionScript アプリケーションの設計ActionScript アプリケーションのこの例は、標準的な「Hello World」アプリケーションで、その設計は非常に単純です。
このアプリケーションの名前は HelloWorld です。
「Hello, World!」という語句を含むテキストフィールドが 1 つ表示されます。
このアプリケーションでは、Greeter という名前のオブジェクト指向クラスを 1 つ使用します。この設計では、このクラスは Flash Professional または Flex プロジェクトで使用できます。
この例では、まず、基本のアプリケーションを作成します。次に、ユーザーにユーザー名を入力させ、アプリケーションにその名前をユーザーリストと照合させる新しい機能を追加します。
この簡潔な定義を使用して、アプリケーションの作成を開始します。
HelloWorld プロジェクトと Greeter クラスの作成Hello World アプリケーションの設計説明では、再利用しやすいコードを使用するよう指定されています。この目的を達成するために、アプリケーションは Greeter という名前のオブジェクト指向クラスを 1 つ使用します。このクラスは、Flash Builder または Flash Professional で作成したアプリケーション内から使用されます。
HelloWorld プロジェクトと Greeter クラスを Flex で作成するにはFlash Builder で、ファイル／新規／Flex プロジェクトを選択します。
「プロジェクト名」に HelloWorld と入力します。アプリケーションの種類が「Web」に設定されている（Adobe Flash Player で実行される）ことを確認し、「終了」をクリックします。
Flash Builder によってプロジェクトが作成され、パッケージエクスプローラーに表示されます。デフォルトでは、プロジェクトには HelloWorld.mxml という名前のファイルが既に含まれており、そのファイルがエディターパネルで開きます。
次に、ActionScript のカスタムクラスファイルを Flash Builder で作成するために、ファイル／新規／ActionScript クラスを選択します。
新規 ActionScript クラスダイアログボックスで、「名前」フィールドにクラス名として「Greeter」を入力し、「終了」をクリックします。
新しい ActionScript 編集ウィンドウが表示されます。
Greeter クラスへのコードの追加に進みます。
Flash Professional で Greeter クラスを作成するにはFlash Professional で、ファイル／新規を選択します。
新規ドキュメントダイアログボックスで ActionScript ファイルを選択し、「OK」をクリックします。
新しい ActionScript 編集ウィンドウが表示されます。
ファイル／保存を選択します。 アプリケーションを保存するフォルダーを選択し、ActionScript ファイルに Greeter.as という名前を付けて「OK」をクリックします。
Greeter クラスへのコードの追加に進みます。
Greeter クラスへのコードの追加Greeter クラスはオブジェクト Greeter を定義します。このオブジェクトを HelloWorld アプリケーションで使用します。
Greeter クラスにコードを追加するには新しいファイルに次のコードを入力します（コードの一部があらかじめ自動的に入力されていることもあります）。
package
{
public class Greeter
{
public function sayHello():String
{
var greeting:String;
greeting = "Hello World!";
return greeting;
}
}
}
Greeter クラスには、「Hello World!」というストリングを返す sayHello() メソッドが 1 つ含まれています。
ファイル／保存を選択して、この ActionScript ファイルを保存します。
これで、アプリケーションで Greeter クラスを使用できるようになりました。
ActionScript コードを使用するアプリケーションの作成作成した Greeter クラスは、必要なものをすべて備えたアプリケーション機能を定義しますが、アプリケーション全部を表すわけではありません。 Greeter クラスを使用するには、Flash Professional ドキュメントまたは Flex プロジェクトを作成する必要があります。
コードには、Greeter クラスのインスタンスが必要です。次に、アプリケーションで Greeter クラスを使用する方法を示します。
Flash Professional を使用して ActionScript アプリケーションを作成するにはファイル／新規を選択します。
新規ドキュメントダイアログボックスで「Flash ファイル（ActionScript 3.0）」を選択し、「OK」をクリックします。
新しいドキュメントウィンドウが表示されます。
ファイル／保存を選択します。 Greeter.as クラスファイルと同じフォルダーを選択し、Flash ドキュメントに HelloWorld.fla という名前を付けて「OK」をクリックします。
Flash Professional ツールパレットでテキストツールを選択します。ステージ上をドラッグして、幅 300 ピクセル、高さ 100 ピクセル程度の新しいテキストフィールドを定義します。
プロパティパネルのステージでテキストフィールドを選択したまま、テキストの種類を「ダイナミックテキスト」に設定し、テキストフィールドのインスタント名として mainText と入力します。
メインタイムラインの最初のフレームをクリックします。ウィンドウ／アクションを選択して、アクションパネルを開きます。
アクションパネルに次のスクリプトを入力します。
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello();
ファイルを保存します。
ActionScript アプリケーションのパブリッシュとテストに進みます。
Flash Builder を使用して ActionScript アプリケーションを作成するにはHelloWorld.mxml ファイルを開き、次のリストと同じになるようにコードを追加します。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024"
minHeight="768""
creationComplete="initApp()">
<fx:Script>
<![CDATA[
private var myGreeter:Greeter = new Greeter();
public function initApp():void
{
// says hello at the start, and asks for the user's name
mainTxt.text = myGreeter.sayHello();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextArea id="mainTxt" width="400"/>
</s:Application>
この Flex プロジェクトには次の 4 つの MXML タグが含まれています。
アプリケーションコンテナを定義する <s:Application> タグ
Application タグのレイアウトスタイル（縦書きレイアウト）を定義する <s:layout> タグ
ActionScript コードの一部を含む <fx:Script> タグ
ユーザーにテキストメッセージを表示するためのフィールドを定義する <s:TextArea> タグ
<fx:Script> タグのコードは、アプリケーションがロードされたときに呼び出される initApp() メソッドの定義です。initApp() メソッドは、mainTxt TextArea のテキスト値を、作成したカスタムクラス Greeter の sayHello() メソッドによって返される「Hello World!」ストリングに設定します。
ファイル／保存を選択してアプリケーションを保存します。
ActionScript アプリケーションのパブリッシュとテストに進みます。
ActionScript アプリケーションのパブリッシュとテストアプリケーション開発は反復プロセスです。 コードを記述し、コンパイルして、正しくコンパイルされるまでコードを編集します。 コンパイルされたアプリケーションを実行し、テストして、意図した設計が実現されているかどうかを確認します。実現されていない場合は、実現するまでコードを編集します。Flash Professional および Flash Builder の開発環境には、アプリケーションをパブリッシュ、テスト、およびデバッグするための方法が多数用意されています。
次に各環境で HelloWorld アプリケーションをテストする基本的な手順を示します。
Flash Professional を使用して ActionScript アプリケーションのパブリッシュとテストを行うにはアプリケーションをパブリッシュして、コンパイルエラーがないか確認します。Flash Professional で、制御／ムービープレビューを選択し、ActionScript コードをコンパイルして HelloWorld アプリケーションを実行します。
アプリケーションをテストしたときに、出力ウィンドウにエラーや警告が表示された場合は、HelloWorld.fla または HelloWorld.as ファイルでエラーの原因を修正します。その後、アプリケーションを再びテストします。
コンパイルエラーがなければ、Flash Player ウィンドウに Hello World アプリケーションが表示されます。
これで、ActionScript 3.0 を使用する、単純であっても完全なオブジェクト指向アプリケーションが作成されました。HelloWorld アプリケーションの拡張に進んでください。
Flash Builder を使用して ActionScript アプリケーションのパブリッシュとテストを行うには実行／HelloWorld を実行を選択します。
HelloWorld アプリケーションが起動します。
これで、ActionScript 3.0 を使用する、単純であっても完全なオブジェクト指向アプリケーションが作成されました。HelloWorld アプリケーションの拡張に進んでください。
HelloWorld アプリケーションの拡張アプリケーションをもう少し興味深いものにするために、アプリケーションがユーザー名を要求し、それを定義済みの名前リストと検証するようにします。
まず、Greeter クラスを更新して新しい機能を追加します。次に、アプリケーションを更新して、新しい機能を使用できるようにします。
Greeter.as ファイルを更新するには"Greeter.as" ファイルを開きます。
ファイルの内容を次のように変更します。新しい行および変更された行は太字で表示されています。
package
{
public class Greeter
{
/**
* Defines the names that receive a proper greeting.
*/
public static var validNames:Array = ["Sammy", "Frank", "Dean"];
/**
* Builds a greeting string using the given name.
*/
public function sayHello(userName:String = ""):String
{
var greeting:String;
if (userName == "")
{
greeting = "Hello. Please type your user name, and then press "
+ "the Enter key.";
}
else if (validName(userName))
{
greeting = "Hello, " + userName + ".";
}
else
{
greeting = "Sorry " + userName + ", you are not on the list.";
}
return greeting;
}
/**
* Checks whether a name is in the validNames list.
*/
public static function validName(inputName:String = ""):Boolean
{
if (validNames.indexOf(inputName) > -1)
{
return true;
}
else
{
return false;
}
}
}
}
Greeter クラスは、いくつかの新しい機能が追加されました。
validNames 配列は、有効なユーザー名のリストを表示します。この配列は、Greeter クラスのロード時に 3 つの名前のリストに初期化されます。
sayHello() メソッドは、ユーザー名を受け付け、何らかの条件に基づいて挨拶を変更します。userName が空のストリング（""）である場合、greeting プロパティはユーザーに名前の入力を要求する設定になります。ユーザー名が有効であれば、挨拶は「Hello, <ユーザー名>」になります。最後に、2 つの条件のいずれかに適合しない場合、greeting 変数は、「Sorry <ユーザー名>, you are not on the list.」に設定されます。
validName() メソッドは、inputName が validNames 配列内で見つかった場合は true を、見つからない場合は false を返します。ステートメント validNames.indexOf(inputName) は、validNames 配列内で inputName ストリングに対して各ストリングを確認します。Array.indexOf() メソッドは、配列内のオブジェクトの最初のインスタンスのインデックス位置を返します。配列内にオブジェクト見つからない場合は、値 -1 を返します。
次に、この ActionScript クラスを参照するアプリケーション ファイルを編集します。
Flash Professional を使用してアプリケーションを変更するにはHelloWorld.fla ファイルを開きます。
フレーム 1 のスクリプトを変更して、空のストリング（""）が Greeter クラスの sayHello() メソッドに渡されるようにします。
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");
ツールパレットでテキストツールを選択します。ステージ上に 2 つの新しいテキストフィールドを作成します。作成したテキストフィールドを、既存のmainText テキストフィールドのすぐ下に並べて配置します。
1 つ目の新しいテキストフィールドに、ラベルのテキストとして User Name: と入力します。
もう 1 つの新しいテキストフィールドを選択して、プロパティインスペクターでテキストフィールドの種類として InputText を選択します。「行タイプ」に「単一行」を選択します。インスタンス名として textIn と入力します。
メインタイムラインの最初のフレームをクリックします。
アクションパネルで、既存のスクリプトの末尾に以下の行を追加します。
mainText.border = true;
textIn.border = true;
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.sayHello(textIn.text);
}
}
この新しいコードでは、以下の機能が追加されます。
最初の 2 行は、単純に 2 つのテキストフィールドの境界線を定義します。
textIn フィールドなどの入力テキストフィールドには、送出できるイベントのセットがあります。addEventListener() メソッドによって、特定のタイプのイベントが発生したときに実行される関数を定義することができます。この例で該当するイベントは、キーボードのキーが押されることです。
keyPressed() カスタム関数は、押されたキーが Enter キーであるかどうかを確認します。Enter キーである場合は、myGreeter オブジェクトの sayHello() メソッドを呼び出します。このとき、パラメーターとして textIn テキストフィールドのテキストを渡します。このメソッドは、渡された値に基づいて挨拶のストリングを返します。返されたストリングは、mainText テキストフィールドの text プロパティに割り当てられます。
フレーム 1 の完全なスクリプトは次のようになります。
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");
mainText.border = true;
textIn.border = true;
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.sayHello(textIn.text);
}
}
ファイルを保存します。
制御／ムービープレビューを選択して、アプリケーションを実行します。
アプリケーションを実行すると、ユーザー名の入力を求められます。有効なユーザー名（Sammy、Frank または Dean）を入力すると、「hello」という確認メッセージが表示されます。
Flash Builder を使用してアプリケーションを変更するにはHelloWorld.mxml ファイルを開きます。
次に、<mx:TextArea> タグを変更し、表示専用であることをユーザーに示します。背景色を明るいグレーに変更し、editable 属性を false に設定します。
<s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />
ここで、次の行を <s:TextArea> 終了タグの直後に追加します。これらの行により、ユーザーがユーザー名の値を入力するための TextInput コンポーネントが作成されます。
<s:HGroup width="400">
<mx:Label text="User Name:"/>
<s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" />
</s:HGroup>
enter 属性は、ユーザーが userNameTxt フィールドで Enter キーを押したときに、行われる動作を定義します。この例では、そのフィールドのテキストが Greeter.sayHello() メソッドに渡されます。mainTxt フィールドに表示される挨拶がそれに応じて変更されます。
HelloWorld.mxml ファイルは次のようになります。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024"
minHeight="768""
creationComplete="initApp()">
<fx:Script>
<![CDATA[
private var myGreeter:Greeter = new Greeter();
public function initApp():void
{
// says hello at the start, and asks for the user's name
mainTxt.text = myGreeter.sayHello();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>
<s:HGroup width="400">
<mx:Label text="User Name:"/>
<s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" />
</s:HGroup>
</s:Application>
編集した HelloWorld.mxml ファイルを保存します。実行／HelloWorld を実行を選択してアプリケーションを実行します。
アプリケーションを実行すると、ユーザー名の入力を求められます。有効なユーザー名（Sammy、Frank または Dean）を入力すると、「Hello, userName」という確認メッセージが表示されます。
|
|
