✍️

注意事項

ご注意ください!Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。

コンテナ

コンテナは、複数のオブジェクトやシェイプをグループ化し、一つのユニットとして操作したり、アニメーションを付けたりできる要素です。

コンテナのグループ化

要素をコンテナにグループ化

  1. まず、グループ化したいシェイプを選択します。これにはいくつかの方法があります。
    ⇧ Shift
    キーを押しながらレイヤーパネル内のアイテムをクリックして複数のレイヤーを連続的に選択するか、
    Ctrl
    Command ⌘
    を押しながらアイテムをクリックして、個別に選択または選択解除することもできます。また、
    Command ⌘
    または
    Ctrl
    を押しながらキャンバス上でドラッグして選択または選択解除することもできます。
  2. 要素は、レイヤーパネル内で選択してドラッグすることで、コンテナから出し入れできます。
  3. いずれかのアイテム上で右クリックします。
  4. グループ化をクリックします。別の方法として、要素の周りをドラッグして選択し、
    Command ⌘
    G
    または
    Ctrl
    G
    を押します。
グループを作成すると、コンテナがレイヤーパネルに追加され、選択されたすべての要素がコンテナの下にフォルダのように収納されます。
コンテナを選択すると、要素のプロパティパネルが開きます。コンテナの中に収納されている要素が一つのボックスで囲われ、そのボックスが、コンテナの長さ、幅、および位置の基準となります。コンテナ内にあるシェイプとは別に、そのボックスをサイズ変更したり、移動したり、または色、塗りおよび影を変更することができます。

一つのコンテナのグループ解除

コンテナのグループ解除

シェイプは、レイヤーパネル内で選択してドラッグすることで、コンテナから出し入れできます。この操作によって、そのシェイプが入っているグループを変更したり、グループ解除したりできます。
シェイプのグループ化と同じく、シェイプのグループ解除もコンテキストメニュー(右クリック)から実行できます。
  1. グループ解除したいアイテムが入っているコンテナを選択します。レイヤーパネルでコンテナをクリックするか、キャンバス上でグループ化されているシェイプのいずれかをクリックします。
  2. 任意のアイテムを右クリックします。
  3. コンテキストメニューから「グループ解除」を選択します。別の方法として、要素の周りに選択ボックスを描画して、
    Command ⌘
    ⇧ Shift
    G
    または
    Ctrl
    ⇧ Shift
    G
    を押します。

コンテナの作成

コンテナの作成

コンテナは、シェイプを追加する前に、単体で作成できます。作成方法は、長方形とほぼ同様です。
  1. シェイプのドロップダウンメニューから、コンテナのアイコンを選択します。
  2. 描画を開始するためにキャンバス上をクリックし、コンテナを描画したい方向にドラッグします。
    ⇧ Shift
    キーを押しながらドラッグすると、コンテナに等しい寸法を与えることができます。
コンテナを作成すると、要素のプロパティパネルが開きます。
📖

詳細を読む

プロパティパネルに関する記事を読み、コンテナをカスタマイズする方法を学びましょう。

コンテナに変更を適用

レイヤーパネル内のコンテナが選択された状態で、個別の要素のように変更を適用できます。
右クリックすると、切り取り、コピー、貼り付け、複製、または削除が選択できます。さらに、最前面へ、最背面へ、前面へ、または背面へ移動させることができます。加えて、コンテナをグループ化/グループ解除、表示/非表示、ロック/ロック解除することもできます。

オーバーフロー

Phaseのオーバーフロー機能は、コンテナの境界内に入りきらないオブジェクトの可視性をコントロールします。プロパティパネルで、表示または非表示を切り替えられます。
表示が有効化された場合、塗りに入りきらない要素も含めて、コンテナ内の要素がすべて表示されます。これによって、切り抜きやマスクを使用することなく、シェイプ、画像、テキストフレームおよびその他のオブジェクトを視覚的に表示させることができます。
一方、非表示は、コンテナに入りきらない要素をすべて非表示にして、マスク効果を作り出します。コンテナはクッキーの型抜きのような役割となり、塗りより外側にある要素をすべて非表示にします。
次のようにオーバーフローを使用します。
  1. 分割したい特定の部分にコンテナのバウンディングボックスを作成します。
  2. 非表示を有効にして、線の内側にある視覚要素だけを表示します。
  3. 表示に切り替えて、再度すべてを表示します。
✍️

注意事項

オーバーフローの設定は、コンテナの選択時のみアクセスできることに留意してください。

アニメーション制作を始めましょう

無料のウェブベースプラットフォームで始めます。