Du coup, et comme j’en ai marre de refaire des web tv à tour de bras, j’ai décidé de lui régler son compte une fois pour toutes et de créer un système à base de poulies modulable avec les fonctions basique d’une web tv, et même un peu plus, mais sans sacrifier aux préceptes du cowboy coding qui font ma renommée inter-galactique.

Ainsi naquit le CoCoCommunicator.

Si ça vous tente, ça se passe par ici.

Le offf est un festival dédié à la création digitale et interactive, au graphisme, au web et motion design créé en 2001 à Barcelone en Espagne, et itinérant depuis l’édition de 2008 puisqu’il à eu lieu à Oeiras au Portugal.

Accueillir un évènement de cette importance à Paris est une excellente chose. En effet, on pourrait croire que la capitale est bien pourvue en festival d’arts numériques, mais ce n’est pas le cas. Tout est relatif bien sur, et il y a évidement plus de manifestations de ce genre ici que dans la majorité des grandes villes de France, mais Paris se fait largement distancer sur ce terrain par des villes comme Londres avec la Digital Week.

2010 sera donc un excellent cru pour les évènement relatifs au numérique avec une édition complète du Flash Festival particulièrement musclée en préparation, suivie du offf.

Pour en savoir plus et voir cette série de trois tutoriels vidéo sur la manière de faire communiquer Flash / Flex et Arduino rendez-vous sur flashxpress :

Arduino [part1] – découverte de la carte et du système
Arduino [part2] – installation
Arduino [part1] – réalisation d’une application ActionScript3 / Arduino

jump to english version

En me réveillant ce matin, je me suis aperçu que comme Ty Pennington, j’avais un projet secret. Pas vraiment le même genre de projet que lui, mais vraiment aussi secret. Vous pourriez me dire : pourquoi faire un billet là dessus si c’est si secret que ça ? C’est qu’en fait comme T.P., j’ai envie que les gens se demandent pourquoi ce projet et son contenu sont si secrets.
Cependant, la ressemblance s’arrête ici : mon projet est plus petit que les siens, et ne requiert ni pelleteuse,  ni soit disant designer gay ultra surexcité, ni fresque murale à base de dauphins, ni fausses larmes et autres cheveux peroxydés (oui il y tout ça et plus encore dans Extreme Makeover Home Edition).

Mais comme dans EMHE, faisons une interview bidonnée:

TV reporter crétin : - »Alors Vincent, on m’a dit que vous aviez un projet secret… c’est vrai ? »
moi (parlant dans un mégaphone tout en marchant) : - »Ohhhhhhhhhh ouiiiiiiiiii c’est vrai ! »
TVRC : - »Est-ce que vous pouvez nous en dire un peu plus ? »
moi (criant dans un mégaphone tout en sautant) : - »Ohhhhhhh non je ne peux paaaaass ! »
TVRC : - »Donnez-nous des indices… »
moi (hurlant dans un mégaphone tout en courant) : - »Toooooout ce que je peux vous dire c’est que c’est bassé sur Flex et Arduino… et que c’est un projet pour uuuuuuun de mes clients qui me rendra plus célèbre que Ty Pennington lui-mêêêêême !… oh et oui oui … et que  j’ai besoin d’un testeur d’émetteur vintage de l’armé Suisse pour le réaliser  »
TVRC : - »J’ai hâte de voir ça ! »

A suivre…

When I woke up this morning, I faced the fact that just like Ty Pennington, I had a secret project. Not really the same kind of project, but definitely as much secret as Ty’s one. one could say :why are you blogging about it if it is secret ? … well in fact like T.P. I would like people to wonder why is this project so secret and what is it about.
Meanwhile, likeness stops here : my project is smaller than his, and does not involves mechanical shovel, extra over surectited  gay so called designers, dolphin based wall paintings, fake tears or peroxyded hair (yes there is all of this and much more in Extreme Makeover Home Edition).

But like in EMHE, let’s do a fake interview:

