PIXEL LAB tag:www.pixelimage.jp,2011:/blog//1 2011-09-27T15:38:50Z FLASH,3D,DESIGN,オリジナルツール by ピクセルイメージ Movable Type 3.34 Fireworks Interviewsされてしまいました tag:www.pixelimage.jp,2011:/blog//1.167 2011-09-27T15:36:13Z 2011-09-27T15:38:50Z いまいち日本ではパッとしないFireworksですが、 海外では、そこそこメジャーなのでしょうか、Fireworks Interviewsという、 世界のFireworks使いの人にインタビューするというサイトがありまして、 私も、（メールで）インタビューされてしました（汗）。 http://fireworksinterviews.com/ tanaka 海外では、そこそこメジャーなのでしょうか、Fireworks Interviewsという、
世界のFireworks使いの人にインタビューするというサイトがありまして、
私も、（メールで）インタビューされてしました（汗）。
http://fireworksinterviews.com/

管理人さんは、Linus LiMさんというシンガポール人の方で、
私の中学生レベルの英語と、日本語での回答を、英訳・リライトして掲載してくれました。
ありがとうございます。Linusさん。そして、Google翻訳。
Linusさんは中国語もOKらしいです。シンガポール人最強やね。
]]> ブログデザイン変更 tag:www.pixelimage.jp,2011:/blog//1.166 2011-07-20T07:53:12Z 2011-07-20T07:54:31Z 一年ぶりに、ブログデザイン変更しました。 背景の画像を差し替えただけの、省エネデザインですが。 tanaka 背景の画像を差し替えただけの、省エネデザインですが。


ちなみに、これまでのデザインは、以下。



新デザインは、DrawTweetのスクリンショットをちょっといじっただけという、
手抜きデザインです。
]]> スライスの作成・名前付け、コード出力など「PI_Slice」 tag:www.pixelimage.jp,2011:/blog//1.165 2011-07-20T06:49:41Z 2011-07-20T06:52:12Z Fireworks用のスライス関連の機能をまとめた拡張パネルです。 以前、スライス関連のコマンドはアップしましたが、 UIかぶせて、スライスコード出力の機能も追加しています。 tanaka Fireworks用のスライス関連の機能をまとめた拡張パネルです。
以前、スライス関連のコマンドはアップしましたが、
UIかぶせて、スライスコード出力の機能も追加しています。

スライスの作成・名前付け、コード出力など「PI_Slice」

  • 複数スライスの一括作成
  • 複数スライスの一括画像フォーマットの設定
    • 連番ベースでの名前づけ
    • 独自の値配列による名前づけ
  • 複数スライスの一括リサイズ
  • 複数スライス名の一括設定
  • 複数スライス名の一括変更
  • 複数スライスコードの一括出力(クリップボードにコピー)

スライスコードの出力について

今回のパネルは、選択しているスライスの情報をもとに、HTMLやCSS用のコードを
生成・コピーする機能を実装してて、画像まわりのコード作成を楽にしてくれると思います。

初期設定では、HTMLやCSS用のテンプレートがありますが、
5件まで編集・保存可能なので、自分好みにカスタマイズできます。

もちろん、HTMLやCSSだけでなく、テンプレートを編集することにより
XMLフォーマットで出力したり、Xcode用にUIImageのコードを生成させたりと、
自由にコード生成できます。

ちなみに、Flash用の子コード生成は、専用の拡張パネルがあるので、
そちらを利用してください。
FireworksスライスをFlashへ自動インポート「PI_FW2FL」

ScreenShot

パネル解説

ビデオチュートリアル

実際の使用方については、こちらにて確認できます。

※音無し、キャプション説明なしで、しかもせわしないです。すいません。

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_Slice.mxp」をクリックすれば、
EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Flashを再起動。
メニュー [ ウィンドウ > そのほかのパネル > PI_Slice ]で起動します。

対応バージョン

CS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。



最近はiPhoneアプリばっかりやってて、だいぶ作れるようになったんですけど、
まだまだ、Flashみたいにサクサクつくれるレベルにはなってないわけで。

