Nous vous convions en partenariat avec l’Espace multimédia de Meudon à la première « Graphic Live Session ! » sur le thème « Russia Story » en écho à l’année France-Russie 2010.
Le temps d’une soirée, huit équipes de graphistes s’affronteront en utilisant des outils de création multimédia. Vous pourrez suivre, sur grand écran et en temps réel, l’évolution de créations graphiques originales !

Au bout du temps imparti, les réalisations seront soumises au vote d’un jury (Karine Lemalet – Le Cube, et Guylaine Monnier – Regart.net/Web flash festival/Flashxpress), qui distinguera les graphistes gagnants de la première « Graphic Live Session ! ».

DATE: Vendredi 9 Avril – 20h
LIEU: Espace multimédia de Meudon, 5 rue Paul Demange – 92360 MEUDON-LA-FORET
PARTICIPANTS: Equipes en binôme, avec présélection sur présentation d’un book Règlement du concours disponible à l’Espace multimédia de Meudon.
LOTS: Appareils photo numérique – Tablettes graphiques + des surprises !
PUBLIC: Entrée libre
Renseignements et réservations :
01 46 30 73 75
espace.multimedia@mairie-meudon.fr

Formulaire d’inscription et site Internet : http://multimedia.meudon.free.fr

Extrait du communiqué de presse :

L’espace multimédia de Meudon organise sa première « graphic battle » le vendredi 9 avril 2010 à 20h. Une soirée placée sous le signe de la créativité et de l’originalité, dont l’idée est simple : une rencontre de graphistes professionnels et amateurs, s’affrontant dans le but commun de créer des œuvres graphiques en live. Pour cette première session, le concours regroupe 16 graphistes travaillant en binôme.

L’évènement ne s’adresse pas seulement aux initiés: cette soirée est gratuite et ouverte à tous. Des vidéo-projecteurs permettent au public de visionner en temps réel l’évolution des oeuvres et de suivre le processus d’une création multimédia. Durant le temps des performances, des contraintes sont imposées aux participants, rehaussant davantage le défi. Les réalisations sont ensuite jugées par un jury formé pour l’occasion. A l’issue de la rencontre, les gagnants remportent des lots.

Enfin, les prestations des graphistes sont accompagnées de performances musicales orchestrées par un DJ.
Ce concept, expérimenté il y a une dizaine d’années et relancé à Paris depuis peu par le Vector Lounge’s Dune et le magazine Advance Creation, se veut plus impressionnant au gré de l’évolution des technologies et des performances. La maestria de certains graphistes à exécuter gestes et techniques équivaut à la vision que l’on peut avoir d’un peintre devant sa toile. Les images, projetées sur grand écran, apportent une dimension supplémentaire à leurs réalisations, pour le plus grand plaisir du public.

Juste un petit post pour vous faire un petit retour sur les Techdays et mettre à disposition mes Slides concernant la collaboration Designer Développeur et SketchFlow. Dans l’une des photos de la galerie ci-dessous, vous noterez la présence de Frédéric Queudret CEO de la société MPoware. Il est en pleine démonstration de l’application Cyclone dédiée à la conception et à la diffusion d’applications pour le CloudComputing. Vous remarquerez la présence de la team Access-It. Frédéric a également présenté Cyclone en conférence, le descriptif de sa session est ici. Bravo à lui et à Aude Mousset qui rejoint MPoware

SketchFlow

• Slides
• Descriptif de la session sur le site des techdays

Collaboration Designer Développeur

• Slides
• Descriptif de la session sur le site des techdays

Si certains ont des questions sur les Slides n’hésitez pas…

Bon, c’est un peu du copinage, mais il le mérite : Eric Ambrosi, mon estimé collègue et voisin de bureau, a terminé son ouvrage « Pratique de Silverlight » (éd. Pearson) qui sortira le 2 février dans toutes les bonnes crèmeries, mais qui est d’ores et déjà dispo en PDF sur le site de Pearson.

