くまちゃんが手をふってるアニメをつくります

GIFアニメーションをつくる

くまちゃんのイラストを「ウェブデザイナー」で開く(home元フォルダーに保存した画像です)
くまちゃんが手をふる画像を作るには、手の位置をずらした2枚の画像を使います。この2枚を交互に表示させることにより、パラパラマンガのように動く絵ができるのですね。

手の位置をずらした画像を作ります。
手を選択しコピーペーストで同じ手の画像を作ります。前のページで手を作成した時に、回転ツールで傾きをつけましたね。それと同様に下の画像のように傾きをつけます。

傾きをつけた手を、元の手の根元に位置を合わせて、2つの手を重なるようにします。位置が不自然にならないように配置します。

これで手の角度が違うくまちゃんの画像を2枚作れることになります。
後で作った手の画像を選択し右クリック→非表示を選択します。これで重なってた上の手が消えました。表示されている画像を全て選択し(マウスドラッグで選択します。「全てを選択」を使うと非表示にした画像まで選択されてしまうので注意してください。)、右クリック→web用保存ウィザード→保存する画像が表示されますが、この時手が重なってないことを確認し鱈「次へ」→保存形式はgifにチェックして「次へ」→次の画面もそのまま「次へ」→ファイルに保存にチェックして「完了」→保存場所は先に作った「home元」フォルダーを選んでkuma1と名前をつけて保存します。

ウェブデザイナー画面の右に「オブジェクトスタック」というツールがついています。これは一つずつの図形が表示されています。一番上に最後に作った傾きをつけた手(今非表示にしている)があるはずです。×マークがついています。そこを右クリック→非表示を選択→これで非表示の指示がはずれて傾かせた手の画像が表示されます。

今度は下の手を4でやったように非表示にし、同様に保存します。今度はkuma2と名前をつけます。これで2枚のくまちゃんの画像ができました。

HomepageBuilderのウェブアニメーターを立ち上げます。ダイアログが出たらアニメーションウィザードを選択→複数の画像ファイルを使用してアニメーションを作成→画像の追加→shiftキーを押しながらさっき保存したkuma1とkuma2をまとめて選択して開き次へ→フレーム位置は左上を選択して次へ→表示の指定で<無限>にチェック・時間は300→完了

くまちゃんの画像と下に二つのファイルが表示されてますね。再生ボタンをクリックするとプレビューが見れます。くまちゃんが手を振ってるかな〜

ファイルメニュー→名前を付けて保存→public_htmlフォルダーにkumaanimeなどの名前で保存。

アイコンをつくる

ウェブデザイナーを開き、ピンクの正円を作ります。

作った丸を選択しコピーペーストでもう一つ丸を作ってだいたいの位置を揃えます。

長方形ツールで左の円の上から右の円のしたまでドラッグし、その中を円と同様のピンクで着色したら、3つの図形の位置を合わせておきます。

影をつくります。4で出来た図形を全て選択してコピーペーストで同じ画像を作ります。グレーに色をつけたら右クリック→重なり→背面に移動を選択します。

文字をつくります。
文字ツールを使って文字を入力します。入力した文字をダブルクリックすると文字の編集ができます。サイズや色(サンプルは8ポイントのサイズ・文字間-20・色は黒・フォントは極太ゴシック)を選べます。文字の大きさはマウスドラッグで拡大縮小ができるので、ピンクの中に収まるように調整しましょう。

文字の影を作ります。文字を選択し右上にある木のアイコン「影効果」をクリックします。イメージに変換しますか?と聞いてくるので「はい」をクリック→Y座標X座標共1・透明度50・ぼかし1で「プレビュー」をクリック→画像に影がプレビューされます。確認してよければOK。

アイコンが出来たら全部を選択してweb用保存ウィザードでpublic_htmlフォルダーにlik1.gifと名前をつけて保存します。