Les nouveautés principales que la majorité des programmeurs risquent d’utiliser tournent autour de la gestion souris. Voyons ça en détail.

!! Les swfs d’exemples necessitent le Player 11.2 (beta) ou supérieur !!

Téléchargez la beta 11.2 ici

Gestion du right clic et du middle clic de la souris

Commençons par la plus simple, on peut désormais écouter des événements MouseEvent.RIGHT_CLICK et MouseEvent.MIDDLE_CLICK.

Concernant le middle clic, sur la plupart des souris, c’est l’enfoncement de la roulette.

Concernant le clic droit, par défaut, le clic droit fait apparaître le menu contextuel natif de Flash. Menu que l’on peut d’ailleurs modifier en partie, en ajoutant de nouvelles entrées. Depuis la version 11.2, le simple fait d’ajouter un écouteur d’événement sur le clic droit désactive le menu natif de Flash. Cela permet de faire d’autres choses au clic droit, ou de faire son propre menu avec son propre skin et ses propres entrées…

Aucune classe native de menu contextuel ne pourra servir de base, il faudra créer à 100% son menu et le gérer. L’avantage est une liberté totale.

Voici un simple exemple, il est évident qu’en situation réelle, il faudra créer une classe pour ce menu et la faire autrement avec des méthodes « addItem », etc., plus un contrôle de positionnement en bord d’application, que je n’ai pas pris la peine de faire… Ici, c’est juste pour l’exemple.

Code de test:

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		private var menuItems:Array;
		private var menu:Sprite;
		private var output:TextField;
		public function Main():void
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			menuItems = new Array;
			makeExampleMenu();
			output = new TextField;
			output.autoSize = TextFieldAutoSize.LEFT;
			output.text = "Action: ";
			output.y = stage.stageHeight - 20;
			addChild(output);
			stage.addEventListener(MouseEvent.RIGHT_CLICK, mouseRightClikHandler);
			stage.addEventListener(MouseEvent.MIDDLE_CLICK, mouseMiddleClikHandler);
			stage.addEventListener(MouseEvent.CLICK, mouseClikHandler);
		}
		/*__________________________________________________________________________________
		*
		*  Events Handlers
		* __________________________________________________________________________________
		*/
		private function mouseRightClikHandler(e:MouseEvent):void
		{
			output.text = "Action: \"Right Click\"";
			menu.x = stage.mouseX;
			menu.y = stage.mouseY;
			menu.visible = true;
		}
		private function mouseMiddleClikHandler(e:MouseEvent):void
		{
			output.text = "Action: \"Middle Click\"";
			menu.visible = false;
		}
		private function mouseClikHandler(e:MouseEvent):void
		{
			output.text = "Action: \"Left Click\"";
			menu.visible = false;
		}
		private function menuClickHandler(e:MouseEvent):void
		{
			e.stopPropagation();
			output.text = "Action: Click on \"" + menuItems[e.target.name].label.text + "\"";
			menu.visible = false;
		}
		private function menuItemOverHandler(e:MouseEvent):void
		{
			menuItems[e.target.name].label.textColor = 0xff6600;
			menuItems[e.target.name].btn.alpha = 1;
		}
		private function menuItemMouseOutHandler(e:MouseEvent):void
		{
			menuItems[e.target.name].label.textColor = 0xffffff;
			menuItems[e.target.name].btn.alpha = .5;
		}
		/*__________________________________________________________________________________
		*
		*  Privates Functions
		* __________________________________________________________________________________
		*/
		private function makeExampleMenu():void
		{
			menu = new Sprite;
			for (var i:uint = 0; i < 6; i++)
			{
				menuItems[i] = new Object;
				menuItems[i].label = new TextField;
				// ! casting just for AutoCompletion helper
				TextField(menuItems[i].label).autoSize = TextFieldAutoSize.LEFT;
				TextField(menuItems[i].label).selectable = false;
				menuItems[i].label.text = "Ceci est l'Item " + String(i);
				menuItems[i].label.textColor = 0xffffff;
				menuItems[i].label.mouseEnabled = false;
				menuItems[i].label.x = 10;
				menuItems[i].label.y = i * 20;
				menuItems[i].btn = new Sprite;
				menuItems[i].btn.name = i;
				menuItems[i].btn.buttonMode = true;
				menuItems[i].btn.addEventListener(MouseEvent.MOUSE_OVER, menuItemOverHandler);
				menuItems[i].btn.addEventListener(MouseEvent.MOUSE_OUT, menuItemMouseOutHandler);
				menuItems[i].btn.graphics.beginFill(0x000000);
				menuItems[i].btn.graphics.drawRect(0, i * 20, 100, 20);
				menuItems[i].btn.graphics.endFill();
				menuItems[i].btn.alpha = .5;
				menu.addChild(menuItems[i].btn);
				menu.addChild(menuItems[i].label);
			}
			menu.addEventListener(MouseEvent.CLICK, menuClickHandler);
			menu.visible = false;
			this.addChild(menu);
		}
	}
}

Le mouseLock et le movementMouse

Une autre nouvelle fonctionnalité est le mouseLock. Le but ici est de rendre la souris active tout le temps! Même en dehors du stage (donc, en dehors de l’animation et même de l’écran).

Seule restriction, le mouseLock n’est possible qu’on mode fullScreen ! Si on essaye de l’activer en mode normal, cela génère une erreur d’exécution visible par le player debugger.

Lorsque le mouseLock est activé, le curseur de la souris disparaît ! A la base, c’est logique, puisque dans ce mode, nous n’avons pas besoin de savoir où se trouve réellement la souris. « Ha bon », vous allez me dire.. Oui! dans ce mode, seules les variations de souris nous intéressent.. Voici l’explication..

Normalement, quand a besoin de connaître les coordonnées de la souris, on lit une des propriétés stageX(Y) ou localX(Y) d’un évènement MouseEvent. Lorsque le mouseLock est actif, ces propriétés sont fixée à 0 et ne peuvent plus servir! On peut être tenté d’utiliser le stage.mouseX(Y), mais celui-ci ne fonctione plus non plus… Il renverra n’importe quoi, basé sur un delta que nous allons voir ci après. Donc, en mode « mouseLock« , on oublie le système de coordonnées classique.

Par contre, deux nouvelles propriétés ont été ajoutées à MouseEvent! Il s’agit de movementX et movementY. Ces nouvelles propriétés, à l’inverse des anciennes, ne sont actives qu’en mode mouseLock! Le reste du temps, elles sont fixées à 0.

Le « movement » est en fait un deltaMouse, le nombre de pixels de déplacement qui a eu lieu entre 2 appels de l’Event mouseMove.

Cette nouveauté peut servir à plein de choses… surtout pour les jeux et certaines applications… On est plus contraint à la taille de l’animation, on peut juste regretter que cette fonctionalité ne soit disponible qu’en fullScreen..

Dans l’exemple ci dessous, je fais tourner un jog shuttle sans math, juste grace au movementX.

Pour passer en fullScreen, veuillez cliquer sur le rectangle noir.

On peut voir que les propriétés mouseX(Y) ne fonctionnent qu’en normalScreen et que les movementX(Y) ne fonctionnent qu’en fullScreen. Cela est dû à l’activation du mouseLock au moment du passage en fullScreen.

Code simple qui permet de tester la chose.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

package
{
	import flash.display.Sprite;
	import flash.display.StageDisplayState;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	/**
	 * ...
	 * @author Alama
	 */
	public class Main extends Sprite
	{
		private var menuItems:Array;
		private var menu:Sprite;
		private var output:TextField;
		private var shuttle:Sprite;
 
		public function Main():void
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			output = new TextField;
			output.autoSize = TextFieldAutoSize.LEFT;
			output.y = 100;
			output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight;
			addChild(output);
 
			var btn:Sprite = new Sprite;
			btn.graphics.beginFill(0x000000);
			btn.graphics.drawRect(5, 40, 100, 50);
			btn.graphics.endFill();
			addChild(btn);
			btn.buttonMode = true;
			btn.addEventListener(MouseEvent.CLICK, btnClickHandler);
 
			shuttle = new Sprite;
			shuttle.graphics.beginFill(0x333333);
			shuttle.graphics.drawCircle(0, 0, 100);
			shuttle.graphics.endFill();
			shuttle.graphics.beginFill(0x999999);
			shuttle.graphics.drawCircle(- 50, -50, 10);
			shuttle.graphics.endFill();
			shuttle.x = 100;
			shuttle.y = 260;
			addChild(shuttle);
 
			stage.addEventListener(Event.RESIZE, stageResizeHandler);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler);
		}
 
		/*__________________________________________________________________________________
		 *
		 *  Events Handlers
		 * __________________________________________________________________________________
		 */
 
		private function btnClickHandler(e:MouseEvent):void
		{
			stage.displayState = StageDisplayState.FULL_SCREEN;
			stage.mouseLock = true;
		}
 
		private function stageResizeHandler(e:Event):void
		{
			output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight;
		}
 
		private function stageMouseMoveHandler(e:MouseEvent):void
		{
			output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight +
			"\nmouseX: " + e.stageX + " - mouseY: " + e.stageY +
			"\nmovementX: " + e.movementX + " - movementY: " + e.movementY;
 
			shuttle.rotation += e.movementX;
		}
 
	}
 
}

Conclusion

Ces nouvelles fonctionnalités vont sans doute trouver un certain succès auprès des programmeurs… Surtout la gestion du clic droit et le fait de pouvoir faire ses propres menus contextuels.

Le mouseLock est très bien lorqu’on souhaitera avoir un contrôle qui va au-delà de l’espace de l’animation et même au-delà de l’écran (défilement de quelque chose, jeux, ..).

Il y a encore d’autres nouveautés telles que la mise à jour automatique du Player en arrière plan (tâche de fond) ou le décodage de la video (h264) en background, dans un thread séparé.

Les exemples de code (et swfs) présents sur cette page sont très primaires, ils ont pour but de démystifier les nouvelles fonctionnalités du Flash Player 11.2. A chacun d’y trouver un usage propre et de développer ses algorithmes persos…

Hello Flash world !

Après avoir listé quelques features de la CS5.5, nous allons dans cet article vous en dire davantage sur Flash CS 5.5. Pas besoin de le cacher, la plupart est en rapport avec le développement multi-écrans.

Voici quelques-unes des nouveautés donc de Flash CS 5.5 :

Aide à la gestion des calques simplifiée (ENFIN :p).

Flash CS5.5 nous permet de faire directement des couper / copier / coller / dupliquer de calque dans un même document voir même d’un document à un autre !

Le menu contextuel a été quelque peu modifié.

Voici ce que nous obtenons maintenant lors du clic droit sur un calque dans Flash CS5.5 :

J’ai d’ailleurs effectué quelques tests et n’ai rencontré aucun problème.

Ces fonctionnalités simples et efficaces nous feront gagner un temps fou. Je me rappelle de ces longues animations image par image créées en oubliant de les imbriquer dans un clip. C’était quand même un peu galère de réorganiser l’imbrication du document. Et bien cette époque est révolue !

Une palanquée de nouveaux snippets de code

De supers nouveaux snippets, notamment pour les périphériques tactiles, AIR et AIR mobiles,  des actions simples mais très utiles que l’on retrouve dans la plupart des applications. On trouve des snippets pour par exemple :

- La fermeture de l’application

- La réduction de l’application

- La restauration de l’application

- Le chargement de fichier

- L’enregistrement de fichier

