オブジェクトの移動と変換

  • [アーティクル]

Microsoft Expression Blend では、各オブジェクトの位置変更、サイズ変更、平行移動、拡大縮小、回転、傾斜、反転、中心点の変更によって、ベクター オブジェクトとテキスト オブジェクトの両方を簡単に変更することができます。オブジェクトを変更するには、アートボードで変更を加えるか、[プロパティ] パネルの [レイアウト] カテゴリおよび [変換] カテゴリでプロパティを変更します。また、[ブラシの変更] Cc294973.8dc54a0d-02cc-44cd-b802-5a78309f4503(JA-JP,Expression.30).png ツールを使用すると、テキスト オブジェクトおよびベクター オブジェクトのブラシ プロパティのみを変更できます。

アートボードでのオブジェクトの変更

[ツール] パネルの [選択内容] Cc294973.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を使用してアートボード上のオブジェクトを選択すると、Expression Blend によって、そのオブジェクトの周りにハンドルが付いた境界ボックスが表示されます。これらのハンドルを使用して、オブジェクトを変更できます。Ctrl キーを押したまま選択することで、複数のオブジェクトを一度に選択することもできます。この場合、境界ボックスは、選択されたすべてのオブジェクトを囲むように表示されます。ハンドルを使用する場合の簡単なヒントを以下に紹介します。オブジェクトの変換前後の外観を表す図も示します。

変更

変換前後のオブジェクト

位置変更

オブジェクトを X 軸、Y 軸、または Z 軸 (3D オブジェクトのみ) に沿って移動します。

オブジェクトの位置を変更するには、オブジェクトの上にポインターを移動し、カーソルが小さい 4 方向の矢印 Cc294973.eff911a7-b891-4315-a86c-cc4cd088e647(JA-JP,Expression.30).png に変わったら、ポインターをドラッグしてオブジェクトを移動します。位置を変更するときに移動方向を X 平面または Y 平面に制限するには、Shift キーを押したまま操作します。

オブジェクトの位置を変更すると、[プロパティ] パネルの [レイアウト] のオブジェクトのプロパティも変わります。位置の変更は、単にオブジェクトの最初の位置を変更するだけです。位置を変更しても、トリガーまたはアニメーション タイムラインのオブジェクトを変更するとき以外は、オブジェクトに変換が適用されません。位置の変更によって、[プロパティ] パネルの [変換] にある [平行移動] Cc294973.962807da-746d-41bd-878c-0f89500f3907(JA-JP,Expression.30).png タブのプロパティが変更されます。

詳細については、「オブジェクトの位置変更/移動」を参照してください。

アートボード上のオブジェクトの位置の変更

Cc294973.c7c8c2bc-c934-4dd5-a121-94d4ca82f294(JA-JP,Expression.30).png

サイズ変更

オブジェクトの高さ、幅、および奥行き (3D オブジェクトのみ) を変更します。

オブジェクトのサイズを変更するには、オブジェクトの角のハンドルまたは中心点ハンドルの上にポインターを移動し、ポインターが両方向矢印 (Cc294973.5b735d0c-fdc1-4d8b-a592-0e762cc7c635(JA-JP,Expression.30).png、Cc294973.b1472e4f-1959-485d-901f-df5583a77bcb(JA-JP,Expression.30).png、Cc294973.ec88bf27-dad4-4869-9146-0c9647c29cdc(JA-JP,Expression.30).png、またはCc294973.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(JA-JP,Expression.30).png) に変わったら、ポインターをドラッグします。Shift キーを押しながらサイズを変更すると、オブジェクトの縦横比を維持できます。Alt キーを押しながら変更すると、中心点を維持できます。

オブジェクトの位置を変更すると、[プロパティ] パネルの [レイアウト] のオブジェクトのプロパティも変わります。サイズの変更は、単にオブジェクトの最初のサイズを変更するだけです。サイズを変更しても、トリガーまたはアニメーション タイムラインのオブジェクトを変更するとき以外は、オブジェクトに変換が適用されません。サイズの変更によって、[プロパティ] パネルの [変換] にある [拡大縮小] Cc294973.7a93944e-a7f5-4607-babd-768bb5f56185(JA-JP,Expression.30).png タブのプロパティが変更されます。

詳細については、「オブジェクトのサイズの変更、または拡大/縮小」を参照してください。

アートボード上のオブジェクトのサイズの変更

Cc294973.1bf7361c-1d19-47e0-981b-222d7a8d69d4(JA-JP,Expression.30).png

回転

オブジェクトを中心点を基準として回転します。

オブジェクトを回転するには、オブジェクトの角のハンドルの上にポインターを移動し、ポインターが回転ハンドル Cc294973.888cbf6b-c442-424d-977d-61d942703c4a(JA-JP,Expression.30).png に変わったら、ポインターをドラッグします。Shift キーを押しながら回転させると、オブジェクトが 15°ずつ回転します。中心点の位置は、オブジェクトの回転に影響します。オブジェクトの中心点を移動するには、オブジェクトの中心にあるハンドル上にポインターを移動し、ポインターが 4 方向の矢印 Cc294973.9003164f-1dd4-4a3b-8a4c-21a70d4b3ffb(JA-JP,Expression.30).png に変わったら、ポインターをドラッグします。中心点を移動すると、[プロパティ] パネルの [変換] にある [中心点] タブ Cc294973.49772b0c-095e-450b-967e-75dc1858966f(JA-JP,Expression.30).png のプロパティが変更されます。