というわけで、ちょと気分転換もかねて作成してみました。
やっぱり、Flashはこまわりがきいて楽です。
]]> iPhoneアプリ第2弾～夏の思い出アプリ「線香花火」 tag:www.pixelimage.jp,2011:/blog//1.164 2011-07-19T02:54:44Z 2011-07-19T02:56:10Z 第2弾アプリを公開しました。 tanaka
第2弾アプリを公開しました。

夏の思い出iPhoneアプリ「線香花火」

線香花火を忠実に再現することを目標に作成した、iPhoneアプリです。

詳しくは、以下のアプリ紹介ページをご覧ください。

アプリ紹介ページはこちら



以下、開発メモになります。

開発メモ

前回リリースした第1弾アプリ「DrawDrip」を作ってる中で、派生でできたアプリです。

いろいろプログラム修正してて、偶然、花火っぽい感じになった時があって、
ちょうど夏が目の前なので、これは花火アプリつくらなということで作成しました。

ゼロから作るのではなく、「DrawDrip」のカスタマイズでつくったので、
2日くらいで、ババっといけました。

ほぼ海の日にリリースできたので、よかったです。（今日は、台風ですが．．．）。
ま、ちょっとした子ネタにどうぞ。

アプリの審査

前回のアプリ同様、今回も8日間でいけました。
月曜に審査に出して、次の週の火曜に審査に通ったので、
前回のアプリと、まったく同様のタイムスケジュールになります。
Waiting For Review アプリの提出 2011/07/11 14:00
In Review 審査開始 2011/07/18 1:30
Ready for Sale 審査OK 2011/07/18 8:00

技術的な点も少し

CoreGraphcsで、グラフィックスコンテキストを作成し、
1/60フレームで、線をいっぱい描いるだけです。

今回のような内容であれば、OPEN-GLで作るのが正解だと思いますけど、
OPEN-GLは、これまたハードルが高いので、今回は、簡単にCoreGraphcsを使用して実装しました。
（3冊くらいOPEN-GL本を買ったけど、ちんぷんかんぷん）

OPEN-GLだったら、すごく描画が早く、もっとリアルに再現できるはずなんで、
来年の夏には、OPEN-GLでつくり直すくらい、腕が上がってればと思います。
]]> iPhoneアプリ第1弾～ドリッピングお絵かきアプリ「DrawDrip」 tag:www.pixelimage.jp,2011:/blog//1.163 2011-07-15T01:21:44Z 2011-07-15T01:22:46Z モバイルアプリはじめました。まずは、iPhoneアプリ。 さっそく、第1弾アプリを公開しました。 tanaka
モバイルアプリはじめました。まずは、iPhoneアプリ。
さっそく、第1弾アプリを公開しました。

ドリッピングお絵かきiPhoneアプリ「DrawDrip」

DrawDripは、ブラシのハネやインクの滴りといった、
ドリッピング表現に特化した、iPhone用お絵かきアプリです。

詳しくは、以下のアプリ紹介ページをご覧ください。

アプリ紹介ページはこちら



以下、開発メモになります。

開発メモ

初めての公開アプリ

もともとはDrawDripって、昔、Flashで作成したウェブアプリなんですけど、
加速度センサーなどが利用できる、モバイルアプリのほうが
Flashよりも相性よさそうで、いい感じに難易度も高そうなので、
第1弾として、作成していみました。

まあ、ピクセルイメージっぽいアプリになったと思います。

有料にするかフリーにするか

有料の場合は、手続きがめんどくさそうなので、
初めてのアプリなので、フリーでいっときました。
有料にするにしても、1ドルとか2ドル程度ですけど。

iPad版を開発して、そっちは、有料にしようかとか考え中です。

勉強はじめてから、アプリ開発・公開まで

去年の春から、すこしづつiPhoneアプリの勉強はじめて、
今年の4月から5、6月は、仕事もほとんどほったらかして、
ずっとiPhoneアプリの勉強・開発やってました。
（まあ、この時期は、毎年、ヒマなのもありますけど）

