FlashBlog.JP tag:fxb.jp,2008:/flashblog//2 2008-02-27T14:28:06Z このサイトでは、書籍「Flashでデザイン　差がつくBlogサイトの作り方」掲載の動作サンプル閲覧やスクリプトのダウンロードサービスなどの情報を掲載していきます。 Movable Type Publishing Platform 4.01 FlashBlog書籍第２弾リリース tag:fxb.jp,2008:/flashblog//2.426 2008-02-26T09:09:56Z 2008-02-27T14:28:06Z FlashBlog書籍第２弾「Flashでデザイン 差がつくBlogサイトの作り... Flashでデザイン 差がつくBlogサイトの作り方 セカンドエディション」(336ページ/336ページ/3,150円/2008年2月28日発売/アスキー刊) 書籍サポートサイト　　　Amazonで注文 fnb2nd.jpg ]]> http://syner.jp 秋山修司（あきやましゅうじ） ウェブデザイナー/ instantplace 2004年にグラフィックデザイン・ウェブデザインのユニット「instantplace」を立ち上げる。主にFlashBlogの研究・制作を行っている。 川野辺亮（かわのべりょう） ウェブデザイナー/株式会社エフエックスビイクリエイティブ本部統括本部長 フリーランスを経て2007年エフエックスビイに入社。SK8、スノーボード三昧の日々を送る。たまにFlash・PHP・JavaScript・CSSなどをいじっている。 佐々木史織（ささきしおり） Web Architect/smix 1976年生まれ。道都大学美術学部を卒業後、制作会社にてDTPデザイン、自動組版システム開発業務などに従事。 WEBデザイナーとして転職後、サイト立ち上げ・運営に参加。2003年フリーに。現在、ブログ制作からCD-ROM制 作まで幅広く活動中。 http://www.smix.jp/ ]]> FlashBlogでプレゼン！ tag:fxb.heteml.jp,2006:/flashblog//2.30 2006-07-30T03:35:00Z 2008-02-19T10:43:45Z 2005年5月17日、マクロメディア本社サンフランシスコ会議室でFlashBlo... プレゼン用スライドflashblog2005年5月17日、マクロメディア本社サンフランシスコ会議室でFlashBlogセミナーを行ったのですが、サンプルとして作ったフォトログのほかに、プレゼン用のスライドもFlashBlogで作りました。 →　セミナー用スライド（フラッシュ版）]]> FlashBlogSlide（仮）の特徴 このスライドは結構突貫工事で制作したのですが、セミナー時には大活躍してくれました。というのも、このスライドは、プレゼン用ツールに必要な機能を一通り備えていたからです。 機能としては、基本の前後のページ移動があります。本では「次へ」のボタンの作り方は紹介していましたが、「前へ」のボタンの作り方は紹介していませんでした。「前へ」ボタンの作り方はほぼ同じで、「次へ」の時とは逆にエントリーの現在位置からマイナス１する指定を行えばOKです。 前後ボタンのスクリーンショット これだけあれば結構スライドとしていけるのですが、このセミナーでは、ソースコードを掲載する関係上、スライドの枠内におさまらない場合があります。そのため、スライド内でスクロールさせる機能をつけることにしました。 ナビゲーションのスクリーンショット また、スライドの文字が、本番になってみたら予想外に会場が広くて後ろのほうの人には文字が見えない場合があります。そういう場合を考えて、文字の拡大縮小機能をつけました。これはその場その場で文字を大きくしたり小さくしたり出来るもので、よくCSSなどで実装されています。 また、スライドは、直前になって差し替えたり、順序を変えたりといったことが当然起こり得ます。そこで、このFlashBlogでは、表示順にエントリーを入力していくようにはせず、エントリーの入力時に番号を振っておいて、Flash側で番号順にソートするという方式をとっています。このやり方については、本書のP263「キャラクターを使ったストーリーボードをFlashBlogで作る」に詳しく載っています。 この表示順を決める番号は、エントリーの一括編集画面で、一気に変更することが出来るため、非常に便利です。 表示順を書く場所は、エントリーのタイトルにあたる場所に記述します。

FlashBlogSlide（仮）のメリット

