Facing Blend

On one hand, a friend of mine tells me, “Man, don’t even worry about the XAML – just design, use Blend, go crazy. Be artistic.” and on the other hand, I have a different friend who groans at the messy XAML which Blend puts out when using transition Visual state manager Double Spline Animations – he says it reminds him of the splatter which the archaic “MS Front Page” would spew out in HTML format, that there are cleaner ways of doing the same things with far fewer lines of XAML.

I’m SO there with the 2nd guy in relation to MS FrontPage and html. Me being the gal who would create something in photoshop, chop it up, and piece it back together – most of the time without looking up from the HTML, CSS – and all the Divs in between until most of everything was put together to verify that everything was behaving the way that I thought it should with my markup.

That being said – I kind of like the idea of, “Just be creative…” Man… I’d love that. To just… make it happen, and move on. I could get SO many other creations done – OR – spend so much more time on the details of the art! That’s not to say that I don’t already, but what if I had even more time? What greater level of polish could be gained with that additional time?

For all who visit who are in either/or/both worlds – do you have any opinion on this matter? What’s better? Cleaner XAML/Learning the alternative markup which blend 2 doesn’t have in its interface – or – using the VSM and the keyframe animation tools?

Is there a better side?

Anyone have an opinion? Should there be / is there a middle-ground?

Popularity: 15% [?]

I’m working on a Silverlight project and I was creating a few basic states for hovering my mouse over a button, clicking, and removing my mouse from a button.

Well it wouldn’t load!

The error that I was seeing was, “Unexpected PROPERTYELEMENT in parse rule PropertyElement ::= . PROPERTYELEMENT Content? ENDTAG..”

Uhm… What?

A google search shows a few things on Unexpected Directives but nothing that was helping me.

It said it was on line 0 character 0… that makes no sense.

However, there were 2 other errors coming up regarding fill elements.  So I decided to take care of those.  For some reason, Blend 2 added several Elipse.Fill elements with no properties and child Ellipse.Fill elements which also contained no properties.  I cleared that up in Visual Studio, went back to Blend and Blend wanted to update like it should.  Cool – well I switched back to visual studio and blend put those dang things in again!  Ugh.

So I closed Blend, praying that all the work that I’d just done wasn’t going to be one of those instances where it’d take less time to recreate than to debug.  I opened the project in Blend and was relieved to see now that Blend didn’t like the XAML either.  Cleaned out the excess ellipse.fill elements, saved, came back to blend, told it to update and… yay!  There aren’t any errors.

That lack of errors includes the strange error mentioned earlier.

Popularity: 1% [?]

As mentioned before, I’ve finally begun to go through Jeff Paries’ book on Silverlight 2, Animations, and I’m going through chapter 1.  In a nutshell, chapter 1 is a crash course on Blend 2, Codebehind, Silverlight and XAML.  The author at one point is describing the properties of a canvas and I couldn’t help but chuckle at the 1 property which to me stands out like a sore thumb.

As described in his chapter, Canvases can have properties  such as background, height, IsHitTestVisible, Left, Name, Opacity, Tag, Top, Visibility, and Width.

Most of them seem pretty standard, right?  But what about IsHitTestVisible? 

Seems a bit like an oddball.  Like having a basketball player standing among a group of japanese martial artists.

Popularity: 1% [?]

Its been about 2 weeks since I completed Victor Gaudioso’s book on Blend 2 and just after I wrote the review on his book, I blogged that next on the order of business was to start going through the newly released book by Jeff Paries, Silverlight 2 Animation - and then I ran into computer troubles.

If you’re actually interested in reading me blogging while pulling my hair out, by all means, look through the archives.  I think I blogged about it enough.

This blog posting is to say that finally, I’m able to begin going through this book by Jeff Paries (YAY!).

Before even getting to numbered pages, I’m reading the “Who this book is for” and am wondering.  He mentions that this book is intended for web developers – developers being the key word here.  As much as I enjoy getting my hands dirty in code, I wouldn’t really consider myself to be a developer.  I can comprehend code, I can tinker around with things or make things work, but to me, a developer is a whole lot… I don’t know.  I just don’t consider myself to be a developer.  I’m the half-and-half.  I do some cool, clean and shiny looking design work and tie it together with things that have already been created, and tinker until it works the way I want it to.  So where there are 3 parts, the pretty picture, the engine behind it, and the pieces that make the pretty picture interact with the engine … I am the one that usually is creating the pretty picture and putting in place the stuff that makes that pretty picture talk w/ the engine.  I’m not the engineer.

