Adobe Animateで画像を図形の形状でマスクする

Adobe Animateで画像を図形の形状でマスクする手順を紹介します。

概要

Adobe Animateで配置した画像を描画した図形の形状でマスクしたい場合があります。 この記事では、Adobe Animateでマスクする手順を紹介します。

手順

ドキュメントの作成

Adobe Animateを起動し、ドキュメント(HTML5 Canvas)を作成します。
Adobe Animateで画像を図形の形状でマスクする:画像1

キャンバスへの画像の配置

キャンバスに配置する画像を読み込みます。画像の読み込み手順はこちらの記事を参照してください。
Adobe Animateで画像を図形の形状でマスクする:画像2

読み込んだ画像をキャンバスに配置します。
Adobe Animateで画像を図形の形状でマスクする:画像3

必要に応じてリサイズします。
Adobe Animateで画像を図形の形状でマスクする:画像4

マスクレイヤーの作成

マスクする図形のレイヤーを作成します。
Adobe Animateで画像を図形の形状でマスクする:画像5

タイムラインパネルの[新規レイヤー]のボタンをクリックします。
Adobe Animateで画像を図形の形状でマスクする:画像6

レイヤーが作成され、タイムラインパネルにレイヤーの項目が追加されます。
Adobe Animateで画像を図形の形状でマスクする:画像7

作成した新しいレイヤーに図形を描画します。今回は、[楕円ツール]を利用して円を描画しました。
Adobe Animateで画像を図形の形状でマスクする:画像8

タイムラインパネルで、マスクの図形を作成したレイヤーの項目をクリックして選択し、右クリックします。下図のポップアップメニューが表示されます。 メニューの[マスク]の項目をクリックします。
Adobe Animateで画像を図形の形状でマスクする:画像9

描画した図形で配置した画像がマスクされます。
Adobe Animateで画像を図形の形状でマスクする:画像10

複雑な図形の例

マスクのレイヤーに複雑な図形を使用することもできます。下図の図形は、矩形ツールと楕円ツールを利用して描画したものです。
Adobe Animateで画像を図形の形状でマスクする:画像11

同じ手順でマスクの設定をすると下図の表示となります。複雑な図形でもマスク表示できます。
Adobe Animateで画像を図形の形状でマスクする:画像12

AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2022-03-15
Copyright © 1995–2025 iPentec all rights reserverd.