Flash版だと、丸2日くらいあれば、つくれるレベルのものですけど、
ひと月まるまる、iPhone版DrawDripの制作に費やした感じです。

単純比較で、10倍の時間かかったわけですけど、
おかげで、だいぶiPhoneアプリつくれるようにはなりました。
次からは、かなりテンポアップして作れそうな予感。

手続き、めんどくさい

はじめの公開アプリだったので、
デベロッパー登録やら、AppStoreへの登録、申請などなど、
開発以外の、手続きで、かなり手間取りました。

たくさんドキュメント読んで調べてしないといけないので、
初めての公開アプリは、大変ハードルが高かったです・・・

初回のみ必要な作業もおおいので、
次からは、なれる分もふくめて、かなり楽にできそう。
（ま、それでもFlashアップするんと比べれば、相当面倒ですけど）

アプリの審査

iPhoneアプリの場合だと、AppStoreで配信するため
アプリを提出して、審査を受ける必要があります。

いろんなブログや本を調べてみると、だいたい7日前後で公開されるようですけど、
今回のアプリの場合は、以下のような日程でいけました。
Waiting For Review アプリの提出 2011/07/4 12:00
In Review 審査開始 2011/07/12 0:30
Ready for Sale 審査OK 2011/07/12 9:30
結果は、8日でいけました。

巨大なアプリや、本格的なゲームだと、もっと時間かかるんだろうけど、
簡単なアプリだと、7日前後でいけるようです。

ただし、リジェクトされれば、また同じ日数がかかるので、注意が必要。

今回は、一発で審査通ったので、よかったです。ふー
自動車免許の試験に、一発で合格したようなうれしさです。

ちなみに、審査内容は、ざっくり以下にような内容だそうです。
  • 説明文どおりのアプリの内容である
  • バグがない、落ちない
  • 公序良俗に反する、うんたらかんたら
  • アップルの商売の邪魔をしない
実は、今回のアプリは、めちゃくちゃに操作してると、
少しメモリーリークが発生してたんですけど、問題なかったようです。
ちょっとくらいのメモリーリークはOKぽいです。
たまに、アプリが落ちるとかだと、多分NGなんでしょうね。

以上です。

第二弾も準備してるので、公開できたら、またエントリー書きます。
]]> Flash用コマンドセット「PI_FlashCommands」 tag:www.pixelimage.jp,2011:/blog//1.162 2011-04-08T15:41:59Z 2011-04-08T15:54:40Z 2、3年前くらいに、Fireworks用のコマンドセットを公開しましたが、 やっとこさFlash用コマンドセットを公開します。 tanaka 2、3年前くらいに、Fireworks用のコマンドセットを公開しましたが、
やっとこさFlash用コマンドセットを公開します。

解説

コマンドは、ショートカットに割りあてることができ、
紹介するコマンドも、基本的にショートカットで使う前提で、作成しています。

インスタンス関連

PI_instance_edit_into.jsfl
PI_instance_edit_end.jsfl
インスタンスをダブルクリックすると、そのインスタンスの編集モードになり、
どんどんインタスタンスの深くへはいっていきますが、それをおこなうコマンドです。

面積の小さいインスタンスは、ダブルクリックするのが、とても大変なので、
そうゆうときに、つかうと便利です。

あと、インスタンスをダブルクリックばっかりしてると、指が痛くなるので、
そうゆうかた（僕）向けでもあります。
PI_instance_pos_center.jsfl
PI_instance_pos_round.jsfl
インスタンスのXY位置を、親インスタンスの基準点をもとに、
ゼロポイント、もしくはセンターポイントに移動します。
PI_instance_pos_zero.jsfl
インスタンスのXY位置で、位置が整数出ない場合（x:35.5など）、整数にまとめます（x:35）。
PI_instance_set_name.jsfl
インスタンスの名前を、ライブラリのムービークリップ名を元に設定します。
PI_instance_to_mc.jsfl
インスタンスをムービークリップに変換し、ラップします。

ライブラリ関連

