Étendre les possibilités du Cowon D2+ avec Flash

Le Cowon D2+ est un PMP aux multiples fonctionnalités. Outre ses qualités sonores, le plus intéressant pour nous est qu'il embarque un lecteur Flash, permettant ainsi d'étendre ses possibilités.
La version du lecteur Flash est une version spécialement destinée aux périphériques mobiles : Flash Lite 2.1. Cette version n'accepte, malheureusement, que l'Action Script 2.0, ce qui limite les fonctionnalités (avec l'AS 3 nous aurions pu faire un émulateur de vieux jeux vidéos par exemple). De plus, seul le format MP3 est accepté pour la sortie sonore. Enfin, la résolution recommandée est 320x240px.
Les paramètres de publication de Flash doivent être remplis en conséquence.
Le Cowon D2+ a, de plus, une interface limitée. Seuls les mouvements de souris sont acceptés (grâce à l'écran tactile), sans rollover ou drag&drop néanmoins, ainsi que six boutons : les flèches de déplacement, page up et page down.

Voici une petite série de réalisations compatibles Cowon D2+. Ces réalisations sont placées sous licence GNU GPL.


  • Une horloge digitale. Téléchargement : .swf | .fla

  • Un réveil. Téléchargement : .swf | .fla

  • Un chronomètre. Téléchargement : .swf | .fla

  • Un minuteur. Téléchargement : .swf | .fla

Pour lancer le chronomètre, cliquez dessus. Cliquez une seconde fois pour l'arrêter.
Le fonctionnement du réveil et du minuteur sont identiques : choisissez le temps en cliquant sur les flèches, puis page up pour lancer. Vous pourrez alors revenir à l'écran initial pour modifier votre choix avec page down ou attendre la fin du décompte. Une sonnerie retentira alors, il suffira de cliquer sur l'écran pour l'arrêter, puis page up ou page down pour revenir à l'écran initial.

Réduire le nombre de requêtes au serveur en utilisant les sprites CSS

Venant tout droit des jeux vidéos, les sprites sont des images regroupant plusieurs éléments graphiques les uns à côtés des autres dans le but d'accélérer leur chargement et leur modification. Le sprite ci-dessous, par exemple, est tiré du jeu vidéo Legend of Zelda : Oracle of Seasons.

Link, un personnage répété plusieurs fois dans des postures différentes.

Si les sprites de jeux vidéo vous intéressent, vous pouvez jeter un œil sur le site Game Sprite.

Quel intérêt pour le développement web me direz-vous ? Imaginons une seule image PNG contenant l'ensemble des éléments graphiques du site. L'intérêt est double. Du côté serveur, puisqu'il n'y a qu'une requête HTTP effectuée pour la totalité des images, la charge est réduite. Du côté client, pour la même raison, la page s'affiche plus rapidement dans sa globalité. Des deux côtés, un gain de performance.

L'implémentation est simple et peut se faire de deux manières. Soit l'on utilise le style CSS background-position combiné à un background-image comme par exemple :


background:transparent url("./Images/Page/pageLayout.png") 0 -70px no-repeat;

Le premier chiffre donné en position est la distance par rapport au bord gauche, le second par rapport au bord supérieur. Notez que la distance est négative. C'est tout simplement parce que l'ordonnée n'est pas inversée comme il peut l'être sur des logiciels de graphisme comme Photoshop par exemple. Ainsi, si l'on veut spécifier une position en-dessous du point (0,0) il faut nécessairement que l'ordonnée soit négative.

La première méthode fonctionne bien lorsqu'elle n'est pas appliquée à une balise <img />. Or, pour des raisons d'accessibilité et de cohérence sémantique, il est préférable de garder des images présentes dans le code xHTML. Dans ce cas, on utilisera la propriété CSS clip. Exemple d'utilisation :


clip:rect(158px 20px 179px 0);

Il est nécessaire de bien faire attention avec clip car les positions, comme toutes celles en CSS, sont bien données dans le sens des aiguilles d'une montre. Ainsi, la position par rapport au bord supérieur est la première, suit celle par rapport au bord gauche, etc.

Pour plus d'informations sur les sprites CSS, je vous conseille la lecture de ce dossier de Smashing Magazine (en anglais).


À propos de ce blog

Certains ont des carnets de notes, les développeurs web ont tendance à avoir des blogs. Ça leur permet de partager leurs découvertes, de garder une trace de leurs hacks beaucoup plus simplement. Voici le mien.

Vous trouverez ici pas mal de trucs de geek, principalement des bouts de code en développement web, mais également quelques scripts bash pour faciliter l'utilisation quotidienne de GNU/Linux (je tourne sous Linux Mint 17.1 actuellement). La catégorie Veille comporte quelques articles d'actualité, mais rien de bien folichon.

Si l'envie vous prend de me contacter, vous trouverez toutes les informations utiles dans le footer (le bas de page, pour les burnes en anglais), ou bien vous pouvez utiliser la page de contact dédiée.

Enfin, si vous trouvez ici des informations utiles, n'hésitez pas à m'offrir un café en cliquant sur le bouton :

Offrir un café  
-----BEGIN GEEK CODE BLOCK-----
  Version: 3.20
  GCS dx s:- a- c+ C++ B+++ 7-- w E- O- L++ M- u++ W+++$ 
  H++++ Z+++ F--- PS+++ PE-- Y+ PGP++ T++ S J+++ t@ X- 
  R+++ m+ !tv b+++@ DI? D++ G e* h+ A- r y++
------END GEEK CODE BLOCK------
					
Haut de page