プログラマのためのFlash遊び方

第1回　無料でFlash作りに挑戦！Flex 3 SDKを導入してみよう

2008年3月13日

最田健一

Flash

ファイル, Flash, Flex, ソースコード, ActionScript

Flashを作るには何万円もする専用ソフトが必要…，デザイナーが使うものだから敷居が高い…。そう考えてる方も多いのではないでしょうか。実はそんなことはありません。

Adobe社が無料で提供している開発環境「Flex 3 SDK」を利用すれば，ActionScript 3.0というプログラミング言語でFlashを作成できます。ActionScript 3.0はECMAScriptに準拠しているため，プログラマの方にとってもなじみやすい言語といえます。

この連載ではプログラマの方に向けて，サンプルを交えながら，ActionScriptでFlashを作る手法を解説していきます。

ActionScript 3.0でHello World!

いきなりですが，ActionScript 3.0のサンプルコードを見てみましょう。定番のHello World!です。

package{
  import flash.display.*;
  import flash.text.*;

  public class HelloWorld extends Sprite{
    public function HelloWorld(){
      var tf:TextField = new TextField();
      tf.text = "Hello World!";
      addChild(tf);
    }
  }
}

このソースコードをコンパイルすると，画面に「Hello World!」と表示するFlashができあがります。コンパイル手順については後ほど詳しく解説しますが，ひとまずはソースコードをざっと見てみましょう。

classやpackageというキーワードがでてくるところからも分かるとおり，ActionScript 3.0はオブジェクト指向の言語です。Javaに似ていると思った人も多いのではないでしょうか。

本稿の最初でも触れましたが，ActionScript 3.0はECMAScriptに準拠しています。同じく，ECMAScriptに準拠した言語にJavaScriptがあります。しかし，このソースコードがJavaScriptに似ているようには見えません。

実は，ActionScript 3.0は，現在策定中のECMAScript4を先行実装しています。将来的にはJavaScriptでも，上のソースコードのように，クラスやパッケージを定義できるようになる予定になっています。

JavaScriptと似ているところ

それでは，Hello World!を少し書き換えてみましょう。

package{
  import flash.display.*;
  import flash.text.*;
  import flash.utils.setInterval;

  public class HelloWorld extends Sprite{
    public function HelloWorld(){
      var tf:TextField = new TextField();
      tf.text = "Hello World!";
      addChild(tf);

      var str:String = tf.text;
      var len:int = 0;

      setInterval(function():void{
        tf.text = str.substr(0, len);
        len = (len % str.length) + 1;
      }, 100);
    }
  }
}

このソースコードをコンパイルすると，「H」「He」「Hel」「Hell」「Hello」…の順に，１文字ずつ文字が増えていくアニメーションになります。

同じアニメーションをJavaScriptを使って再現してみます。

<body>
<div id="text">Hello World!</div>

<script>
var tf = document.getElementById("text");

var str = tf.innerText;
var len = 0;

setInterval(function(){
    tf.innerText = str.substr(0, len);
    len = (len % str.length) + 1;
}, 100);
</script>
</body>

いかがでしょう。setInterval()やsubstr()など，さきほどのActionScript 3.0のソースコードとほとんど同じですね。

このように，ActionScript 3.0とJavaScriptは，文法だけでなく，標準で利用できるクラスや関数も共通しています。もちろん，ActionScript 3.0独自のクラスも多数あるのですが，JavaScriptをご存知の方にとっては，非常にとっつきやすいと思います。

前置きが長くなりましたが，次のページからFlex 3 SDKを導入していきます。

Flash

最田健一（さいたけんいち）

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら，いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URL：http://tech.nitoyon.com/

プログラマのためのFlash遊び方

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

最新ソフトウェアプロテクションの導入方法（3/8～4/16）
Adobe FLASH PLATFORM CAMP Tokyo（3/16）
「組込みデータベースを利用した開発のポイントとDeviceSQLのご紹介」セミナー（3/17）

使ってみよう！ Windows Live SDK/API: Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。
Lifelog～毎日保存したログから見えてくる個性: コンピュータを使って，日常のさまざまなことの記録（ログ）をとり，それを分析して活用することで，もう一段階上の「楽な生活」をめざす日々の研究報告です。
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）: 本連載では，実践サンプルとともに，jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。
Ruby Freaks Lounge: Rubyに関わる，執筆者自身の旬なテーマを扱った，リレー形式の連載です。
これでできる！クロスブラウザJavaScript入門: JavaScriptはウェブ制作において避けては通れない重要な言語ですが，JavaScriptに苦手意識を持たれている方は少なくないようです。その最大の原因がクロスブラウザ対応という課題であり，本連載ではクロスブラウザ対応のテクニックを詳細に解説します。
ビジネスで成功するためのシステム運用管理のポイント: システムの多様化，技術進歩に伴い，ITシステムの運用管理の必要性が年々高まっています。本連載では，システムの運用管理とは何かについて，現場のニーズと具体的な指針を押さえながらを解説します。
2010年版SEO体得講座: 本連載では，いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて，最新トレンドからすぐに使えるTipsまでを紹介します。
小型Linuxサーバの最高峰 OpenBlockS 600活用指南: 搭載メモリの増加，CPUクロックの向上など，あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から，活用するためのさまざまなノウハウを紹介していきます。