Dumb TV reporter : - »So Vincent, I heard that you have a secret project… is that true ? »
me (shouting in a megaphone while walking) : - »Ohhhhhhhhhh yesssssss it is ! »
DTVR : - »Can you tell us a bit more about it ? »
me (yelling in a megaphone while while jumping) : - »Ohhhhhhh no I can’t ! »
DTVR : - »Please give us some clues… »
me (screaming in a megaphone while running) : - »Allllllll I can say is that it is based on Flex and Arduinooooo… and that it is a project for oooooone of my clients that will make me more notorious than Ty Pennington himselffffff ! … oh yes yes… and I need a vintage Swiiiiiiss army radio transmitter test device to build it ! »
DTVR : - »I’m looking forward to it ! »

To be continued…

Voici un petit résumé de ma présentation. Mes fichiers source sont téléchargeables au bas de cet article (ce sont des projets Flex) Les slides au format PDF sont dans la même archive.

J’ai commencé à faire de l’AS3 dans Flash, mais vu la médiocrité du panneau actions je me suis naturellement tourné vers Flex. En créant des projets ActionScript, et grâce à l’intellisense de l’éditeur de code, (et à la documentation quand même) j’ai appris progressivement les bases du langage.
J’ai ensuite commencé à développer des projets MXML pour profiter des classes mx, mais le jour où j’ai voulu créer des éléments graphiques pour ces projets, j’ai été confronté à un problème de taille : Flex en est incapable. Il est évidemment possible de préparer des assets sous forme d’images .jpg ou .png ou même et de les intégrer avec la balise [Embed], mais j’ai une longue pratique de Flash derrière moi (j’ai commencé avec Flash 3 !) et délaisser ce programme du jour au lendemain ne me disais rien. Il est vrai que la balise [Embed] permet l’intégration d’actifs de bibliothèque ou de fichiers .swf entiers, mais dans ce cas, le code présent dans le .swf est ignoré.

J’ai donc décidé de changer ma méthode de travail et d’utiliser Flash uniquement pour préparer non plus des .swf mais des .swc qui sont des bibliothèques qui peuvent contenir du code, des objets interactifs animés ou non, en vue de les intégrer dans des projets Flex ou Air.

Pour parvenir à ce résultat, il y a cinq étapes :
1/ création des actifs de bibliothèque dans Flash sous forme de MovieClip
2/ transformation de ces actifs soit en UIMovieClip, soit en MovieClipContainer (cf plus bas)
3/ export d’un .swc
4/ import du .swc dans un projet Flex
5/ utilisation des assets contenus dans le .swc à l’intérieur du projet

Un MovieClip ne peut être ajouté directement à la liste d’affichage d’un conteneur Flex, c’est la raison pour laquelle on doit le transformer soit en UIMovieClip, soit en MovieClipContainer en utilisant une extension gratuite pour Flash CS3 ou CS4, le « Flex Component Kit« . La classe UIMovieClip permet d’insérer du contenu Flash dans un projet Flex, tandis que la classe MovieClipContainer permet d’habiller un composant Flex dans Flash, puis de l’insérer dans un projet Flex.

Exemple pour le UIMovieClip (ici une petite télécommande contenant deux boutons)

<local:VideoRemote id="videoRemote" horizontalCenter="0" y="453"/>

Exemple pour le MovieClipContainer (le conteneur d’un composant VideoDisplay)

<local:VideoContainer id="videoContainer" horizontalCenter="0" y="92">
 
		<mx:VideoDisplay 
			id="vid"
			width="100%" 
			height="100%" 
			source="media/the_internet.f4v" 
			autoRewind="false" 
			autoPlay="false"/>
 
</local:VideoContainer>

La classe est un singleton, et la méthode qui permet de l’instancier prend deux paramètres. Le premier, pStage est obligatoire  et c’est la référence à la scène, le second est facultatif, sa valeur par défaut est de 250ms, et représente le délai après lequel l’évènement RESIZE_END est diffusé.

Le fichier d’exemple qui contient la classe est un projet Flex 3 qui ne fait rien d’autre que de tracer PIM, PAM et POUM en fonction des évènements diffusés. Cette classe n’utilise aucune particularité du framework Flex, elle est donc entièrement compatible avec tout projet en AS3.

################# edit du 8/05/2009
Après plusieurs demandes, j’ai ajouté les sources au format Flash CS3/CS4

//-----------------------------------------------------------------------------------
 
/*
	Copyleft (¢) 2009  Vincent Maitray - www.electrofrog.com
 
	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:
 
	The above copyright notice and this permission notice shall be included in
	all copies or substantial portions of the Software.
 
	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	THE SOFTWARE.
 
	Mention to the author would be appreciated !
*/
 
