Expression Blend – Facing Blend

Design view exceptions in Blend

Posted on September 11, 2009 by ARSpaulding

The last few days, there have been more visitors looking for answers as to how to make a design exception “go away” without having to run the project.

The solution to this is just simply to build your project (ctrl+shift+b). If you’d prefer to do it via the menu strip, click on Project->Build Project. You can also do a rebuild.

Now why would this occur? You might have a custom control instantiated into another xaml file, or development which has been updated that changes the visual elements, and sometimes you’re like me, applying something, and its just not showing. Heck, 2 days ago, I spent at least 5 hours banging my head up against a wall because I couldn’t get a custom control to actually show in the design view, there weren’t any exceptions either. It just wasn’t there.

I got to the point where I decided that perhaps I’d forgotten a step, so I popped into MSDN and started going through “Try It” sections.

… I discovered that all I needed to do was to rebuild, everything else that I was doing was correct. I rebuilt the project and vwalla – there it was.

Hopefuly I learned that lesson well enough to not encounter this particular “issue” again.

I hope this helps others who encounter the exception issues as well!

Creating a Simple Twitter Bird in Expression Blend

Posted on July 22, 2009 by ARSpaulding

Lately, I’ve been somewhat caught by the fun of creating a unique twitter bird for every project that I do which has twitter feeds. Twitter birds, can anyone think of anything more fun?

Ok, I’m sure you can, but I decided to kick off my tutorial section of FacingBlend with a fun and easy to create twitter bird done within Expression Blend 3.

Please click on the “More” below to view the entire tutorial

Blend 3's conversions from Photoshop

Posted on July 14, 2009 by ARSpaulding

I’ve been so caught up in what I’ve been working on that I’ve not really stopped to post much about my experiences with this newly released preview of the Expression Blend series.

Blend 3 has a whole lot of new shiny features. From the ability to see where the gradient stops are right ON the object itself as well as the ability to move them actively on that object, to the 3-axis 2.5D manipulation of objects for Silveright 3 – this new release to Blend is definitely one that’ll set someone off balance for a while to get used to the newer product.

There are 2 new features that I’d like to dedicate this post to. The ability to have blend directly consume Photoshop and Illustrator files.

I’ll start with photoshop and its importability. In some cases, I’ll pop into Photoshop for its flexibility and quickly design an interface or graphic. Blend still has a quirk where paths are being manipulated that drives me to having a litter of kittens, so I’ll sometimes do my pathing in photoshop or illustrator, depending on what else I’ll be doing with the comp.

Well I recently had a project where I did just that – for Something Spacial. I created the comp in photoshop and decided to use the blend Import tool for Photoshop Documents (PSD) and though it was nice to get a head-start in laying everything out in blend – it still didn’t give enough of one. I ended up needing to create many of my pathed elements new because they didn’t quite import retaining the integrety of the object into blend. My gradients were missing, the paths were disjointed, and did I mention my gradients?

There was a lot of work put in and I think I would have spent less time had I just created it all from scratch. I do like that they’ve added the feature, but I think that the story of most software releases with new features applies – the first release isn’t always the best release. I’ll be optimistic and say that they’ve gotten quite a great feature started, and I can’t wait for the next itteration or two where the full features are realized and implemented as well as honed to near perfection.

The illustrator file import tool I haven’t had as much real-time experience with and part of it is that I’ve been reluctant. I already have a really nice plugin created that can export my illustrator files, maintaining full integrety of the object, and directly porting it into xaml. It works well, a little messy on the XAML side, so I’ve had to clean that up a bit, but otherwise, everything maintained full design integrity. So why risk it by using the import tool?

Once I get the latest SDK pack for Silverlight 3 installed, I’ll blog about the illustrator import.

FacingBlend.com in silverlight!

Posted on May 28, 2009 by ARSpaulding

FacingBlend’s Silverlight page is LIVE!

Click here to view

Since yesterday, I’ve had several emails asking questions regarding this release, so I thought I’d share a bit.

Most websites that I’ve seen around which had displays of Silverlight use weren’t as artistic as I thought a site could be. Expression Blend is a very powerful tool, and like most tools, if you really play with it, you can find that you can do almost anything if you just play with it long enough and tailor things to fit what you want, but… I’m not seeing that being done!