J’ai suivi pendant un an la gestation douloureuse du bouquin, les cernes, la fatigue, mais aussi le sérieux et l’engagement d’Eric dans la rédaction de cet ouvrage. Je peux vous dire que c’est du tout bon, d’une part pour un apprentissage pointu des outils – la pédagogie est parfaitement pensée, les exemples sont nombreux et détaillés – mais aussi par la réflexion poussée sur la mise en relation des métiers de designer, développeur et intégrateur, au sein d’un workflow dont Eric dessine les contours avec réflexion et passion.

Bravo Ricko, on te souhaite, sinon des ventes astronomiques, la reconnaissance et la gloire pour ce livre de référence sur Silverlight.

Comment créer un preloader d’image avec barre de progression et pourcentage ? La réponse ici !

1 – Préparation du document

−    Créer un nouveau document AS3 (Ctrl + N).

−    Créer 1 calque et nommez le : Actions

2 – Création des éléments graphiques du preloader.

−    Créez 2 symboles de type clip (Ctrl + F8) et nommez les : preloader et barre.

Nous avons maintenant deux clips dans la bibliothèque : preloader et barre.

−    Double-clickez sur le clip barre pour accéder à son interface graphique et dessiner la barre de chargement  avec l’outil rectangle.

−    Double-clickez sur le clip preloader et insérer le clip barre.

Pour pouvoir contrôler dynamiquement par la suite l’échelle (largeur en pourcentage) de votre clip barre, nous devons lui donner un nom d’occurrence : barreDeChargement_mc.

−    Sélectionnez le clip barre sur la scène et écrivez “barreDeChargement_mc” dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Pour afficher le taux de chargement, nous avons besoin d’un champs texte dynamique instancié.

−    Sur un deuxième calque, créez un champs de texte dynamique à l’aide de l’outil Texte et et écrivez “pourcentage_txt” dans le champ <nom d’occurrence> de l’inspecteur de propriétés.

Le clip preloader est prêt à l’emploi.

3 – Exportation pour ActionScript du clip preloader.

Pour créer dynamiquement ce clip sur la scène, nous devons l’exporter pour ActionScript.

−    Utilisez la boîte de dialogue Propriétés du panneau Bibliothèque.

1. Sélectionnez le clip preloader dans le panneau Bibliothèque.
2. Dans le menu contextuel du panneau Bibliothèque, choisissez Propriétés….

3. La boîte de dialogue Propriétés du symbole apparaît.

4. Dans la boîte de dialogue Liaison, activez l’option Exporter pour ActionScript.
Les champs Classe et Classe de base sont alors activés.
Par défaut, le champ Classe de base a la valeur flash.display.MovieClip

5. Cliquez sur OK.

Code AS3

−    Sur le calque Actions, Frame 1, ouvrez le panneau Actions et ajoutez le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

	/**
	 * @subject Preloader AS3
	 * @author Muriel Charon
	 * @date Janvier 2010
	 */
 
//Variables Preloader et Loader
var preloader:Preloader;
var chargeur:Loader;
 
//Instanciation de l'objet preloader
preloader = new Preloader();
 
//Centre le preloader sur la scène
preloader.x = Math.round ( (stage.stageWidth - preloader.width) / 2);
preloader.y = Math.round ( (stage.stageHeight - preloader.height) / 2);
 
//affichage du preloader avec la méthode addChild()
addChild(preloader);
 
//Instanciation de l'objet chargeur
chargeur = new Loader();
 
//L’écoute des différents événements propres au chargement se fait auprès de l’objet LoaderInfo accessible par la propriété contentLoaderInfo de l’objet Loader
 
//ProgressEvent.PROGRESS : diffusé lorsque le chargement est en cours. Informe sur le nombre d’octets chargés et totaux. Sa fréquence de diffusion est liée à la vitesse de téléchargement de l’élément
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, chargement);
 
//Event.COMPLETE : diffusé lorsque le chargement est terminé
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, finChargement);
 
//IOErrorEvent.IO_ERROR : diffusé lorsque le chargement échoue
chargeur.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
 
//Chargement de l'image externe avec la methode load(). L'objet URLRequest contient l'adresse de l'élément à charger
chargeur.load(new URLRequest("la_gare.jpg"));
 
