Voy a empezar una serie de posts con el objetivo de explicar de una manera sencilla como migrar la “mente flashera" a Blend, tanto con WPF como con Silverlight 2. El primer día que nos instalamos Blend con la intención de trastear un poco, nos sentimos un poco frustrados ya que aunque parece que es muy similar a flash, no lo es tanto. La manera de pensar de Blend (WPF&Silverlight) es distinta a Flash. Pero por suerte! cuando le pilléis el punto, veréis que tiene muchas cosas mas sencillas y mejor pensadas para que hagáis aplicaciones interactivas! y vuestra imaginación será libre de fluir entre los bytes.
Vamos a empezar desde principio y bajo punto de vista del Diseñador. Así que si eres desarrollador puede que esto no te sea muy útil. Bueno vamos a lío!
Instalando Blend, WPF & Silverlight 2
A diferencia de flash, en el cual solo tenemos que Instalar Adobe Flash CS3 y empezar a pulsar compulsivamente Ctrl+Enter xD, Para poder comenzar a trastear, vamos necesitar instalarnos más cosillas.
- Microsoft .Net FrameWork 3.5
- Microsoft Expression Blend 2.5 (o superior)
- Microsoft Silverlight 2 (Beta por el momento)
- Microsoft Visual Studio (Opcional pero muy recomendable!) y las tools de Silverlight.
Una vez tengamos esto corriendo en nuestro ordenador y podemos empezar a meter caña. Abrimos Blend, seleccionamos New Project y Seleccionamos el tipo de proyecto que queramos en este caso vamos a empezar con Silverlight 2.
Si todo ha ido como esperamos, (arriba tenéis una captura de Blend listo para empezar un proyecto.) vamos a comenzar definiendo un poco algunos conceptos.
Proyectos de Silverlight: .SLN vs .FLA
Como sabéis, en Flash, tenéis un archivo .FLA que contiene todo. Desde imágenes, Dibujos vectoriales, animaciones, sonidos, Scripts, etc... Y todo este contenido lo tenéis en la ventana de Librería. Pues bien, tanto en Silverlight como en WPF, no tenemos todo en un solo archivo. Sino que tenemos una carpeta donde están todos los recursos de nuestro proyecto (Imágenes, Sonidos, Partes de Código, Videos etc) Pensad que esto tiene muchas ventajas, ya que podemos cambiar contenido sin tener que abrir blend. Si quisiéramos cambiar una Imagen por ejemplo, pues simplemente sustituimos la que este en la carpeta y listo. Nada más empezar un proyecto de Silverlight, nos encontraremos esta estructura de carpetas.
La carpeta bin, es donde se "publicará" o compilará nuestra web. Las carpetas obj y Propieties no os preocupeis por ella por el momento. El resto como veís son Archivos XAML y XAML.CS son vuestra Web, vuestros Formularios, vuestras animaciones, vuestros controles etc. Pensad en esto como una Web HTML de toda la vida. Para que nos entendamos los archivos XAML son como HTML y los XAML.CS son como archivos JS que controlarán el html. Evidentemente esto no es exactamente asi, pero la entendernos esta bien.
Si subís un nivel de la carpeta actual, os encontrareis la Carpeta que contiene todo, con el nombre del proyecto (en este caso se llama Conceptos) y un archivo SLN que es el que tenies que abrir con Blend.
Ahora ya podeis trastear a gusto! Haced algunos Circulos, Cuadrados y tal. Intentad rellenalos con degradados y cosas asi. Poned algun boton en la aplicación, algun checkbox.. y para probarlo todo en el explorador presionad F5 !
Pronto: Blending Flash Parte 2: Conceptos.