Atelier

　MT4.1 にアップグレードしてから、Kinarie&May さんのFlash Calendar が使えなくなっていた。MT3.3 のときに、アーカイブテンプレートのところにおいていた　月別XML の XML ファイルをどのように置き、アーカイブマッピングをどのように設定するのかの知識がなかったためである。

　それで、「小粋空間」さんが提供している「Ajax 月送りカレンダー（MT4版）」を３つ運営しているブログのうちひとつに導入した。うまく動くようなので、メインのこのブログにも導入してみた。ところが、はじめのブログでは上手く動いているのに、こちらではカレンダーは表示されるもののエントリーがある日のリンクをクリックすると、アドレスはリンク先のエントリーになっているのにというエラー・メッセージが表示されるだけである。

　この原因を探るうちに、Kinarie&May さんのFlash Calendar でつかう XML ファイルの置き場所とアーカイブマッピングの仕方が分かった。忘れないうちに書き留めておきたい。
　なお、エラーの原因はあとで判明したことであるが、テンプレートをいじっている間に、テンプレート・タグの残骸が「ブログ記事」テンプレートに残っていたためらしい。いつものように初歩的なミスである。

1. 横長Flash Calendar 3.0 のダウンロードと解凍、アップロードなどについては、Kinarie&May さんのページ　「Falsh」→「MT用横長Flash Calendar 3.0」に詳しくでているのでそちらを参考にする。
   　私の場合、MT3.3 のときに使っていた Flash File があったので、これを使った。
2. MT4 になって、XML ファイルの設定が異なる。
   1. ブログ管理画面で（MT4 からダッシュボードという）設置するブログを選択し、「デザイン」→「テンプレート」→「アーカイブテンプレート」を選択する。
   2. 上段の「アーカイブテンプレートを作成」→「ブログ記事リスト」を選択する。
   3. 空白のテンプレート作成画面がでるのでファイル名を「月別XML」（なんでもいいようだが）とし、Kinarie&Mayさんの「月別XMLファイルのテンプレート修正」のページから、呈示されている XML ファイルを C&P して保存する。
   4. 保存すると、テンプレートの下に「アーカイブマッピング」が表示されるので、 「新しいアーカイブマッピングを作成」をクリックし、種類「月別」を選択し追加ボタンをクリックする。 「パス」はカスタムを選び、次のパスを入力（C&P）し保存する。
      xml/<MTArchiveDate format="%Y_%m"$>.xml
   5. Kinarie&Mayさんの手順にはないが、MT4では「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」の下部にある「アーカイブマッピング」で「日別」のパスを表示しておく必要がある。表示がない場合は、「新しいアーカイブマッピング作成」をクリックしてでてくるリストボックスから「日別」を選び「追加」をクリックする。パス表示はそのままでよいようだ。
3. あとは、Kinarie&Mayさんの手順とおりに、Flash を貼り付けるHTMLソースをつくって、テンプレートに貼り付けるだけである。
   私の場合、MT3.3 のときのソースが残っていたので、URL のパス部分を変更して、MT4 の「テンプレートモジュール」→「ヘッダー」の<div id="header">　?　</div> の部分に貼り付けた。ただし、私は「小粋空間」さんのテンプレート・セットを使わせてもらっている。

　友人が原稿を書いているもう一つのブログでは、「小粋空間」さんの「月送りカレンダー」を設置しているが、どちらも甲乙がつけがたい。「小粋空間」さんの「月送りカレンダー」では、スタイルシートでデザインをいじれるのがいい。
Kinarie&Mayさんのカレンダーは横長があるのと、投稿している日にカーソルを合わせるとエントリーのタイトルが出てくる。どちらも愛用させてもらっている。　

　このブログに 2005年3月から掲載してきた種々雑多な写真も結構な量になってきた。これらの写真をカテゴリー別にアルバムにしたいと、ブログのタイトルなどで使っている Sothink SWF Quicker という Flash 作成ソフトのテンプレート利用も考えてきたが、日本語対応ができないなど意図したとおりにできないので諦めていた。