PI_lib_change_instance_back.jsfl
PI_lib_change_instance_next.jsfl
インスタンスを、別のインスタンスに入れ替えます。
入れ替えるインスタンスは、ライブラリの同一階層のムービークリップの前後から、選択されます。

PI_lib_search_instance.jsfl
選択されているインスタンスの、ライブラリ内のムービークリップを検索・選択します。

タイムライン関連

PI_timeline_frame_add_step_back.jsfl
PI_timeline_frame_add_step_forward.jsfl
一フレームずらしで、フレームを追加・削除します。
ずれを利用したフレームアニメーションに便利です。
PI_timeline_frame_move_back.jsfl
PI_timeline_frame_move_next.jsfl
フレームを前後に移動します。
地味すぎですが、ショートカットに割り当てて使用すると、地味に便利です。
PI_timeline_frame_remove.jsfl
1フレーム削除します。
PI_timeline_layer_add.jsfl
レイヤーを追加します。

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_FlashCommands.mxp」をクリックすれば、
EXTENSION MANAGERが起動し、インストールできます。
以上です。]]> テキストオブジェトの設定を簡単に変更「PI_Text」 tag:www.pixelimage.jp,2011:/blog//1.161 2011-04-08T09:19:16Z 2011-04-08T15:54:55Z Flashにおいて、テキスト関連の機能をあつめたパネルです。 tanaka Flashにおいて、テキスト関連の機能をあつめたパネルです。

テキストオブジェトの設定を簡単に変更「PI_Text」

もともとは、沢山のテキストを扱う案件があって、そのために作成したパネルです。
選択されているアイテムに対して、以下の処理ができます。
  • 連番でテキストオブジェクトの名前を設定
  • テキストオブジェクトの、タイプ、フォント、大きさ、、、などいろいろ設定
  • テキストオブジェクトの幅や高さのフィット機能

ScreenShot

パネル解説

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_Text.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Flashを再起動。
メニュー [ ウィンドウ > そのほかのパネル > PI_Text ]で起動します。

対応バージョン

CS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。
]]> ライブラリ関連ツール集。クラス名の自動設定など「PI_Lib」 tag:www.pixelimage.jp,2011:/blog//1.160 2011-04-08T09:07:20Z 2011-04-08T15:55:20Z Flashにおいて、ライブラリ管理のツールを集めたパネルです。 クラス名の自動設定から、ビットマップの出力形式（JPG,PNG）やスムージングの 設定が、まとめて行えます。 tanaka Flashにおいて、ライブラリ管理のツールを集めたパネルです。
クラス名の自動設定から、ビットマップの出力形式（JPG,PNG）やスムージングの
設定が、まとめて行えます。

ライブラリ関連ツール集。クラス名の自動設定など「PI_Lib」

選択されているライブラリアイテムに対して、以下の処理ができます。
  • ライブラリの階層情報、ライブラリアイテム名から、クラス名を設定
  • ライブラリ内のビットマップアイテムに対して、出力形式（JPG,PNG）を設定
  • ライブラリ内のビットマップアイテムに対して、スムージングの有無を設定

ScreenShot

パネル解説

使用例

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_Lib.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Flashを再起動。
メニュー [ ウィンドウ > そのほかのパネル > PI_Lib ]で起動します。

対応バージョン

CS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。

以上です。 ]]> インスタンス名の一括設定と取得「PI_InstanceName」 tag:www.pixelimage.jp,2011:/blog//1.159 2011-04-08T08:42:48Z 2011-04-08T15:55:40Z Flashにて、選択されているインスタンスの名前付けや、名前の取得を簡単に行うパネルです。 コード派のFlash使いには、クラス名と並んで、インスタンス名の管理はとても重要です。 このパネルを使えば、きっとインスタンス名に関するケアレスミスは減るでしょう。 tanaka Flashにて、選択されているインスタンスの名前付けや、名前の取得を簡単に行うパネルです。
コード派のFlash使いには、クラス名と並んで、インスタンス名の管理はとても重要です。
このパネルを使えば、きっとインスタンス名に関するケアレスミスは減るでしょう。

