Tag: 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.

Handyman Toolkit

Posted on by ARSpaulding

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
Click to view full sized image

3DImage – a video of the lab

Posted on by ARSpaulding

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.

Closing textblocks inside open tags

Posted on by ARSpaulding

From my experience, I always kick myself every time I do something like the following:

<TextBlock Text="Bogus Text" />

The reason I kick myself is that I find by closing a tag like this, I’m essentially shooting myself in the foot before I get very far.  If I close a tag now, within the same line as I open it, I run the risk of having to break it out, and then do a </TextBlock> later.

Yes, this is just an additional step, but if I have a whole lot of conditions within this, I’ll find myself losing my place very quickly.  Instead, I’ll seperate the command – for just in case.  It sets up the markup for future additions.

Example:

<TextBlock Text="Bogus Text">
</TextBlock>

Preparing for the future saves you on time later.  Oh – reasons I mention this – again, from Victor’s book.  He’s having you create, just to test the application to verify that Visual Studios created it without flaws, a simple Text Block with “FOO” as the text.  Yes, it’s there just to test the application and verify that its functional.  However, if you’re in the habit of always always creating things for the future, you hardly ever have to think about what you’re doing when performing something as simple as the creation of a textblock.  Those habits tend to pay off in the long run.  If you do things “the lazy way” most of the time, and properly only when the time calls for it, you’re likely to accidentally slip into your lazy mode and have to correct yourself every single time you put the fingers to the keyboard.

Need I mention this “right way now” mindset applies to every other aspect of life?