function chargement(pEvt:ProgressEvent):void
{
	//bytesLoaded et bytesTotal sont des propriétés qui renvoient le nombre d'octets de contenu chargé
	var ratio:Number = pEvt.bytesLoaded / pEvt.bytesTotal;
 
	//Affichage du taux de chargement dans le champs texte dynamique
	preloader.pourcentage_txt.text = (Math.round(ratio* 100).toString())+" %";
 
	//Mise à l'echelle de la barre de progression proportionnellement au taux de chargement
	preloader.barreDeChargement_mc.scaleX = ratio;
}
 
function finChargement(pEvt:Event):void
{
	//suppression de l'objet preloader
	removeChild(preloader);
 
	//suppression des références vers l'objet preloader pour qu'il puisse être supprimé de la mémoire
	preloader.pourcentage_txt = null;
	preloader.barreDeChargement_mc = null;
 
	//affichage du chargeur avec la méthode addChild()
	addChild(chargeur);
}
 
function onIOError(pEvt:IOErrorEvent):void
{
	//indique la nature de l'erreur
	trace(pEvt);
}
 
//**FIN DU SCRIPT

Et voilà, votre preloader est prêt à l’emploi !

Télécharger les sources : preloader_AS3_src.zip

• us version

Dans une production conjointe de Regart.net et de Microsoft, j’ai participé au développement d’un plugin pour wordpress au côté de Boris Forconi. Celui-ci est basé en partie sur celui de Tim Heuer. L’idée était de créer une galerie Silverlight en utilisant l’API wordpress mais en développant la galerie elle-même en Silverlight. Boris s’est occupé de toute la partie PHP et de l’intégration à Wordpress. Pour ma part, j’ai développé la partie Silverlight. L’objectif est de fournir un moyen simple de mettre des images en ligne pour Wordpress comme montré ci-dessous :

Il suffit d’écrire une balise de type :

Vous pouvez définir les paramètres comme indiqué dans l’exemple ci-dessous :

• width=400
  //définit la largeur de la galerie à 400 pixels
• height=400
  //définit la hauteur de la galerie à 400 pixels
• leftArrow=true
  //affiche ou cache la flèche de gauche
• rightArrow=true
  //affiche ou cache la flèche de droite
• pageNumbers=true
  //affiche ou cache la pagination
• thumbnails=true
  //affiche ou cache les vignettes
• fill=uniform
  //permet d’indiquer un mode de remplissage vous avez le choix entre :
  //   uniform (remplissage homothétique partiel selon possibilité)
  //   uniformtofill (remplissage avec homothétie)
  //   fill(remplissage avec déformation les dimensions)
  //   none (préserve les dimensions originales)
• bgcolor
  //couleur d’arrière plan
• bgmode
  //sans arrière plan ou avec arrière plan windowless

La première bonne nouvelle, c’est qu’il est possible d’utiliser un menu pour paramétrer tout ça en 2 secondes. Il s’ajoute à l’administration des articles Wordpress. Une petite fenêtre apparaît lorsque vous cliquez sur le bouton (voir ci-dessous).

La seconde bonne nouvelle, c’est que nous mettrons rapidement les sources à disposition sur wordpress.com. De cette manière vous pourrez modifier entièrement le visuel de la galerie côté Silverlight. Dans tous les cas, celle-ci récupère dynamiquement les images de la galerie Wordpress. Vous pouvez en télécharger une première version ici.

Il suffit d’écrire une balise de type : [sl-gallery: ...]

Vous pouvez définir les paramètres comme indiqué dans l’exemple ci-dessous :

• width=400//définit la largeur de la galerie à 400 pixels
• height=400//définit la hauteur de la galerie à 400 pixels
• leftArrow=true//affiche ou cache la flèche de gauche
• rightArrow=true//affiche ou cache la flèche de droite
• pageNumbers=true//affiche ou cache la pagination
• thumbnails=true//affiche ou cache les vignettes
• fill=uniform//permet d’indiquer un mode de remplissage vous avez le choix entre ://   uniform (remplissage homothétique partiel selon possibilité)//   uniformtofill (remplissage avec homothétie)//   fill(remplissage avec déformation les dimensions)//   none (préserve les dimensions originales)
• bgcolor (couleur d’arrière plan)
• bgmode (sans arrière plan ou avec arrière plan windowless)

