CodeZine(コードジン)

特集ページ一覧

ActionScriptによるWebの3Dグラフィックス再入門

フリーの開発環境のセットアップと簡単なデモまで

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/02/06 14:00
目次

Step 1 - 三角形を描く

プロジェクトを作る

 まずは三角形を描くだけのプログラムを作ります。いきなり3Dプログラミングを始めると話がややこしくなるので、ここでは2Dで三角形を描きます。

 FlashDevelopでFlashを作るときは最初に「プロジェクト」を作成します。FlashDevelopのメニューの[Project]から[New Project...]を選択します。

新規プロジェクト作成画面
新規プロジェクト作成画面

 プロジェクトの種類がいろいろ出てきますが、この中から「ActionScript 3 - DefaultProject」を選択してください。ここでの設定項目は以下の表のとおりです。

New Projectの設定項目
設定項目 内容
Name プロジェクトの名前です。
Location プロジェクトを保存する場所です。下の[Create directory for project]にチェックを入れると、この場所の下に、Nameで指定した名前のフォルダが作られます。

 今回は名前(Name)を「Wireframe」としてプロジェクトを作ります。

プログラムを書く

 次はActionScriptを編集します。プロジェクトを作ると自動的にフォルダやファイルが作成され、右側の[Project]に表示されます。メインとなるプログラムは「classes」の下の「Main.as」です。これをダブルクリックして開いてください。

Project
Project

 「Main.as」を開くと、最低限のFlashを作るためのActionScriptが表示されます。Mainメソッド(コンストラクタ)を次のように書き換えてみてください。

public function Main():void
{
    // 線の太さを5に、色を0x8888FFに設定
    graphics.lineStyle(5, 0x8888FF);
    
    // 線を引く
    graphics.moveTo(150, 50);
    graphics.lineTo(250, 250);
    graphics.lineTo(50, 250);
    graphics.lineTo(150, 50);
}

 これを実行するには[F5]キーを押すかメニューの[Project]から[Test Movie]を選択してください。無事にコンパイル、実行できれば「Wireframe.swf」というタブが現れ、水色の三角形が描かれます。

実行結果
実行結果

 プログラムの内容ですが、まずgraphics.lineStyleで線の太さと色を設定します。次に、graphics.moveToで線を引き始める位置を設定します。(150,50)というのは、三角形の上の点です。そして、そこから時計回りにgraphics.lineToで線を引きます。graphicslineToなどについての詳細な説明はFlex SDKのリファレンスを参照してください。

 ちなみに、ここで使用したプログラムは添付資料のStep1フォルダに入っています。以降のステップについても同様です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2008/03/31 10:27 keyDownHandler() の translate() で指定している値を修正

  • 2008/03/30 19:32 太郎さんのトラックバックを参考に、jvm.configの設定を修正しました。

バックナンバー

連載:ActionScriptによるWebの3Dグラフィックス再入門

著者プロフィール

  • rch850/りちゃ(リチャ)

    気になった技術をいろいろとつまみ食いしてます。 覚えた技術をうまく組み合わせて面白いものができたらいいなと思います。 twitter: @rch850

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5