オブジェクトを回転すると、[プロパティ] パネルの [変換] にある [回転] タブ Cc294973.321b430b-5c8e-47dc-93f8-0e85ac32cca5(JA-JP,Expression.30).png のプロパティが変更されます。回転によって、オブジェクトに変換が適用されます。

詳細については、「オブジェクトの回転」および「オブジェクトの中心点の変更」を参照してください。

アートボード上のオブジェクトの回転

Cc294973.0ec39880-288d-4083-90f0-26b05c094977(JA-JP,Expression.30).png

傾斜

オブジェクトを X 軸、Y 軸、または Z 軸 (3D オブジェクトのみ) に沿って傾斜 (変形) させます。

オブジェクトを傾けるには、オブジェクトの中点ハンドルの上にポインターを移動し、ポインターが分割された両方向矢印 Cc294973.2be41f49-8a61-4966-bf08-598f4253b610(JA-JP,Expression.30).png に変わったら、ポインターをドラッグします。反対側の角または辺の位置を維持するのではなく、中心点の位置を維持する場合は、Alt キーを押しながら操作します。

オブジェクトを傾けると、[プロパティ] パネルの [変換] にある [傾き] タブ Cc294973.90c478da-1e6b-4b59-8322-445053058a6d(JA-JP,Expression.30).png のプロパティが変更されます。傾斜によって、オブジェクトに変換が適用されます。

詳細については、「オブジェクトの傾斜」を参照してください。

アートボード上のオブジェクトの傾斜

Cc294973.b5b43b8b-dd44-4d42-a0d2-f7fab35e6f33(JA-JP,Expression.30).png

反転

オブジェクトを X 軸、Y 軸、または Z 軸 (3D オブジェクトのみ) に沿って反転します。

オブジェクトを反転するには、オブジェクトの角のハンドルまたは中点ハンドルの上にポインターを移動し、ポインターが両方向矢印 (Cc294973.5b735d0c-fdc1-4d8b-a592-0e762cc7c635(JA-JP,Expression.30).png、Cc294973.b1472e4f-1959-485d-901f-df5583a77bcb(JA-JP,Expression.30).png、Cc294973.ec88bf27-dad4-4869-9146-0c9647c29cdc(JA-JP,Expression.30).png、またはCc294973.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(JA-JP,Expression.30).png) に変わったら、反対側の中点または角を通り越したところに、ポインターをドラッグします。Shift キーを押しながらサイズを変更すると、オブジェクトの縦横比を維持できます。Alt キーを押しながら変更すると、中心点を維持できます。

オブジェクトの反転は、[プロパティ] パネルの [変換] の [反転] タブ Cc294973.90c478da-1e6b-4b59-8322-445053058a6d(JA-JP,Expression.30).png にあるボタンを選択することによっても同じ結果が得られます。反転によって、負数の拡大縮小値を含むオブジェクトに変換が適用されます。

詳細については、「オブジェクトの反転」を参照してください。

アートボード上のオブジェクトの反転

Cc294973.8bfb0802-a741-429c-9608-03d706a3328c(JA-JP,Expression.30).png

個別のプロパティ設定によるオブジェクトの変更

オブジェクトを正確に変更するには、[プロパティ] パネルの [レイアウト] または [変換] でプロパティに特定の値を入力します。[プロパティ] パネルを使用すると、オブジェクトの高さ、幅、配置、余白の初期値や、回転、傾斜および反転の角度、拡大縮小および平行移動の値、中心点などを微調整できます。

Cc294973.alert_note(JA-JP,Expression.30).gifメモ :

[プロパティ] パネルの [レイアウト] および [変換] のプロパティのほとんどで、Expression Blend の数値エディターを使用できます。数値エディターをアクティブにするには、プロパティのテキスト ボックスの上にマウス ポインターを移動し、数値調整カーソル Cc294973.99713193-615f-4ee2-a668-522b5572f389(JA-JP,Expression.30).png が表示されたらドラッグします。プロパティのテキスト ボックス内をクリックして、左方向または上方向キーを使って値を調整することもできます。

テキスト オブジェクトの変更

ベクター オブジェクトに適用できる変更は、テキスト オブジェクトにも適用できます。

変更を適用したテキスト オブジェクト

Cc294973.f98cfe86-514a-42a0-b31d-57fa7e00e602(JA-JP,Expression.30).png

オブジェクトの変換

変換とは、ある座標空間上の点を決められた方法で別の座標空間に対応付けることです。たとえば、オブジェクトを平行移動する場合、オブジェクトに適用される変換によって、オブジェクトの最初の X、Y、および Z (3D オブジェクトのみ) 座標から目的の座標に移動します。オブジェクトを拡大縮小する場合、オブジェクトに適用される変換により、オブジェクトの最初の X、Y、および Z (3D オブジェクトのみ) の値に対する拡大縮小率に基づいてサイズが変更されます。