- La gestion de la géolocalisation

- La gestion d’évènements tactiles

- La gestion de l’accéléromètre

Bref, au total plus de 70 snippets plus efficaces les uns que les autres.

La transformation d’un symbole en bitmap

Et on continu avec les killer features !

Flash CS5.5 nous donne la possibilité d’exporter un symbole tel qu’un Clip en bitmap, et cela en vue d’une optimisation mobile of course !

Nous avons le choix entre deux formats, le JPEG ou le PNG / GIF

Concrètement, comment ça se passe ?

Plusieurs possibilités :

- Soit un symbole contenant uniquement des formes vectorielles ou d’autres symboles, mais aucune animation n’est présente. Si l’on fait clic droit sur le symbole puis convertir en Bitmap, un bitmap sera créé dans la bibliothèque et le symbole sur la scène remplacé par ce nouveau bitmap.

- Soit un symbole. Vous souhaitez le transformer en bitmap mais uniquement lors de la compilation de l’application.  Dans le panneau des Propriétés, un nouveau menu est maintenant disponible : « Exporter en temps que bitmap ». Dans ce cas, lors de l’export, le symbole sera directement exporté en bitmap ! Très bon.

Le gros avantage de cette seconde technique est que votre objet est toujours un objet vectoriel et qu’il conserve tous les avantages de ce format puisque ce n’est qu’à l’export qu’il est « bitmapisé ».

Mise à l’échelle du contenu d’un document lors du redimensionnement de la scène

Peut-être avez-vous déjà dû produire une application en plusieurs formats. Par exemple une version pour iPhone, une pour iPad, une pour un device Android…Les résolutions d’écran sont différentes, et vous devrez si vous n’utilisez pas de layout manager, dupliquer le projet et passer un temps incalculable à redimensionner vos symboles, recaler vos animations, etc.

Dans cette nouvelle mouture de Flash CS5.5 cette longue et éprouvante expérience se réduit à quelques secondes (notez qu’il faudra quand même retoucher deux, ou trois choses derrière, mais globalement c’est plutôt pas mal) !

Voici la procédure :

1) Votre application est terminée. Vous vous apprêtez à faire les différentes versions

2) Vous dupliquez votre projet

3) Ouvrez une copie de ce projet et rendez-vous dans la boîte de dialogue « Paramètres du document »

4) Redimensionnez votre scène à votre convenance

5) Cochez la case « Mettre à l’échelle le contenu avec la scène »

6) Confirmez en cliquant sur OK

Flash va redimensionner et replacer les différents élément de votre application !

Boite de dialogue « Paramètres du publication » simplifiés

Voici une toute petite feature qui fait quand même du bien !

La boite des paramètres de publication a été épurée et la petite case à cocher pour générer les SWC est bien plus accessible :

Sauvegarde automatique de vos précieux documents toute les x minutes

Voila LA case anti-coupure de courant ! LA case qui vous aidera à ne pas frapper sur vos collègues lorsque par « inadvertance » ils ont appuyés sur le bouton rouge de la multiprise…bref, je vous présente la case à cocher de « Sauvegarde automatique ». Celle-ci est disponible dans la boite de dialogue « Paramètres du document », juste en dessous de la cadence d’animation de votre document :

Voila pour les features qui paraissent les plus juteuses !

Pour plus d’info :

- Présentation de Flash Professional CS5.5

- Nouvelles fonctionnalités de Flash Professional CS 5.5

Amicalement.

Olivier.

Ils reprennent les slides et les exemples montrés lors de cette journée.

Le séminaire est divisé en trois parties :

- Séparation du design et du code dans Flash – part 1 : séparation .fla et .as
- Séparation du design et du code dans Flash – part 2 : compiler des .fla différents
- Séparation du design et du code dans Flash – part 3 : coder et compiler avec Flex Builder

Problématiques abordées :

Comment développer un projet en Flash et fluidifier les échanges au sein d’une équipe composée de designer Flash et de développeurs AS3 .

Quelles sont les bonnes pratiques (séparation et communication entre éléments du design et code), les techniques (librairies partagées, SWC),  outils (FlashDevelop, Flex Builder) ?

Coder et compiler des projets Flash avec Flex Builder

Travailler avec un éditeur AS3 robuste et puissant, basé sur Eclipse, cross-plateform.
Bénéficier du compilateur du Flex SDK, plus rapide.

Créer un projet AS3 dans Flex Builder

Etape 1

Etape 2

Etape 3 : choisir le nom de la classe du document

Etape 4 : le projet est maintenant crée. On créera ses classes dans le dossier « src », via un clic droit sur le dossier > New > ActionScript class

Etape 5 : la compilation. La compilation en mode debug est préférable en production : elle permet de récupérer les trace() et les erreurs à l’exécution dans le panneau de sortie (il faudra peut-être installer le player de debug sur votre machine). Une fois le projet terminé, on pourra compiler en mode Release.

Faire la liaison Asset en bibliothèque / Classe par code

• But : reproduire une liaison de bibliothèque de Flash au sein de Flex Builder
• Utilisation d’Embed avec un swf contenant les assets pour en extraire les symboles exportés
• Placer l’Embed juste avant la déclaration de la classe
• Défaut :
  Aucun code placé dans le clip ne sera exécuté
  Pas d’utilisation de composants possible

Exemple : 08_Liaison_asset_classe_par_code_avec_FB [Télécharger l'exemple]

NOTE : pour ouvrir l’exemple, passer par fichier > importer et importer directement l’archive .zip au sein de Flex Builder.

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

package asfiles
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.text.TextField;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
 
	// on associe un asset de la librairie à notre classe = comme si on faisait une liaison par code
	[Embed (source="../assets/assets.swf", symbol="Personnage_asset")]
	public class Personnage extends MovieClip
	{
 
		public var message_txt:TextField;
 
		public function Personnage()
		{
 
		}
 
		public function clignote():void
		{
			addEventListener(Event.ENTER_FRAME, loop);
		}
 
		private function loop(e:Event):void
		{
			alpha = Math.random();
		}
 
	}
 
}

Utiliser un SWC pour les assets graphiques

• Pas de complétion si on travaille avec des clips de la bibliothèque embedés avec la 1ere méthode.
• On ne peut pas cibler les occurrences placées sur la scène d’un MC.
• Solution : utiliser un SWC.
• Introspection automatique de la classe, FD est capable d’aller chercher automatiquement les occurrences sur la scène.
• On pourra mettre du code dans ses MovieClip : le code timeline sera conservé avec les SWC

Pour générer un .swc dans Flash, cocher la case exporter SWC dans les paramètres de publication

Quand vous compilez votre SWF via CTRL + ENTREE, un SWC est automatiquement crée à côté du SWF

Pour ajouter un SWC à son projet Flex : clic-droit sur le projet

Puis dans le panneau des propriétés, choisir « ActionScript build path », puis « Add SWC », choisir le SWC a ajouter au projet et valider en cliquant sur « OK »

Les classes incluses dans le SWC sont maintenant utilisables dans votre projet Flex !

Exemple : 09_Utilisation_de_SWC [Télécharger l'exemple]

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

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.MouseEvent;
 
	[SWF (width="640", height="480", frameRate="30", backgroundColor="0xCCCCCC")]
	public class Main extends Sprite
	{
 
		private var monPerso:Personnage_asset;
		private const defaultInput:String = "votre message";
 
		public function Main()
		{
 
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			// on instancie la classe Personnage_asset issue du .swc
			monPerso = new Personnage_asset();
			monPerso.x = 200;
			monPerso.y = 50;
			addChild(monPerso);
 
			monPerso.addEventListener("AnimationTerminee", animeTerminee);
 
		}
 
		private function animeTerminee(e:Event):void
		{
 
			monPerso.message_txt.text = "HiDiHo!";
			// on peut utiliser des composants Flash
			monPerso.ok_btn.addEventListener(MouseEvent.CLICK, clickOK);
			monPerso.input_txt.addEventListener(FocusEvent.FOCUS_IN, onInputFocusIn);
			monPerso.input_txt.addEventListener(FocusEvent.FOCUS_OUT, onInputFocusOut);
 
		}
 
		private function clickOK(e:MouseEvent):void
		{
 
			monPerso.message_txt.text = monPerso.input_txt.text;
 
		}
 
		private function onInputFocusIn(e:FocusEvent):void
		{
			if (monPerso.input_txt.text == defaultInput)
			{
				monPerso.input_txt.text = "";
			}
		}
 
		private function onInputFocusOut(e:FocusEvent):void
		{
			if (monPerso.input_txt.text == "")
			{
				monPerso.input_txt.text = defaultInput;
			}
		}
	}
}

Utilisation de SWC au sein  de Flex Builder : séparation design et code

Composition vs Héritage

Méthode 1 : héritage

• Faire un symbole MonSymbole_skin dans flash
• Faire une classe MonSymbole dans Flex Builder qui hérite de MonSymbole_skin
• On accède aux occurrences de manière transparente
• Problème :
  Contrainte liée à l’héritage : on ne peut pas faire hériter d’une classe abstraite notre classe

