アクション

Animated JavaScript Slideshow

海水魚ギャラリー(海水魚の飼育)

総作業時間:1時間30分
(写真加工:30分/コーディング:1時間)

  1. 配布元の「LEIGEBER」のサイトより「Animated JavaScript Slideshow」ファイルをダウンロードします
  2. 10枚の写真を用意して、Photoshopで「メイン用とサムネール用」にトリミングします
  3. JavaScriptの「compressed.js」と「script.js」を<header>内に読み込ませます
  4. 「body」内にブラウザ表示の速度等を設定する「javascript」を記述します
    <script type="text/javascript">
    $('slideshow').style.display='none';
    $('wrapper').style.display='block';
    var slideshow=new TINY.slideshow("slideshow");
    window.onload=function(){
    slideshow.auto=true;
    slideshow.speed=11; // メイン画像のスライドショーの速度設定 //
    slideshow.link="linkhover";
    slideshow.info="information";
    slideshow.thumbs="slider";
    slideshow.left="slideleft";
    slideshow.right="slideright";
    slideshow.scrollSpeed=3; // サムネール画像のスクロールの速度設定 //
    slideshow.spacing=5;
    slideshow.active="#fff";
    slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    }
    </script>

Sexy Light Box

セサミストリート

Sexy Light Box|セサミストリート

総作業時間:45分
(写真加工:15分/コーディング:30分)

  1. 配布元のSexy Light Boxよりファイルをダウンロードします
  2. 6枚の写真を用意して、Photoshopでトリミングします
  3. JavaScriptの「mootools.js」と「sexylightbox.packed.js」を<header>内に読み込ませます
    <script src="mootools.js" type="ext/javascript"></script>
    <script src="sexylightbox.packed.js"type="ext/javascript"></script>
  4. サムネール画像に
    <a href="images/images01.jpg" class="sexylightbox" rel="group1" title="みんあんまつまれ!ベースボール"><img src="mages/images01s.jpg" alt=" " /></a>を指定します

PostcardViewer gallery

おやすみなさい

Creating a PostcardViewer gallery

総作業時間:45分
(写真加工:15分/コーディング:30分)

  1. PostcardViewer galleryからファイルをダウンロードします
  2. 10枚の写真を用意して、Photoshopでトリミングします
  3. 「gallery.xml」ファイルに表示サイズと写真を指定します
  4. JavaScriptの「swfobject.js」を読み込ませます

Lightbox2

海水魚の写真

海水魚の写真

総作業時間:2時間
(写真加工:30分/コーディング:1時間30分)

  1. Lightbox2からファイルをダウンロードします
  2. 5枚の写真を用意して、Photoshopでトリミング後、サムネール画像も作成します
  3. サムネール画像に
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]"><img src="images/htumb-2.jpg" alt="シノビハゼ" width="100" height="100" /></a>を指定します
  4. JavaScriptの「builder.js / effects.js / lightbox.js / prototype.js / scriptaculous.js」を読み込ませます

※「table」を使ってサムネール画像を配置させました


Action Script

東京23区の地図


美容室|hair design Natural

