Creativity expression

(by Francesco Usai, as Geckoz)

Di ritorno da dove?

Ma dal Game Day di Napoli naturalmente. Per chi non ha potuto esserci, non ha voluto esserci, o non sapeva dell’esistenza di quest’evento la faccio breve: un’intera mattinata dedicata alla realizzazione di videogames tramite l’utilizzo di due tecnologie di punta del macrocosmo Microsoft : Silverlight e XNA. La giornata del 25 è stata decisamente intensa, dopo una dovuta e necessaria introduzione del Prof. Peron, Presidente del Corso di Laurea in Informatica dell’Università Federico II, e di Mauro Minella, Academic Relations Manager di Microsoft, ha preso la parola l’ospite d’onore della giornata, ovvero Joe Wilson, Senior Director of Academic Initiatives in Microsoft ( o genio, profeta, scienziato come ha scritto un giornale ), che ha parlato delle potenzialità degli studenti e dei motivi per cui Microsoft punta tantissimo su di essi, proiettando una fantastica presentazione in WPF, molto american-style, ma che ha quasi fatto piovere dell’intimo femminile sul palco della Sala Azzurra del complesso di Monte Sant’Angelo dove si è svolto l’evento.

Terminati i convenevoli è arrivata la sostanza, la polpa, ciò per cui gli studenti erano lì : lo sviluppo dei videogames.Ha preso la parola Davide Luzzu (Dave) MSE ed esperto di UI Design, che ha subito catturato l’attenzione dei presenti con il suo modo di esporre e con delle slide simpatiche e (come sempre) curatissime. La sessione Silverlight, durata circa 50minuti, è stata intensa, impegnativa e molto incentrata sul design, ma stando tra il pubblico ho notato grande curiosità ed interesse, che si è mantenuto vivo fino alla fine della sessione. Il momento topico è stato sicuramente la scenetta di Dave Developers VS Designers, una piece teatrale di spessore!

Non c’è tanto tempo da perdere. Rapido coffee-break e sale sul palco Giuseppe Maggiore MSP (super)senior ed esperto di XNA, che impiega pochissimi minuti ad ammaliare i presenti, me compreso. Parlantina sciolta, accento veneziano D.O.C. e grande conoscenza della materia, ha tirato su in 50 minuti un mini-videogame X-Wing VS Tie-Fighters stile Star Wars con gestione dei danni,sistemi particellari, esplosioni, grafica accattivante e il tocco finale di una nebulosa spaziale da applausi, che sono partiti prima ancora che la session fosse terminata.

In definitiva la giornata è stata un ottimo successo di pubblico, sia in termini di numero che in termini di gradimento. Per questo onore va ai ragazzi di Napoli : Raffaele, Tino e Michele ( e gli altri che non ho avuto modo di conoscere) che hanno tirato su un evento con i controfiocchi.

Infine mi permetto una piccola parentesi personale:

sono stati due giorni molto piacevoli in cui ho avuto modo e piacere di conoscere Mauro e Francesca, e gli altri MSP che prima del 25 erano più che altro nomi ed indirizzi e-mail. Inoltre ho potuto toccare con mano quali sono gli obbiettivi di questa iniziativa e del ruolo di MSP.

Non mi dilungo oltre… anche se ci sarebbe tanto da dire e raccontare.

Ke’

P.S. ecco gli speakers Dave e Giuseppe :

P.P.S. Gli indispensabili link ai loro personal blog  su Academic Club:

http://blogs.academicclub.org/uidev

http://blogs.academicclub.org/xna

Hi guys on 25th of February 2010 I’ll be giving a speech in Naples with Giuseppe Maggiore, in presence of Joe Wilson, Microsoft Senior Director of Academic Initiatives for Developer and Platform Evangelism, and that’s a big deal

I’ve created in no-time the graphics for blog, cards, posters…hopefully youìll like them

you can find the official blog @ http://blogs.academicclub.org/gameday , definitaly a cool template

hope you like!

-dave

Right guys…another video tutorial from udev and CodeZero !

And obviously the code and the slides in a zip

Hope you like

-dave

One of the most important objectives in every program is to try to have reusable code. In Expression Blend it’s a little tricky to create a Panel that holds components and arrange them visually in a custom way: so what we want to create in this tutorial is a custom Panel that we can reuse in Expression Blend 3.

Let’s start with the main idea, which can be anything: we…we…well…let me think (….10 mins later), uh right as shown in the blend example, we want to put all elements in circle around the center.

