Part of our 360Flex Presentation was supposed to include some tips & tricks, but we ran out of time. Here’s a couple simple things I might do when creating a set of skins or a theme for a Flex project.
Tip #1
When using SWFs for skinning, add the symbol name as a selectable text object to allow for quick copy and paste reference. I find this really helpful when handing a SWF over to developers, because it saves them time from having to open the FLA or manually type in the names of symbols.
It’s really easy to do. If you’re using Flash, just add text next to a symbol and fill in the name. When the text is added it will default to Static Text, which is fine. To make it selectable, just click on the selectable text toggle button.
When you publish your SWF all the text you made selectable can now be easily copied and pasted from the opened SWF. Here’s a screenshot of an example I did for Shilliber :
Screenshot of missing slide
Tip #2
Another thing I’ll do is create a set of skins just for use as backgrounds. I usually create a background as a 30 x 30 pixel square and then set 9-slice grids to allow it to stretch correctly.
Then in my CSS file I create the background classes like this:
/*
//——————————
// Backgrounds
//——————————
*/
.lightGreyBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”lightGrey_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
.darkGreyBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”darkGreyShadow_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
.linesBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”lines_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
.centerLightGreyBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”centerLightGrey_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
Depending on the use of the background skin I’ll use either the backgroundImage or borderSkin style properties. This works great for backgrounds of VBox, HBox, Canvas, etc.
Screenshot of missing slide
Tip #3
When working on a project I try to keep my CSS file as clean as possible. The less scrolling and edits I have to make, the better. One trick I use is something I got from working with CSS for HTML, grouping items with common properties using comma delimitation.
For example, let’s say you have a group of 4 Buttons. All have the same fillColors, fillAlphas, fontFamily, borderColor, cornerRadius, etc. The only difference between them is they each have a different icon.
You could do it like this:
/*
//——————————
// Blue Buttons
//——————————
*/
.arrowBttn, .starBttn, .checkBttn, .xBttn {
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.arrowBttn {
upIcon: Embed(source=’images/arrowUp.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.starBttn {
upIcon: Embed(source=’images/star.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.checkBttn {
upIcon: Embed(source=’images/check.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.xBttn {
upIcon: Embed(source=’images/x.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
That can create a pretty bloated CSS file over time. Rather than specify the same common properties for each Button 4 times, you can group the common properties together under the applicable style classes and then re-specify each class separately for properties that are not common. Like this:
/*
//——————————
// Blue Buttons
//——————————
*/
.arrowBttn, .starBttn, .checkBttn, .xBttn {
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.arrowBttn {
upIcon: Embed(source=’images/arrowUp.png’);
}
.starBttn {
upIcon: Embed(source=’images/star.png’);
}
.checkBttn {
upIcon: Embed(source=’images/check.png’);
}
.xBttn {
upIcon: Embed(source=’images/x.png’);
}
Not only have you eliminated 20 lines of code, but if you ever want to change a property of your Buttons, you only have to do it in one place. This is something that could have been easily used with Tip #2.
Screenshot of missing slide
If anyone else has any tips to share, let me know.
