■■数字に埋め込みフォントを使った(数字画像を使わない)時計の作り方■■

1. ParaFla!を導入して起動します。


2. メニューから「ファイル」→「プロジェクトのプロパティ」を開きます。
↓画像の窓の色が変なのは個人的仕様ですので、気にしないでください。
基本設定: 「幅」&「高さ」を、作りたい携帯の待ち受けサイズに合わせます。(240x320が一般的?)
「FPS」は最終的に使ったフレーム数によって変更するのが最適です。
(今回はひとまず「4」を入力しておきます。)
因みに、FPSの値を大きくすると動作が細かく滑らかになるのですが、
当然その分消耗する物も大きくなるそうです。
携帯用Flashの場合、5〜20程度が良いと何処かに書いてあった様な気がします。
SWFバージョン: 「SWF4」を選択します。(※必須)
詳細設定: 「SWFファイルを圧縮する」のチェックボックスは外しておきます。
背景色: ベースに使う画像の背景色やデザインに合わせて変更してください。真っ白や真っ黒でも問題はありません。
画像: 使用する画像の画質(容量)等を自分で調整済みなら、
「画質」100、「JPEG画像を強制的に再圧縮する」のチェックボックスはオフで大丈夫です。
特に問題がなければ弄らなくていい箇所です。



3. 左下の「素材ファイルをここにドロップ」と書かれている枠内に、使用する画像をドラッグ&ドロップします。


4. 登録された画像ファイルをダブルクリック(or右クリック→「プロパティ」)でプロパティを開きます。


画像のファイル形式がPNG(8bit)の場合は、
「JPEG圧縮しない」のチェックボックスにチェックを入れます。
これを入れておかないと、出来上がったSWFファイルの容量が
不必要に大きくなったり、圧縮された場合は画像が劣化したりする場合があります。
(他のファイル形式の場合でも、特に圧縮の必要がないと思われる場合はチェックを入れておきましょう)



5. 左下枠内のどこでもいいので右クリックをして、「アイテムを追加」→「テキスト」を選択します。


以下↓の画面が開きます。

ここでは、時間を表示する数字に埋め込みフォントを利用します。

