Tag: Foundation Expression Blend 2

Shiny buttons and Blend's interface options

Posted on by ARSpaulding

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.

Media Player – a YouTube video of it

Posted on by ARSpaulding

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.

Chapter 3 – The Pan Tool

Posted on by ARSpaulding

I’m nearly through chapter 3 and I feel the need to take note here in the blog of a few points which I keep finding, forgetting, and finding again – which he mentions in this chapter.

The double-clicking of the Pan tool.

Far too often when I’m working on UI, I zoom in very closely on my objects to make sure that everything is lining up, every detail is perfected, and often I find the answer to the, “I’m not quite sure why, but that doesn’t look quite right – can’t put my finger on it, I just know that its not right.” by zooming in.

All of that sounds great – detail oriented being a rule of thumb of mine, however, there’s 1 issue with zooming in: It often is difficult to get to OTHER objects without zooming out, locating item, and the zooming back in.

Well Expression blend has a nifty thing with their pan tool.  When you double-click on it, your view will center on whatever object it is that you’re clicked upon in you objects bar.

When I’m not remembering that this functionality is there, it drives me nuts trying to remember what it is that I did in the past to make quick moving w/o zooming out.  Hopefully making note of it here will keep it more permanently in my mind.

Btw, if you’re lost – I’m going through Victor Gaudioso’s book on Microsoft Expression Blend and blogging as I go.

Chap 2 *check* Moving right along

Posted on by ARSpaulding

I’ve finally completed chapter 2 (didn’t take very long – lots and lots of comments though… ) and I would have to say that I am happy with the book so far.

It maintains my first impressions – that the author is talking to me as opposed to writing a book.  I have a very difficult time getting through books which are so “technical manual” that the words start meshing together like someone who hasn’t a clue how to enunciate.

The final product from chapter 2’s “lab” also included something about triggers that I didn’t know.  I’ve been hand-coding triggers with my very limited knowledge of C# when I could have been using blend to do it all for me.

My conclusion: This book will likely fill in far more blanks than I imagined, when chapter 2 has already brought me to an easier way to do things… though I’m the type of person who somehow always manages to learn something the more difficult way and at some point after, often WAY after, I locate a much quicker, simpler, and easier way to do that same something.

Makes one highly appreciative when you go about learning things that way.

Onward to chapter 3.

Victor's book, Chap 2 – Alert! A discrepency is spotted!

Posted on by ARSpaulding

There is no possible way to actually get through and locate every single error and discrepency in a book. The hundreds of times the author and editors comb through the book and modify things – by the end, I’m sure the entire team feels dog-tired.

However, I’m someone going through the book and using it. My job is to be snobbish, accusatory and unappreciative, as well as blissfully ignorant of the high levels of iterations and reiterations that went into said book. Oh, and I’m supposed to say things like, “I could have spotted this from a mile away” or something to that effect.  I cannot forget the most important part: I must have a high level of grammatical and spelling errors to give a level of poetic irony.

…

I hate doing things that I’m “supposed” to do.

But I will point out 1 mistake/discrepency here and well – I’ll likely point out the others which I come across because its fun that I spotted it and its even MORE fun to tell that I spotted it.

Anyway, in Chapter 2 you’re requested on page 35 to modify your TextBlock size to w: 400px h:100px and in the screenshot of the program where you make these changes, the comments below the screenshot example read:

“Figure 2-19. Changing the Width and Height of your [TextBlock] to 400 and 100, respectively”

Then later, after modifying the foreground colors to be nearly jab-my-eyeballs-out gradients (sorry, I’m not a fan of the standard use of green-white-red gradients for the purpose of tutorials and teaching material. I find that practice to be abhorrent and if you’re going to really go after something that is easily observed, why not go all the way towards horrible colors instead of half way? Use neon pinks or something, it would match the book’s cover too! I hate pink, but going along w/ the theme presented from the cover, let’s take it home all the way, man!! Consistency! Consistency!), you encounter on page 38 the line:

“Because you set your [TextBlock] to the Width of 600 and a Height of 100…”

Wait, I did what?

I didn’t set my text block to a width of 600 – I set it to a width of 400. *twitch*

Ok, its fairly minor, but I’ll go ahead and change my TextBlock to 600 since you said that I already did. Maybe he’s just trying to use “The Secret” on the readers?

Edit: Just after posting this, I continued and almost immediately stopped because I was trying to as closely emulate his “lab” by using the same font-type.  He has in his picture the font-type of “Segoe UI”.  At first glance, that is likely not an issue.  However, when looking through my own listing of fonts, I’m finding that I don’t have said font.  I’m going to make a guess at where this font came from: One of his recent clients!!  I could be wrong, but w/ it having the label of “UI”, I would be willing to guess that this might be the name of the font which is named to assist with quick-reference, and “UI” designates where that font is used.  Woopsy!  The image of the font looks very very similar to Verdana but with slight modifications to make it almost DIN-Medium.

Chapter 2's "Hello World"

Posted on by ARSpaulding

Going through Victor’s book – chapter 2 is fairly short, but the “lab” at the end of it, the typical “Hello World” which is seen, as he mentions in his book, in most every book or introductory guide to programming, application development, and other types – is already a bit obsolete with the releases of later versions and updates to Blend.

Please note: His “Hello World” is not anywhere nearly as boring as many.  He goes through a lot of the basic orientational-use of Blend including gradients, modifying colors, color stop properties, application window resizing, key-frame animations, quick-key uses, and more.  Its more than worth going through.

In his book, he indicates that gradients start out left-to-right, and instead modifies things to go top to bottom.  Unless I’ve modified my default settings (which I don’t recall doing), mine is set exactly the opposite.  The “Gradient Brush” on mine starts from top to bottom, so several parts of the tutorial, including the very eye… catching *cringe* Christmas colored “Hello World”, which gradients from Red to White to Neon Green, will require you to rotate the gradient angle.   Remember, much like Adobe products, holding the shift-key down will maintain true-angles, which assists in obtaining an accurate rotation of exact 90¤.

I have to note that earlier, I asked the “Why?!” of the C: drive for locatino of projects.  I’m beginning to see why he has that as his choice.  For the purpose of this book, having everything held within a root “Projects” directory makes guiding those reading the book, quite easy.  Most who will be using this book who have different preferences will just place things wherever they want anyway, so it really doesn’t matter except for the use of guidance within the book where a person puts items, so long as they know where the file was placed.  Typical document saving 101.