//-----------------------------------------------------------------------------------
 
package com.electrofrog.utils
{
	import com.electrofrog.events.StageResizeManagerEvent;
 
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.TimerEvent;
	import flash.ui.Mouse;
	import flash.utils.Timer;
 
	/**
	 * Handle the resize process of the stage more accuratly than the simple Event.resize event.
	 *
	 * @param pStage The stage instance to be listen to.
	 * @param pResizeEndDelay The delay in ms after which the ResizeManagerEvent.STAGE_RESIZE_END event is dispatched.
	 *
	 * @author Vincent Maitray
	 * @date April 03, 2009.
	 */
	public class StageResizeManager extends EventDispatcher
	{
 
		private static var _instance:StageResizeManager;
		private var _stage:Stage;
		private var _t1:Timer;
		private var _resizeEndDelay:int;
 
		/**
		 * Method for instanciating this class as a Singleton
		 */
		public static function getinstance( pStage:Stage, pResizeEndDelay:int = 250 ):StageResizeManager
		{	
 
			if ( !_instance )
				_instance = new StageResizeManager( new SingletonEnforcer(), pStage, pResizeEndDelay );
			return _instance;
 
		}
 
		/**
		 * hidden constructor.
		 * @private
		 */
		public function StageResizeManager( se:SingletonEnforcer, pStage:Stage, pResizeEndDelay:int )
		{
 
			if ( !se )
				throw( new Error( "operator 'new' is not not allowed with singleton classes. Use ResizeManager.getInstance() instead !" ) );
 
			_stage = pStage;
			_resizeEndDelay = pResizeEndDelay;
 
			_stage.addEventListener( Event.RESIZE, onStageResize );
 
			_t1 = new Timer( 50, 0 );
			_t1.addEventListener( TimerEvent.TIMER, onTimer );
 
		}
 
		/**
		 * Fired when the user resizes the stage
		 *
		 * @param e Event
		 */
		private function onStageResize( e:Event ):void
		{
 
			if( !_t1.running )
			{
 
				dispatchEvent( new StageResizeManagerEvent( StageResizeManagerEvent.STAGE_RESIZE_START, false, false ) );
				_t1.start();
 
			}
			else
			{
 
				dispatchEvent( new StageResizeManagerEvent( StageResizeManagerEvent.STAGE_RESIZE_PROGRESS, false, false ) );
				_t1.reset();
				_t1.start();
 
			}
 
		}
 
		/**
		 * Fired each pResizeEndDelay ms ( eg 250 ) when the timer is running.
		 *
		 * @param e Event
		 */
		private function onTimer( e:TimerEvent ):void
		{
 
			var t:Timer = e.currentTarget as Timer
			var count:int = t.currentCount * t.delay;
 
			if( count > _resizeEndDelay )
			{
 
				_t1.reset();
				dispatchEvent( new StageResizeManagerEvent( StageResizeManagerEvent.STAGE_RESIZE_END, false, false ) );
 
			}
 
		}
 
	}
 
}
 
/**
 * Dummy class, part of the Singleton subsystem
 */
class SingletonEnforcer
{
}

Tout ceci peut paraitre assez futile aujourd’hui, mais en y réfléchissant, si les applications et les ordinateurs ont vu leur complexité et leur puissance évoluer de manière exponentielle depuis leur invention, l’interface homme – machine n’a quasiment pas changé en trente ans. Il faut toujours un clavier, un écran et (éventuellement) une souris pour pouvoir accéder aux informations contenues dans la machine.
Récemment, des appareils comme l’iPhone ont néanmoins ouvert une brèche dans cet immobilisme circonstancié, et il est toujours surprenant de constater avec quelle rapidité les êtres humains s’adaptent à un nouveau mode d’interactivité. L’apparition du multitouch sonne le glas de la souris à moyen terme -du moins pour les tâches qui ne requièrent  pas un haut niveau de précision- et c’est tout un pan de la culture informatique qui s’effondre, laissant entrevoir des possibilités réservées jusque là à la science fiction.

D’ailleurs un des fantasmes récurrents de la SF, est la dématérialisation totale de l’interface, dont on peut voir l’archétype dans Minority Report par exemple:

