SilverZine is LIVE!

logodark

Well it’s been pretty quite on AGkDesign.blog, but its for good reason! For the last few weeks, in between some crazy projects I have been working on, I have been slaving away to create SilverZine. It’s an on-line resource for Designers that are working with Silverlight. We hope to add heaps of awesome content over time and create a really great resource to help get people started with Silverlight and provide the more experienced Designers with some ideas and new techniques to try out!

And today I’m very proud to announce that SilverZine is finally live!!!!

Thanks to all the help everyone has given me and don’t forget to drop us a line over at SilverZine sometime :)

Thanks

Alex



SilverZine – Silverlight resource for designers SNEEK PEEK!
March 26, 2009, 6:10 pm
Filed under: Uncategorized | Tags: , , , , , , , , , , , , ,

Today I announced that SilverZine.com was coming and included a link to the site, since then the SilverZine twitter has been on fire, so to keep the momentum rolling I thought I would organise a little sneak peek on what SilverZine is!

teaser

I have been thinking about this for a while now and I have finally stepped up to the challenge.

There are plenty of sites out there dedicated to Silverlight, but being a designer myself, I have found there is not a lot of design orientated ones.

Enter SilverZine!

SilverZine is a community resource that will allow designers to find tips, tricks and inspiration for their Silverlight projects or get their name out there with something they have put together themselves. Basically it’s a resource for designers who work with or are interesting in working with Silverlight.

With that said, developers are most welcome as well, although it will not be a code heavy website, you might find some cool inspiration for the look of your next interface/application or grab one of the free resources we plan to have available as time goes by.

Let me know your thoughts and things you might be interested in seeing on the site.

http://www.silverzine.com

and don’t forget to hook up with the SilverZine twitter to keep up to date with its progress

Thanks everyone

Alex



Silverlight 3’s new goodies!

I whipped up a quick demo last night using Silverlights 3 and Expression Blends new tools. This demo should help get some ideas flowing hopefully. I did for me!

See the Demo! – Hover over the panels to bring them into focus

If you don’t have Silverlight 3 installed, Grab it here (it’s in the right hand side panels).

example

This demo uses:

Built using

  • Expression Blend 3 Mix Beta
  • Silverlight 3 engine