インスタンス名の一括設定と取得「PI_InstanceName」

選択されているインスタンスに対して、以下の処理ができます。
  • 連番でインスタンス名を設定
  • インスタンスのライブラリ名をもとに取得
  • 設定されているインスタンス名の取得(出力パネルに出力)
  • インスタンス名の取得は、取得する入れ子深度を指定可能
以下、細かい仕様です。
  • インスタンス名の設定・取得の順番は、すべて、オブジェクトの重なり順を元にします。
  • インスタンス名が取得されてないのに、インスタンス名を出力すると「〓〓〓」と表示されます。

ScreenShot

パネル解説

使用例

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_InstanceName.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Flashを再起動。
メニュー [ ウィンドウ > そのほかのパネル > PI_InstanceName ]で起動します。

対応バージョン

CS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。

以上です。 ]]> MovieClipにさくっと変換「PI_MC_Creator」 tag:www.pixelimage.jp,2011:/blog//1.158 2011-04-08T07:55:25Z 2011-04-08T15:55:52Z Flashにて、ステージ上に配置されたインスタンスを、 まとめてMC化する拡張パネルです。 tanaka Flashにて、ステージ上に配置されたインスタンスを、
まとめてMC化する拡張パネルです。

MovieClipにさくっと変換「PI_MC_Creator」の機能

ステージに配置されたオブジェトに対して、以下の処理ができます。
  • パスオブジェクトをまとめてMC化(※パスはグループ化しておく)
  • BitmapををまとめてMC化
  • MCをさらにMC化
  • それぞれ基準点を選択できます

ScreenShot

パネル解説

ビデオチュートリアル

※音無し、キャプション説明なしで、しかもせわしないです。すいません。

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_MC_Creator.mxp」をクリックすれば、 EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Flashを再起動。
メニュー [ ウィンドウ > そのほかのパネル > PI_MC_Creator ]で起動します。

対応バージョン

CS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。

以上です。 ]]> FireworksスライスをFlashへ自動インポート「PI_FW2FL」 tag:www.pixelimage.jp,2011:/blog//1.157 2011-04-06T09:44:32Z 2011-04-06T14:23:15Z Fireworksのスライスで書き出した画像を、Flashにインポートする拡張パネルで、 Fireworksパートと、Flashパートとの、2つのパネルからなります。 tanaka Fireworksのスライスで書き出した画像を、Flashにインポートする拡張パネルで、
Fireworksパートと、Flashパートとの、2つのパネルからなります。

Flash用の画像切り出しに、Fireworksを使ってるかたには、かなり便利だと思います。
面倒な画像のインポート・ステージ配置・名前付けを自動でバーとやってくれるので、
より、クリエイティブな作業に集中できます。

私は、これがないと、Flash作る気がしません。

ちなみに過去にも同様のパネルを公開してますが、
それのバージョンアップ版になります。

FireworksスライスをFlashへ「PI_FW2FL」の機能

  • 複数の画像を、一括でインポートします
  • インポートした画像は、自動的に、MC化されます
  • MC化された画像は、自動でステージに配置。XY位置も反映れます
  • ライブラリには、インポートごとに、日付ベースのフォルダ名に配置されます

ScreenShot

パネル解説

手順

  1. Fireworksでスライス画像をまとめて書き出す
  2. PI_FW2FLパネルで、書き出しパスやスライス位置をコピー
  3. FlashのPI_FW2FLパネルに、コピーした内容をペーストしインポート
  4. MC化し、XY位置も反映したうえで、Flashステージに配置

ビデオチュートリアル

Fireworksでのスライスの作成・名前付けから、書き出し、
Flashへのインポートまでの、ひとおおりの手順を紹介しています。
※音無し、キャプション説明なしで、しかもせわしないです。すいません。


ビデオ中の、スライスの作成・名前付けの箇所は、以下のコマンドを使用してます。
Fireworks用オリジナルコマンド(jsf)一覧

ダウンロード


ZIPファイルを解凍し、2つのMXPファイルをEXTENSION MANAGERでそれぞれインストールしてください。

