Why flash is not dead

flashI keep reading “Flash is dead” or “Flash is no use anymore”. Do they actually know what they’re talking about? Are they Flash experts, have they worked with real clients? I don’t think they do, are or have. How to bury the most innovative technology, which has inspired the current developments and uses of javascript, although it is currently the only way to offer a true rich web user experience.
Continue reading

Easy Fullscreen on a specific DisplayObject, deal with overlay and use hardware acceleration

There is several ways to show a specific zone/object in a Flash application in full-screen mode. The problems are to use hardware acceleration (interesting for video), to deal with possible overlay (display object above the target we want to show in full-screen mode) or to avoid with UI pixelization. And we have to consider various player versions and hardwares…
Continue reading

Simple component invalidation in AS3

When we develop components, it quickly becomes necessary not to update the display every time we change a parameter.

For example, this code calls three times my draw method :

1
2
3
myComps.width = 100;
myComps.height = 100;
myComps.color = 0xFF0000;

Mmmm ? Stupid ?

The solution is to wait for the next enterFrame event to update the display.
The UIComponent that is the base of Flash components offers all the methods to do this, but the last thing I want is to use them.

Here’s how to set up a simple invalidation:

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
package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class InvalidateSprite extends Sprite 
	{
		private var _width:Number = 150;
		private var _height:Number = 100;
		private var _color:Number = 0xCCCCCC;
 
		public function InvalidateSprite(){
			_invalidate();
		}
 
		public override function set width(value:Number):void {
			_width = value;
			_invalidate();
		}
 
		public override function set height(value:Number):void {
			_height = value;
			_invalidate();
		}
 
		public function set color(value:Number):void {
			_color = value;
			_invalidate();
		}
 
		private function _draw():void {
			graphics.clear();
			graphics.beginFill(_color, 1);
			graphics.drawRect(0, 0, _width, _height);
		}
 
		private function _invalidate():void {
			if(!hasEventListener(Event.ENTER_FRAME))
				addEventListener(Event.ENTER_FRAME, _invalidateCallback);
		}
 
		private function _invalidateCallback(e:Event):void {
			removeEventListener(Event.ENTER_FRAME, _invalidateCallback);
			_draw();
		}
	}
}

Generate xsd from xml with trang

An xsd (XML Schema definition) is a .xsd file that describes the structure of an XML document and allows us to validate and to have autocompletion on our xml file, for example with a xml editor like XMLNotePad.

An easy way do this is to generate your xsd from xml with trang command line tool.
Trang is written in java and packaged for use with a Java runtime (>=version5).

1. Download zip http://www.thaiopensource.com/download/ and extract it where you want
2. You only need to execute the following command (with your pathes)

cd C:\xml
java -jar C:\trang.jar tutorials.xml tutorials.xsd

3. Oh yeah it’s done

Our xml :

<?xml version="1.0" encoding="UTF-8"?>
<tutorials>
    <tutorial id="1" blogged="true">
        <date>2009-09-28</date>
        <author>Jonas</author>
		<copyright>Jonas Monnier</copyright>
		<title>Display JSON strings in AMFPHP 1.9 brwoser</title>
    </tutorial>
    <tutorial id="2" blogged="true">
        <date>2010-07-03</date>
        <author>Jonas</author>
		<title>Generate xsd from xml with trang</title>
    </tutorial>
</tutorials>

Our xsd :

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
  <xs:element name="tutorials">
    <xs:complexType>
      <xs:sequence>
        <xs:element maxOccurs="unbounded" ref="tutorial"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
  <xs:element name="tutorial">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="date"/>
        <xs:element ref="author"/>
        <xs:element minOccurs="0" ref="copyright"/>
        <xs:element ref="title"/>
      </xs:sequence>
      <xs:attribute name="blogged" use="required" type="xs:boolean"/>
      <xs:attribute name="id" use="required" type="xs:integer"/>
    </xs:complexType>
  </xs:element>
  <xs:element name="date" type="xs:NMTOKEN"/>
  <xs:element name="author" type="xs:NCName"/>
  <xs:element name="copyright" type="xs:string"/>
  <xs:element name="title" type="xs:string"/>
</xs:schema>

We tell the XML parser that this document should be validated against a schema :

