Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[Flash]ActionScript2.0 フレームアニメーション ボタン

  • クラシックトゥイーンで動画を作る
  • ボタンを制作
  • ボタンにスクリプトを設定

クラシックトゥイーンで動画を作る

①素材となるaiファイルを読み込む。相互のバージョンが問題なければ、Illustratior上でコピー▶Flashでペースト。

②素材を選択し、新規シンボルの作成。種類「グラフィック」。

③任意の場所に移動。任意のフレームにキーフレームを挿入。

④フレームを選択し、挿入▶クラシックトゥイーンを設定すると二点間を移動。

⑤Command+Enterで動作確認。


画像の揃え方
  • command+Kで整列ボックスを表示、選択して整列
  • 「ステージを基準」にチェックすると表示画面の中心に並べたりできる

ボタンを制作

①タイムラインに新規レイヤーを作成。名をbutton等。

②新規シンボル、種類「ボタン」。

③画面の中央に任意のテキストを入力。 今回はStart,Stop, Backの三種を設定したい。

④タイムラインの表示が変わっている。それぞれに画像を設定。

  • アップ▶通常表示時の絵。
  • オーバー▶マウスポインタがボタン上にあるときの絵。
  • ダウン▶ボタンをクリックしている状態の絵。
  • ヒット▶ボタンとして認識する範囲。絵を描いた領域がヒット領域となる。

⑤ライブラリから複製し、Stop,Backを同様に作成する。

⑥ライブラリからシーンの任意の場所にStart,Stop,Backを配置。


ボタンにスクリプトを設定

①新規レイヤーを制作。名をscript等。

②ウインドウ▶アクションを表示。

スクリプトを記述。this.stop();

④scriptレイヤのフレーム1に、this.stop()が適用される▶アクションが停止されたままになる。

⑤シーン上のStart,Stop,Back各ボタンを選択すると、プロパティからインスタンス名を設定できる。start_button, stop_button,back_button等と設定。

this.stop();//初期値:停止
this.start_button.onRelease = function()
{
     play();//再生
}

this.stop_button.onRelease = function()
{
     stop();//停止
}

this.back_button.onRelease = function()
{
     gotoAndPlay(1);//フレーム1へ戻る
}
成果

f:id:akatonbo_web:20150501152248j:plain

授業の内容復習。flashはこの際きちんと覚えたいです。

時間の制御とボタンの作成 - Webデザインの勉強 | Webサイト制作科 3月16日開講クラス