Dans ce film, les acteurs ne manipulent aucune interface tangible, mais font des moulinets dans l’air avec leur bras (c’est assez ridicule en fait), et ces gestes sont interprétés par l’ordinateur et traduits sous forme d’images et de textes sur un écran virtuel. Et c’est exactement ce que propose des projets comme celui présenté au TED.

Sans en arriver à des extrêmes (le nano ordinateur quantique n’est pas pour tout de suite) il est probable que les années qui viennent vont radicalement  transformer la manière dont nous nous « servons » des ordinateurs, par conséquent la perception que nous avons de ces machines et des informations que nous y trouvons en sera changée.

Réalisé par Cellules, un studio parisien de conception interactive et de réalisation audiovisuelle, digup.tv est un modèle d’ergonomie et de conception. Réalisé en AJAX pour la partie éditoriale, et en Flash pour la partie vidéo, l’intégration est remarquablement bien pensée, les transitions entre certains contenus -notamment les formulaires- sont les bienvenues et ne déservent pas la simplicité de la navigation. Les concepteurs ont su résister aux sirènes du site full Flash, ce qui lui confère une fluidité et une accessibilité supérieure, sans pour autant faire l’impasse sur le design, servi par une charte graphique toute en bleus et noirs qui s’accommode très bien aux contenus photo et vidéo qui jouent sur des gammes monochromes du plus bel effet.

Enfin certains détails font la différence comme par exemple le sous-titrage (vectoriel) des vidéos en français, l’encodage vidéo irréprochable même en plein écran, ou encore le fait de filmer avec une petite caméra HD de type Sanyo HD1010 (enfin je crois… on la voit sur une photo) mais en y adjoignant un kit mini 35 pour donner de la profondeur de champ.

Comme le site est tout récent, il n’y a pour l’instant qu’assez peu de contenu, mais le tout est un ensemble très prometteur.

Petite précision, je n’ai pas d’actions chez Cellules, je ne les ais même jamais rencontrés, mais je pense que leur travail mérite des compliments, c’est tout.

Juste un petit lien donc aujourd’hui mais certainement pas en mousse. ThruYou est une expérience musicale collective, composée de centaines de morceaux de vidéos trouvées sur YouTube. Je l’avais vu passer en début de semaine, mais je ne savais pas qu’il existait un site avec plusieurs morceaux disponibles à l’écoute. Le résultat est plus que bluffant… ça c’est du vèbe 45.0 au moins !

Laëtitia du blog Vertcerise me demandais tout à l’heure si je n’aurais pas quelques adresses de sites sur lesquels on peut trouver des motifs pour faire des fonds d’écran ou bien mettre en arrière plan sur un site. il se trouve que depuis 2 ans, j’utilise Vienna pour Mac OS X qui est un lecteur de flux RSS. Je suis abonné à environ une cinquantaine de flux dans des domaines aussi différents qu’ ActionScript, les recettes de cuisine, les objets rétro, les poêles à granulés (si si), et pas mal de blog de design graphique.

Depuis deux ans donc, je met une fois par jour un petit drapeau rouge devant un ou deux articles susceptibles de m’intéresser ultérieurement, mais dont la lecture immédiate est impossible pour cause de charrette permanente. Et notamment je référence à peu près tout ce qui se fait en générateur de patterns…

Mes préférés : coloursmakers.com et tartanmaker.com.
Si vous tu veux voir la liste complète, va faire un tour sur le blog de Vertcerise !

En attendant, j’ai retourné le problème dans tous les sens, et j’en suis arrivé à la conclusion suivante : pourquoi réinventer la roue à chaque fois, alors qu’il existe des outils infiniment plus robustes et conviviaux que les misérables petits backends que je produis ? En fait l’idée m’est venue alors que j’étais en train d’écrire un billet dans WordPress et que je me disais justement que ce truc était rudement bien fichu : pourquoi ne pas utiliser WordPress comme interface d’admin pour les sites que je crée ? Après tout, WordPress stocke les données en base, et le tout est plutôt bien rangé. Ni une ni deux, je sors mon éditeur de code favori et je me dis aller, tu vas faire un service WordPress pour AMFPHP. Je galère une journée là dessus ( le PHP c’est vraiment tout une gymnastique par rapport à l’AS… ) et je finis par avoir un truc ( je l’appelle même PressAMF ) à peu près fonctionnel, mais dont environ le quart est terminé cependant. C’était avant-hier.