<?xml version="1.0" encoding="UTF-8"?>
<tutorials
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="tutorials.xsd">
    <tutorial id="1" blogged="true">
        <date>2009-09-28</date>
        <author>Jonas</author>
		<copyright>Jonas Monnier</copyright>
		<title>Display JSON strings in AMFPHP 1.9 brwoser</title>
    </tutorial>
    <tutorial id="2" blogged="true">
        <date>2010-07-03</date>
        <author>Jonas</author>
		<title>Generate xsd from xml with trang</title>
    </tutorial>
</tutorials>

And we change the date and author definition (nobody is perfect) :

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
  <xs:element name="tutorials">
    <xs:complexType>
      <xs:sequence>
        <xs:element maxOccurs="unbounded" ref="tutorial"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
  <xs:element name="tutorial">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="date"/>
        <xs:element ref="author"/>
        <xs:element minOccurs="0" ref="copyright"/>
        <xs:element ref="title"/>
      </xs:sequence>
      <xs:attribute name="blogged" use="required" type="xs:boolean"/>
      <xs:attribute name="id" use="required" type="xs:integer"/>
    </xs:complexType>
  </xs:element>
  <xs:element name="date" type="xs:date"/>
  <xs:element name="author" type="xs:string"/>
  <xs:element name="copyright" type="xs:string"/>
  <xs:element name="title" type="xs:string"/>
</xs:schema>

That’s all !

You can create a cmd alias for an easiest use :

Windows :

doskey trang=java -jar C:\trang\trang.jar $*

See my previous post to make it working Create cmd aliases in Windows

Linux :

alias trang='java -jar ~/trang/trang.jar'

Héhé

cd C:\xml
trang tutorials.xml tutorials.xsd

More options in trang manual.

Mad Men, La pub dans le New York des années 60

Mad Men

Vous travailler dans la pub ? Ah le bon vieux temps ou le web n’existait pas encore, ou la pub télé faisait son apparition dans les agences, je me rappelle… Ok j’arrête.  Dépassant de peu le 1/4 de siècle, cette époque me paraît lointaine à moi homme 2.0 et tout le blabla…  (twit-twit ) Blague à part, je viens de découvrir la série Mad Men (jamais trop tard..) réalisée par l’un des auteurs et producteurs d’une autre grande série américaine Les Sopranos.

Préparez-vous à une saisissante plongée dans le New York des années 60 avec Don Drapper Directeur de Création à  l’agence Sterling Cooper. Le microcosme de la pub nous sert de point d’entré dans les sixties, les femmes au foyer, les publicitaires blancs, les grooms noirs et tout le monde la clope au bec.  Et dans les bureaux en plus ! 3T chez télérama, ils vendent ça mieux que moi. La saison 3 est en cours aux US. On me chuchote qu’on la trouve un peu partout en stream & p2p. Mmmh p2 quoi ? C’est vrai on peut regarder la télé sur internet ? Ok je comprends.

Quelques trailers de la saison 3 :

Développer des applis iPhone avec Flash CS5

iphone_homeAprès le refus par Apple du Flash Player sur iPhone, Adobe contre-attaque… Là ou on ne l’attendait pas. Pas cons les mecs de chez Adobe, si iPhone ne veut pas de flash, flash va faire de l’iPhone.  Attention, on ne parle pas d’une pseudo bidouille permettant de lire des swf sur iPhone, mais bien de compiler de vraies applications natives iPhone depuis Flash CS5. On ne parle plus d’Objective-c, le langage utilisé par les développeurs mac sous x-code, mais de compiler l’as3 en IPA ( iPhone ARM Binaries ) !

Seule une beta privée de Flash CS5  est pour l’instant sortie, mais 7 applications compilées par Flash CS5 sont déjà disponibles  sur l’Apple Store.  Adobe annonce la beta public avant la fin de l’année, de quoi faire fleurir le nombre d’applis dispos sur le store pour 2010.

Bon, après le buzz, se posent maintenant les questions des performances, de l’accélération matérielle, de l’énergie utilisée… Un post très intéressant par un dev Objective-c. Pour l’instant difficile de se prononcer.

Pour en revenir au sujet qui nous intéresse, concrètement, le développeur AS3 pourra coder en AS3 et exporter son appli pour iPhone… Avec quelques subtilités tout de même :

1) L’iPhone et tous les périphériques mobiles sont beaucoup moins puissants que nos pc et mac de bureau.

Même si il sera dans la plupart des cas tout à fait possible d’exporter un projet existant pour iPhone, il risque fort de faire ramer la petite machine. Un gros lifting à prévoir donc pour les applis existante (sans parler de l’ergonomie). Des pratiques similaires au développement flashlite sont conseillées.