La première bonne nouvelle, c’est qu’il est possible d’utiliser un menu pour paramétrer tout ça en 2 secondes. Il s’ajoute à l’administration des articles Wordpress. Une petite fenêtre apparaît lorsque vous cliquez sur le bouton (voir ci-dessous).

La seconde bonne nouvelle, c’est que nous mettrons rapidement les sources à disposition sur wordpress.com. De cette manière vous pourrez modifier entièrement le visuel de la galerie côté Silverlight. Dans tous les cas, celle-ci récupère dynamiquement les images de la galerie Wordpress et ce travail ne sera pas à refaire.

Télécharger le .zip du plugin sl-gallery

• us version

Je mets en ligne deux nouveaux composants exposés ci-dessous :

Vous pouvez  télécharger la librairie tweenedcontrols ici.

ColorChooser
Depuis sa version beta, ce contrôle a été largement améliorée. Il est désormais possible de cliquer directement sur la surface des deux nuanciers pour sélectionner une couleur. La propriété SelectedColor est cette fois de type Color. Tous les tests d’écriture d’une couleur sont directement accomplis par cette classe. Cela simplifie beaucoup le code et évite l’utilisation d’une classe de conversion.

ColorPicker
Ce composant a pour but de faire apparaitre un ColorChooser via l’utilisation interne d’une instance de Popup. Toute la problématique consiste à placer le ColorChooser à côté du ColorPicker. À cette fin, j’ai créé une méthode d’extension pour la classe Popup. Il est également possible d’accéder au style et template du ColorChooser directement par l’intermédiaire des menus Edit Template=> Edit Aditional Template comme montré ci-dessous.

ColorPicker possède la propriété de dépendance IsOpen couplée aux événements Opened et Closed.
Mis à part cette astuce ce contrôle se contente d’exposer, les propriétés et événements du ColorChooser.

je remonte ce post de Aude Mousset qui explique comment contourner le problème d’embarquement des polices dont le nom contient des caractères spéciaux…

J’ai finalisé récemment l’écriture de mon livre Pratique de Silverlight dédié à la technologie du même nom. Celui-ci devrait faire plus de 500 pages et s’articule autour de l’apprentissage des bonnes pratiques de production en équipe. Il est édité par Pearson Education France et sort le 2 février 2010. Je ne l’ai pas conçu comme un glossaire de fonctionnalités mais plutôt comme un guide de production et d’apprentissage. Il trace un portrait robot de la conception d’applications Silverlight, en partant de la liste d’affichage jusqu’au chargement de données externes au sein du modèle de conception MVVM en passant par le prototypage ou l’organisation des flux de production.

L’idée générale du livre est de fournir des exemples concrets téléchargeables aussi bien pour les graphistes que pour les développeurs. Vous pouvez en réserver un exemplaire sur le site  de Pearson France ici.

Cet ouvrage s’adresse aux intégrateurs Web, aux designers interactifs, aux graphistes purs et aux développeurs web peu familier de la plateforme .Net. Il crée un pont entre développement et graphisme, pour améliorer la collaboration et la productivité.

Son contenu prend en compte les spécificités des développeurs et des designers interactifs sous formes d’exercices complémentaires. Le C# est choisi comme seul langage logique pour plus de clarté. La théorie, les exemples et exercices (téléchargeables) sont progressifs et peuvent constituer une base d’apprentissage pour les non développeurs. Toutefois ce livre ne s’adresse pas aux débutants du Web, mais bien aux personnes qui possèdent des bases acquises sur d’autres technologies.

Voici le sommaire du livre

Partie I. Approche de Silverlight

1. Introduction
1.1 Qu’est-ce que Silverlight ?
1.2 De .Net 1 à Silverlight
1.3 Les avantages de Silverlight
1.4 La suite Expression Studio
1.5 Positionnement métier
1.6 Langages de développement et choix

2. Le couple XAML / C#
2.1 XML
2.2 XAML, un langage déclaratif puissant
2.3 Les fondamentaux du langage C#

3. HelloWorld
3.1 Une première application Silverlight
3.2 Architecture d’une solution
3.3 Le conteneur racine
3.4 Ajouter du texte
3.5 Tester et compiler

