« 2008年12月17日の技術ニュース
Adobe AIRの基本(Eclipse + AIR GEAR) – Flash/ActionScript入門 »

Flex 3 の基本(FlashDevelopでMXML) – Flash/ActionScript入門

2008 年 12 月 17 日 投稿者: naga3

今回はFlexを使ってアプリケーションを作ってみましょう。Flexと言うのはFlashを生成するツールなのですが、Flash CS4 などの開発ツールが基本的にデザイナ向けなのに対して、FlexはMXMLというXMLを使って書く、プログラマ向けのツールだと言えます。

Flexの日本語情報はとても充実しています。以下の公式ヘルプを見れば大抵のアプリケーションが作成できるでしょう。
Adobe Flex 3 ヘルプ

MXMLの作成は、画面上でウインドウやボタンなどのコンポーネントをGUIで配置できるFlex Builderを使うのが一番便利なのですが、有料なので、今回はMXMLを手打ちでデザインしてみます。

プロジェクトの作成と実行
FlashDevelopを起動して、「New Project...」を選択、テンプレートは「Flex 3 Project」を選び、「Name」と「Location」を適当に入れてOKを押します。
右側のProjectウインドウの「src」→「Main.mxml」をダブルクリックしてソースを表示し、以下のように文を追加してください。

PLAIN TEXT
  1. <?xml version="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  3.     <mx:Label text="ふれくすよ しんでしまうとは なにごとだ" fontSize="24"/>
  4. </mx:Application>

文字化けしたり、コンパイルエラーになる場合は、第１回の「日本語文字化け対策」を参照してください。

実行画面を以下に示します。
furekusu

ソースの解説
３行目の「mx:Label」タグが文字列（ラベル）を表示している部分です。text属性で文字列、fontSize属性でフォントの大きさを指定します。簡単ですね。

カテゴリー: Flash, Flex, 入門・講座

この記事へのトラックバックURL

4件のコメント

  1. コロ より:
    2009 年 6 月 7 日 2:40 AM

    はじめまして。

    本日初めてflexに触ったものです。
    上記xmlをコピー&ペーストし、
    f5で実行するのかな…と思い行ってみたところ、
    flash playerが開いた後、応答がなくなります。

    asファイルのときのようにctrl+f8をすると、
    This file is not valid AS3 class
    という警告が出ます。

    mxmlの実行には別途設定が必要なのでしょうか。
    お時間のある時に回答いただけると幸いです。

    当方環境：
    flex 3.3 sdk
    FlashDevelop 3.0.0 RC5
    jre 1.6.x
    OS:win vista home basic

  2. naga3 より:
    2009 年 6 月 8 日 12:48 PM

    XMLはMain.xmlに設定していますか？
    実行はプロジェクト/binにindex.htmlができるので
    それを開くほうが良いかも知れません。

  3. コロ より:
    2009 年 6 月 11 日 12:21 AM

    回答ありがとうございます。

    index.html右クリック→Execute
    で表示したところ正常に表示できました。

    お時間割いて頂いて有難うございました。

  4. むるしー より:
    2009 年 12 月 16 日 4:59 PM

    Flex3の導入を考え参考にさせて頂きました。
    index.htmlを開くときにActiveXの警告がでるのですが、
    こちらのお絵かきなどを開いた場合のは警告がでません。
    何故なのでしょうか？何らかの設定が必要なのでしょうが
    教えて頂けませんか？

コメントをどうぞ