Exemple : 10_SWC_et_separation_design_code_heritage [Télécharger l'exemple]

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

package classes
{
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.MouseEvent;
 
	// notre classe contenant la logique, crée dans Flex, hérite de la classe graphique
	// crée par le graphiste dans Flash et stockée dans le assets.swc
	public class Personnage extends Personnage_asset
	{
 
		private const defaultInput:String = "votre message";
 
		public function Personnage():void
		{
 
			addEventListener("AnimationTerminee", animeTerminee);
 
		}
 
		private function animeTerminee(e:Event):void
		{
 
			// par héritage, on accède aux occurrences posées sur la scène
			// de Personnage_asset par le designer
			message_txt.text = "HiDiHo!";
			ok_btn.addEventListener(MouseEvent.CLICK, clickOK);
			input_txt.addEventListener(FocusEvent.FOCUS_IN, onInputFocusIn);
			input_txt.addEventListener(FocusEvent.FOCUS_OUT, onInputFocusOut);
 
		}
 
		private function clickOK(e:MouseEvent):void
		{
 
			message_txt.text = input_txt.text;
 
		}
 
		private function onInputFocusIn(e:FocusEvent):void
		{
			if (input_txt.text == defaultInput)
			{
				input_txt.text = "";
			}
		}
 
		private function onInputFocusOut(e:FocusEvent):void
		{
			if (input_txt.text == "")
			{
				input_txt.text = defaultInput;
			}
		}
 
	}
}

Méthode 2 : composition

• On fait une propriété skin dans la classe logique
• On accède aux occurrences de la scène via la propriété skin
• Permet de faire hériter la classe logique d’une classe abstraite

Exemple : 11_SWC_et_separation_design_code_composition [Télécharger l'exemple]

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

package classes
{
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.MouseEvent;
 
	// comme on fait de la composition pour l'aspect visuel
	// notre classe peut hériter d'une (pseudo) classe Abstraite
	// issue de notre framework et implémentant une logique de base
	// pour les DisplayObject
	public class Personnage extends AbstractView
	{
 
		private const defaultInput:String = "votre message";
		// composition : la skin est une propriété de notre classe logique
		// qui va la contenir
		public var skin:Personnage_asset;
 
		public function Personnage():void
		{
			// on instancie la skin
			skin = new Personnage_asset();
			// et on l'ajoute à la displayList de notre classe logique
			// (qui doit hériter de DisplayObjectContainer, ici via la classe abstraite AbstractView)
			addChild(skin);
			skin.addEventListener(TransitionEvent.TRANSITION_IN_COMPLETE, transitionInComplete);
 
		}
 
		override protected function transitionInComplete(e:Event=null):void
		{
			super.transitionInComplete(e);
 
			skin.message_txt.text = "HiDiHo!";
			skin.ok_btn.addEventListener(MouseEvent.CLICK, clickOK);
			skin.input_txt.addEventListener(FocusEvent.FOCUS_IN, onInputFocusIn);
			skin.input_txt.addEventListener(FocusEvent.FOCUS_OUT, onInputFocusOut);
 
		}
 
		private function clickOK(e:MouseEvent):void
		{
 
			skin.message_txt.text = skin.input_txt.text;
 
		}
 
		private function onInputFocusIn(e:FocusEvent):void
		{
			if (skin.input_txt.text == defaultInput)
			{
				skin.input_txt.text = "";
			}
		}
 
		private function onInputFocusOut(e:FocusEvent):void
		{
			if (skin.input_txt.text == "")
			{
				skin.input_txt.text = defaultInput;
			}
		}
 
	}
}

Ils reprennent les slides et les exemples montrés lors de cette journée.

Le séminaire est divisé en trois parties :

- Séparation du design et du code dans Flash – part 1 : séparation .fla et .as
- Séparation du design et du code dans Flash – part 2 : compiler des .fla différents
- Séparation du design et du code dans Flash – part 3 : coder et compiler avec Flex Builder

Problématiques abordées :

Comment développer un projet en Flash et fluidifier les échanges au sein d’une équipe composée de designer Flash et de développeurs AS3 .

Quelles sont les bonnes pratiques (séparation et communication entre éléments du design et code), les techniques (librairies partagées, SWC),  outils (FlashDevelop, Flex Builder) ?

Compiler des .fla différents

Comment permettre aux différents intervenants de travailler en parallèle sans avoir à compiler le même fichier ?

Utilisation de SWF en tant que bibliothèque externe : chargement à l’exécution

• Chargement avec un Loader
• Extraction des assets avec la classe ApplicationDomain et la méthode getDefinition()
• On peut mettre en bibliothèque tout type d’assets
• Il faut connaître le nom des assets, sinon on peut utiliser des classes qui introspectent la totalité des classes disponibles dans le SWF
  http://www.bytearray.org/?p=175 (uniquement pour les symboles DisplayObject)
  ou
  http://etcs.ru/pre/getDefinitionNamesSource/ (extraction de tous les types d’assets)
• Problèmes :
  Obligé de typer avec le superType, pas de vérification de type précise, ni de complétion spécifique dans un éditeur de code.
• Solutions :
  utilisation d’interfaces

Exemple : 04_chargement_bibliotheque [Télécharger l'exemple]

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

package
{
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.system.ApplicationDomain;
	import flash.utils.describeType;
	import flash.utils.getDefinitionByName;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Main extends Sprite
	{
 
		private var chargeur:Loader;
		// le nom des classes chargées
		private var assetsClassName:Array = ["Perso1", "Perso2"];
		private var localeLib:Object = new Object();
 
		public function Main():void
		{
			chargeur = new Loader();
			chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			chargeur.load(new URLRequest("bibliotheque.swf"));
 
			createPerso1_btn.addEventListener(MouseEvent.CLICK, instanciate);
			createPerso2_btn.addEventListener(MouseEvent.CLICK, instanciate);
		}
 
		private function onComplete(e:Event):void
		{
			// récupération d'une instance d'ApplicationDomain
			// sur la propriété applicationDomain du contentLoaderInfo (e.target)
			var appDomain:ApplicationDomain = LoaderInfo(e.target).applicationDomain;
 
			// on crée dynamiquement une bibliotheque locale
			for each (var className:String in assetsClassName)
			{
				if (appDomain.hasDefinition(className))
				{
					localeLib[className] = appDomain.getDefinition(className) as Class;
				}
			}
 
			// pour infos
			for (var prop:String in localeLib)
			{
				trace(prop, ":", localeLib[prop]);
			}
		}
 
		private function instanciate(e:MouseEvent):void
		{
 
			// on crée dynamiquement la classe
			var MaClasse:Class = (e.currentTarget == createPerso1_btn) ? localeLib["Perso1"] : localeLib["Perso2"];
 
			// on pourrait en savoir plus sur la classe avec describeType
			//trace(describeType(MaClasse));
			trace(getSuperType(MaClasse));
 
			// puis on l'instancie
			// on doit typer avec le super-type de la classe
			// on pourrait ici utiliser une interface pour avoir un typage plus fort
			var perso:MovieClip = new MaClasse();
			perso.scaleX = perso.scaleY = Math.random() * .4 + .3;
			perso.x = Math.random() * (stage.stageWidth - perso.width);
			perso.y = Math.random() * (stage.stageHeight - perso.height - 40);
			addChild(perso);
 
		}
 
		// petite méthode pour connaître dynamiquement le superType d'un asset
		private function getSuperType(pClass:Class):String
		{
			var superType:String = describeType(pClass).factory.extendsClass[0].@type;
			return superType.split("::")[1];
		}
	}
 
}

Le MetaTag [Embed] et les SWC

Utilisation du MetaTag embed : externalisation des assets

• Depuis Flash CS4, le compilateur permet l’utilisation du MetaTag [Embed]
• Permet d’externaliser la bibliothèque de Flash en incluant des éléments multimédia externes dans son SWF : polices, MC, XML, sons…
• En aucun cas du chargement dynamique, les assets sont inclus dans le SWF : ajoute du poids au SWF !!
• Ce n’est pas de l’AS3, ces balises sont transformées en AS3 avant la compilation

Embed d’images, sons, swf et typo

• Ecriture :

1
2

[Embed (source=’image.jpg’)]
var ClasseImage:Class

• Les instances sont de type BitmapAsset, SoundAsset, SpriteAsset, MovieClipAsset…
• Types issus du framework Flex : nécessaire d’inclure les classes de ce framework en utilisant des .SWC du Flex SDK (gratuit et téléchargeable ici)
• Il faut intégrer le flex.swc via les paramètres d’ActionScript 3 dans l’onglet Flash des paramètres de publication

Exemple : 05_MetaTag_Embed [Télécharger l'exemple]

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

package
{
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	// classes issues du framework Flex : indispensables pour utiliser l'embed dans Flash CS4
	import mx.core.*;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Main extends MovieClip
	{
 
		// attention : le chemin source se fait depuis le répertoir où se trouve
		// le fichier .as, pas depuis la racine du projet !!
		[Embed (source="assets/LogoRegart.jpg")]
		var LogoRegart:Class;
 
		[Embed (source="assets/son.mp3")]
		var SonExterne:Class;
 
		[Embed (source="assets/bibliotheque.swf", symbol="Personnage")]
		var Personnage:Class;
 
		[Embed(source='assets/SerifaStd-Light.otf',
		fontName='maPolice',
		mimeType = 'application/x-font',
		unicodeRange = 'U+0030-U+0039, U+0041-U+0051, U+0052-U+007A')]
		// chiffres de 0 à 9, les minuscules de a à z et les majuscules de A à Z
		// Attention : ne pas utiliser ce nom de classe pour choisir sa typo via un TextFormat
		// ou une CSS externe, mais la propriété fontName, dans notre cas 'maPolice'
		var font:Class;
 
		private var monSon:Sound;
		private var conteneurLogo:Sprite;
		private var monLogo:Bitmap;
		private var monPerso:Sprite;
 
		public function Main():void
		{
 
			// LOGO ======================================================
			conteneurLogo = new Sprite();
			conteneurLogo.x = conteneurLogo.y = 40;
 
			monLogo = new LogoRegart();
			conteneurLogo.addChild(monLogo);
			addChild(conteneurLogo);
			conteneurLogo.buttonMode = true;
 
			// SON ======================================================
			monSon = new SonExterne();
			conteneurLogo.addEventListener(MouseEvent.CLICK, onLogoClick);
 
			// MOVIECLIP ======================================================
			monPerso = new Personnage() as Sprite;
			//trace(flash.utils.describeType(monPerso));
			monPerso.x = 220;
			monPerso.y = 140;
			monPerso.scaleX = monPerso.scaleY = .8;
			addChild(monPerso);
 
			// FONT =========================================================
			var champTexte:TextField = new TextField();
			champTexte.x = 400;
			champTexte.y = 200;
			// ne pas oublier de passer embedFonts à true !
			champTexte.width = 120;
			champTexte.wordWrap = true;
			champTexte.embedFonts = true;
			champTexte.autoSize = TextFieldAutoSize.LEFT;
			champTexte.rotation = -10;
			champTexte.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 
			// on passe en premier argument du constructeur le fontName défini dans l'embed : "maPolice"
			var tf:TextFormat = new TextFormat("maPolice", 22, 0xCC0000);
			champTexte.setTextFormat(tf);
 
			addChild(champTexte);
 
		}
 
		private function onLogoClick(e:MouseEvent):void
		{
			monSon.play();
		}
 
	}
 
}

Qu’est-ce qu’un SWC ?

• Librairie de classes compilées (// SWF)
• Distribution de classes sans livrer les sources.
• Utilisation d’assets sous forme de classe.

Utilisation d’Embed pour intégrer des typo

• Permet de créer l’équivalent d’un symbole police de bibliothèque MAIS on va pouvoir choisir les glyphes embarqués !
• Utilisation d’un SWF dans lequel on crée des champs texte avec intégration des caractères.
• Attention : dans les champs textes posés sur la scène, ne surtout pas choisir la même typo que celle que l’on va appliquer en tant qu’embedFont (prendre de préférence une police de périphérique) > sinon l’intégration ne fonctionne pas !!

Exemple : 06_embed_et_typo_dans_SWF [Télécharger l'exemple]

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

package
{
	import flash.display.Sprite;
	import flash.text.Font;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Main extends Sprite
	{
 
		[Embed(source='Calibri_font.swf',
		fontName = 'Calibri'
		)]
		private static var CalibriRegular:Class;
 
		[Embed(source='Calibri_font.swf',
		fontName = 'Calibri',
		fontStyle = 'italic'
		)]
		private static var CalibriItalic:Class;
 
		[Embed(source='Calibri_font.swf',
		fontName = 'Calibri',
		fontWeight = 'bold'
		)]
		private static var CalibriBold:Class;
 
		public function Main()
		{
 
			regular_txt.embedFonts = true;
			regular_txt.text = "Je peux parler en Calibri regular...";
			//regular_txt.rotation = 2;
			var tf:TextFormat = new TextFormat("Calibri", 22, 0xFFFFFF);
			regular_txt.setTextFormat(tf);
 
			italic_txt.embedFonts = true;
			italic_txt.text = "Mais aussi en Calibri italic...";
			tf = new TextFormat("Calibri", 22, 0xFFFFFF);
			tf.italic = true;
			//italic_txt.rotation = 2;
			italic_txt.setTextFormat(tf);
 
			bold_txt.embedFonts = true;
			bold_txt.text = "Ou encore en Calibri bold...";
			tf = new TextFormat("Calibri", 22, 0xFFFFFF);
			tf.bold = true;
			//bold_txt.rotation = 2;
			bold_txt.setTextFormat(tf);
 
			french_txt.embedFonts = true;
			french_txt.text = "Et je n'embarque que les 140 caractères français.";
			tf = new TextFormat("Calibri", 13, 0xFFFFFF);
			tf.leading = -2;
			french_txt.setTextFormat(tf);
 
		}
 
	}
 
}

Utilisation de SWC Flex (ou autres) non-graphique : se connecter à un webservice avec le rpc.swc du framework Flex

• Classe WebService existait en AS2.
• Classe Webservice n’existe pas en AS3 dans l’API de Flash, mais existe dans le framework Flex.
• Utilisation du rpc.swc du framework Flex pour travailler avec la classe WebService de Flex.

Exemple : 07_webservice_avec_le_rpc_swc [Télécharger l'exemple]

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

package  
{
	import flash.display.Sprite;
 
	// classes du framework Flex intégrées 
	// via le rpc.swc et le framework.swc
	import mx.rpc.soap.*;
	import mx.core.*;
	import mx.rpc.events.*;
 
	import flash.events.MouseEvent;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Main extends Sprite
	{
		private var monService:WebService;
 
		public function Main() 
		{
			monService = new WebService();
			// mx.rpc.soap.LoadEvent (hérite de WSDLLoadEvent)
			monService.addEventListener(LoadEvent.LOAD, onWSDLLoad);
			monService.loadWSDL("http://www.boyzoid.com/comp/randomQuote.cfc?wsdl");
 
			bouton.addEventListener(MouseEvent.CLICK, getQuoteClick);
		}
 
		function onWSDLLoad(e:LoadEvent):void
		{
			trace(e);
			// on écoute le résultat 
			monService.getQuote.addEventListener(ResultEvent.RESULT, getQuoteResult);
			// on écoute les éventuels échecs de l'appel 
			monService.getQuote.addEventListener(FaultEvent.FAULT, getQuoteFault);
			// appel de la méthode distante getQuote() sur le webservice
			monService.getQuote(true);
			texte.htmlText = "Retrieving quote...";
		}
 
		function getQuoteClick(e:MouseEvent):void
		{
			monService.getQuote(true);
			texte.htmlText = "Retrieving quote...";
		}
 
		function getQuoteResult(e:ResultEvent):void
		{
			trace(e.result);
			texte.htmlText = e.result as String;
		}
 
		function getQuoteFault(e:FaultEvent):void
		{
			trace(e);
			texte.htmlText = "Oups, le webservice n'a pas l'air de fonctionner...";
		}
 
	}
 
}

Ils reprennent les slides et les exemples montrés lors de cette journée.

Le séminaire est divisé en trois parties :

- Séparation du design et du code dans Flash – part 1 : séparation .fla et .as
- Séparation du design et du code dans Flash – part 2 : compiler des .fla différents
- Séparation du design et du code dans Flash – part 3 : coder et compiler avec Flex Builder

Problématiques abordées :

Comment développer un projet en Flash et fluidifier les échanges au sein d’une équipe composée de designer Flash et de développeurs AS3 .

Quelles sont les bonnes pratiques (séparation et communication entre éléments du design et code), les techniques (librairies partagées, SWC),  outils (FlashDevelop, Flex Builder) ?

Première partie : séparation .fla et .as

Permettre à chacun de travailler avec ses propres outils.

Historique

ActionScript 1

• Code sur la timeline ou sur les objets (MC et BTN)
• Code disséminé un peu partout dans l’appli : difficile à maintenir et à comprendre.
• Le codeur et le designer étaient souvent une seule et même personne.
• Avec le temps : spécialisation des tâches, codeur et designer sont devenues deux personnes différentes.
• Mise au point de bonnes pratiques : centralisation du code sur le scénario principal, utilisation de la directive #include pour placer le code dans des fichiers .as externes.

ActionScript 2

• Apparition de la POO : une meilleure structuration du code en classes est alors permise
• L’éditeur de code de Flash montre ses limites pour les codeurs
• Utilisation de SEPY, Flashdevelop par les codeurs

ActionScript 3

• Langage clairement POO
• Prérequis en programmation sont importants
• Outils des codeurs : Flashdevelop, Flex Builder, FDT (plugin Eclipse)

Classe du document

• Représente le root (la scène principale) de l’application.
• Point d’entrée de l’application, permet d’externaliser tout le code.
• Hérite d’un displayObjectContainer (MovieClip, Sprite)

Associer un symbole et une classe

• Bonne séparation logique et vue.
• Transparent pour le designer qui peut créer des occurrences sur la scène avec une logique implémentée.
• Instanciation se fait par new MaClasse()
• Liaison avec Clip, Boutons, Bitmap, Police, Sons

Communication TimeLine <> fichier .as

• Occurrences posées sur la scène deviennent des propriétés publiques de la classe.
• Paramètres AS3 : « déclarer automatiquement les occurrences de la scène »
• Appel  de méthodes de la classe depuis le scénario.
• Ciblage d’occurrences depuis la classe.

Déclencher des instructions en fonction de la position de la tête de lecture

3 méthodes :

• Appel de méthodes de la classe depuis le scénario
• Diffusion d’événement depuis le scénario
• Utilisation d’addFrameScript (combinée avec étiquettes via la propriété currentLabels)

Exemple :  01_balle_rebond [Télécharger l'exemple]

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
70
71
72
73
74
75

package 
{
	import flash.display.FrameLabel;
	import flash.display.MovieClip;
	import flash.events.Event;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Animation extends MovieClip
	{
 
		public function Animation():void
		{
			trace("Animation instanciée");
 
			// méthode 2
			addEventListener(Event.COMPLETE, ecouteurAnimationTerminee);
 
			// méthode 3
			// utilisation de la fonction non-documentée addFrameScript
			// ATTENTION : les numéros d'image commencent à 0
			// donc 89 = 90ème image
			// ATTENTION 2 : tout le code présent sur la frame est écrasé !
			addFrameScript(89, frameAnimationTerminee);
 
			// méthode 3bis
			// on peut combiner tout cela avec des étiquettes
			// currentLabels renvoie un tableau d'objets FrameLabel
			var etiquettes:Array = currentLabels;
 
			for each (var label:FrameLabel in etiquettes)
			{
				trace(label.frame, " : ", label.name);
			}
 
			// ATTENTION : le numéro de frame d'un FrameLabel commence à 1 et non à 0 !!
			addFrameScript(etiquettes[0].frame - 1, frameAnimationMilieu);
		}
 
		// METHODE 1
		// méthode appellée depuis le scénario de l'animation
		// plus performant et moins gourmand en mémoire
		private function animationTerminee():void
		{
			trace("Animation terminée");
		}
 
		// METHODE 2
		// diffusion d'un événement depuis le scénario
		private function ecouteurAnimationTerminee(e:Event):void
		{
			trace("Evénement COMPLETE diffusé depuis le scénario");
		}
 
		// METHODE 3
		// addFrameScript : une fonction se déclenche automatiquement quand la tête de lecture
		// parvient à telle image
		private function frameAnimationTerminee():void
		{
			trace("Animation terminéee avec addFrameScript");
			stop();
		}
 
		// METHODE 3bis
		// addFrameScript avec étiquette
		private function frameAnimationMilieu():void
		{
			trace("Animation milieu");
		}
 
	}
 
}

Piloter la timeLine depuis la classe

Il est courant d’utiliser le scénario pour créer des écrans ou des états d’un clip et de déplacer la tête de lecture en fonction des actions de l’utilisateur pour afficher tel ou tel écran/état.

Problème  de l’asynchronie code/tête de lecture

Player 9 : gros soucis de synchronisation code/tête de lecture. Le code s’exécute avant le déplacement effectif de la tête de lecture, d’où impossibilité de cibler des occurrences placées sur la scène :

1
2
3
4

gotoAndStop(10);
// occurrence placée à l’image 10
monClip.play();
Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.

Exemple : 02_piloter_timeLine_depuis_classe [Télécharger l'exemple]

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

package 
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.system.*;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Main extends MovieClip 
	{
 
		public function Main():void
		{
 
			stop();
			etape1_btn.addEventListener(MouseEvent.CLICK, etape1);
			etape2_btn.addEventListener(MouseEvent.CLICK, etape2);
			etape3_btn.addEventListener(MouseEvent.CLICK, etape3);
 
		}
 
		private function etape1(e:MouseEvent):void
		{
			// Fonctionne avec le Flash Player 10
			// mais pas avec le Flash Player 9
			gotoAndStop("etape1");
			etape_txt.text = "Etape 1";
			perso_mc.alpha = Math.random();
 
		}
 
		private function etape2(e:MouseEvent):void
		{
			gotoAndStop("etape2");
			etape_txt.text = "Etape 2";
			tete_mc.alpha = Math.random();
		}
 
		private function etape3(e:MouseEvent):void
		{
			gotoAndStop("etape3");
			etape_txt.text = "Etape 3";
			couronne_mc.alpha = Math.random();
		}
 
	}
 
}

Solution 1 :

1
2
3
4
5
6
7
8
9
10
11
12

// écouter l’événement RENDER
addEventListener(Event.RENDER, onRender);
// déplacer la tête de lecture
gotoAndStop(10);
// invalidation du Stage
stage.invalidate();
 
// ciblage du clip dans l’écouteur
private function onRender(e:Event):void
{
monClip.play();
}

Rend très complexes les allers-retours sur la timeline.

Solution 2 :

Utiliser un addFrameScript.

1
2
3
4
5
6
7

addFrameScript(9, imageDix);
gotoAndStop(10);
 
private function imageDix() :void
{
monClip.play();
}

Beaucoup plus souple, surtout si on a plein d’étapes avec beaucoup d’allers-retours.

ATTENTION : pas nécessaire avec le player 10 lorsqu’on travaille dans une Classe, mais le problème persiste si on code sur la TimeLine.

Player 10 : si on code sur la TimeLine, il faut appeler la méthode de déplacement de tête de lecture sur un enfant du scénario dans lequel on code pour que ça fonctionne.

1
2
3
4
5
6
7

// ne fonctionne pas
gotoAndStop(10);
monClip.alpha = Math.random();
 
// fonctionne
monConteneur.gotoAndStop(10);
monConteneur.monClip.alpha = Math.random();

Gestion des états d’un MovieClip : horizontalité vs verticalité

• Une alternative au travail avec la timeline (horizontalité) est de travailler avec la displayList (verticalité).
• Chaque état est un DisplayObject, on gère alors les changements d’état en les ajoutant/retirant de la liste d’affichage.
• Intérêt : on peut se passer du gotoAndStop() asynchrone et eviter les bugs liés au player en mode horizontal. On travaille de manière plus « naturelle » pour le player.

Exemple : 03_gestion_etats_MC_avec_displayList_Mario [Télécharger l'exemple]

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

package 
{
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
 
	/**
	 * ...
	 * @author Nicolas Gans
	 */
	public class Mario extends Sprite 
	{
 
		private var touches:Object = new Object();
		private var sens:Number;
		private var vitesse:Number = 8;
 
		public var isJumping:Boolean;
 
		private var _displayed:DisplayObject;
 
		public static const JUMP_FINISHED:String = "jumpFinished";
 
		public function Mario():void
		{
			sens = scaleX;
 
			// on nettoie la displayList
			while (numChildren > 0) removeChildAt(0);
 
			// clip affiché par défaut
			displayed = repos_mc;
 
			addEventListener(Event.ADDED_TO_STAGE, activation);
		}
 
		private function activation(e:Event):void
		{
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
			stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
			addEventListener(Event.ENTER_FRAME, loop);
			// événement diffusé sur la dernière frame du clip saute_mc
			saute_mc.addEventListener(JUMP_FINISHED, onJumpFinished);
		}
 
		// gestion affichage / retrait des états
		private function set displayed(value:DisplayObject):void
		{
			// on supprime l'état en cours
			if (_displayed != null && contains(_displayed)) removeChild(_displayed);
			// on le remplace par le nouvel état
			_displayed = addChild(value);
		}
 
		// gestion des actions en fonction des touches enfoncées
		private function loop(e:Event):void 
		{
 
			if (touches[Keyboard.SPACE] && !isJumping)
			{
				saute();
			}
 
			if (touches[Keyboard.LEFT])
			{
				deplace(Keyboard.LEFT);
			}
			else if (touches[Keyboard.RIGHT])
			{
				deplace(Keyboard.RIGHT);
			}
 
			if (touches[Keyboard.DOWN] && !isJumping)
			{
				displayed = assis_mc;
			}
 
		}
 
		private function keyDown(e:KeyboardEvent):void 
		{
			touches[e.keyCode] = true;
		}
 
		private function keyUp(e:KeyboardEvent):void 
		{
			touches[e.keyCode] = false;
			if (!isJumping) displayed = repos_mc;
		}
 
		private function saute():void
		{
			isJumping = true;
			saute_mc.gotoAndPlay(2);
			displayed = saute_mc;
		}
 
		private function onJumpFinished(e:Event):void 
		{
			isJumping = false;
			displayed = repos_mc;
		}
 
		private function deplace(pSens:int):void
		{
			if (_displayed == assis_mc) return;
			if (!isJumping) displayed = marche_mc;
 
			if (pSens == Keyboard.LEFT)
			{
				scaleX = -sens;
				x -= vitesse;
			}
			else
			{
				scaleX = sens;
				x += vitesse;
			}
		}
	}
 
}
 
}

Voici la traduction de l’article « Génération Flash » paru en 2002, que l’auteur Lev Manovich nous a autorisé à traduire et diffuser sur Flashxpress.
Suite à des demandes, nous republions aujourd’hui cet article. Bonne lecture !

Cet article, constitué de plusieurs paragraphes distincts mis bout à bout, porte un regard sur le phénomène graphique Flash sur le web, qui a attiré un grand élan de créativité ces dernières années. Plus que le simple résultat d’une situation particulière entre software et hardware (des bandes passantes à faibles débits conduisant à l’usage de graphismes vectoriels), l’esthétique Flash illustre la sensibilité culturelle d’une nouvelle génération(1). Cette génération ne se soucie pas de savoir si son travail est considéré comme de l’art ou du design. Cette génération ne s’intéresse pas à la « critique du média » dont se préoccupaient les artistes de ces deux dernières décennies, et prefère s’engager dans une critique du logiciel. Cette génération écrit son propre code logiciel, de manière à créer son propre système culturel, mettant ainsi de côté l’utilisation des échantillons de médias commerciaux(2). En résulte un nouveau modernisme de la visualisation des données, filets vectoriels, grilles larges d’un pixel, flêches: le design Bauhaus au service du design de l’information. Au lieu d’un assaut Baroque de médias commerciaux, la génération Flash nous offre une esthetique moderne, et la rationalité du logiciel. Le design d’information est utilisé comme outil donnant du sens à la réalité, tandis que la programmation devient un outil de prise de pouvoir(3).

(1) Cet article traite de la « génération Flash » et non des sites Internet faits avec le logiciel Flash. Bien des sites qui m’ont amené à parler d’esthétique Flash n’ont pas nécessairement été faits avec Flash. Ils utilisent shockwave, DHTML, QuickTime, et d’autres formats multimedia du web. Ainsi les qualités que je décrirai plus loin comme spécifique à l’esthétique Flash ne sont pas exclusifs aux sites Flash.
(2)Par exemple, les travaux de Lisa Jevbratt, John Simon, et Golan Levin.
(3) »Generation Flash » incorpore des versions révisées des textes commandés pour http://www.whitneybiennial.com et http://www.electronicorphanage.com/biennale. Ces deux expositions ont été organisées par Miltos Manetas / Electronic Orphanage. “On UTOPIA” a été commandé par Futurefarmers.

Turntable et Flash Remixing

[www.whitneybiennial.com]

Turntable est un logiciel pour le web qui permet de mixer en temps réel jusqu’à 6 animations flash différentes en plus de permettre la manipulation de palettes de couleurs, de la taille individuelle des animations et d’autres paramètres. Pour le site www.whiteneybiennial.com, on a demandé aux artistes participants de soumettre de courtes animations, exposées par la suite sur le site à la fois séparément et dans des remixes effectués via Turntable. Certains remix étaient des animations d’un même artiste alors que d’autres utilisaient des animations d’artistes différents.

C’est desormais un lieu commun que de dire que nous vivons dans une culture du remix. C’est vrai. Mais est-il possible d’aller au delà de cette affirmation, au delà de ce fait ? Par exemple, peut-on faire des distinctions entre différentes sortes d’esthétiques du remix ? Quelle relation peut on établir entre nos remix faits avec des outils électroniques ou informatiques et les collages et montages plus anciens? Quelles sont les similitudes et les différentes entre un remix audio et un remix visuel ?

Pensons à la boucle. Bloc de base dans la construction d’un morceau électronique, elle a aussi acquis, de manière surpenante, une position forte dans la culture visuelle contemporaine. Abandonnés à leur propre dispositif, les animations Flash, les films Quick time, les personnages de jeux vidéos bouclent à l’infini, jusqu’à l’intervention humaine par clic.

Comme je l’ai par ailleurs montré, tous les dispositifs visuels pré-cinématographiques du 19ème siècle étaient également basés sur des boucles. Tout au long du 19ème siècle, ces boucles devenaient de plus en plus longues, jusqu’à devenir narratives. aujourd’hui, fort est de constater le phénomène inverse (des artistes samplent de courts segments de films ou d’émissions télé, les organisant en boucles, et exposent ces dernières en tant qu’ « installations vidéos ». La boucle est ainsi devenu la nouvelle méthode par défaut pour critiquer la culture média, remplaçant la photographie statique de la critique post moderne des années 80.

En même temps, cette méthode remplace la photographie comme nouvel index du réel : depuis que tout le monde sait que la photo peut être modifiée numériquement, une courte séquence animée arrangée en loop devient une meilleure façon de représenter la réalité, du moins pour l’instant.

Pensons à Internet. Ce que l’époque post moderne désignait comme citation, appropriation ou pastiche n’a plus besoin d’un nom spécifique. C’est désormais la simple logique de la production culturelle : télécharger des images, des codes, des formes, des scripts,… ; les modifier, puis mettre le nouveau travail en ligne, les faire circuler. (note : avec Internet, la boucle omniprésente de la production culturelle va beaucoup plus vite : une nouvelle tendance ou un nouveau style pourrait se répandre comme la peste). Quand je demande à mes étudiants de créer leurs propres visuels à en prenant une photo ou en filmant une vidéo, ils ont une révélation : les images ne proviennent pas forcément d’Internet ! Dois-je également leur révéler que les images ne proviennent pas forcément de dispositifs technologiques qui enregistrent le réel, et que, à la place, elles peuvent être dessinées ou peintes ?

Pensons à l’image. Comparons-la au son. Il paraît possible de lier d’innombrables sons et pistes entre eux, tout en restant lisible. Le résultat se complexifie, devient de plus en plus intéressant. La vision semble fonctionner de façon différente. Bien sûr les images commerciales que nous voyons tous les jours à la télé et au cinéma sont souvent faites à partir de différentes couches (parfois plusieurs milliers), mais ces calques fonctionnent ensemble et créent un espace illusoire (ou super-illusoire). En d’autres termes, ils ne sont pas entendus en tant que sons autonomes. Quand on commence à mixer des images arbitraires entre elles, on détruit vite toute signification. (si vous avez des doutes, essayez donc Digital Landfill (4)).Combien de bouts d’images individuelles peuvent être mixées ensemble avant que le tout ne produisent plus que du « bruit » ? Six semble être un bon chiffre (c’est précisément le nombre de bouts d’images que Turntable peut charger.

Pensez « sample » en opposition avec la totalité d’un travail. Si nous vivons vraiment dans la culture du remix, est-il réellement intéressant de créer des travaux entiers, puisque ils seront démontés et transformés en samples de toute façon ? En réalité, pourquoi ajuster soigneusement des morceaux séparés de films faits sous Director, ou des compositions d’After Effects pour voir le public les intégrer pour leur usage grâce à un quelconque logiciel gratuit? Bien sûr, la réponse est oui : nous avons encore besoin d’Art.

Nous avons toujours la volonté de parler du monde et des vies que nous y menons ; nous avons toujours besoin de notre propre « miroir debout au milieu d’une route sale », selon a définition de Stendhal au sujet de l’art au 19ème siècle. Cependant nous avons aussi besoin d’accepter le fait que pour les autres, notre travail ne sera qu’un ensemble d’échantillons, ou peut être un seul échantillon. Turntable est le logiciel visuel qui rend cette nouvelle condition esthétique douloureusement évidente. Il nous invite à jouer avec la dialectique du sample et du composite, de notre propre travail et de celui des autres. Bienvenue dans le modèle Flash du remix visuel.
Pensez Turntable.

(4 )voir http://www.potatoland.org/landfill

Art, média art et Software art.

Récemment le “software art” a émergé en tant que nouveau secteur dynamique des nouveaux média arts. L’actionScript de Flash, le Lingo de Director, le PERL, MAX, le javascript, le java, le C++ et d’autres langages de programmation et de script sont des supports de choix d’un nombre en sérieuse augmentation de jeunes artistes. Thematiquement, le « software art » traite le plus souvent de la visualisation des données ; d’autres secteurs d’activité créatrice incluent les outils de performance ou la composition collaboratives en ligne (Keystroke), des logiciels de DJ/VJ, et des alternatives/critiques de logiciels commerciaux (Auto-Illustrator), surtout les browsers (des vieuxclassiques comme Netomat, Web Stalker, et beaucoup d’autres depuis). Souvent, les artistes ne créent pas de travaux singuliers, mais des environnements logiciels proposant leur utilisation par d’autres (comme par exemple Alex Galloway’s Carnivore).

De manière styllistique, beaucoup de travaux font implicitement référence au modernisme visuel (John Simon semble être le seul jusqu’ici à tisser de manière explicite des références modernistes).

Tout à coup, la programmation devient « cool ». Tout à coup, les techniques et l’imagerie qui ont été associés pendant deux décennies aux geeks du SIGGRAPH, et étaient considérés comme étant de mauvais goût (rendement visuel des fonctions mathématiques, systèmes de particules, palette de couleurs RVB) sont accueillies sur les écrans de plasma des murs de galerie. Ce ne sont plus October et Wallpaper mais les manuels de Flash et Director qui sont les lectures nécessaires pour n’importe quel artiste sérieux.

Bien sûr, des artistes de l’informatique ont écrits leurs propres logiciels depuis le début des années 60. En fait, jusqu’au milieu des années 80, créer son propre logiciel ou du moins utiliser des langages de programmation conçus par d’autres (comme Zgrass) à des niveaux très élevé était la seule façon de faire de l’art informatique(5). Alors qu’y-a-t-il de nouveau dans ce phénomène qui a émergé depuis peu par rapport aux « software art » ? Est-il bien nécessaire ?

Essayons de distinguer trois schémas : un artiste, un artiste du media et un artiste du logiciel.

Un artiste romantique / moderne (19ème siècle et première moitié du 20ème) est un génie qui créée à partir de rien, imposant les fantômes de son imagination au reste du monde.

Ensuite, nous avons la nouvelle figure du média-artiste (années 60 à 80) qui correspond à la période post-moderne. Les artistes modernes utilisent bien évidemment eux aussi les technologies d’enregistrement des médias comme la photographie et les films mais ils utilisaient ces technologies comme d’autres outils artistiques, un moyen de créer une vision originale et subjective du monde.

A l’opposé, les média artistes post modernes acceptent l’impossibilité d’un original, une vision non médiatisée de la réalité. Leur sujet de préoccupation n’est pas la réalité elle-même, mais la représentation de la réalité via un média, et le monde des média lui même.
Par conséquent ces médias artistes n’utilisent pas seulement les technologies des médias comme outils, mais ils utilisent aussi le contenu des médias commerciaux.

Une stratégie typique d’un média artiste consiste à re-photographier une photo de journal, ou de re-monter un morceau d’émission télé, ou d’isoler une scène d’un film d’Hollywood ou d’émissions télé et de le transformer en boucle (de Nam June Paik et dara Birnbaum à Douglas Gordon, Paul Pffefer, Jennifer and Kevin McCoy). Bien sûr, un média artiste n’est pas obligé d’utiliser les technologies des médias commerciaux (photo, vidéo, film, nouveau média), il peut se servir d’autres médias, de la peinture à l’huile à l’impression ou encore la sculpture.

Le média artiste est un parasite qui travaille aux dépens du média commercial -le résultat de l’artisanat collectif de personnes hautement qualifiée. De plus, un artiste qui sample à partir d’un média commercial ne peut jamais rivaliser avec lui ce média. Au lieu d’un film complet, on n’a qu’une simple scène ; à la place d’un jeu vidéo complexe, avec sa jouabilité, son récit, intelligence artificielle, etc, nous n’avons qu’une critique de son iconographie.

30 ans de « média art » et de post-modernisme ont inévitablement mené à une réaction. Nous sommes las de toujours prendre les médias existants comme point de départ. Nous sommes las d’être toujours secondaires, et de toujours réagir à partir de ce qui existe déjà.

Prenons maintenant le software artiste – le nouveau romantique. Au lieu de travailler exclusivement avec des médias commerciaux (et au lieu d’utiliser des logiciels commerciaux) le software artiste pose ses marques dans le monde en concevant le code original. Cet acte de conception de code est très important , indépendamment de ce que ce code produit réellement au bout du compte.
Un software artiste ré-utilise le langage de l’abstraction , le design (les lignes et les formes géométriques modernistes, les courbes générées mathématiquement et les champs de couleurs définis) pour s’éloigner de la figuration en général, et du langage cinématographique du média commercial en particulier.

A la place de photos et de clips issus de films et de télévision, on obtient des lignes et des compositions abstraites. En bref, au lieu d’utiliser QuickTime, on se sert de Flash. Au lieu d’un ordinateur en tant que machine média (une vision nettement diffusée par l’industries informatiques, et clairement émise par Apple qui promeut un Mac en tant que concentrateur digital pour l’enregistrement et la lecture de médias), on retourne à un utilisation de l’ordinateur en tant que machine à programmer.

La programmation permet à l’art de ne plus être envisager comme faisant suite au media commercial. Une seconde cause à ceci pourrait être la récente popularité de l’art sonore (« sound art »). Tandis que les médias commerciaux emploient désormais tous les styles visuels possibles, les environnements sonores commerciaux ne se sont toujours pas appropriés l’ensemble de l’espace sonore. Alors que le rock, le hip-hop et la techno sont déjà devenus des musiques standards d’ascenseurs (au moins dans les ascenseurs branchés de l’hôtel Hudson à New York), il semble que les secteurs de l’espace sonore où le rythme est absent soient toujours intouchables, du moins pour le moment.

(5) Après que des applications basées sur des interfaces graphiques comme HyperCard, Director, Photoshop ou d’autres soient devenus communs beaucoup d’artistes informatiques ont continué à écrire leurs propres programmes : écrire son propre code pour controller une installation interactive, propgrammer en Lingo une oeuvre multimedia interactive, etc… On n’y a pas fait reference comme à du « software art », on a considéré que malgré l’existence d’applications à interface graphique un engagement artistique serieux dans l’informatique rendait necessaire de mettre « les mains dans le cambouis ».

Utopia en Shockwave

[ Utopia est un projet Shockwave des Futurefarmers pour la section internet 01 de Tirana Biennale ]

[ Futurefarmers : Amy Franceschini et Sasha Merg ]

UTOPIA est amusant et trompeur, en effet, il a l’air plus innocent, plus simple et plus léger qu’il ne l’est en fait. Au premier abord, on pourrait le prendre pour un logiciel fait pour les enfants, ou pour des adultes dont les références ne sont pas Karl Marx, Sigmund Freud Rem Koolhaas et Philip Stark, mais l’envoie d’e-mails, gnutella, les graphismes retro Atari et le surf sur Internet. C’est cette nouvelle génération que l’on a vu apparaître dans les années 90. Contrairement aux artistes qui communiquaient sur les médias dans les années 60 à 80, et dont les cibles principales étaient les médias publicitaires, le cinéma et la télévision, la nouvelle génération ne perd pas son énergie à critiquer les médias. Au lieu de s’en prendre à l’environnement des médias commerciaux, elle se créé le sien : Sites Internet, mixes, des logiciels, des accessoires, cloves, des vidéos digitales, des animations et des contenus interactifs en Flash et en Shockwave.

La nouvelle ‘sensibilité / façon de faire’ si bien illustrée par Utopia est douce, élégante, tout en retenue, et intelligente. C’est la nouvelle intelligentsia du logiciel. Regardez les lignes fines et peu-contrastées d’Utopia, praystation.com et tant de projet en Flash de Tirana Biennale 01. Si les images de la précédente génération de média-artistes, de Nam June Paik à Barbara Krueger, étaient criardes, et essayaient de compléter l’intensité du média commercial, les nouveaux artistes informatiques comme Franceschini / Merg chuchotent à nos oreilles. Au contraire de l’arrogance des médias, ils nous offrent la sagacité. Au contraire du courant médiatique infini et répété d’icônes et de sound bytes, ils nous offrent des systèmes plus réduits et économiques : une nature stylisée, de l’écologie, ou bien des jeux / des générateurs de musique / des parades en style Légo dans Utopia.

FutureFarmers fait parti du petit nombre de maîtres de Flash/Shockwave qui utilisent leurs capacités à des fins sociales plutôt qu’à de simple buts formels. Leur projet theyrule.net est un excellent exemple de la manière dont ne programmation intelligente et des graphismes intelligents peuvent être utilisés de manière politique. Plutôt que de présenter un message spolitique préformatté, il nous donne les informations et les outils pour l’analyser. Il sait que nous sommes suffisamment intelligents pour en arriver à la bonne conclusion. C’est la nouvelle rhetorique de l’interactivité : nous nous laissopns convaincre non pas en ecoutant ou en regardant un message préparé mais en travaillant l’information, en la réorganisant, en découvrant les connections, en réalisant les corrélations.

UTOPIA na pas de contenu politique explicite, il présente son message politique à travers une allégorie. Comme SimCity et les Sims similaires, le programme nous présente tout monde miniature qui fonctionne selon ses propres règles(Toutes les animations dans UTOPIA son rendues en temps réél, rien n’est fait à la main). La cosmogonie de ce monde reflette notre nouvelle compréhension de notre propre planète. L’après guerre froide, Internet, l’ecologie, Gaia, et la globalisation. Notez les fines lignes, à peine visibles, qui connectent les acteurs et les blocks.(c’est le même système que celui utilisé dans theyrule.net). Dans l’univers d’UTOPIA, tout est interconnecté, et chaque action individuelleaffecte le systeme comme un tout. Intellecturellement, nous savons que c’est de cette manière que notre planète fonctionne ecologiquement et economiquement, mais UTOPIA le représente à une échelle à laquelle nous pouvons le percevoir.

Les lignes ont également un autre objectif. Malgré CNN, Greenpeace, le toit de verre de Reistag de Berlin et d’autres institutions travaillant à rendre transparentes les sociéts modernes envers leurs citoyens, laplupart n’est pas visible. Ce n’est pas seulement parceque nous ne connaissons pas les motivations derriere telle politique gouvernementale ou parceque la publicté et les relations publiques travaillent constatemment pour faire apparaitre les choses différentes de ce qu’elles sont rééllement- le fonctionement des sociétés est invisible au sens littéral. Par exemple, nous ne savons pas quelles sont les cellules qui fonct fonctionner nos téléphones cellulaires, nous ne connaissons pas la disposition du réseau financier privé qui circule dans le monde, nous ne savons pas quelles entreprises sont situées dans un immeuble devant lequel nous passons tous les jours pour aller qau travail, et ainsi de suite. Mais dans UTOPIA nous le savons, parceque les liens sont rendus visibles. UTOPIA est une utopie parceque c’est une société dans laquelle la connectoin entre la cause et l’effet sont rendus visibles et compréhensibles. Le programme réécrit le Marxisme comme un graphisme vectoriel, il substitue la figure de la connection à la vieille figure du « unweilling »(NDT : il m’a été impossible de trouver un quelconque sens à ce mot. Les traductions dans les autres langues ayant gardé le terme original, j’ai décidé d’en faire de même).

Utopia, c’est du sérieux, derrière sa façade ludique-mais pas uniquement. En dessinant notre facination pour lales jeux vidéos et les logiciels d’interactions son/image, UTOPIA est un délice visuel. C’est Tetris qui rencontre Marx, qui rencontre l’exploitation de données qui rencontre
une boite de nuit. C’est un jeu pour la nouvelle génération qui sait que le monde est un réseau, que les medias ne valent pas la peine d’être pris trop au sérieux, et que le programmation peut être utiliséecomme outil politique.

L’ insupportable légèreté de FLASH

La section internet de la biennale 2001 de Tirana a été mise en place par Miltos Manetas/Electronic Orphanage. L’exposition a regroupé une petite douzaine de projets d’artistes et webdesigners, parmi lesquels de nombreux utilisateurs des technologies Flash ou Shockwave. Peter Lunenfeld, Norman Klein et moi-même avons été chargés par Manetas d’en rédiger le compte-rendu. Ce texte est ma propre contribution, la majeure partie des idées ont été développées d’après les conversations que tous trois avons eu à propos des travaux présentés lors de l’exposition. Les noms entre parenthèses sont ceux des artistes présents ; pour voir leurs projets, rendez-vous sur le site de l’exposition.

Biologie :

Les artistes Flash abondent en références biologiques : végétaux abstraits, créatures minimalistes ou simples nuages de pixels composent ce que l’oeil humain interprète comme étant représentatif de la vie (Geoff Stearns: deconcept.com, Vitaly Leokumovich: unclickable.com, Danny Hobart: dannyhobart.com; uncontrol.com). Nous voyons souvent des systèmes qui se régénèrent d’eux-même. Mais il ne s’agit pas là de la vie telle que nous la connaissons sur terre ; cela ressemble plutôt à ce ce que nous pourrions voir dans un laboratoire de biotechnologie où la biologie est utilisée à des fins industrielles. Nous assistons à une régénération et à une évolution extrêmement accélérées. Nous voyons émerger sous nos yeux des systèmes complexes : des millions d’années d’évolution condensées en quelques secondes.

Il y a une autre spécificité qui distingue la vie « à la Flash » de la vie réelle : l’absence de la mort. Les organismes biologiques et les systèmes naissent, se développent et, finalement, meurent. En résumé, ils représentent la téléologie. Mais, dans les projets Flash, la vie fonctionne différemment : puisqu’elles tournent en boucle, la mort disparaît. La vie suit éternellement son cours – plus précisément, tant que votre ordinateur reste connecté à internet.

Amplification : l’esthétique Flash et les Jeux Vidéo

Les écosystèmes abstraits au sein de projets Flash ont une autre caractéristique qui rend le jeu si agréable (Joel Fox). Ils utilisent brillamment la puissance de l’ordinateur afin d’amplifier les actions de l’utilisateur.
Cette puissance place l’ordinateur dans le groupe des « appareils magiques », ce n’est pas par hasard que l’on remarque ce fait dans les jeux vidéos, encore que l’on peut voir ce fait dans toutes nos interactions avec le PC. Par exemple, lorsque vous dites à Mario de faire un pas vers la gauche en bougeant votre joystick, cette action entraîne une ravissante petite histoire : Mario se met à traverser une colline, puis il se met à grimper dessus, la colline étant trop raide Mario retombe alors sur le sol, tout secoué. Aucune de ces actions ne nécessitent quelque chose de notre part, tout ce que nous avons eu à faire fut de bouger une seule fois le joystick. Le jeu amplifie notre action, et l’étend au sein d’une séquence narrative.

Historiquement, les jeux vidéo ont toujours été en avance au niveau des interfaces. Dans les années 60 et 70 les utilisateurs communiquaient avec les ordinateurs à l’aide d’interfaces non graphique, en perforant des cartes, en tapant des lignes de code par exemple. En revanche depuis leur apparition à la fin des années 50, les jeux vidéo ont adoptés des interfaces graphiques interactives, une évolution qui du attendre les années 80 avant d’apparaître sur les ordinateurs individuels (PC).

De manière similaire, les jeux d’aujourd’hui utilise déjà ce que beaucoup d’ingénieurs informatique pense être le prochain paradigme (manière de penser dans une société) dans l’interaction homme-machine : l’amplification active des actions de l’utilisateur. Dans le futur, nous disent-ils, des programmes surveilleront et analyseront nos interactions avec l’ordinateur, trouveront les schémas et les motifs, et automatiseront les taches que l’ont fait régulièrement, comme sauvegarder nos travaux a intervalles réguliers ou filtrer et répondre aux emails. L’ordinateur pourra aussi analyser notre comportement et notre niveau d’attention, et régler son propre comportement en fonction de cela : aller plus vite, ralentir, etc… Dans une certaine mesure, ce nouveau paradigme est déjà en cours dans certaines applications, par exemple, un explorateur Internet propose des listes de sites correspondant a ce que nous recherchons, Microsoft Office Assistant essaye de deviner lorsque l’on à besoin d’aide. Cependant, un problème crucial se pose si l’on évolue vers une telle amplification de l’interaction entre l’homme et l’ordinateur. Plus nous déléguons du pouvoir à l’ordinateur, plus nous perdons le contrôle de ce qu’il fait. Comment savoir si un programme identifie correctement la manière dont nous utilisons nos email? Comment savoir si un programme censé negocier le produit le moins cher avec d’autres n’a pas été corrompu par eux ? En résumé comment savoir si l’ordinateur amplifie correctement nos actions.

Les jeux vidéo sont des jeux, et le pire qui puisse arriver est que nous perdions.
Par conséquent, l’amplification active est présente dans pratiquement tous les jeux : Mario s’embarquant dans des histoires par un simple mouvement de joystick, des troupes conduisant des manœuvres militaires complexes pendant que vous contrôlez seulement leur leader dans le jeu « Rainbow Six », tandis que Lara Croft exécute toutes les acrobaties possible et imaginables par la simple pression d’une touche du clavier (à noter que dans les jeux « normaux » cette amplification n’existe pas, ainsi lorsque vous déplacez un pion sur un échiquier, voilà tout ce qu’il se passe, votre mouvement n’entraîne pas une série d’actions).

Les projets Flash, utilisent fortement l’amplification, ce qui donne à beaucoup de ces projets une sensation magique. Souvent nous sommes confrontés à un écran vide, mais un simple « clic » donne vie à tout un univers : un système de particules, des formes vivantes, ou encore tout un groupe de créatures diverses. L’utilisateur, qui tel un Dieu contrôle tout un monde est une situation que l’on rencontre souvent dans les jeux vidéos, Flash nous permet tout cela, mais en plus nous donne ce plaisir de pouvoir créer ce monde à partir de rien.

L’amplification active n’est pas la seule chose que les projets Flash et jeux ont en commun. Plus généralement, d’après Peter Lunefeld, les jeux sont à Flash ce que les films étaient à Wharhol. Le cinéma et la télévision ont colonisé l’inconscient des générations précédentes d’artistes des médias qui continuent d’utiliser la galerie comme thérapie. Les artistes Flash sont moins obsédés par les médias fondés sur le temps. Leur iconographie, leur rythme et esthétique de l’interaction viennent plutôt des jeux (Mike Clavert mikeclavert.com).

Parfois la participation de l’utilisateur est requise pour que le jeu en Flash puisse fonctionner, parfois le jeu se joue tout seul. (UTOPIA par futurefarmers.com ; dextro.org).

Flash contre Net Art

L’exposition Internet Tirana Biennale 01 : ce titre est profondément ironique. Cette esposition n’a en effet inclus aucun projet provenant d’ Albanie ou d’un autre pays de l’ Europe de l’Est post-communiste. Cela diffère beaucoup des premières exhibitions de net art du milieu des années 90 dont les stars venaient de l’Est : Vuc Cosic, Alexei Shulgin, Olga Lialina. Le net art des années 90 était le premier mouvement artistique international depuis les années 60 impliquant l’Europe de l’Est dans une large part. Prague, Lubiana, Riga et Moscou avaient autant d’ importance qu’Amsterdam, Berlin et New York. Incluant de manière égale des artistes de l’ouest et de l’est, le net art correspondait parfaitement à l’utopie économique et sociale du monde de l’après-guerre froide des années 90.

Cette utopie a desormais disparue. La structure de la puissance de l’Empire mondial est aujourd’hui claire et la représentativité démographique de la section Internet du « Biennale 01″ de Tirana la reflète parfaitement. Beaucoup d’ artistes participant à l’exhibtition Internet « Tirana Biennale 01″ travaillent dans les régions mondiales clés des NTIC : San Francisco (Silicon Valley), New York (Silicon Alley) et Europe du Nord.

Que s’est il passé ? Au milieu des années 90, le net art reposait sur le simple HTML qui marche aussi avec les connexions haut-débit que bas-débit – ceci permettait une participation active des artistes de l’Est. Mais la colonisation du web par les formats multimédias qui a suivie – Flash, Shockwave, QuickTime et autres – a rétablie la traditionnelle opposition Est/Ouest. Le Web Art réclame maintenant des connexions haut-débit aussi bien pour l’artiste que pour son public. Avec ses connexions à faible débit, l’Europe de l’Est est hors-jeu. L’utopie est finie, bienvenue dans l’Empire.
(au Tirana Biennale 01 participait un artiste chinois qui a contribué à une magnifique animation de pratiquants d’arts martiaux. Mais nous n’avons jamais su qui il était. Tout ce que nous savons de lui c’est son adresse mail : zhu_zhq@sohu.com. Peut-être ne vit-il même pas en Chine).

Generation FLASH: FAQ

Après avoir envoyé les précédents paragraphes sur des mailing listes populaires traitant de l’art des nouveaux médias et la cyberculture (rhizome.org et nettime.org), j’ai reçu beaucoup de réponses. Vous trouverez ici mes réponses aux deux questions les fréquentes apparant dans bon nombre de courriers.

Question :

Le « modernisme modéré » que vous décrivez n’est-il pas simplement la conséquence des limitations techniques inhérentes au multimédia sur le Net ? Vous semblez vous méprendre sur les fonctionnalités particulières à Flash, conçu pour jouer des animations à travers une faible bande passante pour une plus large audience.

<NDT : ‘zeitgest’ a été traduit par audience, car ce mot anglais signifiant ‘the general intellectual, moral, and culture climate of an era’, j’aurais du utiliser ‘tendance’ ou ‘air du temps’, ce qui ne collait pas avec le contexte.>

Réponse :

Maintenant que la nouvelle version de Flash (Flash MX) autorise l’import et le streaming vidéo, il est possible que les poncifs visuels “generation Flash” / “modernisme modéré” quittent les sites Flash. C’est un bonne chose. Mon sujet dans cet essai n’est pas le logiciel Flash est ses limitations ou possibilités elles-mêmes, mais la sensibilité nouvelle qui s’est manifestée dans beaucoup de projets Flash durant les deux dernières années. En d’autres mots, je me suis intéressé à la “generation Flash” ce qui est plutôt différent du logiciel/format Flash.

Par conséquent, toutes les personnes qui m’ont ainsi accusé de confondre un standard technique avec une mode visuelle après avoir lu m’ont essai on donc mal compris mes arguments. L’apparence vectorielle prononcée du « modernisme modéré » n’est pas simplement la résultante d’une faible bande passante et d’une nostalgie pour le design des années 60 – elle apparait toujours quand les gens commencent à générer des graphiques grâce à la programmation et découvrent qu’ils peuvent utiliser des équations simples, etc… C’est aussi pourquoi le « modernisme modéré » des projets Flash et des artistes utilisant d’autres logiciels recréent, et quelquefois de manière surprenante au détail près, l’esthétisme des précurseurs de l’art informatique (années 50 – années 70) quand on pouvait créer des graphismes et animations uniquement par la programmation.

Question:

Il n’y a aucune raison que l’art du logiciel ne puisse pas utiliser « des images représentatives » ou toute autre forme. Pourquoi associez vous l’art du logiciel avec les graphismes abstrait vectoriels non représentatifs ?

Réponse:

Il est certain que les artistes du logiciel peuvent utiliser « les images représentatives » ou tout autre forme ou media conventionnel. Il n’est pas innocent que juste après son arrivée au Xerox PARC dans les années 70, Alan Kay et ses associés créèrent un logiciel de dessin et un logiciel d’animation intégrant un système de fenêtre, des icônes, Smalltalk et d’autres principes de l’interface graphique moderne. La possibilité de manipuler et de générer des médias ne sont pas directement la conséquence de l’informatique moderne mais sont la partie centrale de son identité comme « médium dynamique personnel  » (Alan Kay). En d’autres termes : l’ordinateur est un simulateur, comme s’il pouvait être utilisé pour simuler d’autres medias.

Je n’ai donc rien contre les artistes du logiciel qui utilisent ou créent des médias , cependant j’espère que la « génération Flash » va étendre son travail de programmation vers les médias représentatifs ! En d’autres termes, dans le début des années 70 le logiciel de dessin et le logiciel d’animation fut une révolution dans la vision que les gens on de l’ordinateur en l’éloignant du coté « programmation » et en l’associant a un média (créatif). Après 20 ans de logiciels « à menus » de manipulation de médias et d’utilisation de l’ordinateur comme d’un outil de production de media (largement accélérée par Internet), un peu de programmation devient révolutionnaire ! Bref, nous nous somme maintenant tellement habitués a considérer l’ordinateur comme un « médium dynamique personnel » qu’il faudrait désormais que nous rappelions et que nous rappelions aux autres que c’est aussi une machine programmable.

Maintenant il faut voir comment la programmation a été utilisée pour créer et utiliser des images, animation films et vidéo. Historiquement trois tendances peuvent être tracées. Une première tendance va des premiers travaux de computer art – les films Withney fait avec un ordinateur analogique au milieu des années 50 (faits par les étudiants de Oscar Fishinger et que l’on peut lier au le modernisme du début du 20ème siècle) – au « modernisme modéré » des projets Flash et les travaux de visualisation de donnée. En d’autres termes l’utilisation de la programmation pour générer et contrôler des images abstraites.

La seconde tendance débute dans les années 80 quand Hollywood et les designers TV commencèrent a utiliser images générées par ordinateur. Désormais la programmation est incorporée au service du réalisme cinématographique traditionnel. Les systèmes de particules, les grammaires formelles, l’intelligence artificielle et d’autres techniques logicielles deviennent les moyens de générer des vols de chauves souris, des terrains accidentés, les vagues de l’océan, des explosions, des créatures extra-terrestres et d’autres éléments figuratifs intégrés dans l’univers photo – réaliste d’un film narratif.

Que peut on dire de l’utilisation d’algorithmes pas seulement dans la génération d’éléments figuratifs d’une narration mais dans le contrôle de l’ensemble d’un univers fictif ? C’est la troisième tendance: La programmation dans les jeux vidéo (1960-). Dans ce contexte les algorithmes peuvent contrôler les événements de la narration, le comportement des personnages, les mouvements de caméra, et d’autres caractéristiques du monde de jeu – tout ceci en temps réel. Malheureusement, nous savons tous, esthétiquement révolutionnaire les jeux contrôlés par l’ordinateur et le joueur présentent des contenus pré-formatés qui font qu’en comparaison un mauvais film Hollywoodien peut paraître original et inspiré. (GTA 3 ne fait pas exception ici malgré sa percée dans la simulation d’un univers ouvert).

Je pense que ce bref tour d’horizon montre qu’il reste un espace inexploré et complètement ouvert pour l’expérimentation et la recherche créative – en utilisant le programmation pour générer et/ou contrôler des médias figuratifs ou fictifs. Par exemple dans le cas d’un film, la programmation peut être utilisée pour générer des personnages à la volée, pour composer en temps réel des personnages (filmées devant sur fond bleu) avec des paysages, pour contrôler le séquencement des scènes, pour appliquer des filtres a n’importe quelle scène en temps réel, pour combiner une scène préenregistrée avec une de l’imagerie générée a la volée, pour avoir des personnages interagissant avec le spectateur, etc. etc. En résumé, la programmation peut être utilisée n’importe quel aspect d’un travail de media de fiction.

Bien sûr de temps en temps, on rencontre des projets qui vont dans ce sens dans des endroits comme SIGGRAPH ou l’ISEA, mais ce sont souvent des démos de recherche créées dans des Universtités qui ne parviennent au grand public. On peut bien sur objecter le fait que crééer un algorithme qui controllant un univers foctionnel complexe neccesite un invesstissement concernant la programmation qui n’est accessible qu’aux sociétés de créations de jeux vidéos et aux Universités. Après tout ce n’est pas la même chose que d’écrire un script dessinant quelques lignes et repondant aux saisie de l’utilisateur … en effet, mais pourquoi nos travaux de fiction/figuratifs devraient ils répondre aux lois des médias commerciaux ? Si on accepte qu’un personnage n’ai pas a être réaliste, qu’un univers fictif n’a pas besoin d’être en 3 dimensions, que la chance et l’aléatoire peuvent coexister avec la logique narrative, ou que des personnages 2D peuvent coexister avec des personnages 3D et de la video etc. la programmation de fiction / figuration devient bien redoutable. En bref,bien que je salue la programmation sous Flash, je pense qu’il est plus stimulant de programmer sous QuickTime.

Sur la légèreté de Flash

Quand j’ai visité pour la première fois le plus connu des sites Flash – praystation.net – j’ai éte frappé par la légèreté de ses graphismes. Comme un soupir, plus élégant que Door ou Channel, plus minimal que les sculptures minimalistes de Judd dans les sixties, plus effacé qu’un paysage hivernal plongé dans un épais brouillard, le site pousse l’échelle des contrastes aux limites de la lisibilité. Les même légèreté et dépouillement se retrouvent dans beaucoup de projets du Festival Biennale 01. Une fois de plus, le contraste avec les graphismes criards des médias commerciaux et la génération précédente d’ « Art Media » est évidente.

La légèreté de Flash peut-être appréhendée comme un équivalent visuel à la musique d’ambiance électronique. Chaque ligne, chaque pixel compte. Flash fait appel à notre intelligence visuelle, à notre intelligence cognitive. Après le siècle des couleurs RGB qui a commencé avec Matisse et qui s’est terminé avec les trainées agressives de Wired, il nous faut maintenant prendre un nouveau départ, repartir de zéro. La génération Flash nous invite à subir un nettoyage visuel – c’est pourquoi nous voyons des palettes monochromes, blanc et gris clair. Elle utilise le neo-minimalisme comme une pilule pour nous guérir du post-modernisme. Dans Flash , la rationnalité du modernisme est combinée avec la rationnalité de la programmation et l’impact des jeux vidéos pour créer une nouvelle esthétique de la légèreté, curiosité et intelligence. Vérifiez que votre navigateur est bien équipé du plug-in correct : bienvenue dans génération Flash.

Je ne me fais pas l’avocat d’une renaissance du modernisme. Bien sur, nous ne voulons pas copier Mondrian et Klee sur les écrans d’ordinateurs. La tache de la nouvelle génération est d’intégrer les deux paradigmes esthétiques clés du 20° siècle :
(1) croyance dans la science et la rationnalité, emphase mise sur l’efficacité et des formes simples, idéalisme et esprit heroique du modernisme
(2) scepticisme, intérêt pour la marginalité et la complexité, stratégies deconstructrices, opacité baroque et excès du post-modernisme (années 60).
Aujourd’hui, tous les composants du second paradigme sont des clichés épuisés. Ainsi, un retour partiel au modernisme est un premier pas qui n’est pas forcément mauvais, tant qu’il reste une étape vers le développement de nouveaux conceptsde riches mélanges culturels.
Evidemment cette esthétique doit aussi s’engager totalement dans la difficile question de la globalisation. La culture du remix dans laquelle nous vivons actuellement n’est pas seulement engagée dans le mélange de toutes les formes culturelles et de tous les textes précédents mais également dans le mélange de dispositifs variés qui résultent de ce que l’on avait l’habitude d’appeller les cultures nationales ainsi que du mélange existant entre les populations immigrantes et leurs cultures “hôtes”.

La solution offerte par les conglomérats multinationaux – un mélange qui prend certains traits de quelques cultures nationales – par exemple, l’idée française de l’élégance, l’iconographie japonaise du manga, les références au flegme britannique, etc. – et qui intègre le tout dans un texte fade et monolithique qui est alors diffusé dans le monde entier – n’est évidemment pas une solution satisfaisante. (Cela me rappelle l’économie centralisée du modèle soviétique quand toute la production des fermes collectives était envoyée au centre pour décider comment elle serait répartie nationalement.)

Heureusement, de nombreux mélanges, qui suivent des logiques différentes, sont en train d’être explorés dans le monde par des musiciens, des compagnies de théâtre, des danseurs, des designers, des architectes et ainsi de suite. Personne ne sait ce qu’il va émerger de ce laboratoire culturel mondial – et c’est ce qui rend notre époque si intéressante.
Bien que la plupart de mes arguments dans ce livre traitent de la culture de l’esthétique visuelle, il est approprié d’évoquer, à ce point, une pratique différente. Historiquement, la musique est le champ artistique qui a toujours été en tête dans l’utilisation des ordinateurs pour permettre de nouveaux paradigmes esthétiques.

L’entière pratique de la musique électronique populaire dans les trois dernières décennies est un testament à la façon dont les nouvelles technologies autorisent la soudure entre les nouveaux mélanges, complexes et riches, et les différents styles, cultures et sensibilités. Sans l’électronique et l’informatique – depuis un tourne-disque et un lecteur de cassette jusqu’au réseau de partage de fichiers peer-to-peer et les logiciels de synthèse de musique fonctionnant sur un ordinateur portable – la majeur partie de cette culture n’aurait jamais vue le jour. Le champ de la musique électronique (qui signifie aujourd’hui la plupart des sons) avec ses multiples voix et da logique émergente, est une puissante alternative aux composés culturels vendus par les conglomérats globaux des médias dans le monde. Espérons que d’autres artistes et designers dans d’autres branches suivront l’exemple de la musique dans l’utilisation d’un ordinateur pour permettre, de la même façon, de riches mélanges culturels.

Génération Flash, version anglaise et originale (format .doc)

Crédit : Merci à Lev Manovich pour son soutien ainsi qu’aux personnes ayant participé à cette traduction : Glorb, Lil, Lythium, Rattlesnake, Jean-Phi69, DickRivers, Satya, Epsilon, Loic Urien – relecture de fond par David Deraedt.

Mini tutoriel video sur les options de sécurité à l’exécution d’un swf, en fonction de son contexte, par Vincent Maitray.

Cette option de transparence permet de rendre transparente la couleur de la scène afin de voir par exemple, une image placée derrière le Swf, dans la page Html.

Le paramètre de transparence pour un SWF s’établit dans les options de publication de Flash – le code se renseignera tout seul dans la page HTML ainsi publiée !

Fichiers > Paramètres de publication (CTRL+MAJ+F12) > onglet HTML > option Mode fenêtre.

Avec Flash MX, un bouton dans l’inspecteur de Propriétés permet d’accéder plus rapidement aux paramètres de publication (bouton Flashplayer 6).
Et puisque l’on parle de cette dernière version, une nouveauté est de manipuler ces options de publication par programmation.

Si vous utilisez Dreamweaver, sélectionnez le swf et dans la fenêtre de Propriétés , cliquez sur Paramètres :

paramètre –> wmode
value –> tranparent

Ce paramètre apparaît automatiquement dans votre code HTML :

1
2
3
4
5
6
7
8
9
10
11

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="88" height="31" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<embed type="application/x-shockwave-flash" width="88" height="31">
</embed>
</object>
 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="88" height="31" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="src" value="images/ho.swf" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" width="88" height="31" src="images/ho.swf" wmode="transparent">
</embed>
</object>

Particularité

Précision importante : ce paramètre de transparence ne fait que SIMULER un Swf en arrière-plan sur une page HTML .
Comme tout contenu dynamique (applets Java, formulaires,…), un swf s’affiche TOUJOURS au dessus de tous les autres éléments statiques d’une page.

C’est par conséquent inutile d’essayer d’afficher un swf dans un calque par exemple, de donner à ce calque une valeur z-index négative pour le faire apparaitre sous les autres éléments. Autrement dit la transparence d’un swf est une illusion.

Attention également, la transparence diminue la vitesse dans Flash !

Compatibilité : ne fonctionne que pour Internet Explorer PC uniquement !! Netscape et IE Mac pour l’instant, ne supportent pas ce paramètre.
Donc à utiliser avec prudence….