起動方法

Fireworksの場合

インストール後、Fireworksを再起動。
メニュー [ ウィンドウ > PI_FW2FL_4_FW ]で起動します。

Flashの場合

インストール後、Flashを再起動。
メニュー [ ウィンドウ > そのほかのパネル > PI_FW2FL ]で起動します。

対応バージョン

CS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。
CS5については、結構、Flashごと落ちることがあるようなので、
使用前は、ファイル保存をおすすめします。

以上です。]]> Fireworks用こまごまパネル「PI_Utility」 tag:www.pixelimage.jp,2011:/blog//1.156 2011-02-07T15:57:16Z 2011-04-08T15:56:27Z 本日、3つ目のエントリーなので、ちょっとぐったりです。 最後は、Fireworks用こまごまパネル「PI_Utility」の紹介・公開です。 Fireworksをもっと便利に、使いやすくするパネルです。 これまで公開してきたパネルと、結構かぶってますが、見せ方が違います。 tanaka 本日、3つ目のエントリーなので、ちょっとぐったりです。
最後は、Fireworks用こまごまパネル「PI_Utility」の紹介・公開です。

Fireworksをもっと便利に、使いやすくするパネルです。
これまで公開してきたパネルと、結構かぶってますが、見せ方が違います。

機能

Fireworksの機能を拡張するようなものはありません。
よく使う機能を、ひとつのパネルにまとめてみました。

こまごました機能がたくさんあるので、ページ下部のビデオチュートリアルのほうで、
ざっと、ご確認ください。

ScreenShot&パネル解説

ビデオチュートリアル

実際の使用方については、こちらにて確認できます。

※音無し、キャプション説明なしで、しかもせわしないです。すいません。

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_Utility.mxp」をクリックすれば、
EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Fireworksを再起動。
メニュー [ ウィンドウ > PI_Utility ]で起動します。

対応バージョン

FireworksCS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。

以上です。

今年にはいってからのこのひと月は、仕事以外の時間は、ひたすらXCODEと向き合う日々だったので、
ちょっと気分転換のため、未公開だった、FW用パネルを公開用に仕上げて、エントリしてみました。
どれも、5年くらいまえからあったものなので、やっとこさ公開できて、うれしいです。

Fireworksの寿命が、少しでも長くなれば、本望です。
（MacromediaからAdobeになった時点で死んだと思ってたので）

これで、Fireworks用の拡張パネルは、ほぼ出尽くしました。
次は、Flashのコマンドとかパネルとか、アップします。

そして、Flashを超えた先には、iOSアプリ・・・を予定。
]]> テンプレートエンジン「PI_Template」FW版とウェブ版です tag:www.pixelimage.jp,2011:/blog//1.154 2011-02-07T15:55:47Z 2011-04-08T15:56:43Z お手軽テンプレートエンジンFireworksパネルの紹介・公開です。 PHPとか、JAVAとか、jQueryとかのプログラムの話題ではなくて、 もっと、日常の業務での話題です。 tanaka お手軽テンプレートエンジンFireworksパネルの紹介・公開です。
PHPとか、JAVAとか、jQueryとかのプログラムの話題ではなくて、
もっと、日常の業務での話題です。

テンプレートエンジンといえば

テンプレートファイルを用意して、{param}みたいな、プレースホルダ埋め込んで、
ほんでテキストデータは、SQLでデータひっぱってきて、
PHPとか、JAVAとかで、動的にHTMLやXMLを生成して、、、みたいな感じですよね。通常は。

まあ、敷居がかなり高いし、利用シーンも、限られてるわけです。

でも、そんなたいそうなんじゃなくて

今、HTMLページつくってて、その中でつかうTABLEをテンプレートで生成できたら。とか、
一覧ページを、テンプレートでさくっととか、
このテキストフォーマットで、ちょっとフォーマットできたらなぁとか。

そう思ってつくったのがこのパネルです。

テンプレートエンジンなんで、あまりFireworksとは関係ないです

なぜにFireworksのパネルなのか