総作業時間:3時間15分
(地図制作:1時間45分/Flash:1時間30分)

  1. Illustratorで東京23区の地図を作成
  2. 「.gif」で保存した画像をライブラリに読み込みます
  3. 23区全ての画像をボタンシンボルに変換して、「アップ・オーバー・ダウン・ヒット」にキーフレームを挿入
  4. 「アップ・オーバー・ダウン」に画像を配置
  5. 「ヒット」はペンツールを使ってヒット領域を作成
  6. シーン1に戻り、レイヤーの「1フレーム目」に各ボタンを配置
  7. 各ボタンにActionscriptの「getURL」を記述してURLリンクを埋め込みます
    on(release) {
    getURL("http://~任意のULR~,"_blank");
    }
美容室|hair design Natural

美容室のホームページのTOPページ用として作成

美容室|hair design Natural

作業時間:1時間30分

  1. 4枚の写真を用意
  2. Photoshopでトリミング後、「.jpg」で保存します
  3. 写真をライブラリに読み込みます
  4. 各写真をレイヤーごとに配置
  5. シンボルに変換(ムービークリック)
  6. 文字「Peace of mind」「Elegance」「Quality」のシンボルを作成(ムービークリック)
  7. キーフレームの挿入
  8. 画像が消えて次の画像に変化させるために「アルファ」を設定します
  9. 「モーショントゥイーンの作成」
  10. キーフレームを少しずつ重なり合うように時間軸をずらします
  11. 「ActionScript」レイヤーの最後のフレームに「空白キーフレームを挿入」して「stop」の設定をする
モデルルーム|ModelRoom

室内イメージをクロスフェードしながらループ再生
サムネールボタンをクリックするとその室内イメージが表示されます

モデルルーム|ModelRoom

作業時間:2時間30分

  1. 6枚の写真を用意
  2. メイン写真は「600px×400px」、サムネール写真は「100px×47px」にトリミング
  3. 各写真に「リビング・キッチン・寝室・洗面所・浴室・クローゼット」の文字を配置
  4. フレームは「700px×570px」で作成して「モデルルーム」と文字を配置
  5. .JPGデータで保存して、ライブラリーに読み込みします
  6. シンボルに変換後(ムービークリック)、タイムラインに配置して、キーフレームを挿入
  7. メイン写真は「1・7・26・36フレーム」に「アルファ:70%・100%・40%・0%」を設定
  8. サムネール写真は「1・7・26・36フレーム」に「アルファ:70%・100%・100%・35%」を設定
  9. 消えながら次の写真へ変化させるためにキーフレームを少しずつ重なり合うように時間軸をずらします
  10. ボタンはサムネール写真をボタンシンボルに変換して、「アップ・オーバー・ダウン」に各写真を配置
  11. ループ再生中に、ボタンをクリックするとその室内イメージが表示されるようにするために、メイン写真のタイムラインにフレームラベル名を設定
  12. ボタンにActionScriptを記述
    on(release) {
    gotoAndStop("フレームラベル名");
    }
salad bar|サラダバー

イメージ写真をクロースフェードさせながらサラダバーの紹介です

salad bar|サラダバー

作業時間:1時間30分

  1. 12枚の写真を用意
  2. Photoshopでメイン(9枚)と背面(3枚)の写真をそれぞれトリミングします
  3. 写真をライブラリに読み込みます
  4. 各写真をレイヤーごとに配置
  5. シンボルに変換(ムービークリック)
  6. キーフレームの挿入
  7. メイン写真の「1・10・25・33フレーム」のインスタンスを「アルファ:10%・100%・100%・10%」に設定
  8. 背面写真の「最終フレーム」の写真を左斜め上配置してから、「1・10・73・最終フレーム」のインスタンスを「アルファ:10%・60%・60%・5%」に設定
  9. 「モーショントゥイーンの作成」
  10. 消えながら次の写真へ変化させるためにキーフレームを少しずつ重なり合うように時間軸をずらします
  11. 「ActionScript」レイヤーの最後のフレームに「空白キーフレームを挿入」して「stop」の設定をする
クロスフェード

消えながら次の写真へ変化させる

Flashで消えながら次の写真へ変化させる

作業時間:45分

  1. 8枚の写真を用意
  2. Photoshopでトリミングします
  3. 写真をライブラリに読み込みます
  4. 各写真をレイヤーごとに配置
  5. シンボルに変換(ムービークリック)
  6. キーフレームの挿入
  7. 「1フレーム」と「最終フレーム」のインスタンスを「アルファ:10%」にする
  8. 「モーショントゥイーンの作成」
  9. 消えながら次の写真へ変化させるためにキーフレームを少しずつ重なり合うように時間軸をずらします
  10. 「ActionScript」レイヤーの最後のフレームに「空白キーフレームを挿入」して「stop」の設定をする

左右に減速しながらスライド

サムネールが押されると、メイン写真が「1/3」移動して
残りの「1/3」また移動することを繰り返し、減速しながら基準の位置まで移動する

減速スライド

作業時間:45分

  1. 4枚の写真を用意して、Photoshopでサイズを400×300にトリミングします
  2. Flash新規ドキュメント:400x400を作成して、写真をライブラリに読み込みます
  3. それぞれをムービークリップに変換 (左上を「基準点」にする)
  4. 新規シンボルを「MC_PHOTO」を作成します(インスタンス名)
  5. 「MC_PHOTO」にそれぞれを画像を配置するします
  6. ステージ上で画像を幅100に縮小してサムネールを作成します
  7. ActionScriptを記述します
    ※インスタンスには(「photo_mc」)
    onClipEvent (enterFrame) {
    this._x-=(this._x+position)/3;
    }
    ※各サムネールには
    on(release){
    _root.photo_mc.position=_root.photo_mc.p1_mc._x;
2008年度版 flowerカレンダー

左右に減速スライド

フラワー カレンダー

作業時間:6時間30分

  1. 「amana」にて13枚の写真を用意して、今回はPhotoshopでサイズ変更と「amana」の文字をコピースタンプツールで修正しました(作業時間:4時間)
  2. Illustratorで12ヵ月分のカレンダーを作成(作業時間:1時間)
  3. Photoshopでサムネールボタンを作成(作業時間:1時間)
  4. 写真をライブラリに読み込みますここからは「左右に減速しながらスライド」の手順行程と同じです(作業時間:1間30分)

風車と共に

マウスイベント:ユーザーのマウス操作で発生するイベント

風車と共に

作業時間:40分

  1. ムービークリップ作成
    ※それぞれレイヤを分けてタイムラインを作成
    ※熊・・・浮上して元の位置に降下する。1フレーム目にキーフレームを挿入してon(rollover)時のActionScriptを指定
    ※風車・・・プロパティの回転で設定する(時計周り・5回)
    ※影・・・熊が浮上で小さく、降下で大きくなる
  2. ステージ上にサイズを変えて配置
  3. 浮上する熊が重なり合った時のために[重ね順]の最前面を指定をします

※熊にマウスが触れると風車が回転して浮上します


お花を咲かせてね

キーボードイベント:ユーザーのキーボード入力で発生するイベント

花を咲かせてね

作業時間:1時間

  1. ステージ上に男の子と花を配置する
  2. 男の子・・・矢印キーで左右に動く。スペースキーで水をあげる。
  3. 花・・・男の子が水をあげたら、花を咲かせる
  4. ?・・・マウスが触れたらヒントが表示される

ActionScriptの「_root:相対」と「this.:絶対」を使い分けること
※お花目線でActionScriptを指定
※「this.」・・・お花
※「_root」・・・男の子と水


GIFアニメーション

swingBird
GIFアニメーション|swingBird

作業時間:4時間

  1. Illustratorでイラストを描いたら、そのレイヤーの複製を作成します
  2. 複製したレイヤーのイラストを変化させて、レイヤーの複製を作成します
  3. この作業を繰り返します
  4. 「Photoshop形式」に書き出しをします
  5. Photoshopで書き出しオプションを設定します
  6. アニメーションパレットを表示して、Photoshopでレイヤー管理をします
  7. アニメーションパレット→オプション
    ※「レイヤーからフレームを作成」
  8. Shiftキーでフレーム全体を選択し、表示秒数を設定
  9. Web用に保存→「GIF形式」

このページのトップへ