オルタナティブ・ブログ > イメージ AndAlso ロジック >

ヴィジュアル、サウンド、テキスト、コードの間を彷徨いながら、感じたこと考えたことを綴ります。

RIA普及のためのキャラクタ、「リア」です。(2)

»

昨日に引き続き、RIAのキャラクタ「リア」姫の、Expression Designデータの加工方法について書きます。
Expression Designファイルとpngファイルは、次のURIからダウンロードできます。

イラストのファイルをダウンロードする(zip)

Windows Phone 以外のものを持たせたい場合

ダウンロードしたExpression Designファイルを開きます。

「レイヤー」ウィンドウに表示されるツリーを展開して、「右手とWindows Phone」を展開し、さらに「Windows Phone」を選択します。
キーボードの[Delete]キーを押して、Windows Phoneの絵を削除します。

Fig14

Windows Phoneの絵が削除されます。

Fig15

持たせたいものの画像を用意します。ここでは本の画像を用意しました。片手で何とか持てる大きさです。

jpgやpngなどのビットマップ画像の場合は、画像をアートボード上にドラッグ&ドロップします(XAMLの場合は、コピー&ペーストです)。あるいは、「ファイル/インポート」で画像ファイルを指定して読み込みます。

Fig16

Shiftキーを押しながら端点をプレス&ドラッグして適当なサイズに拡大縮小し、ハンドルを回転させて角度を調整します。

レイヤーウィンドウの「右手とWindows Phone」の「右手」の上に、読み込んだ本の画像をドラッグ&ドロップします。

Fig17

png形式あるいは、XAML形式でエクスポートしたい場合

「ファイル/エクスポート」を選択します。

Fig18

png形式でエクスポートする場合は、「フォーマット」が「png」になっていることを確認し、任意のフォルダを指定し、ファイル名を付けて、エクスポートします。

Fig19

XAML形式でエクスポートする場合は、「フォーマット」を「XAML Silverlight 4 / WPF Canvas」とし、任意のフォルダを指定して、ファイル名を付けて、エクスポートします。

Fig20

XAML形式でエクスポートすると、XAMLファイルが保存されます。先の手順のように、ビットマップ画像を貼り付けている場合は、XAMLドキュメントと同じ階層にドキュメント名のフォルダが生成され、その中に、ビットマップ画像が保存されます。

Fig21

XAMLドキュメントは、Internet Explorer で直接開いて表示できます。

Fig22

XAMLドキュメントのソースは、メモ帳などのテキストエディタで確認できます。

Fig23

ビットマップ画像を貼り付けている場合、Image要素として読み込まれるようになっています。この相対パスで指定されている関係が失われると画像が表示されなくなりますので注意が必要です。

Fig24

次回は、ビットマップとベクトルの違い/Illustratorと、Expression Design/一般的なベクトルデータの作成方法、について説明します。

Comment(0)