まずは、日付表示用のテキストアイテムを作ります。
  • テキスト欄(@)に、日付の表示で使用する全ての文字を入力します。(※必須)
    今回はひとまず、
    0123456789.( )SunMoTeWdThFriatJbApylgpOcNvD
    と入力してください。これらの文字が、指定されたフォント、及び指定された文字色や大きさで、完成したFlash内に埋め込まれることになります。
  • 文字色、太字や斜体の設定、文字サイズや配置を設定します。
  • 好きなフォントを選択します。(左画像では「STROKE」になっています)
  • 自動サイズ」のチェックを外し、「幅」と「高さ」を適当に入れます。(※必須)
    ここで設定した幅×高さの領域内に、このテキストは表示されることになります。小さすぎると表示される文字が削られてしまうので、大体必要な表示域サイズよりちょっと大きめくらいに設定しておくと無難です。サイズが判らない場合は、ひとまずSWFファイルのサイズ(240x320)と同じくらいにしておきましょう。
  • ダイナミックテキスト」のチェックボックスをONにし、「変数名」に「hiduke」と入力します。(※必須)(「ダイナミックテキスト」のチェックボックスは、フォントを変更すると表示されます)


    (※「プレビュー」のチェックボックスをONにすると、@内の文字に、設定したフォント、サイズ、配置等が適用されて表示されます。(ここでは埋め込み用に入力した文字なので、携帯で動作させた時に実際に表示される物とは違います))



  • 6. 「5」の動作をもう一度行い、今度は時間表示用のテキストアイテムを、もう一つ作ります。
  • テキスト欄(@)に、時間の表示で使用する全ての文字を入力します。(※必須)
    ここでは、「0123456789:」と入力してください。
  • 変数名」には「jikan」と入力します。(※必須)
  • 他は時間表示のデザインに応じて適宜設定してください。日付と別のフォントを設定することも可能です。



  • 7. 左下枠に登録されているアイテムの内、まずはこのFlashのベースとなる画像を右クリック→
    「イベントに追加」し、右上のイベント枠内に追加します。



    8. 右上のイベント枠に追加された画像アイテムをダブルクリック(or右クリック→「プロパティ」)で、プロパティを開きます。


    以下↓のプロパティ画面が表示されます。


  • フレームカウント」を「0」にします。(※必須)
  • 深度」を「-255」にします。(※他のイベントアイテムと比べて、このベース画像が一番下に来るように設定しさえすれば良いので、別に-255でなくともOKです)


    設定したら、「適用」をクリックしてプロパティ画面を閉じます。



  • 9. 同様に、日付表示用(hiduke)と時間表示用(jikan)のテキストアイテムを、「イベントに追加」し、それぞれプロパティを設定します。


    以下↓のプロパティ画面が表示されます。


  • 全て「フレームカウント」を「0」にします。(※必須)
  • 深度」を、日付表示用と時間表示用とでそれぞれ「-1」と「0」等、別々の数値にします。(※他のイベントアイテムと重複しなければ、どの数値でもOKです)
  • 描画位置」を、それぞれ適した位置に表示される様に設定します。(デザインによっては、「角度」等を弄ってみても面白いです)


    設定したら、「適用」をクリックしてプロパティ画面を閉じます。



  • 10. 右上イベント枠内で、一番下の行(「――――」)を選択した状態で右クリック→「アクションを挿入」します。


    以下↓のプロパティ画面が表示されます。


  • アクション」で「<スクリプト>」を選択します。
  • コメント」欄には、自分で判りやすい名前を付けましょう。ここでは「時間取得」と入力しています。


    設定したら、「適用」をクリックしてプロパティ画面を閉じます。



  • 11. 「時間取得」のスクリプトを編集します。
    スクリプトの編集画面が表示されていない場合は、メニュー→「表示」で「スクリプトエディタ」をチェックしてください。



    スクリプト欄に以下↓のスクリプトを記入します。(コピペでOK)
    if( FSCommand2("GetDateDay") < 10 ) { num_date = "0" & FSCommand2("GetDateDay");
     } else { num_date = FSCommand2("GetDateDay");
     }
    if( FSCommand2("GetTimeHours") < 10 ) { num_hour = "0" & FSCommand2("GetTimeHours");
     } else { num_hour = FSCommand2("GetTimeHours");
     }
    if( FSCommand2("GetTimeMinutes") < 10 ) { num_min = "0" & FSCommand2("GetTimeMinutes");
     } else { num_min = FSCommand2("GetTimeMinutes");
     }
    if( FSCommand2("GetTimeSeconds") < 10 ) { num_sec = "0" & FSCommand2("GetTimeSeconds");
     } else { num_sec = FSCommand2("GetTimeSeconds");
     }
    if( FSCommand2("GetDateWeekday") == 0 ) { yobi = "Sun";
     } else if( FSCommand2("GetDateWeekday") == 1 ) { yobi = "Mon";
     } else if( FSCommand2("GetDateWeekday") == 2 ) { yobi = "Tue";
     } else if( FSCommand2("GetDateWeekday") == 3 ) { yobi = "Wed";
     } else if( FSCommand2("GetDateWeekday") == 4 ) { yobi = "Thu";
     } else if( FSCommand2("GetDateWeekday") == 5 ) { yobi = "Fri";
     } else if( FSCommand2("GetDateWeekday") == 6 ) { yobi = "Sat";
     }
    if( FSCommand2("GetDateMonth") ==1 ) { num_month = "Jan";
     } else if( FSCommand2("GetDateMonth") == 2 ) { num_month = "Feb";
     } else if( FSCommand2("GetDateMonth") == 3 ) { num_month = "Mar";
     } else if( FSCommand2("GetDateMonth") == 4 ) { num_month = "Apr";
     } else if( FSCommand2("GetDateMonth") == 5 ) { num_month = "May";
     } else if( FSCommand2("GetDateMonth") == 6 ) { num_month = "Jun";
     } else if( FSCommand2("GetDateMonth") == 7 ) { num_month = "Jul";
     } else if( FSCommand2("GetDateMonth") == 8 ) { num_month = "Aug";
     } else if( FSCommand2("GetDateMonth") == 9 ) { num_month = "Sep";
     } else if( FSCommand2("GetDateMonth") == 10 ) { num_month = "Oct";
     } else if( FSCommand2("GetDateMonth") == 11 ) { num_month = "Nov";
     } else if( FSCommand2("GetDateMonth") == 12 ) { num_month = "Dec";
     }

    hiduke = num_month & "." & num_date & " (" & yobi & ")";
    jikan = num_hour & ":" & num_min & ":" & num_sec;
    赤い太字になっている""の中身は、自由に変更可能です。
    見れば分かる通り、曜日や月の表記、後はカッコやピリオド、時間を区切る:などです。
    小文字を大文字にしたり、略称でなくフル称にしたり、漢字など日本語でもOKです。それから「\n」で改行も出来ます。
    変更した場合は、それに応じてテキストアイテムの埋め込みフォントの中身も入れ替えてください。
    (日本語を使用する場合は、当然ながら日本語対応フォントでフォントを埋め込んでおく必要があります。)
    別々のフォントを使う場合は、フォントごとにテキストアイテムを分ける必要があるので、それに応じて変数名も増やしましょう。

    スクリプトに詳しい人なら、もうちょっと簡単且つスマートに出来ると思います。
    スクリプトに関して説明してくれているサイトも沢山あるので、是非自分で調べて色々弄ってみてください。



    12. 右上イベント枠内で、一番下の行(「――――」)を選択した状態で「アクションを挿入」します。(「時間取得」の下に挿入されます)


  • アクション」で「フレームへジャンプ」を選択します。
  • フレーム」に、「1」(半角数字)を入力します。


    設定したら、「適用」をクリックしてプロパティ画面を閉じます。



  • 13. これで完成です。メニューから「ファイル」→「SWFファイル生成」を選択し、Flashファイルを作成します。



    14. 「i-mode HTML Simulator II」を使えば、PC上でも携帯用Flashの動作確認が出来ます。
    特に、細かい配置を決める時など、何度も確認しなくてはならない際には大変便利です。
    最終的に実際に携帯に送って動作を確認し、問題がなければ出来上がりです。
    お疲れ様でした。


    戻る