もともとこのパネルをつくったのは、5年くらい前なのですが、
当時は、AIRはもちろんなくって、ファイル書き出しができるのが、
Fireworksのパネルだったのです。（ウェブ屋さんなので、CとかJavaとか使えんし）

ほんなら、AIRでいまから、つくらんかえって話ですが、
なかなか、面倒そうなので、とりあえず、Fireworksのパネルのまま公開することにしました。

AIRバージョンは、そのうちつくります（多分）。

Flashで作ってるので、ウェブ版もついでに公開

Fireworksのパネルといっても、中身はFlashなので、
そのままウェブ版としても公開します。
テンプレートエンジン「PI_Template」ウェブ版

ひととおりの機能が使えますが、ウェブ版は、以下の機能制限があります。
  • ファイル書き出しができない（Fireworks版のみ）

テキスト生成パネル「PI_Template」の機能

1.テンプレート入力

テンプレートエリアに、テンプレートとなるテキストを入力してください。
ドリウイとかでつくっといてコピペするイメージです。

プレースホルダーとして、■■■を入れれば、順番に、データと置き換えられます。
順番を変更したい場合は、■01■、■02■、、、として、絶対値で指定します。
行の番号を埋め込む場合は、■NO■とします。
一番先頭のデータ（■01■）は、■ID■とすることができ、
ファイル出力の値としても使用しています。

2.データ入力

タブ区切りテキストを入力します。エクセルでデータを作成し、コピペしてください。
1行につき、1レコード（ページ）となります。

行の先頭のテキストデータは、テンプレートにおける■ID■、■01■となり、
タブごとに、■02■、■03■となります。

3.生成

「CONVERT」ボタンクリックで、生成します。
あとは、コピペして、HTMLエディターにもっていってください。

生成されたテキストは、1レコード1ファイルでローカルディレクトリに、書き出すこともできます。
その場合は、パネルの一番したのフィールドに、ファイルパスを入力して、「EXPORT」ボタンをクリックしてください。
書き出されるテキストファイルは、SJISとなるので、UTFにしたい場合は、
別途、文字コード変換ツールを使用してください。

ScreenShot

パネル解説

細かい仕様や、そのほかの機能

かなり昔につくったパネルなので、細かい仕様については、思い出せない箇所があるので、
後日、追記したいとおもいます。

単なるテンプレートではなく、条件分岐機能もあるのですが、
それも、後日。
条件分岐機能を使えば、複雑なページも、一気に書き出せます。

ビデオチュートリアル

実際の使用方については、こちらにて確認できます。

※音無し、キャプション説明なしで、しかもせわしないです。すいません。

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_Template.mxp」をクリックすれば、
EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Fireworksを再起動。
メニュー [ ウィンドウ > PI_Template ]で起動します。

対応バージョン

FireworksCS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。

以上です。]]> Fireworks用テキスト生成パネル「PI_TextGenerator」 tag:www.pixelimage.jp,2011:/blog//1.153 2011-02-07T15:54:30Z 2011-04-08T15:57:17Z Fireworks用のテキストオブジェクト生成パネルを作成しましたので、公開します。 たまに、いてますよね。なんでもイラレで作る人。デザインをはじめ、ちょっとした資料・指示書まで。 私の場合は、あらゆるものを、Fireworksで作成してるのですが、 そんなヘビーユースを支えてるパネルくんを、紹介・公開したいと思います。 4～5年前から使ってるんですけど、これがないと、仕事する気がしません。 tanaka Fireworks用のテキストオブジェクト生成パネルを作成しましたので、公開します。

たまに、いてますよね。なんでもイラレで作る人。デザインをはじめ、ちょっとした資料・指示書まで。
私の場合は、あらゆるものを、Fireworksで作成してるのですが、
そんなヘビーユースを支えてるパネルくんを、紹介・公開したいと思います。

4～5年前から使ってるんですけど、これがないと、仕事する気がしません。

テキスト生成パネル「PI_TextGenerator」の機能