4. Un site plein écran en 2 minutes
4.1 Les projets de type site Internet
4.2 Créer des conteneurs redimensionnables
4.3 Le composant bouton
4.4 Ajouter de l’interactivité
4.5 Fichiers déployés

5. L’arbre visuel et logique
5.1 Composants visuels
5.2 Principe d’imbrication
5.3 Ajouter des enfants à la liste d’affichage
5.4 Supprimer des objets de l’arbre visuel
5.5 Échanges d’index

Partie II. Interactivité et création graphique

6. Animations
6.1 Introduction
6.2 Animer avec Expression Blend
6.3 Gérer l’accélération
6.4 Animer avec C
6.5 Les transformations relatives
6.6 Animer des particules

7. Boutons personnalisés
7.1 Créer un lecteur vidéo
7.2 Style visuel
7.3 Bouton générique
7.4 Le gestionnaire d’états visuels
7.5 Le bouton interrupteur ou ToggleButton

8. Interactivité et modèle événementiel
8.1 Les fondements du modèle événementiel
8.2 Supprimer l’écoute d’un événement
8.3 Le couplage faible en pratique
8.4 Propagation événementielle
8.5 Les comportements

9. Les bases de la projection 3D
9.1 L’environnement 3D
9.2 Les propriétés 3D
9.3 La caméra
9.4 Introduction aux matrices

10. Prototypage dynamique avec SketchFlow
10.1 L’environnement
10.2 Prototype simple
10.3 Le lecteur SketchFlow
10.4 Interactivité
10.5 Interface riche

Partie III. Conception d’applications riches

11. Ressources graphiques
11.1 Qu’est-ce qu’une ressource
11.2 Les pinceaux
11.3 Les polices de caractères
11.4 Styles et modèles de composants
11.5 Le modèle Slider
11.6 Les liaisons
11.7 Le modèle ListBox

12. Composants personnalisés
12.1 Contrôle utilisateur
12.2 Boîte de connexion
12.3 Contrôles personnalisables

13. Médias et données
13.1 Chargement de médias
13.1.1 Chargement dynamique d’images
13.1.2 Formats vidéo et modes de diffusion
13.1.3 Un lecteur vidéo simple
13.1.4 Chargement dynamique de vidéos
13.2 Conception MVVM
13.2.1 Principes
12.2.2 Modèle
12.2.3 Vue-Modèle
13.3 Chargement de données
13.3.1 L’objet WebClient
13.3.2 Introduction à LINQ
13.3.3 Expression lambda
13.3.4 Consommer du XML avec LINQ
13.3.5 Charger un flux JSON
13.3.6 Sécurité inter-domaine

• us version

Pour les besoins d’une production récente, j’ai du concevoir un contrôle de progression circulaire nommé PieProgressBar. Ce dernier hérite de la classe RangeBase et bénéficie à ce titre de toutes les capacités inhérentes à ce type de contrôle. Il se comporte au final comme n’importe quel contrôle de type ProgressBar avec quelques petites choses en plus. La petite difficulté fut de créer dynamiquement le camembert de progression via C#. Contrairement à WPF, Silverlight ne permet pas de surcharger de méthode permettant de créer de nouveaux genres de Shape. Autrement dit, même si Shape est une classe abstraite, il ne sert à rien d’en hériter car la méthode de conception du tracé ne peut être surchargée.
L’autre technique consiste à utiliser le « Path mini language » qui permet de créer des figures géométriques en XAML. J’ai du utiliser 3 segments dont un ArcSegment afin de réaliser ce contrôle. comme je ne pouvais pas créer de primitive Pie pour le graphiste sous Blend, il a fallu ruser… La technique consiste a créer dynamiquement le camembert lors de l’assignation d’une partie de contrôle (ControlPart). En interne, les propriétés de remplissage du tracé généré, sont liées aux propriétés du contrôle via une simple liaison de données créées cote C#.
Vous pouvez en voir des exemplaires ci-dessous et télécharger la librairie tweenedcontrols ici.

Une fois la dll référencée, vous pouvez instancier des contrôle PieProgressBar dans Blend via le panneau Assets comme montré ci-dessous :

Ce composant va être sans doute inclu comme d’autres dans le projet CodePlex SLExtensions que Thierry Bouquain met à jour en ce moment et que je salue au passage