このスライドで便利なのは、なんといってもすぐその場で編集でき、結果をネット上にも配信できる点にあるのではないかと思います。加えて、当日のスライドはHTMLでも出力出来ますからどんな内容だったか一覧することや印刷して読むことも出来ます。これは、間違いなどを随時訂正できることを可能にする他、Blogの機能であるコメントやトラックバックをスライド単位でつけることが出来るようになり、従来のセミナーのスライドに比べて双方向性をもたらすことが出来ると思っています。 HTML版の画面 →　セミナー用スライド（HTML版）]]> セミナーで使ったフォトログ tag:fxb.heteml.jp,2006:/flashblog//2.29 2006-07-30T03:30:00Z 2007-10-04T13:03:34Z 2005年5月17日、マクロメディア本社サンフランシスコ会議室でFlashBlo... 2005年5月17日、マクロメディア本社サンフランシスコ会議室でFlashBlogセミナーを行いました。会場には50人以上の方が来てくれて感激でした。今回のFlashBlogラボは、そのときの教材として作ったフォトログをここでもとりあげます。 →　フォトログへのリンク]]> Flash編分解の章にあるピクチャーギャラリーを改造したもので、ビジュアルはまったく一から作り直しています。ただし、出力される元のコンテンツは同じなので、ワンソースマルチユースを実現しているといえます。このフォトログに写真をエントリーしてくれたAchakoさんはダイビング好きということもあって、デザインは夏らしいさわやかなものにしています。 このフォトログは、ピクチャーギャラリーと違い、カテゴリー分けに写真を分類するタイプではなく、最新から数十件を表示するという仕組みになっています。その代わり、サムネイル機能や多エントリーの際のナビゲーションに必要になるスクロール機能がついています。表示する内容は、写真と日付、タイトルとキャプションとなります。タイトルの文字やサブタイトルの文字も含めてほぼMT上で管理することが可能な仕組みになっています。 フォトログのナビゲーション また、次の写真や前の写真も次々に見ることが出来るようなインターフェイスも装備しています。（ページがめくれている部分がボタンになっています。会場では、さまざまなオンラインマガジンを例に挙げ、Flashでのページナビゲーションのバリエーションのレビューも行いました）。 フォトログのページナビゲーション 写真に関しては、写真がどのようなサイズでエントリーされても規定の枠内におさまるような仕組みになっています。]]> 「Flash+MovableType入門」-デザイン誌『des［デス］』掲載サンプル tag:fxb.heteml.jp,2006:/flashblog//2.28 2006-07-30T03:25:00Z 2007-10-04T13:03:16Z FlashBlogの初期の成果の一部を「Flash+MovableType入門」... 『des』掲載サンプルのスクリーンショットlFlashBlogの初期の成果の一部を「Flash+MovableType入門」として、デザイン誌『des［デス］マクロメディア特集号』（2004年12月15日、翔泳社刊）に掲載しました。 掲載サンプル　｜　ソースのダウンロード 『des［デス］マクロメディア特集号』をAmazonで注文]]> 書籍掲載サンプルのダウンロード tag:fxb.heteml.jp,2006:/flashblog//2.27 2006-07-30T03:20:00Z 2006-10-20T03:32:16Z Flash編基礎　｜　Flash編応用　｜　Flash編分解... Flash編基礎　｜　Flash編応用　｜　Flash編分解]]>

Flash編基礎

Blogの情報を表示するFlashBlog　（→　ZIP圧縮ファイル） エントリーのタイトル一覧のみを表示するFlashBlog　（→　ZIP圧縮ファイル） エントリーのタイトル一覧と内容の表示をするFlashBlog　（→　ZIP圧縮ファイル） カテゴリー内のエントリー一覧と内容を表示するFlashBlog　（→　ZIP圧縮ファイル） 月別のエントリー一覧を表示すFlashBlog　（→　ZIP圧縮ファイル）

Flash編応用

カレンダー付FlashBlogの作り方　（→　ZIP圧縮ファイル） ウインドウを使ったFlashBlog　（→　ZIP圧縮ファイル） タブを使ったFlashBlog　（→　ZIP圧縮ファイル） モーションを考えるために構造を変える　（→　ZIP圧縮ファイル） FlashBlogにモーションを組み込む１　（→　ZIP圧縮ファイル） FlashBlogにモーションを組み込む２　（→　ZIP圧縮ファイル） FlashBlogにモーションを組み込む３　（→　ZIP圧縮ファイル） 欧文フォントを埋め込む　その1…英語Blogを作る　（→　ZIP圧縮ファイル） 欧文フォントを埋め込む　その2…日本語Blogでの応用　（→　ZIP圧縮ファイル） トラックバックを実装したFlashBlogを作る　（→　ZIP圧縮ファイル） コメントを実装したFlashBlogを作る　（→　ZIP圧縮ファイル）

Flash編分解