Pixel Shaders

  • Drop Shadow (added to buttons and spinning animation)
  • Blur (added to shadows and canvas

Transform attributes

  • Scale
  • Project

Out of browser

The project also includes the save to desktop option, to see this in action, right click on the silverlight application and select “Install Projection Demo on this computer” and then to uninstall the application at a later date, simply open it up and right click again selecting Uninstall/Remove.

Hope you enjoy the demo and if you have any questions just drop me a comment.

Oh and B.T.W don’t think this is everything the new Silverlight has to offer, there is sooo much more!!!! These are just a few things I have been playing with.

Thanks

Alex



Silverlight on the desktop
March 20, 2009, 7:41 pm
Filed under: Silverlight, Uncategorized | Tags: , , , , , , , , , ,

Since the release of Expression Blend 3 and Silverlight 3 yesterday at Microsoft’s Mix09, there has been heaps of buzz around all the awesome new features and changes to the product, the one I wanted to mention today was Silverlight on the desktop.

You can now run Silverlight applications offline and on the desktop. This is a huge step for Silverlight and giving developers the ability to make a great web based application that also serves as a normal desktop application. Best bit of all? Its really easy to make your application down-loadable to the desktop and even easier for users to save and delete it.

Lets have a quick look at it…

With some small additions to your application.xml like adding information for the icon, name and description of the application and its ready to go.

Inside the Silverlight application when its running, Right click to see the install option

right_click

Once you have chosen to install the app you have a few choices about the install

check

Click OK and your done, you app will be installed in the start menu, desktop or both

desktop

Then if you wish to get rid of the application, open it back up (either the web version or the version installed on your desktop) and right click again.

remove

How easy is that!

This of the possibility this could add to your application, and this is only the start, there are so many other awesome features to look at and I will do my best to show them to you as soon as possible.

I will also post a tutorial soon on how this is achieved.

Thanks

AGKDesign.net



Tutorial: ScollViewer skinning to make a picture viewer

main01

Over the last few weeks I have been playing around with drilling into the ScrollViewer control’s templates and I wanted to write up a tutorial on how you can manipulate it to create a nice easy picture viewer (or any other content for that matter).

There is a working demo of an edited ScrollViewer on my website, http://www.agkdesign.net/silverlight (3rd panel at the bottom).

Note: This tutorial will require Expression Blend with Silverlight 2 updates, it also includes some pretty advanced template editing so a basic knowledge on skinning will help greatly.

Lets get started!

Setting up your project

Once you have a new project ready in Blend, create a ScrollViewer control on the page (click the chevrons at the bottom of you tools panel and select ScrollViewer.) I am going to add in a nice panorama I took on a recent trip to the beach. On the properties panel (Click the properties tab on the right hand side panel), you want to set the ScrollViewer properties to have the horizontal scroll visible and the vertical disabled. These options are under layout down the bottom (you will need to expand the arrow at the bottom of these options to see them).

Now I will add in my panorama for the project. Ctrl + I to add a existing item to the project and open the panorama. It should now be available in the Project tab on the right panel.

Double click on the scroll viewer in the tree view on the left side and it will have a yellow boarder around it, now you can add items directly into you ScrollViewer. Double click your panorama image.

Ok sweet, we are all set up and ready to make this look good!

Getting into the Skinning

On the ScrollViewer in the tree view, right click and select Edit Control parts (template) and go to edit a copy. Give you new template a name (I’m calling mine MyScroll).

In here you will find a few different things under the grid container.

  • ScrollContentPresenter
  • [Rectangle]
  • VerticalScrollBar
  • HorizontalScrollBar

We want to edit the HorizontalScrollBar control so right click it, go to Edit Control Parts (template) and select edit a copy. Give it a name (I’m calling this MyHorizontalScroll).

There are 2 controls under the Root container. Expand the HorizontalRoot grid container and you will see a whole bunch of controls, these are what make up your horizontal scroll bar.

Idon’t want alot of this stuff for this example so I am going to delete everything in that container except for HorizontalSmallDecrease and HorizontalSmallIncrease. These are the 2 buttons that control the horizontal movements in the ScrollViewer.

Now it should look something like this.

scrollviewer_unedited

Pretty boring hey. Lets change that!

Styling your button

My first change is to grab both the HorizontalSmallDecrease and HorizontalSmallIncrease controls and make them the entire height of the ScrollViewer. I am going to also make each control 45px wide (change this in the properties panel).

Note: your picture will be visible in the background here

Note: your picture will be visible in the background here

If you test the project now (F5) you should see we are starting to get somewhere! But they are still just windows buttons so lets customise that!

Right click the HorizontalSmallDecrease control in the tree view and go to Edit Control Parts (templates) and select Edit Template.

Now we are ready to style our buttons that control the movement.

I’m going to delete everything in the Root container and start from scratch.

First I am going to create a gray box with rounded edges of 7px and change the opacity to about 40%. Then using the pen tool, create a simple right arrow over the top. Mines going to be white with 50% opacity.

button

Now we need to head over to the Visual State Manager (VSM) in the top left of Blend, here we will find a whole load of states for Base, Normal, MouseOver, Pressed and Disabled.

I’m going to edit the MouseOver and Pressed states to give the user a little feedback when interacting with the buttons.

Select the MouseOver state first, now we can edit out button when it is MouseOver. Simply raise the opacity on the objects you just created to about 80%. And then select the Pressed state from the VSM and raise the opacity to 100%.

Test your application again (F5) and you should have a brand new decrease button for your ScrollViewer.

one_button

Now we need to back and edit the other button. To do this you need to “return scope to MyHorizontalScrollBar (ScrollBar Template), just click the little up arrow button just above your tree menu scope This will take you back one step in you templates.

Now just right click HorizontalSmallIncrease control and select Edit Control Parts (templates) and then Apply Resource. Select the HorizontalSmallDecrease option here and it you should see that both your buttons look the same. All you need to do now is Right click the HorizontalSmallDecrease again and go to Edit Control Parts (templates) > Edit a Copy.

Give it a name or just leave it with the one it assigns.

Now we just want to flip the arrow to point the other way, so select it in the tree view, go to your properties tab on the right hand panel, and then expand the Transform options. The very last tab on these options is flip, click that and select Flip X Axis. You might need to re-center the object now.

transform

Nearly finished!

Cleaning it up a bit

There is one last modification I want to make to my ScrollViewer and that’s to get rid of the white boarder and dodgy margins around the image. To do this, you need to go back a few templates by clicking the up arrow until you can see the ScrollContentPresenter Object. Select it and you will notice the margins have been binded to something, click the little orange square next to them and select reset. That should get rid of the 4 px margin around the area, but there is still a big gap at the bottom. you can just grab the bottom point with your Selection tool and drag it to fit.

DONE!

Let me know how you go with it, and anything I might have left out.

complete2

(Try throwing a Stack Panel in the ScrollViewer and then you can add heaps of images in and even OnClick events to them!)

Thanks

Alex



Tutorial: Create a fiery button.

This tutorial will show you how to create a button template that looks like it has a fire lurking inside.

complete1

See Demo here.

Get the source here.

For this tutorial we will start off in Expression Design to create the graphics for the button, then we will move into Expression Blend to create the button template and animate it.

Ready?

LET’S GO!

Open Expression design and create a new document about 150px squared, it doesn’t really matter though because we can change its size later.

First we need to create a base circle for our button, mine is going to have medium gray stroke of 1px (more if you want) and a radial gradient fill of dark blue to a lighter blue.

rad_grad

base1

Next we are going to add some FIRE!

Grab the pen tool pentooland create shapes over the circle, these can be very rough because we are going to blur them soon. I have created one large shape and just reused it at different sizes, color, transparency and angles.

flare

Now we want to add a Gaussian Blur to the object by selecting the object and go to the effects panel on the right hand side.

effects

Press the FX button and select Gaussian Blur and then change the radius to your liking.

Next I want to add a simple shine to my button, so to do this, create a copy of the original circle and overlay it on top of the button. Set the fill to white for now. Using your “Add Point” tool addpoint and add one point to the circle.  Now with the Direct Selection tool directselect1, move the bottom most point and the newly created point to create a nice wave through the middle of the button, remember to grab the splines and adjust them as well to get the right shape. I have added a gradient to mine of white to clear, and then brought the opacity of the whole object down 50% or less.

shine

and there we go! we have our button design finished. Now we need to export it into Expression Blend. So go to File > Export and save the exported file as a Silverlight Canvas (remember where you save it).

NEXT UP! Creating your template and animating your button in Blend!

Open Blend and create a new Silverlight 2 project (crtl + shift + N).

Now we need to add an existing item, this can be found in the Project menu or just press Crtl + I.

Now go find your buttondesign.xaml you created in Expression Design before. Once its loaded, it should be available in your project tab over on the right hand side panel.

rhspanel

Double click it to 0pen it up and you should see your button design in all its glory!

Now grab it all the items in layer 1 and copy it into the clipboard (ctrl + C). Now go back to your page.XAML and create a new button, right click it, go to Edit Control Parts (templates) and Edit a copy.

Now we are in the template section of the button, anything you edit in here is only relevant to your button.

Delete all the contents except the template and the Grid in the tree at your left and the hit CTRL + V to paste in your new design.

Lets Animate!

At this point you will notice that in your Visual State Manager (VSM) just above your tree view panel, the state “Base” is selected, this is the standard state of your button when its not doing anything, I have set all my “fire” shapes to 0% transparency, to do this select your fire shapes in the tree view, and then over at the right hand side panel select the properties tab, under there you should be able to edit the transparency.

vsm1

Visual State Manager

Select your MouseOver state from the VSM and then press the show time line button just above the tree view. showtimeline

Using the time line, create animations by editing an object then dragging the time line marker (orange line with triangle at top)  along and editing the item again. I have changing the angle, shape, transparency and size with the animations but not using any specific pattern.

timeline

Once you are happy with your “fire” animation, just next to the show time lines button there should be the name of the state with a red “Record Dot” next to it, click the state name “MouseOver” and then in your properties menu you should be able to edit the repeat behavior, I am setting mine to Forever so when you are hovering over the button, the fire just keeps swirling around.

stateselected >    repeattimeline

And now if you run the application you should have a working hover for your button.

For the pressed state, I am just going to grab my icon and shift it down and left 1 px to make it look like its being depressed. So simply select the Press state on your VSM panel and then moved the icon down and left 1px (use your arrow keys for specific pixel movement).

Now you should have a nice template for your button, if you want to make a new button with a few subtle changes (like the icon) create a new button, right click and go to Edit Control Parts (template) and then select Apply Resource > Resource name. Now your button should look like the other one, from there just right click > Edit Control Parts  (templates) > Edit a copy. Here you can edit the button without affecting the first button.

AND DONE!

complete

Cool Hey!

Hope you enjoyed the tute and if you have any trouble, drop me a comment.

Thanks

Alex



New Silverlight Site is LIVE!
March 10, 2009, 2:19 pm
Filed under: Design, Personal, Silverlight | Tags: , , , , , ,

silverlightpage_blog

My new Silverlight Site is live, I thought it could use a little attention.

Let me know what you think.

Thanks

Alex



Shadow Breaker effect in XAML – Expression Design Tutorial

I have always liked using half shadows to break up sections of websites but in order to bring it into my Silverlight designs I have had to create PNG’s and import them into my Silverlight projects. This way has been fine but if you could create the same effect using simple XAML you would be able to create a smaller (file size) and a lot more flexible!!!

effect01

… so thats what I did…

To create this effect just open up Expression Design and create a new document.

Create a oval shape which is much taller than wide. its about 400px high and 25px wide.

oval1

Next up, apply a gradient to your oval. We need to set the gradient to Radial radial_option

and it needs to go from black to black, gradientstops

with the second stop of the gradients alpha set to 0%. stop_alpha2

oval_grad

Should look at bit like this

Now we need to edit the gradient to create the effect we want by editing the gradient properties. gradients-properties

properties

I’m setting the height of the gradient to about 2.5%. (remeber to unlock the constraints between your height and width of the gradient by clicking the link icon in between them)

Ok now we just need to edit the shape of the oval to cut off half of the gradient.
Use the direct select tool to move the points and splines to create a straight line on one side.

manipdone

And there you have it, a nice shadow breaker for you sites all made with XAML!

shad_complete

Another cool thing you can do with these shadows is, create a copy of your shadow, flip it and change it to white, this is called the Gina effect as coined by the guys at “from the couch”.

gina_effect

Thanks for reading, hope it helped and let me know how you go with it!

Alex



Tutorial: Simple Parent/Child Navigation in Silverlight

Update: I have added source code for your download and a demo of the navigation.

The best part about Silverlight is it provides heaps of great tools to use, so people like me who are completely graphically minded and a little bit developer stupid are still able to create sweet menus and the like.

This blog will show a simple way to create a menu that has all the main categories visible and when clicked will show your child links for that category, and when clicked again will make them disappear.

finished

For this tutorial I will be using Expression Blend and Visual Studio 2008.

Ok lets go!

Open a new Silverlight 2 project up in Blend, I’m not to worried about the width of the application at the moment, it can be changed any time.

There is however, an issue with the height, this menu gives to ability to have all child links open at once, which would cause the menu to be very high and probably push out the bottom of the page.

We can sort that out later, lets just get it working for now.

First thing to do is create a Stack Panel, this is found under the layouts tools.

untitled-3

Make this stack panel the rough width you would like your menu to be.
I’m setting mine to 200px wide and leaving the high on AUTO (this is so it scales when you make the children visible.

Now we can start adding buttons.

Here in lies the first trick to this menu, instead of using a normal button. go to your Asset Libraryasset and on the controls library, click the show all check box in the top right, this will give you heaps of controls to choose from. We want the “Toggle Button” control. (when you select a control it will add it to the button just above the asset library)

This control is sweet because it already has the on/off states built in that we will need for this menu.

So I have added 3 “toggle buttons” to my stack panel, they are 200px x 35px and aligned to the top/left.

At this point it’s a good idea to get your naming conventions down, I’m going to call my categories:
WORK
BIOS
and INFO

So name your buttons accordingly:
work_button
bio_button
info_button

also change the Content attribute (in the properties panel on the right) on the buttons to match.

buttons_in_stack

Now we need to add stack panels for each category, so:
work_stack
bio_stack
info_stack

These stack panels will be used to hold the child buttons for your categories, so they should sit under their parent.

your tree should look something like this now

your tree should look something like this now

If you double click a stack panel in the tree, it will have a yellow border around it, this means that any new items added will be inside that stack panel (same goes for any other items that can have other items placed inside it).

So double click your work_stack and add a few child buttons in.

I am making them 175 wide and 25 high, then I’m going to align them to sit to the top/right of the stack they live in.
This gives it a proper parent/child effect.

So do the same with the other stacks we just created, and now….. for some magic!

Set your category stacks attributes to collapsed, so they don’t exist till we want to call them, choose your first catagory button (work_button), go to the events panel events at the top right of your properties panel and you will see in the list, “checked” and “unchecked”, these are the key to your menu, double click the “checked” event and Blend will transport you into Visual Studio and even create the event for you!

private void Work_button_Checked(object sender, RoutedEventArgs e)
{
work_stack.Visibility = Visibility.Visible;
}

Add the red text into the event (blue text) it has created, all this does is change the visibility attribute on your stack panel (work_stack) from collapsed (we set that before) to Visible.

So now it should be showing the items when its clicked, but now we need to be able to turn the menu off again when clicked.

So back into Blend and in the events list again, double click the “unchecked” event and in the event it creates for you, enter this:

work_stack.Visibility = Visibility.Collapsed;

Just the same as the other but this will change it back to its collapsed state. The reason we are working with the visibility options is because its dynamic and we don’t have to worry about the height of the stack, if we animated it, it wouldn’t be as flexible.

Do this for the rest of your buttons and now you should have a working parent/child menu!

But it still looks like rubbish, lets change that! (this is the fun bit IMO)

Lets start with the categories buttons. Right click on work_button and go to: Edit control parts (template) > Edit a copy. Give your style a name and click OK.

Now you are editing you button directly, and in here I am going to just quickly make a nice modern and simple style button. I am deleting all the elements on the button except the Template, the Grid and the Content Presenter so there should be nothing left but the text, and now im going to add a plain green rectangle that fills the area (set the width and height to AUTO and all your margins to 0).

Tip: if you want to have a line in between each button, set your bottom margin to 1.

I have selected my colour for the rectangle and then made sure its sitting behind the text (move it’s position in the tree to accomplish this).

I’m not happy with where the text is sitting so I think I might move it to the left side a bit, but there is an orange border around my alignment options stopping me do it, how do I fix this? There is a little orange square next to these options, click it and go to Reset. Change your alignments now, this border means it has a binding to another property, so just remember you could break something else if you select reset in here (the alignments and margins should be ok though).

Next I’m going to hack up a little arrow with the pen tool pen_tool to sit next to my text, this will change when you click to see the children.

greenbutton

Now go to your Visual State Manager (VMS) and under the CheckStates group, selected checked, and with it selected go back to your triangle and rotate it to point down.

vsm

While you have your VSM handy, move the 0s that is next to your CheckStates group, and slide it up to about 0.2s. This will give you a nice little 0.2 second animation.

Awesome, we are nearly done, get out of the template view by click work_button in your bread crumb at the top of the art board. breadcrumb

Now right click the rest of your category buttons and go to  Edit Control Parts (templates) > Apply Resource > Name of resource.

This should apply the button style you just made to the rest of your buttons… Cool huh!

Note: to change the colour of the text on your buttons, while in normal view (not in template view), select the button and change its foreground colour. The reason its set up like this is to give you the ability to have each button’s text colour different.

and I would say that is about it, have a play around with different styles and adding hovers to your buttons with the VSM and you should be able to make a pretty sweet menu!!!

Thanks for reading and let me know how you go with it!

Alex.





Using Complex Vector Shapes in Expression Design

I just want to throw together a really quick post on how to create complex shapes in expression design.

There are heaps of sweet tools at your disposal to create the look you want and here’s how to use them.

2shapes

Here is 2 simple shapes I am going to use for the examples, with a blue gradient, corner radius of 20px and a stroke thickness of 5px

Compound Paths

compound

Compound paths take the existing paths and find the overlapping sections and remove them (the paths are un-altered but the shape is merged).

How to: Select both shapes and goto Object > Compound Path (or just hit ctrl+8)

Clipping Paths

Clipping paths remove anything that is outside the selected “clipping path”.

clippingpath

I have turned the top shape into a clipping path, so it deletes any part of the bottom shape that is outside its path, when you create a clipping path you are given the option on which path you wish to use as the clipping path.

How to: Select both shapes and goto Objects > Clipping path  and select if you want to top or bottom shape to be the clipping path, you can also release a clipping path from here.

Intersect

Intersect is very cool, all it does is find the overlapping sections of the 2 objects and keeps it, then deletes the rest

intersect

How to: select the 2 objects, goto Objects > Path Operations > Intersect

Divide

This takes each section of the paths and “divides” them into parts.

devide

This is cool is you wanted to explode the object.

divide

How to: Select the 2 objects, Object > Path Operations > Divide (to detach each section just select each part and move as if they were separate objects)

Unite

Unite simply makes the 2 objects one. Removing any overlapping sections

unite

How to: Select the 2 objects, Object > Path Operations > Unite

There are 2 other options in the Path Operations menu which are:

Front minus back and Back minus front

These items simply remove one object from the other.

fmb

How to: Select the 2 objects, Object > Path Operations > Front Minus Back (or Back Minus Front)

And last but not least… the Envelope distort tool…

This doesn’t need 2 objects to be done, but it will work with multiple objects selected…

This will create a grid over your object, and using the Direct Select tool directselect you can manipulate each point in the grid for some really cool effects!

envelope

How to: Select you object/s and goto Object > Envelope Distort, then use the direct selection tool to manipulate each point.

Hopefully with these tricks you will be able to get the most out of Expression Design and create some really interesting stuff.

textperson

Made using compound paths and clipping paths

Thanks

Alex