So hopefuly, I won’t get completely lost while going through this book.

We shall see.

Popularity: 1% [?]

Last week’s SeattleD2ig meeting I became the proud new owner of a shiny new box filled with Expression goodness – the MS Expression Studio is MINE!

Uninstall my previews, verify that I did in fact install .net 3.5 SP1 as remembered, and then install the new shiny MS Expression Blend w/ key and all.

OOoohh… but its Blend 2.0.  Can’t do Silverlight.  Shoot.

So I download the Service Pack for Blend 2, and commense installation to see this lovely gem after accepting the TOS:

Windows Installer returned error code 1605

I’ll post if/when I discover how to get past this issue. I’m beginning to feel that if there are any bumps to be experienced on a roadway where it comes to working with Blend or anything related, I’m bound to find them.

Ugh.

Update: I discovered the cause of my issue.  The version which is in the MS Expression Studio was Expression Blend v. 1   Not Blend 2.

Uninstalling the version from the box, installed one from the MSDN website and applied the key from the box then tried to run the SP1 installation update: Lovely lovely installation success.

Popularity: 1% [?]

Here is a quick tip.

There is a feature which in some occasions is very very useful. Say for instance, every item needs to be exactly spaced apart by an exact measurement no matter what? Good for consistency.

But sometimes you need to work with things in a manner which feels like photoshop’s layers where you have multiple layers – sometimes in the double or tripple digits, which make up a single “entity” (ever created an icon for a pencil?)

Well the snap to snaplines can make someone like me want to throw something at my screen, hoping that it’ll get to the program!

The solution? Turn off snap to snaplines – or set its snaplines meter down.

You can find this under Tools –> Options. Going to the options brings up the options window. Locate on the left the submenu Artboard.

Modify to suite your needs.

Popularity: 1% [?]

I’m going through chapter 11 of Victor Gaudioso’s book on Expression Blend 2, and he is stepping his readers through the creation of a glassy button.

I’ll summarize what we’ve done so far.

First, we created a rectangle with beveled edges.  He directs his readers to use the visual controls to create the curve.  I prefer to have a bit more control over it, and so I enter into the properties pane in the RadiusX and RadiusY.  Either way works.

