2005年12月12日

Flashをちょっぴり変更しました

前回の「Flashってフリーで作れるんですね」はよくわからずにParaFlaでFlashを作っていましたので(今も判ってませんけどねー♪)、サンプルなどを参考にしているうちに良くない点もポロポロ。ちょっと無駄を省いちゃおう!って事で、修正版です。と、言っても、ぬこちゅーさんに助けて貰ったんですけどね(*ノノ)

今回は、時計の色や場所の変更の仕方、日付不要や、年を4桁に変更したり、曜日を表示したりが簡単に出来るように説明しています。

ぬこちゅーさんの管理人のnowloさんには感謝です♪
(普段からサイト名もさん付けですが「ぬこちゅーさん」さんになるので、さんは略してます。。。)


BlogPetの時計付背景Flash作成用ParaFlaセットVer.2bpflash2.lzh (17,083バイト)

bpflash2.lzhに含まれるファイルは下記の4ファイルです。
・bpflash.pfl   :PalaFlaのソースファイル
・back.jpg    :背景画像
・bpflash.swf   :Flash動画
・bpflash.html  :Flash動画実行用HTMLファイル


Flashの見た目や動作は一緒です。



日付と時間をわけましたので、前回と種別とIDが変わりました。・・・変えなくても出来たんですけど、簡単なうちに修正しておきたかったので。
ParaFlaメイン画面


まずは、時計の文字色やフォントの変更方法についてです。
左下の素材リストの「0003:テキスト:「01/02/03」」をダブルクリックするとファイルのプロパティが開きます。
ParaFla文字のプロパティ1
ここにあるRGBが色の設定になります。これはスライダー(バーを移動)で指定するため、直接色を数字で指定出来ません。右にある水色の箱に現在の色が表示されますので参考にして下さい。他は、太字・斜体・フォント・サイズ・左寄せなど、色々指定出来ます。


さて、ちょっとフォントについては知っておく事があります。
フォントを「HGS創英角ポップ体」のサイズ14、太字・斜体にしてみました。
ParaFla文字のプロパティ2


前にあった「変数名」という設定が消えてしまいました。時計を表示するためには、この変数名というのが必要ですので、「ダイナミックテキスト」にチェックを入れて下さい。ダイナミックとは動的という意味で、Flash動作中に文字が変化しますよという意味です。
ParaFla文字のプロパティ3
変数名などが復活しました。折角ですので、自動サイズにもチェックを入れておいて下さい。


そして、OKボタンを押して、F5でプレビュー表示します。
(サイズが大きくなりましたので表示位置は変更しています。)
ParaFla日付表示失敗


この記事を書いている日付は2005年12月11日なのですが、日付が「0/12/11」と、年度がおかしいです。
何を意味しているかといいますと、最初使っていたフォントは「_ゴシック」でした。よく見ると、フォント名の頭に「_(アンダーライン)」がつくフォントがあります。これをデバイスフォントといい、Flashが元々用意しているフォントで、これを使えばFlashの容量を使わなくて済むというメリットがあります。その反面、個性に富んだフォントではありません。

そして、自由にフォントを使う場合、Flashを作る時にテキストの設定にある文字をそのフォントで作り、Flash内に取り込みます。そのため、私がテキストの設定に指定していた「01/02/03」では、5の数字が含まれていないため、5が表示出来ずにこんな風になってしまったわけです。これはつまり、どんな文字が表示されるか判らない所には、自由なフォントは使えないと言う事です。

フォントの設定は決まった数字や文字が出てくる所のみにしておきましょう! そして、予め、使用する全ての文字を書いておきましょう!
但し、同じフォント・大きさ・太字・斜体のダイナミックテキストが他で使われていれば、その文字も使用可能となるようです。


今回、「01/02/03」に設定していたのは、ドコに表示するか決める時に判りやすくするためでしたので、「0123456789/:」と日付時間で使う文字を全部テキストの設定に入れてみました。今度はちゃんと表示されました♪
ParaFla日付表示成功



