Stroep

Just a collection of random works – Mark Knol

Archive for 'JSFL'

JSFL dialog (2)

December 1st, 2011, under Code snippets, JSFL.

JSFL DialogWhile playing with JSFL and trying to create a faster interface for my name it right.jsfl I stumbled across a very interesting function inside JSFL. There is a powerful function called fl.getDocumentDOM().xmlPanel which shows dialogs using .xml-files. Actually you could use XUL (XML User Interface Language), which kinda looks like a mix of HTML and Flex. If you need a GUI for your JSFL script, you can open a nice custom dialog using XUL.

Why create tools inside a tool?

Yes, the Flash is a very nice IDE. But with JSFL you can extend it. You can build your own snippets and tools. It could be very helpful to automate some boring things. I think it is very powerful to have the ability to extend your environment for your everyday tasks.

Show a dialog with JSFL

Create a dialog file
This is an example of XUL. Save it as test-dialog.xml in your local commands folder.

<dialog title="JSFL dialog" buttons="accept, cancel">
  <vbox>
    <label control="myTextfield" value="Enter some text"/>  
    <textbox id="myTextfield"/>
    <label control="myColor" value="Choose a nice color"/>  
    <radiogroup id="myColor">  
      <radio label="Orange"/>  
      <radio selected="true" label="Violet"/>  
      <radio label="Yellow"/>  
    </radiogroup>  
  </vbox>
</dialog>
 

Open the dialog with JSFL
Save it as test-dialog.jsfl in the same folder as the .xml file.

// xmlPanel returns an Object with values of the dialog.
var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(fl.configURI + "/Commands/test-dialog.xml");

if (xmlPanelOutput.dismiss == "accept") // user confirms dialog
{
  fl.trace("myTextfield: " + xmlPanelOutput.myTextfield);
  fl.trace("myColor: " + xmlPanelOutput.myColor);
}
else // user canceled dialog
{
 
}
 

Run it by clicking ‘Commands’ > ‘test-dialog’ in Flash; our custom dialog will show up. Nice! :D

Give me more; I want dynamic dialogs

If you check out the documentation of fl.getDocumentDOM().xmlPanel, you see you only can pass a uri to a xml file, but there is no way to pass a XML or Object to it. Adobe if you read this post; that would be nice. But I found a hack to create a dialog from JSFL by dynamically create a XML and save it as temporary file and open that one as xmlDialog. The file will be removed after showing the dialog.

function showXMLPanel(xmlString)
{
  var tempUrl = fl.configURI + "/Commands/temp-dialog-" + parseInt(777 * 777) + ".xml"
  FLfile.write(tempUrl, xmlString);
  var xmlPanelOutput = fl.getDocumentDOM().xmlPanel(tempUrl);
  FLfile.remove(tempUrl);
  return xmlPanelOutput;
}

This function displays a dialog from a (xml) string and returns the values like you would expect from the xmlPanel-function. You could use a XML object for this too, but I think it’s easier to hack some variables into it or make templates with strings.

// create an XUL with JSFL
var dialogXML = ”;
dialogXML += ‘<dialog title="JSFL dynamic dialog" buttons="accept, cancel">’;
dialogXML +=   ‘<hbox>’;
dialogXML +=     ‘<label value="Enter 2x something"/>’;
dialogXML +=     ‘<textbox id="myText1" value=""/>’;
dialogXML +=     ‘<textbox id="myText2" value=""/>’;
dialogXML +=   ‘</hbox>’;
dialogXML += ‘</dialog>’;

var xmlPanelOutput = showXMLPanel(dialogXML);
if (xmlPanelOutput.dismiss == "accept") // user confirms dialog
{
  fl.trace("myText1: " + xmlPanelOutput.myText1);
  fl.trace("myText2: " + xmlPanelOutput.myText2);
}
else // user canceled dialog
{
 
}
 

Since you are dealing with strings, you can manipulate and add extra elements. This allows you to pass data from JSFL to your dialog.

So, can you make panels too?

I really hate custom panels, because I never get my workspace right for two screens (moving/closing/opening panels the whole day), so there is no room for other panels. I start loving JSFL-scripts because you can assign a shortcut-key to it, which runs the tool, without having a panel in my workspace.

Conclusion

I like to create handy snippets and will share more in the future. But if you thought (just like me) this is some kind of a new feature: It’s not. :) Let me know if you have some nice references or JSFL scripts to share.

Learn more:

Tagged with , , .

Handy Flash IDE tool: Name it right.jsfl (0)

November 28th, 2011, under JSFL.

I have created a JSFL script for those who are using the Flash IDE a lot. Renaming movieclips over a timeline with motion-tweens cost a lot of time. Assigning and replacing classes to a certain movieclip could also be done faster, and mostly name of the symbol relates to the names on stage. I have created a 3-step wizard called ‘name it right!’, to speed up your everyday workflow. This command helps you to update a layer name, base class, symbol name and instances on the timeline very fast.

Download/Save the .jsfl file directly:
ยป Name it right.jsfl (v1.1)

To indicate what happens when you run the command/script:

First select an instance on stage. Go to ‘Commands’ > ‘Name it right!’.
You’ll get these three questions.

  • 1/3 Rename library symbol name?
    • Enter the new symbol name in the prompt.
    • When you have selected ‘Export voor ActionScript’, it will automatically fill the ‘Class’ according this convention: ‘fileName.SymbolName’.
  • 2/3 The library symbol already has a base class, change it?
    • Enter the new base class in the prompt.
    • If there is no base class defined, it will turn on ‘Export voor ActionScript’ and fill ‘Class’ as mentioned above.
  • 3/3 Rename instance name across timeline?
    • This renames a movieclip instance on the complete timeline. It does not matter if there is a motion-tween on it. You only need to insure there is only one clip on that layer. Otherwise it will give you a note.
    • It will give you a name suggestion based on you Symbol name, like ‘mcSymbolname’

    • Cancel means: do nothing.

    Install / use the JSFL script

    To get it inside the Flash IDE under ‘Commands’, copy the .jsfl file to:

    Windows 7
    C:\Users\{username}\AppData\Local\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands

    Windows Vista:
    C:\Users\{username}\Local Settings\Application Data\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands

    Windows XP:
    C:\Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands

    Mac OS X:
    C:/Users/{username}/Library/Application Support/Adobe/Flash CS5 or CS5.5/en_US/Configuration/Commands

    Run it by clicking the ‘Name it right!’ under ‘Commands’.

    You could assign a key-combination under ‘Edit’ > ‘Keyboard shortcuts’ and then expand the ‘commands’-folder. I used CTRL-ALT-SHIFT-W for it.

    Hope you could use it, post your feedback/suggestions below.

    Tagged with , , .