Ce matin en consultant les fils RSS auxquels je suis abonné, je tombe sur un article chez Noponies intitulé « AMFPHP / ZENDAMF service for connecting to WordPress« . Je le lis, et en fait il explique qu’il vient de faire un service AMFPHP pour WordPress : FlashPress. Je télécharge son code ( qui est complet lui… ) et hop me voilà avec une API WordPress pour AMFPHP toute faite ! Merci donc à Dale Sattler pour son travail. En lisant l’article et les commentaires, je m’aperçois que beaucoup de personnes ont pensé à cette solution, certains même sont allés très loin comme Jonnie Spratley qui a créé un ensemble de services Flex / WordPress avec Cairngorm ( bas de page ) ou Alexandru Ghiura qui a réalisé un système ( AS3FlexDB ) dans lequel on code les requêtes SQL directement dans le code ActionScript.

Bref les idéees ne manquent pas, et beaucoup de développeurs se posent les même questions au même moment… Il n’y a donc plus qu’a mettre tout ça en pratique pour enfin avoir des interace d’admin dignes de ce nom, avec un minimum d’effort.

C’est pourquoi je vous propose deux extensions qui ajoutent de nouveaux onglets dans le panneau de » sélection de couleur » du système. La première, Hex Color Picker se contente de créer un champ dans lequel on peut saisir directement une valeur de couleur en hexadécimal; c’est bête mais ça manquait ! La seconde, Mondrianum, vous permet d’accéder à la base de données des nuanciers Adobe Kuler, et ça c’est carrément génial.

Hex Color Picker est un donationware et Mondrianulm est en beta.

Programme complet de la journée disponible ici.
Réservation en ligne ici.

Venez nombreux !

En fonction du type de projet sur lequel je suis en train de travailler, AS3 ou MXML, j’exporte les objets graphiques sous forme de Sprite ou MovieClip pour les premiers, ou de UIMovieClip pour les seconds. Cette dernière classe assez peu connue est un MovieClip qui peut être ajouté directement à la liste d’affichage d’un composant Flex ce qui évite de créer un UIComponent vide qui ne contiendrait que les Sprite et MovieClip qu’on souhaite intégrer à l’application. Dans le même esprit, il serait fort utile de disposer d’une classe UISprite…

Jusqu’à présent dans Flash, lorsque l’on créait des Sprite ou des UIMovieClip, l’icône dans la bibliothèque était la même que celle d’un MovieClip. Avec Flash CS4, lorsque l’on crée un Sprite, son icone est celle d’un MovieClip mais en vert, et les UIMovieClip on une icone qui représente le logo de Flex:

C’est peu de choses, mais quand on utilise Flash uniquement comme je le fais et qu’on a 100 éléménts différents dans la bibliothèque (ranger la bibliothèque quand même hein… ça sera d’ailleurs le sujet d’un prochain billet !) on est bien content de ce genre de petites attentions.

A l’opposé de cela, le lecteur 10 nous propose une approche toute nouvelle grâce à des méthodes 3D natives. Même si les possibilités sont pour le moment bien en deçà de ce que permettent les bibliothèques déjà existantes, notamment au niveau du Z sorting ou du paradigme de caméra qui sont inexistants, il n’en reste pas moins que la vitesse et la qualité du rendu, et surtout la facilité avec laquelle la 3D s’intègre au code existant sans venir le surcharger avec un framework dont on ne va utiliser la plupart du temps qu’une petite partie des possibilités, sont extrêmement intéressants.

Lee Brimelow propose un très bon exemple de ce que l’on peut faire en quelques lignes de code : un panneau à deux faces qui se retourne et qui permet de doubler la surface de l’écran de manière élégante. Même si l’exemple est assez basique et codé de manière artisanale, (vu qu’il n’existe à ma connaissance à l’heure actuelle aucune bibliothèque 3D pour Flash 10), il n’en reste pas moins que l’effet obtenu est plus que convaincant pour si peu de code, et que l’interactivité et le comportement naturel des différents éléments contenus dans les deux plans 3D sont entièrement préservés, sans bidouillage… enfin !

J’ai d’ailleurs adapté cet exemple afin de pouvoir le réutililser sous forme de classe dans un projet Flex ou Flash, ce qui fera d’ailleurs bientôt l’objet d’un billet ici même.