次は表示位置の調整の説明です。
フォントの大きさを変えれば、次は表示位置を調整する必要があります。
下の画面で、左下の素材リストをクリックすると、左上のプレビュー画面に「スプライトを編集」ボタンが表示されますので、クリックして下さい。
ParaFlaメイン画面


スプライト編集画面になります。
と、いっても、見た目はイベントリストのタイトル部分の背景色がグレーからベージュに変わっただけです。これから元の画面に戻る時は、ベージュのタイトル部分をダブルクリックして下さい。
ParaFlaスプライト編集画面
こちらの画面で右のイベントリストの「種別:テキストの00003」をダブルクリックしてイベントのプロパティを表示します。


「種別:テキストの00003」のイベントのプロパティです。
これは素材リストでいう時間表示の部分ですね。
ParaFla時計表示位置変更前
右はこのイベントのプレビュー表示画面です。ちょっと見づらいので、時間の部分を赤丸つけています。


左の描画位置(X, Y)で数値指定出来ますが、大雑把な位置はドラッグ&ドロップで指定した方が簡単ですので、適当に位置を動かして下さい。適当な場所に決めたら、忘れずに中央下の「適用ボタン」を押下しましょう! なかぜいつも忘れるんですよね。。。元のイベントリストの画面に戻ります。
ParaFla時計表示位置変更後


元の画面に戻ったら、F5キーでプレビューを実行!
※色が見えづらいので、ファイル→プロジェクトのプロパティの背景色のRGBを全てゼロにして背景色を黒にして見やすくしています。
ParaFlaスプライトプレビュー
このようにして、文字の位置や色などを決めていきます。



時計の表示のカスタマイズの説明です。
出来るだけ簡単に下の事が出来るように説明したいと思います。
・日付のみ、時間のみを表示する
・日付の年を2桁表示から4桁表示にする
・曜日を表示する

いずれも、ActionScript(アクションスクリプト)というプログラムを修正する必要があります。ちょっとだけ削除する程度の変更ですので、簡単に出来ると思います。元々、JavaScriptから派生したらしく、仕様は近いみたいです。


ActionScriptは「スクリプトエディタ」を使って行いますので、その使い方を。
ParaFlaメイン画面
この画面で、右クリックメニューの「スクリプトエディタ」にチェックが入っている場合、イベントリストの「スプライト」を左クリックすればスクリプトエディタが開きます。
ParaFlaスクリプトエディタ1
※便宜上、赤色で(1)等の番号を付与しています。


また、イベントリストの「スプライト」を右クリック→プロパティを開き、左下の「スプライトの設定」の「スクリプトを編集」でもスクリプトエディタを開く事が出来ます。まだスプライトにスクリプトが設定されていない場合は、こちらの方法で開く必要があります。
ParaFlaスプライトのプロパティ

スクリプト自身を変更後、個別に保存するのではなく、右上の×ボタンでこの画面を閉じてメイン画面で全体を保存(CTRL+Sか、ファイル→上書き保存)することになります。

プログラムが物理的に動くかどうかのチェックを、スクリプトエディタの一番上にある「構文チェック」ボタンで行います。物理的というのは、命令の構文間違いのチェック等を行う事です。例えばActionScriptは命令の最後に「;」を付ける必要がありますが、これが抜けていないか等のチェックを行う物です。

  • スプライトとは:独立した表示イベント。判りづらいと思いますが、メインのFlashの中に、時計を表示する小さなFlashが動いているイメージです。その小さなFlashをスプライトと言います。
  • スクリプトとは:ActionScript等のプログラムのこと。



「日付のみ、時間のみを表示する」ですが、イベントリストの「スプライト:0004」のスクリプトエディタを開いていください。
ParaFlaスクリプトエディタ1

まずは、不要なプログラムを削除します。
日付の表示が不要な場合は、赤字で書いた(1)と(3)の2行を削除して下さい。
時間の表示が不要な場合は、赤字で書いた(2)と(4)の2行を削除して下さい。

スクリプトエディタの右上の×ボタンを押して終了します。
左上の「スプライトの編集」ボタンを押して、スプライト編集画面を表示します。
ParaFlaスプライト編集画面

日付の表示が不要な場合は、種別:テキストの0002をクリックしてDELキーで削除して下さい。
時間の表示が不要な場合は、種別:テキストの0003をクリックしてDELキーで削除して下さい。

