ぼかしたマスクを使った写真の出現
- まずは完成サンプルをご覧下さい。非常に印象の強い写真の出現方法です。
- 幅：550、高さ400の写真を用意します。実際のところ、どのサイズでも構いませんが説明の都合上、このサイズでいきます。写真が用意できない方は下記の写真をお使い下さい。学習用写真をダウンロード
- Flashを起動して［Flashドキュメント］をクリックして、新規ファイルを立ち上げます。
- ［プロパティインスペクタ］で背景色を「黒」に設定します。
- 「blur_mask.fla」として適当なところに保存します。以下、適度に上書き保存していってください。
- ［ファイル］メニューから［読み込み］→［ステージに読み込み］をクリックして、素材写真を参照します。
- ステージに読み込まれた写真を選択して、［プロパティインスペクタ］で、［X:0 Y:0］をクリックします。ステージにぴったりあわせます。
- 写真を選択して、「F8」を押します。「シンボル名：mcPhoto」「タイプ：ムービークリップ」「基準点：任意」と設定して［OK］ボタンをクリックします。
- すぐに［プロパティインスペクタ］で「インスタンス名：photo_mc」と名前をつけます。
これは忘れやすいので注意が必要です。
- レイヤー１をダブルクリックして「photo」と名前をつけます。
- タイムラインの［フレーム50］をクリックして［F5］を押します。もしくは、右クリック→フレームの挿入をクリック。
- 新規レイヤーを作成します。「mask」と名前をつけます。
- ［楕円ツール］をクリック。「線：なし」「塗り：赤」と設定します。
- ステージをドラッグして赤い円を描いてください。選択して、［プロパティインスペクタ］で「W:20」「H:20」と設定します。
- そのまま［整列］パネルで、「ステージを基準」をオンにして、「中央揃え（水平方向）」「中央揃え（垂直方向）」をクリック。
- 赤い円を選択したまま「F8」を押します。
「シンボル名：mcMask」「タイプ：ムービークリップ」「基準点：中心」と設定して［OK］ボタンをクリックします。基準点に注意してください。
- すぐに［プロパティインスペクタ］で「インスタンス名：mask_mc」と名前をつけます。
やはりこれは忘れやすいので注意が必要です。
- ［maskレイヤー］のフレーム50をクリックして、「F6」を押す。
- ［変形］パネルで「縦横比率を固定」にチェックをいれて半角で「4000」と入力します。「Enterキー」を押すと楕円が大きくなります。
- ［maskレイヤー］のフレーム1を右クリック→［モーショントィーンを作成］をクリック。
- 「Enterキー」を押して動きを確認しましょう。赤い楕円が大きくなる動きになっています。
- 新規レイヤーを作成します。「as」と名前をつけます。
- ［asレイヤー］のフレーム1を右クリック→［アクション］をクリック。
- 以下のフレームアクションを記述します。難しいアクションです。無理せずコピーアンドペーストで構いません。
var filter = new flash.filters.BlurFilter();
filter.blurX = 60;
filter.blurY = 60;
filter.quality = 3;
mask_mc.filters = [filter];
photo_mc.cacheAsBitmap = true;
photo_mc.setMask(mask_mc); - 保存してムービープレビューをすると完成です！お疲れ様でした。