オブジェクトを変換するには、[プロパティ] パネルの [変換] で特定の値を入力するか、アートボード上でオブジェクトの中心点、回転、傾斜角度、または反転角度を変更します。アニメーション タイムラインまたはトリガーのオブジェクトを変更する場合は、アートボード上でオブジェクトの位置またはサイズを変更する場合でも自動的に変換が適用されます。これによって、オブジェクトの元の値が保持されます。

変換プロパティには、3 つのカテゴリがあります。

  • RenderTransform レイアウト パスの完了後に、変換が適用されます。[選択内容] ツールを使用してアートボード上のオブジェクトを変換すると、[RenderTransform] プロパティが変更されます。

    Cc294973.alert_note(JA-JP,Expression.30).gifメモ :

    [RenderTransform] プロパティを使用する方がアプリケーションのパフォーマンスが高いため、オブジェクト変換に適しています。

  • Projection レイアウト パスの完了後に、変換が適用されます。[Projection] は、3 次元で空間でオブジェクトが回転するような錯覚を生み出します。

    詳細については、「シミュレートされた 3D スペースでのオブジェクトの変換」を参照してください。[Projection] は、Microsoft Silverlight プロジェクトのみで使用できます。

  • LayoutTransform レイアウト中にメモリ内で変換が適用された後、画面にアプリケーションが表示されます。子要素に適用される変換に親要素を整合させる必要がある場合は、[LayoutTransform] プロパティを使用します。レイアウト変換は、Windows Presentation Foundation (WPF) プロジェクトのみで使用できます。

オブジェクトに適用されたブラシの変換

オブジェクトに適用する塗りつぶし、ストローク、不透明度マスク、または他のブラシを変換するには、[プロパティ] パネルでブラシのプロパティを選択してから、[ツール] パネルの [ブラシの変更] Cc294973.8dc54a0d-02cc-44cd-b802-5a78309f4503(JA-JP,Expression.30).png を選択します。アートボードに、マウス ポインターで変更できるブラシ変更矢印が表示されます。グラデーション ブラシを使用している場合は、変更矢印の終点は、カラー バーのいずれか一方の端のグラデーション分岐点に対応しています。ブラシの変更ツールの動作は、次の方法で変更できます。

  • エンドポイントをドラッグするときに、その移動をエンドポイント間の直線上に制限するには、Shift キーを押したまま操作します。

  • 矢印全体を移動するときに、その移動を X 平面または Y 平面に制限するには、Shift キーを押したまま操作します。

  • エンドポイントを回転させるときに、15°刻みで回転させるには、Shift キーを押したまま操作します。

  • エンドポイントをドラッグするときに、中心点の位置を維持したまま反対側のエンドポイントも同時に移動させるには、Alt キーを押したまま操作します。

次のイメージは、Fill プロパティのグラデーション ブラシにさまざまな変換を適用した後の四角形の外観を示すものです。

四角形の塗りつぶし : 線状グラデーション ブラシに適用された変換

Cc294973.ddadfdb4-f9f5-4239-8e56-d04014592af4(JA-JP,Expression.30).png

四角形の塗りつぶし : 放射状グラデーション ブラシに適用された変換

Cc294973.06d84067-19a1-4699-af39-18d0b11679a0(JA-JP,Expression.30).png

[プロパティ] パネルの [ブラシ] にある [詳細プロパティ オプション] Cc294973.de239c9d-42ce-4f5e-83b9-5f9924c0431f(JA-JP,Expression.30).png をクリックしてグラデーション ブラシの拡散メソッドをオプションで設定し、[SpreadMethod] プロパティを設定することもできます。前のイメージでは、[パディング] オプションが選択されています。[反転] または [繰り返し] オプションを選択し、次に、変換矢印をオブジェクトよりも短くすると、波形になって表示されます。

グラデーション ブラシ以外のブラシの種類を変換することができます。

ブラシの変更の詳細については、「色、ブラシ、およびマスクの設定」および「グラデーション ブラシまたはタイル ブラシの変更」を参照してください。

クリッピング

オブジェクトを変換するとき、オブジェクトの一部が切り取られ、境界ボックスの外側が部分が表示されなくなることがあります。切り取りの問題を解決するには、次の方法で行います。

  • [プロパティ] パネルの [外観] で、[ClipToBounds ] プロパティのチェック ボックスをオフにします。

  • [プロパティ] パネルの [変換] で、[RenderTransform] カテゴリではなく、[LayoutTransform] カテゴリのプロパティを使用します。これは、表示ブラシを変換するときに特に有効です。

  • 変換を適用する前、または、アニメーション タイムラインまたはトリガーのオブジェクトを変更する前に、[プロパティ] パネルの [レイアウト] のプロパティを使用して、既定のタイムラインのオブジェクトを変更します。これにより、変換が適用される前に、境界ボックスのサイズと位置が変更されます。