Text effects (think Kerning) and animations

  • 發行項

With Expression Blend RC1 (if you have not gotten that yet, you should – there are some very cool samples in there – get it here), we “unknowingly” enabled a few scenarios that are cool. For our v1, we really wanted to support these scenarios using a richer design surface and were disappointed when we ran out of time. However, for the brave-hearted, you can still do some cool things around typography.

For example, take letter-pair kerning and tracking. Here is how you could do this in Blend.

1) Create a new Project (File -> New Project) and save it to some location

2) Draw a TextBlock using the tool-bar and type some type text – say “Text” and switch back to the selection tool.

3) In the property grid, search for “TextEffects”. Increase the font size and change the font family to something interesting.

4) For this property, bring up the collection editor. Now you are ready to add a custom text effect.

5) Click the “Add” button this will add a new effect.

6) For the PositionCount property, use 1 as the value. This means that you want to edit one character at a time as opposed to a range.

7) For the PositionCount property, use 1 as the value. This means that you want to offset the 2nd character (as most of the things in .Net, this is 0 based).

8) Now use the transform editor to translate the character as you want!

If you have dual monitors, you can move the collection editor to the secondary monitor and you will see that any changes you make to the modal collection editor and updated on the design surface in real-time, which is pretty cool.

While editing using the collection editor is not ideal (and something we would like to fix in the future), this is such a specialized editing operation that I think people will sacrifice the editing convenience for the coolness of the feature (at least for the time beingJ). It does not end there – you can arbitrarily transform each character like rotate them or scale them. You can also animate these effects so you can do effects like “characters falling from the sky”. Try it out and give us some feedback.

Comments

  • Anonymous
    May 09, 2007
    Hi Unni... i have tested the last Blend build... looking foward to grab more news about the product... I must admit... XAML is SO impressive... the possibilities, the controls surrounded... it's not just amazing but it's incredible powerfull.

  • Anonymous
    May 23, 2007
    Hey Unni, nice to see this exposed now through Blend Interface. I have been trying to animate the effect of kerning whilst the TextBox scales the Text seems to shimmer and shake in the animation. I have a sample I can send to you if you wanted to see the effect. Any thoughts on how I can get around this? Many thanks Stuart