What we need is to define a new class and derive it from Panel. (I’m inserting line numbers so it’s easy to read, all source code it’s @ the end )

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Text;

   5:  using System.Windows.Controls;

   6:   

   7:  namespace uidev.Panels

   8:  {

   9:      public class CircularMenuPanel : Panel

  10:      {

  11:   

  12:      }

  13:  }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Then we need a method to refresh the view when we insert the elments, and use it with a little trick: a call from Dependency Properties, so when a parameter has been changed the property calls the method.

1. Add a private Refresh() method
2. Add a static void method that calls the Refresh() method
3. Add a Dependency Property that calls the static void method
4. Add a variable that the Dependency Property refers to

   1:   public class CircularMenuPanel : Panel

   2:      {

   3:          //step 3

   4:          public static readonly DependencyProperty RadiusProperty =

   5:              DependencyProperty.Register("Radius", typeof(double), 

   6:              typeof(CircularMenuPanel),

   7:              new PropertyMetadata(CircularMenuPanel.RadiusChanged));

   8:   

   9:          //step 2

  10:          private static void RadiusChanged(DependencyObject sender, 

  11:              DependencyPropertyChangedEventArgs e)

  12:          {

  13:              ((CircularMenuPanel)sender).Refresh();

  14:          }

  15:   

  16:          //step 4

  17:          public double Radius

  18:          {

  19:              get { return (double)GetValue(RadiusProperty); }

  20:              set { SetValue(RadiusProperty, value); }

  21:          }

  22:   

  23:          // step 1

  24:          private void Refresh()

  25:          { 

  26:          

  27:          }

  28:      }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now when you change the Radius variable, the DependencyProperty “RadiusProperty” listens the changes and updates RadiusChanged that calls Refresh().

Now we want that each time a element is added we ensure enough space, so we have to override MeasureOverride and ArrangeOverride. In addiction we can, it’s up to us, animate each element added…just to make thing more interesting.

   1:          protected override Size MeasureOverride(Size availableSize)

   2:          {

   3:              Size resultSize = new Size(0, 0);

   4:   

   5:              foreach (UIElement child in this.Children)

   6:              {

   7:                  child.Measure(availableSize);

   8:                  resultSize.Width = Math.Max(resultSize.Width, 

   9:                      child.DesiredSize.Width);

  10:                  resultSize.Height = Math.Max(resultSize.Height, 

  11:                      child.DesiredSize.Height);

  12:              }

  13:   

  14:              resultSize.Width =

  15:                  double.IsPositiveInfinity(availableSize.Width) ?

  16:                  resultSize.Width : availableSize.Width;

  17:   

  18:              resultSize.Height =

  19:                  double.IsPositiveInfinity(availableSize.Height) ?

  20:                  resultSize.Height : availableSize.Height;

  21:   

  22:              this.Animate();

  23:   

  24:              return resultSize;

  25:          }

  26:   

  27:          protected override Size ArrangeOverride(Size finalSize)

  28:          {

  29:              this.Refresh();

  30:              return base.ArrangeOverride(finalSize);

  31:          }

  32:   

  33:          private void Animate()

  34:          {

  35:              int AnimationDuration = 200;

  36:              int index = 0;

  37:              foreach (FrameworkElement element in this.Children)

  38:              {

  39:                  element.Opacity = 0;

  40:                  int time = AnimationDuration * (index + 1);

  41:   

  42:                  DoubleAnimation opacityAnimation = new DoubleAnimation();

  43:                  opacityAnimation.From = 0;

  44:                  opacityAnimation.To = 1;

  45:                  opacityAnimation.BeginTime = new TimeSpan(0, 0, 0, 0, time);

  46:                  opacityAnimation.Duration = 

  47:                      new Duration(new TimeSpan(0, 0, 0, 0, AnimationDuration));

  48:   

  49:                  element.BeginAnimation(FrameworkElement.OpacityProperty, 

  50:                      opacityAnimation);

  51:                  index++;

  52:              }

  53:          }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

The last thing to do is to implement Refresh() method.

We can subdivide the actions taken in this method:

