Semi-automatic creation of forms for Adobe Flash, based on Adobe Photoshop files
As many flashers know (and not only), creating a simple form based on png resources is not difficult in principle, but what if these forms are constantly changing, correcting and breeding like mushrooms after a rain?
What to do?
And we will do this.
We will turn the psd file into an interactive form, with which you can already work very transparently and not worry about coordinates and other design things.
')
The basic idea is not new and was highlighted for example here:
Export user interface from Photoshop
I just expand it to almost automatically get the result.
The algorithm is as follows:
Generally speaking, quite a lot we can do while parsing a .PSD file, for example, spaces at the beginning and at the end of the layer name, spaces in the layer name, Cyrillic in the layer name, etc.
Now I am talking only about the rules, subject to which we will get a form with minimal functionality.
We will do this form:
Let's start at the top:
Please note that the markers themselves can not be unloaded, since the data about them is in .XML, although I am unloading them now.
Notice that the states for two radioButton and Button, respectively, have the same name, and the sets themselves are different. This means that during the upload we will receive 2 radioButton and, accordingly, Button, in XML form, but the resources for them will be in a single copy, which is important!
Everything else can be called whatever you like, but it’s better to sort it out somehow, that's why I call them 'decor_ + anything'
But in general, that's all by the rules.
Why python? Because everything that can be automated, I do on it. I did not use Gimp + python, because Gimp does not support folders (set), and in them, so to speak, all salt. I did not use javaScript, from my own, reasonably hard reasoned arguments (but it can be said because of speed). As a result, I settled on the COM technology. Details in the source. And in a nutshell, it turned out that due to the fact that the Photoshop GUI is updated when its scripts are working, and through COM you can simply hide Photoshop and then the speed increases noticeably.
With the help of a simple JSFL script I pack everything .PNG into a convenient .SWC
Attach the library to the project, be sure to set in the properties of the library 'Includet library'.
Three classes are used to display the form.
Create a file, for example, psd_parser_habr.bat
write to it
We put it in a safe place. Create another “Open with help” link for .psd files, and specify psd_parser_habr.bat as the program to open. Now you can open any .PSD file with this batch file, and get resources from it in the form of .SWC and .XML
I did not give any code here, due to the fact that it is in the project, there are several nuances, but they, too, are listed in the project.
For those who are too lazy to write, they can take the code from the source, others, it’s enough idea.
You can still talk a lot on this topic, criticize the code, and the approach, 'centralize' the settings of this whole zoo, and so on and so forth. And surely it will be so, but the purpose of this note is only to show, as with minimal means, to get quite a good result.
That's all. Result.
Download Project on FD4 with Google Docs
UPD. In order to avoid nuances modified art.
What to do?
And we will do this.
We will turn the psd file into an interactive form, with which you can already work very transparently and not worry about coordinates and other design things.
Used programs
- Adobe Photoshop CS5.5
- Adobe Flash Professional CS5.5
- python 2.6-2.7
- FlashDevelop 4.0.1 RTM
')
Idea
The basic idea is not new and was highlighted for example here:
Export user interface from Photoshop
I just expand it to almost automatically get the result.
The algorithm is as follows:
- The designer does anything to his bright soul with the file, but adheres to some rules for naming and structuring layers.
- The programmer gets this file, passes it through the parser, and eventually gets the .XML and .SWC files
- Connects .SWC and .XML to the project (if this is not the first time, then everything is already connected to the project)
Read more
Photoshop. Rules for naming and structuring layers.
Generally speaking, quite a lot we can do while parsing a .PSD file, for example, spaces at the beginning and at the end of the layer name, spaces in the layer name, Cyrillic in the layer name, etc.
Now I am talking only about the rules, subject to which we will get a form with minimal functionality.
We will do this form:
Let's start at the top:
- text_custom_cursor is a layer in which there is a marker for the text, later on by this name we will get access to the marker and on the basis of its geometric characteristics we will create a text field.
- text_sound_on_off - similar to the first layer.
Please note that the markers themselves can not be unloaded, since the data about them is in .XML, although I am unloading them now.
- radio_set_cursor - the folder (set) which in the depths of AS3 will turn into radioButton
then there are layers with “talking” states
radio_on
radio_off
radio_fon - radio_set_sound
radio_on
radio_off
radio_fon - button_set_1 - folder (set) which in the depths of AS3 will turn into Button
then there are layers with “talking” states
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
Notice that the states for two radioButton and Button, respectively, have the same name, and the sets themselves are different. This means that during the upload we will receive 2 radioButton and, accordingly, Button, in XML form, but the resources for them will be in a single copy, which is important!
Everything else can be called whatever you like, but it’s better to sort it out somehow, that's why I call them 'decor_ + anything'
But in general, that's all by the rules.
Python. Upload to .XML and .PNG
Why python? Because everything that can be automated, I do on it. I did not use Gimp + python, because Gimp does not support folders (set), and in them, so to speak, all salt. I did not use javaScript, from my own, reasonably hard reasoned arguments (but it can be said because of speed). As a result, I settled on the COM technology. Details in the source. And in a nutshell, it turned out that due to the fact that the Photoshop GUI is updated when its scripts are working, and through COM you can simply hide Photoshop and then the speed increases noticeably.
Jsfl. Packing it all in .SWC
With the help of a simple JSFL script I pack everything .PNG into a convenient .SWC
Attach the library to the project, be sure to set in the properties of the library 'Includet library'.
SWF. Form upload
Three classes are used to display the form.
- Form.as - Actually form
- InteractiveContainer.as - An interactive container that parses the layer name and creates the appropriate, interactive or not, element
- ResourceLoaderFromForm.as - a graphics uploader from a library or, as an option, by URL
BAT. Automating
Create a file, for example, psd_parser_habr.bat
write to it
@echo off
cls
python D:\main\FlashDevelop\habraForm\python\psd_parser.py %1
D:\main\FlashDevelop\habraForm\python\export_in_swc.jsfl
We put it in a safe place. Create another “Open with help” link for .psd files, and specify psd_parser_habr.bat as the program to open. Now you can open any .PSD file with this batch file, and get resources from it in the form of .SWC and .XML
I did not give any code here, due to the fact that it is in the project, there are several nuances, but they, too, are listed in the project.
For those who are too lazy to write, they can take the code from the source, others, it’s enough idea.
You can still talk a lot on this topic, criticize the code, and the approach, 'centralize' the settings of this whole zoo, and so on and so forth. And surely it will be so, but the purpose of this note is only to show, as with minimal means, to get quite a good result.
That's all. Result.
Download Project on FD4 with Google Docs
UPD. In order to avoid nuances modified art.
Source: https://habr.com/ru/post/138559/
All Articles