以上で非表示にする処理は完了です。
先述の時計の位置の調整を行って下さい。


日付の年を2桁表示から4桁表示にするですが、イベントリストの「スプライト:0004」のスクリプトエディタを開いていください。
ParaFlaスクリプトエディタ2

赤字で書いた(5)の行の一部を削除します。
yy = yy.toString().substr(2,2);
 ↓
yy = yy.toString();

スクリプトエディタの右上の×ボタンを押して終了し、先述の時計の位置の調整を行って下さい。


曜日を表示するですが、イベントリストの「スプライト:0004」のスクリプトエディタを開いていください。
ParaFlaスクリプトエディタ2

赤字で書いた(6)と(7)が関係します。
(6)の行を削除して、(7)の行の先頭にある「//」を削除して下さい。
// dateText = yy + "/" + mm + "/" + dd + getDay();
 ↓
dateText = yy + "/" + mm + "/" + dd + getDay();

「//」は、この後ろはコメント(注釈)なのでプログラムではありませんという事です。ですので、先頭にある「//」を削除して、コメントしてあったプログラムを有効にしたんですね。

曜日は「(月)」等と表示していますが、赤字で書いた(8)の部分にある所を「[Mon]」等と変更してもOKです。「”」は、この間に挟まれた文字を文字列としますという意味ですので、削除しないようにしましょうね。

注意点は、先述したとおり、フォントを変更した場合は「テキストの設定」に使用する文字を全て書く必要があるという事です。「1234567890:/(月火水木金土日)」や、「1234567890:/(SunMonTueWedThuFriSat)」と、使う文字を全て記述しておきましょう。


上記の変更を組み合わせると、このような感じに表示出来るようになります。



毎回毎回長いですが、実際にやるべき事は大してありませんので、試してみて下さい♪

他にも、ぬこちゅーさんの「ふらふら運動をする」のサンプルを組み合わせれば、12月にふさわしい雪降る背景も作れます♪


【追記】
ParaFla公式サイトで、新バージョン「ParaFla Ver0.9RC1」をリリースされています。
posted by 藍旋 at 09:00 | Comment(3) | TrackBack(0) | ソフト・ツール紹介
この記事へのコメント
moncler クリーニング
Posted by 服 メンズ at 2013年07月31日 18:03
cate spade
Posted by 時計 アンティーク at 2013年08月03日 17:43
人々は一般的に<a href="http://c6zu08nlhn.doitinvt.com" title="オールインワンhid h4">オールインワンhid h4</a>ブランドの男性の靴のような靴は、地元の人々が複数回に高価であることと思いますが、新たにインド会社のofAdidasメンズ靴の価格は、彼ら 0443A5D651EE199CE5E5E16B542B6CF3 が完全に間違っていると証明している鳴った。 酒質 吟醸酒原材料 米、米麹、醸造アルコール 原料米 美山錦、雪化粧 精米歩合 50% 使用酵母 小川酵母 日本酒度 +5 酸度 1.2 アルコール度数 15.5度 蔵元??山形県 出羽<a href="http://natf6kecyo.doitinvt.com" title="HID 取付 DIY">HID 取付 DIY</a>酒造容量 720m 「お酒は20歳から! 幻想的な<a href="http://34wklih4gq.doitinvt.com" title="バイク用hidキット">バイク用hidキット</a>の靴が豊富な女性以外にも私たちの大半はあまりにも高価であり、大都市で唯一のいくつかの店舗があり、多くの人々が望ましいの靴を持ってすることができません。 <a href="http://880ndv3x.doitinvt.com" title="HID h4 取付">HID h4 取付</a>は、真剣に、お客様がより快適と思ってや靴機能からスキルに酔いしれることを確認するためにサービスに<a href="http://99jxffdlm8.doitinvt.com" title="HID バラスト 自作">HID バラスト 自作</a>の革新的な技術、昨年これらの名誉に熱心ではありません。
Posted by 自転車用 hidランプ at 2013年08月08日 06:36
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※半角英数字のみのコメントは投稿できません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。