1. Check if the width/height are NaN (Not a Number = not set)
2. Iterate through each element in the Panel
3. Calculate a transform (in this case a Rotation) for each element
4. Check if the desired width/desired height are NaN
5. Apply Arrange method to the element

   1:          private void Refresh()

   2:          {

   3:              int count = 0;

   4:              int initialAngle = 0;

   5:              int angleItem = 30;

   6:              if (double.IsNaN(this.Width))

   7:              {

   8:                  this.Width = 200;

   9:              }

  10:              if (double.IsNaN(this.Height))

  11:              {

  12:                  this.Height = 200;

  13:              }

  14:   

  15:              foreach (FrameworkElement element in this.Children)

  16:              {

  17:                  RotateTransform r = new RotateTransform();

  18:                  r.CenterX = 0;

  19:                  r.CenterY = 0;

  20:                  r.Angle = (angleItem * count++) - initialAngle;

  21:                  element.RenderTransform = r;

  22:                  double x = this.Radius * Math.Cos(Math.PI * r.Angle / 180);

  23:                  double y = this.Radius * Math.Sin(Math.PI * r.Angle / 180);

  24:   

  25:                  if (!(double.IsNaN(this.Width)) && !(double.IsNaN(this.Height)) 

  26:                      && !(double.IsNaN(element.DesiredSize.Width)) 

  27:                      && !(double.IsNaN(element.DesiredSize.Height)))

  28:                  {

  29:                      element.Arrange(new Rect(x + this.Width / 2 - r.CenterX, 

  30:                          y + this.Height / 2 - r.CenterY, element.DesiredSize.Width, 

  31:                          element.DesiredSize.Height));

  32:                  }

  33:              }

  34:          }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Note that element.Arrange is what let the visual element refresh the Blend view! So it’s basically the core method.

The final step is to make Blendize it, so we can manipulate its properties as  we do with all others components/panels. To do this we add a custom category, just up the Radius variable, and all other variables we are going to create.

   1:          [Category("Circular Menu")]

   2:          public double Radius

   3:          {

   4:              get { return (double)GetValue(RadiusProperty); }

   5:              set { SetValue(RadiusProperty, value); }

   6:          }

We enable the Category option adding a using to our statements:

   1:  using System.ComponentModel;

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

So, how do I use it in Expression Blend?

Before you can use this component in Blend, you should build your solution, then open Expression Blend 3, and look into Assets and click on Project. There you’ll find all your custom Panels, as shown below:

Then click on CircularMenuPanel, the component we just created, and drag as usual

Now let’s add some components…which ones? Anything will work fine we can add buttons:

We also notice that the buttons are stretched into a really small circle and each element added gains a 30° degrees rotation. That’s what’s we specified at the Refresh’s beginning method

   1:          private void Refresh()

   2:          {

   3:              int count = 0;

   4:              int initialAngle = 0;

   5:              int angleItem = 30;//specifies the angle

   6:              .....

   7:          }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }and we did not touch the Radius variable we created.

To modify the Radius, and make the circle a little bit larger we have to select the CirclularMenuPanel from “Objects and Timeline” and then go to the properties panel on the right and look for Circular Menu category:

Then modify the radius and watch what happens to your view!

The view refreshes in real time!!!!!!

Not only, each element added is animated, in this case its opacity goes from zero to 1.

That’s all folks, I really hope that you enjoyed this tutorial. Comments really appreciated, and suggestions more than everything are welcome!

As final thing the link @ the code:

-dave

Code Zero is proud to present the first tutorial made with the new Design.

Here we talk about how to create a state in SketchFlow and play with it. Basically the easy part is to activate the state, and the tricky part is how to deactivate it!

So let me show you how to do it. The video is in english, and since I’m not english native and I don’t get many chances to talk in english, please forgive my errors

And as usual the direct link to download it or watch it into your WMV player

And the source codes and slides used in this demo

Comments and suggestions are welcome

-dave

 Yes Guys, new year, new stuff. We already produced tons of materials and lots news are ready to be released, so we think is time to brend our stuff. It will still Free of course, but we also need some copyrights. In few days we’ll set up a license to release with our stuff.

The idea is to try to review our style while mantaining the basic design language. This will begin with Design and will be with all material we release.

So we’ll hope that you enjoy our progress:

Code Zero Design© has lended!

-dave

Uidev is kinda rockin’ this month, we’ve ( which means me ) go a lot of videos to show.

Today we have the ability to import into Microsoft Expression Blend 3 some 3D Models. By default we can add just with drag and drop only Wavefront *.obj files.

Here goes how to do it. I’m sorry if is in italian, but the video is made on purpose to show the sequences

And here goes the direct link

and the template… obviously

-dave

Hi guys, today I’m nicely productive, and I was looking some inspiration on text Fonts when I found this video. This Type in Motion Rocks! this Guy got an incredible portfolio

enjoy it!

-dave

Finally you got the end part!

and the link to watch it directly into your WMV player

-dave