読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

減速スライド

減速スライド

  • 次の画像がスライドしてきて減速しながら停止する


素材の準備
  1. メイン画像の幅を決める(幅 800px 高さ 400px)
  2. サムネールの幅を決める(幅 160px 高さ 80px)
画像を最適化する(Photoshop
  1. 幅・高さを必要な大きさの新規ドキュメントを作成する
  2. 新規ドキュメントにドラッグして重ね、繰り返す
  3. PSD形式で名前をつけて保存する(Flash上でライブラリに読み込み)
基本形


var base:Number;
var rate:Number = 5;

this.s01_btn.onRollOver = function() {
	base = main_mc.ph01_mc._x;
}
this.s02_btn.onRollOver = function() {
	base = main_mc.ph02_mc._x;
}
this.s03_btn.onRollOver = function() {
	base = main_mc.ph03_mc._x;
}
this.s04_btn.onRollOver = function() {
	base = main_mc.ph04_mc._x;
}
this.s05_btn.onRollOver = function() {
	base = main_mc.ph05_mc._x;
}
this.main_mc.onEnterFrame = function() {
	main_mc._x -= (main_mc._x + base)/rate;
}
作り方

(1)Photoshopで写真を準備する

  • サイズを整える
  • サムネール画像も作る


(2)個別にシンボル「ムービークリップ」に変換します

  • 基準点からの距離を測るため、左上が「原点」


(3)新規シンボル「メイン」を作成します

  • 原点から順につないで並べます


(4)それぞれを配置します

  • 必要があれば「マスク処理」をします



var base:Number;
var startEdge:Number = 10;
var rate:Number = 7;

this.s01_btn.onRollOver = function() {
	base = main_mc.ph01_mc._x;
}
this.s02_btn.onRollOver = function() {
	base = main_mc.ph02_mc._x;
}
this.s03_btn.onRollOver = function() {
	base = main_mc.ph03_mc._x;
}
this.s04_btn.onRollOver = function() {
	base = main_mc.ph04_mc._x;
}
this.s05_btn.onRollOver = function() {
	base = main_mc.ph05_mc._x;
}
this.main_mc.onEnterFrame = function() {
	main_mc._x -= (main_mc._x + base-startEdge)/rate;
}


《縦にスライド》

var base:Number;
var rate:Number = 3;

this.s01_btn.onRollOver = function() {
	base = main_mc.ph01_mc._y;
}
this.s02_btn.onRollOver = function() {
	base = main_mc.ph02_mc._y;
}
this.s03_btn.onRollOver = function() {
	base = main_mc.ph03_mc._y;
}
this.s04_btn.onRollOver = function() {
	base = main_mc.ph04_mc._y;
}
this.main_mc.onEnterFrame = function() {
	main_mc._y -= (main_mc._y + base)/rate;
}

画像減速スライドをつくる

 

素材の準備
  1. メイン画像の幅を決める
  2. サムネールの幅を決める
画像を最適化する(Photoshop
  1. 幅・高さを必要な大きさの新規ドキュメントを作成する
  2. 新規ドキュメントにドラッグして重ね、繰り返す
  3. 各レイヤーを「Web用に保存」をして、画像を最適化する
新規ドキュメント作成(Flash

  


この段階では、ActionScript2.0を選択します。


ステージサイズを変更

  


  


  ※大きい画像の幅、大きい画像の高さ+サムネールの高さ


シンボルに変換

  


※「シンボル」と「インスタンス」の違いを明確にするシンボル名にする。

新規シンボルの挿入

  


  


 


※新規ムービークリップのなかに、基準点から4つのシンボルを並べます。



ステージ上(レイヤー1)に、各シンボルを配置します。


  


これで、準備が完了です。
次にActionScriptを記述していきます。
ActionScript3.0で記述する場合には、サムネールにもインスタンス名が必要ですが、ActionScript2.0で記述する場合には、省略できます。


ActionScriptとは

Flashムービーが理解できる「言語」です。
つまり、Flashムービー向けの「プログラム」です。

プログラムとは
  • 動作の流れをつくるもの
  • 必ず、動作するもの・させるものの名前が必要


プログラムには、一連の流れをまとめて表す「言葉」が用意されています。
プログラムの流れを作る際に「便利な約束事」も用意されています。

プログラムを勉強するときに必要な視点

おおまかな
分類
あると便利な仕組み ActionScript
対応するもの
指示をしやすくする 指示した内容をおこなう「ステージ」の場所や仕組みを指し示す Flashムービーの構成
指示したい内容に応じた専用の役割をもたせる クラスとインスタンス
一連の流れをまとめて扱う 延々と指示を繰り返す変わりに、一連の流れをまとめた1単語で指示する 関数
流れを変化させる 「〜の場合はA、〜の場合はB」というように、条件に応じて流れを切り分ける 制御構造(条件分岐)
「〜になるまで繰り返す」「n回繰り返す」という繰り返しを指示する 制御構造(繰り返し)
「〜が起きたとき」という「イベント」に対して命令を指示する イベント処理
途中経過や、結果をメモしておく 変数

ActionScriptを記述する

記述する場所

「アクションパネル」の右部「スクリプトペイン」と呼ばれるエリアに、テキストエディターで入力するように記述します。

 

  • 初心者は、タイムラインアクション(グラフィックシンボルを動かすとき)を「スクリプトアシスト」を使い「記述の規則」に慣れておきしょう。
  • イベントハンドラなどを記述する場合には、直接入力したいので「スクリプトアシスト」はオフにして使用しません。
アクションパネルの表示

 

または

 

命令文の内容

  • サムネールをクリック(or サムネールにマウスがのったとき)したとき、そのサムネールのメイン画像をステージの基準点まで移動して表示する。
  • 移動スピードは基準点に近づくにつれ減速する。

(1)サムネールインスタンスに記述

  • サムネールをクリック(or サムネールにマウスがのったとき)したとき、そのサムネールのメイン画像のX座標軸を、メイン画像インスタンスにもつ「変数」に代入する。

この段階は、X座標軸の位置を「変数」に認識させただけなので、動きは起こりません。


on (rollOver) {

 _root.ph_mc.base = _root.ph_mc.ph01_mc._x;

}

サムネールのインスタンスにマウスの位置がのったとき、メイン画像内にある「ph01_mc」のX座標を取得した値を「変数:base」 に代入する。


つまり、あるインスタンスから別のインスタンスの内部のインスタンスに命令をします。
この命令は「絶対パス」で記述します。


on( )ハンドラ:ボタンに記述するアクションスクリプト

ボタンがある状態の時に、ある動作を実行させたいときに記述するスクリプト
ムービークリップをボタンとして扱いたいときにも使います。



減速するための記述

MC_写真メインのインスタンス「ph_mc」に記述します。


onClipEvent (enterFrame) {

  this._x -= (this._x+base)/3;

}

onClipEvent( )ハンドラ

ムービークリップが何かのイベントを起こしたときに、実行させたい動きを記述するスクリプト

enterFrame

このムービークリップのフレームが再生するたび(enterFrame)にムービークリップを〜する。


例えば、以下のように記述すると


onClipEvent (enterFrame) {

  this._x += 10;

}

ムービークリップを10pxずつ右に移動させるというスクリプトです。


onClipEvent (enterFrame) {

  this._x -= 10;

}

であれば、ムービークリップを10pxずつ左に移動させることになります。



(this._x+base)/3
は、ムービークリップのその時点での位置と「変数:base」の値を足したものを3分の1にするという意味です。
それが再生するたび(enterFrame)にムービークリップに値が無くなるまで命令され続けます。
ですから、減速して止まることになります。