He then instructs the readers to duplication this – or in Blend 2 terminology, its a simple copy-paste (Photoshop!  Get out of my brain!), shrink the size of the rectangle, set both gradient stops to white (#FFFFFFFF) then turn the right-most gradient stop’s Alpha channel to 0%.

I’ve seen people do this in 3 ways.  Either by clicking and moving the mouse up/down or left/right (its somewhat like a dial – click and drag will increase or decrease the percentage), type directly in the 100% field to the prefered modifier, or by programming it directly in the color code.

A bit on that last option, you may notice that the color code has 2 more characters than usual.  I promise, that is not a typo.  The addition of the 2 are specifically related to the Alpha chanel, and those are placed as the first 2.  Most colors will remain solid.  So if you’re modifying color hex by hand, just pay attention to the last 6 and ignore the first 2.  If you’re wanting to adjust the alpha and change it to 0%, just replace the first to FFs with zeroes.  The result will be this: #00FFFFFF

This will often help when you’re neck-deep in XAML and don’t want to switch to design view.

The last thing I wanted to mention was the use of the white gradient – to – 0% alpha.  This is a commonly used thing for designers who work in photoshop or illustrator with one exception – the “layers” are exactly the opposite.  Instead of the top item being “on top” its more like painting – you start with the backing and for each additional color, you add to the existing one.  I had to “reprogram” the way I thought about these orders and because I move between photoshop and blend, it continues to throw me off.

In blend, the bottom-most object is the one in the forefront.

So the shiny button, I’ve described the first 2 layers – the base gradient, and the shine which has been shrunk and has had half of the gradient modified to being transparent.  The 3rd step is to take the resized 2nd layer, duplicate it (copy-paste) and then flip it.

Victor (the author) has you go into the properties pane to the bottom and transform it by rotating by 360º.  I prefer using the last tab which will exactly flip it either vertical or horizontal.  This being so similar to a tool that I use QUITE frequently in photoshop – this is much more comfortable for me to use than a full 360º rotation.  From there, you just need to hit the down arrow a few times to make this 3rd rectangle closer to the bottom.

The result is something like this:

Not too bad – working with Blend is really not all that different than working with Illustrator or Photoshop, but the differences can be tough to overcome at first.  Blend is a whole lot more like Illustrator than photoshop in the matter that you’re dealing with vector based images and can modify things like the bevel radius on the fly – after its been put onto the canvas.  In photoshop, its not really much trouble, but you do often end up having to just delete a layer or an object and add it back on if the radius on a vector(path) based image isn’t quite right.

Popularity: 72% [?]

The media player which Victor’s book steps you through on chapter 6 is complete.  I customized it a bit and added a back button, which was coded essentially as an inverse of the next button.

As far as the user experience elements, the play button plays, stop button stops, and pause button pauses, however, the pause button was set up as a toggle, so if it is pressed while paused, it will resume play.

Cool part that I feel I should mention is that all of the visual elements are done in XAML. The buttons appear to have been done in photoshop or illustrator, but they’re not. They’re 100% XAML code.

The limitations which I’m seeing are as follows:

The logic behind the next and back buttons are limited.  If you hit next to get to the next video, that works, however, you hit it again, and it doesn’t toggle back to the original – it just replays the 2nd video.

The same goes for the back.  If its on the first video and its playing, and you hit the back button again, it restarts the first video.

The last bit which somewhat makes me internally twitch, is that at this point, these buttons are functional, but they don’t appear to interact with the user.  I know – we’ll likely get there further into the book, but at the very moment, I just have to take my knowledge that they do actually do something and pretend that the interaction with the buttons is there in a, “Perhaps I blinked?” sort of way.  We’re not far enough through the book to start making further interactions, but in the interest of my own sanity, I told all of my buttons to change the cursor to the “Hand” so as to make them somewhat appear as if they were more than pretty pictures on a gradient.

Below is the video:

Note: This is second published video which displays an example of what can be accomplished as you’re going through this book on Blend 2. To view the first video posted click here.

Popularity: 1% [?]

By the end of Chapter 5 of the book, I’ve discovered that yes, you can learn how to use this software without the assistance of a book, but had I been able to obtain this book a year ago when I started tinkering with Blend during my spare time, I would have greatly benefited from having this “in my back pocket” sort to speak.

The biggest confusion factor which I had when cutting myself off of Adobe products, cold turkey, to force myself to learn how to use Design and Blend, was the “when do I use the stackpanel over wrap panel?” or “Should I make this a canvas or a grid?”. Plus there was the creation of something primarily vector instead of part raster and part vector – that bit is something that illustrator gurus will likely not have any problems with, but most who design for the web tend to take preference to Photoshop – and only on occasion delve into primarily vector bases.

Now, the intent of this chapter was to get you familiar with the Layout elements and the unique attributes each layout element presents, however, there are underlying instructions which would assist a raster-based designer into being more comfortable with the ideas and ease when using vector shapes. They’re not that different to create and have the added scalability that raster(bitmap based) images just cannot do due to their innate nature.

In any event, the entire chapter is essentially “This is what X is, how about we apply this to give you hands-on experience with X”. We went over the following: Border, Canvas, DockPanel, Grid, Scroll Viewer, StackPanel, UniformGrid, ViewBox, and WrapPanel layout elements.

By the end of the chapter, the application is like a circus of vendors in graphical format. Victor is sure to mention in his book that he’s well aware of the lack of space towards the end.

Without further ado, I present my circus:

Click to view full sized image

Popularity: 1% [?]

Depending on the project and the visuals, I felt that it would be beneficial to not only blog about the experience while going through the book, but to give further visuals for those who are following this blog – perhaps it will assist those in making their decision as to which books might be good – so here is a youtube video of one of the very first things which you are walked through doing in Victor Gaudioso’s book on Expression Blend 2.  This is at the very end of chapter 3 and is pretty easy to do.  I took it a step further than explained, but if you are following along in the book, you’ll notice that nothing that I have done here is outside the scope of information that has been explained through the first few chapters.  To reword that: If you’ve never used MS Expression Blend before, you could use the knowledge gained up to this point to emulate what is done in this video.

Popularity: 36% [?]