So I wanted to create a silverlight website that really pushed hard and heavy on the “pretty” side. I wanted it to use my favorite color, green ( no relation to the current popularity with “going green” ), but still have a little “windows vista /7” glassy watery look/ feel for the background. The centerfocus on the site isn’t really the content, its on the background which is done entirely in XAML.

That’s right – the pretty thing that appears to be raster based, is 100% xaml.

Now, I wasn’t really going for a “portfolio” either – this is my personal website. My play-thing over the web, so I stayed away from the typical “portfolio” feel. I’m having fun here. I feel like I’m playing when I’m working in Expression Blend, and I really wanted that to show in the design. I think my absolute favorite part is a little geeky. Even the icons are done in Xaml and I think there’s just something awesome about that.

The Toybox itself was what pulled back my timeline a bit. What to put in there? What to NOT put in there and how the heck do I want to organize it?

Well, I kept not having time to work on this and it sat on a back burner not being worked on for months. I seriously had this nearly done back in December of 08, but I got stuck working on a few other things and having a blast with my family and helping out with a logo for the company, Seovian (which you can find in my galleries here on my blog).

I then was pushed by 2 different projects that I’m working with to upgrade to Silverlight 3 and with that, I forced everything aside, brought Facing Blend in Silverlight back into the forefront and finished the entire Toybox in 3 days(in my spare time).

I still look at this stuff and have to remind myself that I actually did this, all on my own, that I’m not looking at someone else’s work. I still can’t believe how much I’ve learned in such a short amount of time. Maybe it’ll sink in a few years from now, but until then, I keep getting deeply involved in design work and when I come “out of it” and look at the whole picture, I am impressing even myself. 2 years ago, I wouldn’t have dreamed that I could do what I just released. It just blows my mind.

Disorientation between Blend & Photoshop

Posted on May 19, 2009 by ARSpaulding

I’ve come to the conclusion that this will likely never go away. The more I work in Expression Blend, the stronger the case of disorientation is when I come back to photoshop to do a quick mockup of something and I figured that there would likely be a time where I would go between the two and seeing as how I know what to do once the application is open based on its UI, that I’d recall the differences w/o issue as though it were all muscle memory.

However, the similarities of controls and manipulation are just so similar that every time I switch between the two, it takes a moment for the change to click.

For instance – shapes – aka vector objects. Photoshop has vector objects – they’re not as easy to manipulate after they’ve been placed in a layer as they would be if I were in illustrator or blend, but they do have them in photoshop and I use them more than I think any other tool in photoshop. It helps that I’ve lately been using photoshop to do mockups of things that will translate to Expression Blend… but there-in lies the problem.

So an example: In photoshop, I have a circle, I need place it and its not quite right. So I scale it… but oh yeah, I need to approve the append in photoshop. In blend, I make the change and its much more like illustrator. It just is – its done. Changed.

Gradients – I’ve come to very VERY much enjoy the flexibility of hand manipulating direction and well.. every characteristic of a gradient. I’d like to toot my own horn and say that I’ve actually gotten pretty damn good at it. In photoshop, its all raster based. So its… seriously different. Sure – a whole lot more can be done, but I also find limitations to the power of the rastering in photoshop.

So yeah – anyway. I think I’ve officially determined that I will likely never get over that first 5 minutes of “oh yeah, that’s right, I’m not working in ___”

Oh – and just for the heck of it because I’ve gone a different direction, below is a screenshot of a flower recreated using gradients in blend – next to the example flower which is a photograph of a real flower.

Gradient Dropper = LOVE

Posted on May 13, 2009 by ARSpaulding

I tweeted about this earlier this week, but I felt it warranted an actual blog.

This tool – I’ve completely overlooked for all of this time. Usually, I can recreate a gradient fairly accurately if not dead-on the original. But uhm… I don’t have to! But I didn’t know that. I was recreating a real flower’s color variations and on occasion I’d click the eyedropper to obtain a color from the original but it wouldn’t actually apply the color! Well I finally got a bit frustrated with this and sat back for a moment and then I noticed it. There were 2 droppers.

2?!

Hover mouse over each. The first was what I expected. A normal eye dropper. The second… a what? A “Gradient Dropper?! Wait – does that mean what I think it means?!”

So I gave it a guess as to how to use it. I clicked on one spot, held the mouse down, dragged my mouse over to another desgination and… OMG! An automaticallyish gradient created!

This is awesome. So for those of you who are trying to figure out what the heck I’m talking about – where oh where would this thing be located – look to the lovely screenshot to the side with all of the spiffy arrows.