テキストデータから、改行やタブをもとに、複数のテキストオブジェクを生成します。
複数行や、タブ区切りによる行列データにも対応しており、一発でテキストオブジェクトを生成できます。

用途

デザイン作業の下準備として

Fireworksでデザインを行うときは、通常は、ワードなり、エクセルなりの
原稿データから、テキストをひとつひとつコピペしていくと思いますが、
このパネルを使用すれば、そんな不毛な作業から開放されます。一発です。

グラフや図案の下準備として

エクセルデータで使用したいセルをコピーし、パネルの入力エリアにペースト・実行すれば、
個々のセルのテキストが、個々のテキストオブジェクトとして生成されます。

プロジェクトの下準備・思考の手助けとして

メール、ウェブ、PDF、パワポなどなど、いろんな資料がやってきますよね。
重要なデータもあれば、たいして重要でなかったり、一部だけ重要だったり、
いろんな人がつくったデータがやってきます。

昔は、プリントアウトして、赤線引いて、、という具合にアナログにそれらを整理して、
プロジェクトに対する理解を深めていましたが、
このパネルを使うと、FWにテキストデータをもっていくというハードルが下がるので、
FW上で、いったん、自分なりに資料を再構築するのが、簡単になります。

結果的に、プロジェクトに対する理解度が深まり、バラバラなデータ形式という、
テクノストレスから開放され、自分の一番なじんだツール(FW)で、俺資料を作れます。

日々のメールでも

日々のメールでも、いろいろ用件が書いてる場合は、
いったん、このパネルで、FWにもっていって、構造的に整理しながら、読んでます。
参考URLがあれば、スクリンショットとって、縮小して、ドキュメントに配置したり。
（2～30行以上のメールは、いつもこうやってリアルタイム整理ながら読んでます）

ScreenShot

パネル解説

細かい仕様

  • テキストオブジェクトは、現在選択されているオブジェクトの少し下に追加されます。なにも選択していない場合は、左上を原点として、作成します。
  • テキストオブジェクトの置き換えは、オブジェクトのレイヤー順にそって、置き換えられます。
  • 「in」ボタンで現在選択されているテキストを取得できますが、選択するテキストの合計文字数がおおいと、取得できません。

ビデオチュートリアル

実際の使用方については、こちらにて確認できます。

※音無し、キャプション説明なしで、しかもせわしないです。すいません。

ダウンロード


MXPファイルになってますので、ダウンロード後、「PI_TextGenerator.mxp」をクリックすれば、
EXTENSION MANAGERが起動し、インストールできます。

起動方法

インストール後、Fireworksを再起動。
メニュー [ ウィンドウ > PI_TextGenerator ]で起動します。

対応バージョン

FireworksCS4以上です。Macは未検証ですが、たぶん動きます。
動かんかったら教えてください。

以上です。
Fireworksってしぶといですよね。
このまま中途半端な立ち位置のまま、いくんでしょうね。
]]> DrawTweet AIRバージョンで、ローカルPC内の写真でビジュアル生成 tag:www.pixelimage.jp,2011:/blog//1.152 2011-01-07T14:17:43Z 2011-01-07T14:58:25Z DrawTweetのAIRバージョンをつかって、 自分の写真で、ビジュアルを生成してみました。 tanaka
DrawTweetのAIRバージョンをつかって、
自分の写真で、ビジュアルを生成してみました。
つぶやきビジュアライザ"DrawTweet AIRバージョン"

入力画像

データソースに、以下の画像を配置したPC内のディレクトリを指定しました。
（新婚旅行でいったオーストラリアの写真です）

出力画像

オートセーブ機能をつかえば、大量にビジュアルが吐き出されますが、
とりあえず、てきとうに4つ選らんでみました。





こっぱずかしいので、自分がうつってる写真などは抜いてますが、
子供の写真などを使うと、とても素敵なビジュアルが生成されます。


以上です。

DrawTweetシリーズは、これでしばらく打ち止めにしますが、
こうゆうオートレイアウト系は、結構、面白かったので、
また、別の形で表現できればと、なんとなく考えてます。
]]> Draw Tweet 関連エントリー
]]>