　写真のアルバムは、DIY作品集で実現しているが、新しいエントリーをあげるたびに修正しなければならないなど結構面倒な作業である。サムネイルに載せる写真を選択できるのは、いい点であるが。

　Flash カレンダーや Flash 天気予報を利用させていただいている Kinarie&May さん にMT用フォトサムネイラーというエントリーの中の画像ファイルをサムネイルで表示する Flash プラグインがある。前から気になっていたが、トライする機会がないままになっていた。今回、試してみると思い通りのインストールができたので、注意点などを記録として残しておきたい。

　次のサムネイルは、私のブログでカテゴリーを Gardening として分類しているエントリーに掲載されている写真である。下の << Prev ボタンをクリックすると日付を遡って見ることができる。サムネイルをクリックすると該当するエントリーが表示される。サムネイルに戻る場合は、ブラウザーの戻るボタンを使う。

　 　

　インストールの手順は、Kinarie&May さんのMT用フォトサムネイラー1.20 に親切に書いてある。
　以下は、注意点。

• サムネイルされる写真は、HTMLに、<"img","src" >で指定される　.ｊｐｇ 写真である。いずれも小文字でなければならない。Picasa2 でエクスポートした写真は、大文字の .JPG となりサムネイルされないので要注意である。
• テンプレートの新規作成で作成した xml ファイルは、作成した blog のルートフォルダーに保存される。ダウンロードしたphoto_thumbnailer120.zip を解凍してできる photo_thumbnailer120.swf ファイルは、同じフォルダーに置けばよい。
• カテゴリー別にサムネイルを作る場合は、 xml ファイルの中で、<MTEntries category="004Gardening" lastn="999">　のようにするが、category の名前は、ブログ管理画面のカテゴリー名と一致させる必要がある。なお、サブカテゴリーも指定できる。私の場合、ソートのためにつけていた頭3桁の数字を忘れていたので、当初上手くいかなかった。
• いくつかのカテゴリーでサムネイル集を作成する場合は、出力名を変えた xml ファイルをいくつか作ればOKである。

　このプラグインを応用して、私のサイトで運営している友達のブログの写真集とかのようなカテゴリー別のサムネイル集を作成していきたいと考えている。
　Kinarie&May さん　Thanks a lot !!

（追記：2008/3/12）　私のサイトで運営している Studio YAMAKO はプロ級の腕前の YAMAKO が撮った趣味の蝶の写真が中心である。この蝶の写真のサムネイルを MT用フォトサムネイラー1.20　で作成してみました。右サイドメニューの Studio YAMAKO をクリックしてみてください。素晴らしい写真集がご覧になれます。

（追記：2008/3/13）サムネイルされる写真の拡張子は小文字の jpg でなければならない。ブログに写真を掲載するには Picasa2 でデジカメ写真を整理しエクスポートするのが便利であるが、拡張子が大文字の JPG となる。そのため、MTで写真ファイルをアップする前に該当するフォルダーの写真ファイルを　Renamin.exe で拡張子を小文字の jpg としなければならない。ただし、この逆手をとって、サムネイルに載せたい写真だけ、小文字の jpg とする手もあるが、サーバーとエントリーのファイル名を変えねばならない。　

　エントリーした日が表示される Flash の横長カレンダーや表示する地方を指定できる Flash 天気予報は、Kinarie&May さんの作品を使わせてもらっている。

　このサイトのメニューボタンが、なかなか洒落ている。自分でカストマイズできるように、Flashメニュー素材も公開されている。変化するメニューボタンを作りたかったので導入させてもらおうと思ったが、今気に入っている動きのあるタイトルを変えなければならないので諦めた。

　もう一度、Flash8 を学習しなおすうちに、先日作った「音の鳴る動きのあるリンク・ボタン」を作ったときの方法を応用すれば、少し似通ったものができるのではないかと気がついた。どうにか形になったので、例によって自分の記録用にかきとめておきたい。
　

1. Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
2. 「修正」→「ドキュメント」で、メニューボタンを設置する場所の大きさに合わせて、ステージの大きさ・背景色を決める。今回は、1000px X 40px の大きさで、カラーピッカーでスポイドしたブログ・タイトルの背景色（#784028）にした。
3. 「挿入」→「新規シンボル」でボタンを選択して、title_homeとボタン名を付ける。（名前はなんでもよい。）
4. ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
5. レイヤー１のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。今回は、130 x 25px の長方形を描いた。
6. アップ時のボタンの色（塗りのカラー）は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、６桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
7. ボタンの枠線は、境界線を明瞭にするために、細い実線とした。
8. テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。今回は、フォントは Verdana 12pt Bold 白を選んだ。
9. 次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
10. アップ・フレームと変化をつけるため、塗り色は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーで水色を選んだ。
11. 次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
12. ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
13. 「タイムライン」横の「シーン１」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。このとき、「表示」→「表示比率」→「ウインドウに合わせる」に設定しておくと全体像がつかめる。
14. ステージにあるボタンをクリックするとプロパティ・インスペクターのプロパティがボタンに変化するのを確かめて、インスペクターの左下の位置決めを、今回の場合、w 130 H 25 X 0.0 Y 15 .0 とした。
15. 次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「アクション」パネルを開き、「ムービークリップ制御」「ブラウザ/ネットワーク」から、下のようなスクリプトを作る。
    on (release) {
    getURL("http://n-shuhei.net/blog/);
    }
    
16. ここまで作成した Flash ボタンの動きは、「ファイル」→「バブリッシュ・プレビュー」→「Flash」で確認するのがよいようだ。 [F12]キーを押してHTMLでの確認はうまくいかなかった。
    この時点での画面は、左の screenshot のようになる。
    
    
    
    
    
17. ここまでうまくいけば、あとは同様の作業の繰り返しとなる。まず、右のライブラリーの title_home のボタンを右クリックして、「複製」を選択すると、ポップアップ画面がでるので、新たなボタン名を、例えば、title_radio のようにつける。
18. このライブラリーのtitle_radio ボタンをダブルクリックすると、 title_home のボタンの複製ボタンがでてくるので、アップ・オーバー・ダウン　フレームのそれぞれのテキスト部分を RadioSenboku　のように変える。
19. シーン１上に、このボタンをライブラリーからドラッグして、設置する。このときの位置表示は、w 130 H 25 X 130.0 Y 15 .0 とすればよい。
20. ステージ上でこのボタンを選択して、アクションパネルから、新しいリンク先URLを含むスクリプトを入力する。これで、メニューボタンの２つめができる。
21. ほかのボタンの設置は、17?20 の繰り返しである。
22. このようにしてできたファイルを「書き出し」→「ムービーの書き出し」で swf ファイルで保存し、FTPソフトでサーバーにアップロードする。あとは、Web Title 部分に設置するだけである。
23. なお、ボタンのオーバーフレームのときに音を出すようにするのは、「音の鳴る動きのあるリンク・ボタン」のエントリーでの ９.項を参照にして設定する。

　このエントリーは前に書いたエントリーが基礎になっている。記録することによって、知識はアンプリファイ（増幅）することを身にしみて感じている。

　私のブログサイトで使わせてもらっているFlashの横長カレンダーの作者である Kinarie&May さんのサイトを久しぶりに訪問した。サイドメニューに天気予報が格好良く配置されている。最新のFlash作品を探ると　Flash天気予報1.10　という Flash が紹介されている。この頃は自分のブログサイトがポータル・サイト化しつつあるので天気予報を取り込むことに飛びついた。早速、PHPとSWFのファイルをダウンロードし、用意されているHTML用ソース作成ページでパラメータを指定した。地域として１０の都市を指定できるので住んでいるところと出かけるときに気になる地方および主要都市を指定した。タイトルのバックグランドカラーも指定できるので使っているテンプレートに合わせた。また、できあがったソースのままではlitebox-1.0 を使っているとFlashの画像である天気予報が背景に隠れないので、「隣の花は紅い」のエントリーで記載した方法でソースにパラメータを加えると今度も上手く隠れた。なお、この方法については、「小粋空間」さんの”Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す”というエントリーに詳しく出ている。
　天気予報のデータは livedoor の Weather Hacks に依存しているとのことだ。 livedoor の継続性（ going concern） が気になるところだが。