0

I'm working on a Flash WindowSWF Panel (extension/tool as a plugin for Flash) and using components as a quick UI solution. Is there a way to get the ui components to look like the Flash IDE interface? I'm using Flash CC with the Dark theme.

Tony Coculuzzi
  • 55
  • 1
  • 6

1 Answers1

1

You could use any graphics editing applications to create the UI for your SWF panels. I have used Flash which keeps file size down, but it is a bit more work to create super appealing UI's with it. I use Photoshop to create the UI for all my panels. The file size will be a lot larger due to the nature of using bitmaps. At the end of the day it all boils down to preference of tools. As for creating a UI that looks like the new Dark UI Theme from Flash Pro CC you are in luck. Adobe added a few new JSFL API's to get the theme color parameters.

fl.getThemeColorParameters()

You can then use fl.getThemeColor() to get the value of each parameter.

I just whipped up a quick script to loop through all of the parameters and trace out the information:

// Trace Flash Pro CC Theme Color Parameter Information - Andrew Doll

var dom = fl.getDocumentDOM();
if (dom == null)
{
    alert('Please open a file.');
}
else
{
    fl.outputPanel.clear();

    var themeColorParameterArray = fl.getThemeColorParameters();

    for(var parameter in themeColorParameterArray)
    {
        var parameterValue = fl.getThemeColor(themeColorParameterArray[parameter]);
        fl.trace(themeColorParameterArray[parameter] + ": " + parameterValue);
    }
}

When this code is run in Flash Pro CC with the Dark UI Theme you will see this traced out in the output panel:

themeAppBackgroundColor: #424242
themeItemSelectedColor: #515151
themeItemHighlightedColor: #393939
themeHotTextNormalColor: #C69100
themeHotTextRolloverColor: #C6AC63
themeHotTextDisableColor: #686868
themeStaticTextNormalColor: #FFFFFF
themeStaticTextDisableColor: #686868
themeTextEditNormalBackgroundColor: #A0A0A0
themeTextEditDisableBackgroundColor: #646464
themeEnableShading: true
themeDividerLine: #000000
themeDividerLineBevel: #FFFFFF
themeControlFocus: #C69100
themeControlBorderNormal: #000000
themeControlBorderDisabled: #000000
themeControlFillTopNormal: #3B3B3B
themeControlFillBottomNormal: #555555
themeControlFillTopOver: #414141
themeControlFillBottomOver: #606060
themeControlFillTopDown: #303030
themeControlFillBottomDown: #2F2F2F
themeControlFillTopDisabled: #424242
themeControlFillBottomDisabled: #424242
themeControlFillTopSelectedOver: #484848
themeControlFillBottomSelectedOver: #373737
themeGenericIconNormal: #FFFFFF
themeGenericIconShadowNormal: #000000
themeGenericIconDisabled: #686868
themeGenericIconShadowDisabled: #686868
themeControlFillNormal: #484848
themeControlFillOver: #505050
themeControlFillDown: #303030
themeControlFillDisabled: #424242
themeControlFillSelectedOver: #404040
themeFontNameLarge: 
themeFontNameSmall: 
themeFontSizeLarge: 
themeFontSizeSmall:

Using these parameters and values you should be able to create a UI that fits in with the rest of the Flash Pro CC application. Good luck with your SWF Panel. I would be interested in seeing what it is.

andrewdoll
  • 146
  • 5
  • Thanks, this will be really helpful! I wish they provided a way to get the raw components, similar to how Unity allows you to use the Unity Editor skin when making editor extensions. Oh well, this'll definitely be of some help, thanks! – Tony Coculuzzi Oct 06 '13 at 07:51