Adobe Photoshopファイルに基づいたAdobe Flash用のフォームの半自動作成

多くのフラッシャーが（知っているだけでなく）pngリソースに基づいた単純なフォームを作成することは原則として難しくありませんが、これらのフォームが雨の後のキノコのように絶えず変化、修正、増殖している場合はどうでしょうか？

どうする



そしてこれを行います。

psdファイルをインタラクティブな形式に変換します。これにより、既に非常に透過的に作業でき、座標やその他の設計事項について考える必要はありません。

使用済みプログラム

• Adobe Photoshop CS5.5
• Adobe Flash Professional CS5.5
• python 2.6-2.7
• FlashDevelop 4.0.1 RTM

アイデア

主なアイデアは新しいものではなく、ここで例として取り上げました。

Photoshopからユーザーインターフェイスをエクスポートする

それを拡張して、ほぼ自動的に結果を取得します。

アルゴリズムは次のとおりです。

• デザイナーは、自分のファイルを使用して、彼の明るい魂に何でもしますが、レイヤーの命名と構造化に関するいくつかのルールを順守します。
• プログラマはこのファイルを受け取り、パーサーを介して渡し、最終的に.XMLおよび.SWCファイルを受け取ります。
• .SWCと.XMLをプロジェクトに接続します（初めてでない場合は、すべてが既にプロジェクトに接続されています）

詳細

フォトショップ レイヤーの命名と構造化のルール。

一般的に、.PSDファイルの解析中に非常に多くのことができます。たとえば、レイヤー名の先頭と末尾のスペース、レイヤー名のスペース、レイヤー名のキリル文字などです。

ここでは、ルールについてのみ説明します。その後、最小限の機能を備えたフォームを取得します。

このフォームを実行します。







上から始めましょう：

• text_custom_cursor-これはテキストのマーカーが存在するレイヤーです。この名前で後でマーカーにアクセスし、その幾何学的特性に基づいてテキストフィールドを作成します。
• text_sound_on_off-最初のレイヤーに似ています。

マーカー自体はアンロードできないことに注意してください。マーカーに関するデータは.XMLにあるためです。ただし、現在はアップロードしています。

• radio_set_cursor -AS3の深さでradioButtonに変わるフォルダー（セット）
  
  さらにその中には「話している」状態の層があります
  
  radio_on
  
  radio_off
  
  radio_fon
• radio_set_sound
  
  radio_on
  
  radio_off
  
  radio_fon
• button_set_1 -AS3の腸内でButtonに変わるフォルダー（セット）
  
  さらにその中には「話している」状態の層があります
  
  b_1_up
  
  b_1_over
  
  b_1_down
  
  b_1_fon
  
  
• button_set_2
  
  b_1_up
  
  b_1_over
  
  b_1_down
  
  b_1_fon
  
  

2つのradioButtonとButtonの状態はそれぞれ同じ名前であり、セット自体は異なることに注意してください 。 これは、アンロードすると、それぞれ2つのradioButtonとButtonがXML形式で取得されることを意味しますが、それらのリソースは単一のコピーになります。これは重要です！



他のすべては好きなように呼び出すことができますが、なんとか整理する方が良いです。だから私はそれらを「decor_ +何でも」と呼んでいます。



それは基本的にすべてのルールです。

Python .XMLおよび.PNGへのアップロード

なぜpython？ 自動化できるものはすべてその上で行われるからです。 Gimpはフォルダー（セット）をサポートしていないため、Gimp + pythonを使用しませんでした。 私は自分自身のjavaScriptを使用しませんでしたが、かなり理由のある考慮事項があります（ただし、速度のためと言えます）。 最終的に、私はCOMテクノロジーに落ち着きました。 ソースの詳細。 一言で言えば、PhotoshopのGUIがスクリプトの動作中に更新されるという事実により、COMを介してPhotoshopを非表示にすると、速度が著しく向上することがわかりました。

JSFL。 すべてを.SWCにパックする

簡単なJSFLスクリプトを使用して、すべての.PNGを便利な.SWCにパックします

ライブラリをプロジェクトに添付します。ライブラリのプロパティで「Includet library」を設定してください。

SWF フォームの読み込み

フォームの表示には3つのクラスが使用されます。

1. Form.as-フォーム自体
2. InteractiveContainer.as-レイヤーの名前を解析し、対応するインタラクティブな要素またはそうでない要素を作成するインタラクティブなコンテナー
3. ResourceLoaderFromForm.as-ライブラリーからの、またはオプションとしてURLによるグラフィックのローダー

BAT。 自動化

ファイル（ psd_parser_habr.batなど）を作成します

それに書きます

@echo off

cls

python D:\main\FlashDevelop\habraForm\python\psd_parser.py %1

D:\main\FlashDevelop\habraForm\python\export_in_swc.jsfl









安全な場所に置きます。 .psdファイル用の別の「開く」リンクを作成し、開くプログラムとしてpsd_parser_habr.batを指定します。 これで、このバッチファイルで任意の.PSDファイルを開き、そこから.SWCおよび.XMLの形式でリソースを取得できます。



ここにはコードがありません。プロジェクト内にあるため、いくつかのニュアンスがありますが、それらはプロジェクト内でもペイントされています。

自分で書くのが面倒な人は、ソースからコードを、他の人は十分なアイデアを得ることができます。



あなたはまだこのトピックについて多くのことを議論し、コードとアプローチを批判し、このすべての動物園とその他の設定を「集中化」することができます。 確かにそうなりますが、このメモの目的は、最小限の手段で、自分自身に良い結果を得る方法を示すことだけです。



それだけです。 結果。





GoogleドキュメントからFD4のプロジェクトをダウンロードする

UPD。 ニュアンスを避けるために、修正されたアート。