NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

アニメーション

フェードインする文字

概要

流れるように表示される文字列は、一字ずつシンボルにするか、マスクのモーショントゥイーンを利用すると実現できます。
文字自体にも少し手を加えるだけでより動きのある文字列になります。

サンプル解説

ボタンにマウスを重ねると文字列が表示されます。

作成法

(1) シンボルの作成
  ・ボタンのイラストを用意します。
  ・ステージ配置する「ボタン」ムービークリップを用意します。
  ・表示される「文字」ムービークリップを用意します。
  ・文字を隠す「マスク」ムービークリップを用意します。
シンボルの用意
   
(2) 「文字」ムービークリップ
  ・テキストツールで文字を設置します。
文字シンボル
   
(3) 「マスク」ムービークリップ
  ・(2)で作成した文字よりも大きい四角を設置します。
マスクシンボル
   
(4) 「ボタン」ムービークリップ
  ・ActionScriptを設置する「Action」レイヤーを用意します。
  ・フレーム名を設置する「Flag」レイヤーを用意します。
  ・ボタンイラストを設置する「ボタン」レイヤーを用意します。
  ・マスクを設置する「マスク」レイヤーを用意します。
  ・文字を設置する「文字」レイヤーを用意します。
ボタンシンボル
  ・全てのレイヤーのフレームを10まで追加します。
  ・「Action」レイヤーの1フレーム目と10フレーム目に同じActionScriptを明記します。
 
01
stop();
  ・「Flag」レイヤーの1フレーム目には「OUT」、2フレーム目には「OVER」を設定します。
   
(5) ムービークリップ「文字」の設置
  ・「文字」レイヤーの2フレーム目にキーフレームを追加します。
  ・「文字」レイヤーにムービークリップ「文字」を設置します。
ムービークリップ「文字」の設置
  ・10フレーム目にキーフレームを追加し、2フレーム目からモーショントゥイーンを設定します。
  ・2フレーム目のムービークリップ「文字」をアルファ0%にします。
  トゥイーンの設定
 
(6) ムービークリップ「マスク」の設置
  ・ムービークリップ「文字」が隠れるようにムービークリップ「マスク」を「マスク」レイヤーに設置します。
ムービークリップ「マスク」の設置
  ・10フレーム目にキーフレームを追加し、2フレーム目からモーショントゥイーンを設定します。
  ・2フレーム目のムービークリップ「マスク」の横幅をX・Y座標はそのままで2px程度に縮小します。
  トゥイーンの設定
 
(7) マスクの設定
  ・「マスク」レイヤーを軸に「文字」レイヤーをマスク設定します。
マスクの設定
   
(8) ステージへ配置
  ・作成したムービークリップ「ボタン」をステージに配置します。
 
   
(9) ActionScriptの設定
  ・設置したムービークリップ「ボタン」を選択してActionScriptを設定します。
 
01
02
03
04
05
06
07
on (rollOver) {
 this.gotoAndPlay("OVER");
}
 
on (rollOut) {
 this.gotoAndPlay("OUT");
}
   

解説

作成途中で設定したマスクのモーショントゥイーンのように文字列を縮小させる方法もありますが、文字が完全に出るまでは読みづらくなるので、マスクで隠して少しずつ表示するほうが効果的です。

ページ上部へ