第16回
パターン描画ツールの使い方アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

今回はパターン描画ツールの活用方法としてこんなの作ってみました。

チャッピー(チャッピー)を探せ!

パネルのどこかにチャッピーが隠れてるので、探してください。パネルにカーソルを合わせると、パネルが回転します。

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

 

作成方法

  1. 矩形ツールで適当な大きさの正四角形を作成し、「panel」というシンボル名のムービークリップシンボルに変換します。(ステージの色は任意の色に変更してください。)
  2. ムービークリップシンボル内の編集画面で、「panel2」というシンボル名のムービークリップシンボルに変換します。「panel2」に「panel_mc」というインスタンス名をつけます。
    ムービークリップに変換
    「panel2」に「panel_mc」というインスタンス名をつけます
  3. 下記の通りスクリプトを記述します。
    var rotationNum:Number = 0;
    panel_mc.addEventListener(MouseEvent.MOUSE_OVER,startF);
    function startF(evt:MouseEvent){
    	panel_mc.addEventListener(Event.ENTER_FRAME,flipl);
    }
    function flipl(evt:Event):void{
    	if(rotationNum < 10){
    		panel_mc.rotationY += 18;
    		rotationNum++;
    	} else {
    		panel_mc.removeEventListener(Event.ENTER_FRAME,flipl);
    		rotationNum = 0;
    	}
    }
  4. メインに戻り、ステージ上のインスタンスを削除します。
  5. 隠す対象となる画像を適当な位置に配置します。
    適当な位置に画像を配置
  6. パターン描画ツールを選択し、プロパティパネルで下記設定を行います。
    プロパティの設定
    • 描画エフェクト
      格子模様
      塗り:panel
    • 詳細オプション
      水平方向の間隔:2px
      垂直方向の間隔:2px
  7. 新規にレイヤーを追加して、追加したレイヤーでステージをクリックして格子模様を作成します。
    格子模様を作成
  8. 格子模様を作成したレイヤーをアウトライン表示にし、ロックをかけます。
  9. 隠す対象の画像をpanelシンボルの四角に収まるように位置を調整します。
    画像の位置を調整
次のページは…
デジタル時計の作り方
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

SATT入社後、m-SchoolでFlashのインストラクターを担当。

トレーニングコースの企画・開発等を経て、現在はトレーニング(企業研修)やeラーニングに関するコンサルティングを担当。

K-1好きは誰にも負けない自信あり。

Flash Beginner's School

RSSフィードで
最新情報を購読