2) Certaines fonctionnalités de flash ne seront pas disponibles

  • Embedded HTML content (via webkit in Adobe AIR).
  • RTMPE
  • H.264 Video
  • Dynamically loading SWFs containing AS3 code
  • PixelBender

3) Certaines fonctionnalités de l’iPhone ne seront pas disponibles :

  • Photo selection from file system
  • Contact selection from the address book
  • Camera
  • Cut/copy/paste
  • Accessory support
  • In app purchase support
  • Peer to peer
  • Maps
  • iPod library access
  • Compass
  • Push notifications
  • Audio recording
  • Video recording
  • Parental controls

Mais les fonctionnalités suivantes seront supportée :

  • MultiTouch
  • Screen Orientation
  • Saving images to Photo Library
  • Accelerometer
  • Geo-location
  • Cut / Copy / Paste

Conclusion :

Si Flash CS5 est bien à la hauteur de ce qu’Adobe  nous annonce, c’est une exellente nouvelle !
Reste que le problème Flash-iPhone / Adobe-Apple n’est (ne sera) résolu qu’a moitié. En effet le Flash Player n’est toujours pas disponible sous safari pour iPhone.
Affaire à suivre…

Plus d’infos :


Un debugger monstrueux

de-monster-debugger

Lors du développement d’une application Flash ou Flex il devient rapidement nécessaire d’utiliser un outil de debug permettant de tracer ce qui se passe dans les profondeurs du code.

Le debug Player couplé au add-on Firefox Flash Tracer permet déjà de récupérer les trace dans le navigateur.
Très utile pour voir ce qui ne va pas sans être obligé de recompiler l’application mais très limité.

Le De MonsterDebugger proposé par le studio Demonster nous permet tracer le détail des objets dans une appli AIR en utilisant la classe fournie :

MonsterDebugger.trace("here is a bug"});

Plus intéressant :

MonsterDebugger.trace({label:"here is a bug", data:["really","bad","bug"]});

Mais son job ne s’arrête pas la, il nous permet aussi de :

– Naviguer dans la structure de l’application via un tree
– Editer en live de toute les  propriétés publiques depuis l’appli AIR
– Exécuter les méthodes publiques depuis l’appli AIR

Une bonne habitude à prendre est de créer sa propre classe de debug afin de ne pas être dépendant du debugger choisi, de pouvoir facilement en changer et éventuellement de customiser ses debugs.  Une des clef de l’utilisation intuitive du debugger (pour moi en tout cas), est de simplifier au max son utilisation. Il est donc judicieux de placer notre classe de debug à la racine de notre appli afin de tracer sans avoir à ajouter un import…

/**
 * Debugger
 */
package
{
	import nl.demonsters.debugger.MonsterDebugger;
 
	public class Debugger
	{
		private static var _debugger:MonsterDebugger;
 
		//////////////////////////////////////////
		// PUBLIC STATICS METHODS
		//////////////////////////////////////////
 
		public static function init(target:Object):void {
			if(_debugger == null)
				_debugger = new MonsterDebugger(target);
		}
 
		public static function INFO(from:*, message:*, color:Number = -1):void {
			_debug("INFO ", from, message, color != -1 ? color:0x000000);
		}
 
		public static function DEBUG(from:*, message:*, color:Number = -1):void {
			_debug("DEBUG", from, message, color != -1 ? color:0x0080FF);
		}
 
		public static function WARN(from:*, message:*, color:Number = -1):void {
			_debug("**WARN ", from, message, color != -1 ? color:0xFFAC00);
		}
 
		public static function FATAL(from:*, message:*, color:Number = -1):void {
			_debug("**FATAL**", from, message, color != -1 ? color:0xFF0000);
		}
 
		//////////////////////////////////////////
		// PRIVATE STATICS METHODS
		//////////////////////////////////////////
 
		private static function _debug(level:String, from:*, message:*, color:Number):void {
			MonsterDebugger.trace(from, message, color);
			trace(level + " " + from + " :: " + message);
		}
	}
}

Pour conclure, De MonsterDebugger est un outils simple et efficace pour déboguer (en français s’il vous plait) et optimiser ses application Flash/Flex. On peut  regretter de ne pouvoir tracer et trier pa level (cf. classe ci dessus) et de ne pouvoir tracer à la fois un objet et un commentaire correspondant.

Peut-être dans les versions suivantes…

De MonsterDebugger