第89日目2024年05月09日

　マーキーの基本機能は勉強会の15日目に勉強しました様に、下行の様に、文字列や画像、gif動画などを移動させながら表示する機能です。
　今回はホームページビルダーの基本機能であるマーキーについて再度勉強して見ましょう。
文字列を移動させながら表示します！
　ホームページビルダーにはアニメーション文字を作成する機能があり、文字列を動かしたり、次第に表したり消すこともできます。

　マーキーとは別に、このページの上部のタイトルにも動きを加えてみましたが、これをGiamで作って見ましょう。

　項　　　　　目　　（クリックするとそのページへ飛びます）
１．ホームページビルダーでマーキーを実施
２．HPビルダーでアニメーション文字を作成
 ３．Giamによるアニメーション文字の編集
 ４．文字列をgifで保存し、分割してGiamでアニメーション表示

１．ホームページビルダーでマーキーを実施
　１) ホームページビルダーではHTML5ではマーキーに対応していません。
　　　ホームページビルダーで標準モードで新規作成を選択後にHTMLソースに切り替えた後に、1行目の
　　　<!DOCTYPE HTML>を
　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">に変更し、
　　　HTML４であると定義して下さい。

　２) スクロール文字を挿入したい位置にカーソルを移動します。
　　　

　３) メニューバーから｢挿入｣→｢その他｣→｢マーキー｣を選択すると、［属性］ダイアログボックスが
　　　表示されます。
　　　

　４) ［表示文字列］にスクロールさせたい文字を入力します。
　５) ［動作］、［繰り返し］、［表示速度］、［サイズ］、［背景色］を必要に応じて設定します。
　　　動作の、スクロールでは指定回数スクロール後非表示となりますが、スライドでは指定回数で
　　　表示状態で停止します。遅延時間はスクロールまたはスライドが完了するまでの時間です。
　　　

　６) ［OK］ボタンをクリックします。文字が挿入されます。
　　　

　７) プレビューでは動き方はよく見えません。ブラウザーで動作を確認します。

　８) ついでに小さい車を前に走らせてみました。
　　　A)文字列の左側の枠を掴んで広げておきます。
　　　　

　　　B)車をD&Dで文字列の中に乗せ、文字高さより少し高いくらいに調整します
　　　　

はここにリンクしました。
　　　C)HTMLソースに切り替えます。
　　　　追加した車の記載、
　　　　<img src="img/RedCar.gif" width="44" height="22" border="0">は
　　　　命令文<marquee ････>と</marquee>の外にありますから、<img src=･･･>を切り取って
　　　　<marquee ････>のすぐ後ろに入れ、文字列の前にスペースを入れておきます。
　　　　<marquee width="220" height="25" scrollamount="165" scrolldelay="5000"
　　　　direction="left"><img src="img/RedCar.gif" width="44" height="22" border="0">
　　　　<font color="#000000">　更新：2024年 5月 8日</font></marquee>
　　　D)この結果、下記の様に車が文字列を先導して進みます。

　更新：2024年 5月 8日

　９) ホームページビルダーがHTML5でマーキーの作成に対応していないだけで、作成済みのマーキーは
　　　HTML5でも動作します。従って、１行目の
　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">は、元の
　　　<!DOCTYPE HTML>に戻してもマーキーは動作します。

２．HPビルダーでアニメーション文字を作成

１)

HPビルダーを起動し、皆さんのindex.htmlを開き、アニメーション文字を挿入したい場所をクリックします。

２)

｢ロゴ(飾り文字)の挿入｣→｢アニメーション文字｣をクリック。下記右の画面が表示されるので｢文字サイズに連動｣を選択して、OKをクリック。

３)

次の画面で｢文字｣列を入力し、｢フォントサイズ｣、｢色｣、｢文字の装飾｣、｢効果の種類｣は何回でも変更できます画面で｢文字｣列を入力し、｢フォントサイズ｣、｢色｣、｢文字の装飾｣、｢効果の種類｣。
色々試して、気に入ったら｢OK｣をクリックします

これで完成です。プレビューで確認して下さい。保存するときに拡張子がgifという拡張子のファイルの保存場所を聞いてきますが、今回はMy-HPのトップページですから邪魔にならないように、｢My-HP｣の｢img｣が良いと思いますが、いつもの様に自分で保存する場所を決めて、保存して下さい。

アニメーション作成例

ワイプ
スクロール
フェードイン		渦
タイル		ズーム
回転
文字間隔		蜃気楼
立ち上がり		一文字づつ
ぼかし		モザイク
ブラインド

文字アニメーションは、htmlファイルを保存するとgifファイルを作成して保存します。

※

アニメーションの変化の時間は設定できるのですが、完成するや否や、次の繰返しが開始され、何か慌ただしいです。
Flashタイトルでは設定できるのですが、この辺が気になります。しかし、Giamを使えば解決できます。

３．Giamによるアニメーション文字の編集

Giamを使った事がない方は、ここからGiamをダウンロードしておいて下さい。

１.

gifファイルの編集開始
HPビルダーで作ったgifファイルを、GiamにD&Dで開きます。

２.

編集
　全体の変化時間を変えたい場合には、全部選択をクリックし、遅くしたい場合はウエイトを大きくし、早くしたい場合にはウエイトを小さくします。

　ここで本題のアニメ文字の終了時の表示時間を長くしたい場合には、最後のコマをクリックし、ウエイトを変えます。最後のコマを1秒表示させたい場合は100、2秒の場合は200にします。

３.

更新
修正が完了したら、▶をクリックし、動作を確認し、良ければ上書き保存します。

下の図のようなアニメーションが簡単にできます。

４．文字列をgifで保存し、分割･合成してGiamでアニメーション表示

　１) 予め準備した文字列を、お気に入りのフォント、大きさで作り、gifかbmpで保存します。
　　　jpgでは、色の境界部分で色が混ざったり変わったりするので背景が上手く削除できません。
　　　

　この例では310✕37ピクセルです。

　２) 左端から横方向に10pxづつ大きくされた図を作ります。
　　　例えばJTimで開き、
　　　

　の様に
　　　座標1は 0✕0で座標2は10✕30pxで切り取り、名前を付けて保存(例01.gif)し、

で戻し、
　　　　　　次に、座標2の Xを20pxにして切り取り、名前を付けて保存(例02.gif)し、

で戻し、
　　　　　　次に、座標2の Xを30pxにして切り取り、名前を付けて保存(例03.gif)し、

で戻し、
　　　　　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　　　　　：
　　　　　　次に、座標2のXを310pxにして切り取り、名前を付けて保存(例31.gif)します。

　　　下記が作成したパーツの例(01.gif～10.gif と 30.gif、31.gif)です。
　　　