クイズの問題の管理ツールとしてのMovable Type　（→　ZIP圧縮ファイル） キャラクターを使ったストーリーボードをFlashBlogで作る　（→　ZIP圧縮ファイル） 時間を表現したクジの結果発表にFlashBlogを使う　（→　ZIP圧縮ファイル） ピクチャーギャラリーとしてFlashBlogを使う　（→　ZIP圧縮ファイル） 企業サイトの更新情報表示としてFlashBlogを使う　（→　ZIP圧縮ファイル） ※各サンプルは、MacOSX、Windows版のFlash MX 2004およびFlash MX 2004 Professionalにて読み込むことが可能です。]]> Flash基礎編「Blogの情報を表示するFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.26 2006-07-30T03:10:00Z 2007-04-19T12:35:01Z Flash基礎編ではXML編、Movable Type編で作ってきたXMLをFl... Flash基礎編ではXML編、Movable Type編で作ってきたXMLをFlashから読み込むというやり方から学んでいきます。「Blogの情報を表示するFlashBlog」は、その一番の基本になるパートです。 サンプルの表示　｜　ソースのダウンロード]]> Flash基礎編「エントリーのタイトル一覧のみを表示するFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.25 2006-07-30T03:05:00Z 2007-04-19T12:34:21Z 「エントリーのタイトル一覧のみを表示するFlashBlog」では、ネストされたX... 「エントリーのタイトル一覧のみを表示するFlashBlog」では、ネストされたXMLを読み込み、リストとして表示させる方法を学んでいきます。 サンプルの表示　｜　ソースのダウンロード]]> Flash基礎編「エントリーのタイトル一覧と内容の表示をするFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.24 2006-07-30T03:00:00Z 2007-04-23T12:52:20Z 「エントリーのタイトル一覧と内容の表示をするFlashBlog」では、いよいよエ... 「エントリーのタイトル一覧と内容の表示をするFlashBlog」では、いよいよエントリーのタイトルを押すとその内容を表示させるというインタラクティブな領域に足を踏み入れていきます。 サンプルの表示　｜　ソースのダウンロード]]> Flash基礎編「カテゴリー内のエントリー一覧と内容を表示するFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.23 2006-07-30T02:55:00Z 2007-04-23T12:52:45Z 「カテゴリー内のエントリー一覧と内容を表示するFlashBlog」では、カテゴリ... 「カテゴリー内のエントリー一覧と内容を表示するFlashBlog」では、カテゴリー別に仕分けされた階層型のBlogを自動的に生成させていくサンプルを制作していきます。このサンプルは幅広い応用が可能です。 サンプルの表示　｜　ソースのダウンロード]]> Flash基礎編「月別のエントリー一覧を表示すFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.22 2006-07-30T02:50:00Z 2007-04-23T14:59:46Z 「月別のエントリー一覧を表示すFlashBlog」では、月ごとに沿ってエントリー... 「月別のエントリー一覧を表示すFlashBlog」では、月ごとに沿ってエントリーを整理した形のFlashBlogを制作していきます。 サンプルの表示　｜　ソースのダウンロード]]> Flash応用編「カレンダー付FlashBlogの作り方」 tag:fxb.heteml.jp,2006:/flashblog//2.21 2006-07-30T02:45:00Z 2006-10-20T03:32:16Z 応用編では、よりBlogらしい実装を行っていきます。まずはじめは、どこのBlog... 応用編では、よりBlogらしい実装を行っていきます。まずはじめは、どこのBlogにも搭載されているカレンダーです。簡単なカレンダーを作りながら、それをBlogのエントリーと結びつけるサンプルを制作していきます。 サンプルの表示　｜　ソースのダウンロード]]> Flash応用編「ウインドウを使ったFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.20 2006-07-30T02:40:00Z 2006-10-20T03:32:16Z GUIの例として、ウインドウを使ったサンプルをここではとりあげています。ドラッグ... GUIの例として、ウインドウを使ったサンプルをここではとりあげています。ドラッグ＆ドロップが可能な簡単なウインドウを作りながら、Blogのエントリーを自由に扱う方法を学びます。 サンプルの表示　｜　ソースのダウンロード]]> Flash応用編「タブを使ったFlashBlog」 tag:fxb.heteml.jp,2006:/flashblog//2.19 2006-07-30T02:35:00Z 2006-10-20T03:32:16Z 本書で扱うもう１つのGUIのアプローチとして、タブを使ったFlashBlogがあ... 本書で扱うもう１つのGUIのアプローチとして、タブを使ったFlashBlogがあります。ここでは、タブを使ってカテゴリーと月別を切り替えて見ることが出来るFlashBlogを作ります。 サンプルの表示　｜　ソースのダウンロード]]> Flash応用編「モーションを考えるために構造を変える」 tag:fxb.heteml.jp,2006:/flashblog//2.18 2006-07-30T02:30:00Z 2006-10-20T03:32:15Z このサンプルでは、この先の応用編や分解編で欠かせない、自由にエントリーの内容を扱... このサンプルでは、この先の応用編や分解編で欠かせない、自由にエントリーの内容を扱うための構造の変化を行っていきます。 サンプルの表示　｜　ソースのダウンロード]]> Flash応用編「FlashBlogにモーションを組み込む１」 tag:fxb.heteml.jp,2006:/flashblog//2.17 2006-07-30T02:25:00Z 2006-10-20T03:32:15Z 「FlashBlogにモーションを組み込む１」では、動かす実験として、カテゴリー... 「FlashBlogにモーションを組み込む１」では、動かす実験として、カテゴリーの名前を左右に動かすというごく簡単なことをやります。実際に使えるサンプルは「FlashBlogにモーションを組み込む２」でやります。 サンプルの表示　｜　ソースのダウンロード]]>