The Degrafa team has posted a new build with iFill support, which is a big step for Flex 4 Degrafa support. Previously, fills weren’t working at all in Flex 4, rendering degrafa nearly useless. The preliminary build is available on Degrafa’s google code page.
The demo itself is fairly simple, and if you were building this particular button, you’d probably just want to use the new spark drawing tools. You’d want to use degrafa if you had more complex fills, or other effects you couldn’t achieve with just the Spark Drawing api alone.
I’ve renamed and moved my blog to better represent the type of content I’ll be posting here. Since starting at Roundarch as a Flex Styler, I’ve moved my forcus towards all things related to the visual appearance of RIA’s. So expect to see more tutorials relating to styling and skinning, degrafa, and the new features in flex 4. I’m sure there will also be a few things on HTML and whatever other random nerdy stuff I feel like posting about.
Also, speaking of name changes, I got married last May, and I’m finally getting around to changing my name everywhere. So Sarah Plowright == Sarah Forst. Hopefully the transition will go smoothly!
Since Flex 4 is now out, and I spend a lot of time working with degrafa, styling RIAs – I thought it was time to give Degrafa a try in Flex 4 skins, and made a simple demo using the new spark Button.
Unfortunately, it seems that there are some compatibility issues with Degrafa fills in Flex 4, so I was unable to get those working, but the demo below demonstrates over, down and disabled states in a simple button skin (using strokes, because of the issues with fills).
The new Flex 4 components have a parameter “skinClass” which you can use to specify which skin file to use. Flex will default to spark.skins.spark.ButtonSkin, but that’s a bit heavy for what we’ll need here. I prefer to use the simpler and lighter weight base class spark.components.supportClasses.Skin.
So to create your button, in your main application file, write:
We’ll then need to make the skin class file. Create a new “MXML Skin”. Uncheck “Create as a copy of”. It’s also a good idea, for organizations sake, to specify a package. I use my namespace “com.actionscriptgirl” + .skins. – you may want to use “com.yournamespace.skins”.
Inside the skin file, make sure you add a Label, or your text will not render. As part of the skin changes in Flex 4, the label of a button is now rendered by it’s skin, rather than the button itself. This gives you a great amount of control over the label’s rendering, which is awesome, the designers I work with love to put gradients on their text, which isn’t the simplest thing to implement, especially as a global reusable style.
At the very least, you’ll want your label to be:
1
<s:Label id="labelDisplay" />
Then add your degrafa elements, in the skin file, as normal, inside a degrafa Surface – see the source for details.
The error Degrafa throws when you try to use fills in Flex 4, if you’re curious, is: Error #1053: Illegal override of SolidFill in com.degrafa.paint.SolidFill. (and something similar for the LinearGradientFill). I’ll need to look into that more, to figure out if it’s something I’m doing, or something in Degrafa.
I usually create my animated buttons skins in the Flash IDE (keeping them to a minimum). However, as I recently learned that there’s a CPU usage problem with skins created using the Flex Skinning Extensions in Flash (http://patrickhansen.com/blog/index.php/2009/03/05/flex-stateful-skins-vs-stateless) , I wanted to avoid using flash to create my animations. The skin itself was easily created in degrafa, but the animations proved much trickier to implement. Using flex spy, I noticed that Flex was auto-magically creating multiple copies of the skin for me, despite my only specifying the skin using the “skin” style name (no “downSkin”, “overSkin” … etc was specified). I didn’t really want all these extra copies of the skin – and to be honest, I’m not really sure why flex is creating all these extra programmatic copies – a good programmatic skin should be able to handle all the states in one file, you shouldn’t be writing multiple skins for the multiple states. So I dug into the Button code to find out why it was creating all these duplicate skins for me.
What I found was that the Button class sets a flag ‘defaultSkinUsesStates’ which it uses to determine whether or not it creates these duplicate states. If this flag is true, it doesn’t create the extra skins, if it’s false it does.This flag is set in the ‘viewSkinForPhase’ function, and evaluates to true if the skin does not implement IProgrammaticSkin and does implement IStateClient. Generally, my programmatic skins implement IProgrammaticSkin, whether they’re written from scratch or extend another class. In this case, I was using Degrafa, so my base class was GraphicProgrammaticSkin. I tried switching this to GraphicBorderSkin, with no luck, apparently this also implements IprogrammaticSkin. What ended up working in the end was making the base class a Canvas. I’m not entirely sure this is the best choice, but it’s what’s currently working. Eventually, I think I’ll need to create a lighter base class to use in these cases.
This weekend, my husband asked for my help creating a book of his work in iPhoto. He wasn’t really happy with any of the available themes, liking the cover / back from one theme, but the inner layouts from another. I did some digging, and creating new themes is surprisingly easy.
What you’ll want to do is find your themes in:
Your Hardrive → /Library/Application Support/iPhoto/Themes
(You’ll probably want to create a duplicate/back up of this folder just in case you mess anything up.)
Choose the theme that’s closest to what you already want to use, and create a duplicate of this folder. You can rename this folder, keeping the .IPBookTheme at the end of the folder name.
Inside this folder, you’ll find a number of .plist you’ll want to edit the Localizable.string in English.lproj or any other Language.lproj folder to reflect the new theme name.
ThemeName = “My New Theme Name”;
You’ll then want to update Implementation.plist to include all the page layouts / colours etc you want to include – it’s an xml file and pretty straightforward. You can grab the other page layout names / etc from other theme’s Implementation.plist files.
If you want to update the pagelayout settings themselves, you can edit these in DesignPrototype.plist.
Once you’ve made all the changes you want, you’ll need to clear iPhoto’s theme cache. You can do this in <username>/Pictures/iPhoto Library
Right click on iPhoto Library and select “Show Package Contents”. You’ll want to back up the ThemeCache, just in case anything goes wrong, then delete the existing ThemeCache, and restart iPhoto. Your new theme should now show up!
I am in love with stackoverflow.com. It’s a programming wiki / forum-y thing from the same guy who wrote Joel on Software… and um, some other dudes. Anyway, check it out, it’s in desprate need of other actionscript nerds.
The bottom text has rotationX set to 360, while the top has no transformations applied.
On a recent project, I used the new 3D properties available in flash player 10 for some very simple 3D effects. Unfortunately, I ran into some issues with text quality, where any text in an object with a 3D transformation applied became a bit blurry – it looked a bit like the old text on a half pixel bug – and I was worried I was having some sort of FP7 flashback or something;) What I was doing, was rotating a movieclip wtih some text in it. At the end of the rotation the movieclip was back to it’s original position – I checked to make sure the rotationX, rotationY, rotationZ, and z properties were all zero in case my tweens were doing something weird, but this wasn’t the case.
Anyway, I eventually figured out that the issue was coming from the 3D transformation. The first fix I tried was to set the object’s matrix3D (a property of a DisplayObject’s transform property) property to a new Matrix3D object, or to null. Setting the matrix3D to a new Matrix3D object did not fix the issue, the text remained blurry. Setting the matrix3D to null also repositioned the movieclip back to 0,0. So the solution is fairly simple, just store the x and y values, then set the matrix to null, and then reset the x and y values.
1
var position:Point = new Point(myMC.x, myMC.y);
1
myMC.transform.matrix3D = null;
1
myMC.x = position.x;
1
myMC.y = position.y;
Of course, if you want 3D effects and non blurry text, you might be out of luck… unless anyone else has a better solution?
I’m working with the AS3 Flickr API created by Adobe for a presentation for work, and I’m finding it really frustrating. For starters, it really doesn’t seem to match up very well with the Flickr API documentation. In particular, I’m using the search function in
1
flickr.Photos
, and for some reason, they way Adobe wrote the search function, it only accepts one license, as a
1
number
, while Flickr’s documentation states that you can pass multiple licenses as a comma delineated
1
String
. I’m not sure why Adobe would want to remove functionality from the API, when it’s so simple to add back in. All I had to do was change the
A friend of mine, who is an excellent Flex developer, asked me about this bug the other day. It’s something you’ll only encounter in the Flash IDE, so if you mainly work in Flex, it’s it’s a bit of a stumper.
Remember in AS2 how if you drew a MovieClip on the stage, you had to
also declare a variable of the same name in your custom class? Well,
in Flash CS3 / AS3, Adobe has decided to give us developers some
options. The only problem is, they didn’t make it exactly obvious that
the change was made, so you may be getting all sorts of nasty errors,
and wondering why you ever decided to build that project in Flash
instead of Flex.
So if you’re getting errors along the lines of “1151: A conflict
exists with definition myMC in namespace internal.” and you’re working custom classes attached to library objects with instances, the error is probably caused by the fact that you have “Automatically declare stage instances” checked. This checkbox is located under Publish Settings > Flash > ActionScript 3.0 Settings. If it’s checked, flash will automatically add variables to your class at compile time. If you already have tried to declare a variable in your class for this instance, the compiler will throw error 1151, as you will now have two declarations of the same variable.
The fix is easy, simply decide whether or not you want flash to create your variable names for you. I personally prefer to declare my own stage instances as I believe it’s a better practice to have all your variables listed at the top of a class, but annoyingly, this means I will have to uncheck the “Automatically declare stage instances” checkbox for every new fla, as unfortunately this option only seems to be available under publish settings, and not available under the application preferences.
Also note that you’ll need to make your instance declarations public, or they won’t work!
