Fri >アニメーション >アニメーションGIF

ホームページに動きを与えるアニメーションや動画を取り上げます。

アニメーションGIF

ホームページビルダー付属の「ウェブアニメータ」を使用して、本サイトのバナーロゴを作成します。「ウェブアートデザイナー」を使用して一部変更した画像133×30を18ファイル作成、それを重複して27枚並べて完成です。画像下の数字は表示時間(msec)


完成版 完成版

▲ページの先頭へ

HTML5 canvas

analogclock_2

▲ページの先頭へ

Fri >アニメーション >Flashコンテンツ

Windows10環境のMicrosoft Edge、Internet Explorer11で動作確認しました。

myclock

研修で取り扱った素材で、アナログ時計とデジタル時計の両方を配置しました。アナログ針はムービークリップで作成(回転中心に注意)、デジタル表示はダイナミックテキスト、それぞれのインスタンスをActionScript3.0で制御しています。

▲ページの先頭へ

banner

研修で取り扱った素材、バナー作成です。グラフィックインスタンスのアルファ値を0%から100%に変化させています。「雅を今に伝える」はテキストを一文字ずつに分解して、モーショントゥイーン(回転・ぼかしを付加)で変化させています。最後のサイト名はマスク機能とシェイプトゥイーンを利用しました。

▲ページの先頭へ

slowball

ActionScript3.0で、カラフルなボールをステージにインスタンス化、左端の黒ボールをポイントするとカラフルなボールが整列します。ロールアウトすると反対の右端にボールが集まります。

▲ページの先頭へ

snow

ムービーシンボルsnowに、Math.random()を用いて1個の雪を降らせています。背景にはムービーシンボルbkを配置しています。一方フレームに、duplicateMovieClip関数を用いて、scriptでsnowインスタンスを40個発生させています。ActionScript2.0

▲ページの先頭へ

rain

snowと同じような仕組みで、rainを作成しました。ActionScript2.0

▲ページの先頭へ