Flash Player 9 et l'option fullscreen

Avec la sortie de la nouvelle version du Flash Player 9, un nouveau mode d'affichage a fait son apparition : le mode Full-Screen.
Il s'agit du rajout d'une propriété à l'objet Stage :



stage.displayState = StageDisplayState.FULL_SCREEN




En associant cette instruction à événement (clic d'un bouton par exemple) vous pourrez faire basculer votre animation Flash en plein écran. Pour revenir à l'état par défaut, une pression sur Echap (Windows et Mac OS), Control+W (Windows), Command+W (Mac OS) et Alt+F4 (Windows).

Ajouter à cela, la possibilité d'ajouter cette commande dans le menu contextuel de l'animation Flash pour pouvoir standardiser le processus.
Malgré toutes les bonnes choses que l'on peut en faire, il est à craindre de voir rapidemment fleurir des bannières de publicité en plein écran ce qui risque de porter préjudice à la réputation des technologies Flash qui sont enfin reconnues.

Pour plus d'informations, visitez l'article de Tracy Stampfli sur le Developer Center d'Adobe.
Une petite démonstration sur http://staging.mutoid.nl/fullscreen/index_cars.html

Attention !!!
Pour profiter de ce nouveau mode, il faudra mettre à jour vos librairies Flash et/ou Flex selon le besoin. La procédure est expliquée dans l'article mais quoi qu'il en soit les fichiers à ajouter sont dans l'archive Zip fournie par l'auteur.

Faire des blocs aux coins arrondis

La mode est à Aqua partout... rien à voir avec le groupe de musique mais plutôt avec le design de blocs aux coins arrondis. Facilement visibles et sympatiques, ils sont souvent utilisés pour mettre en avant un nouveau produit (nouvelle version d'un logiciel par exemple).

Voyons donc comment reproduire ce type d'éléments graphique facilement et surtout proprement.

<div class="block">
   <div class="block_header">
      <h1>Télécharger Firefox 3.0</h1>
   </div>
   <div class="block_content">
      <p>Version windows (30 Mo)</p>
   </div>
</div>

/* commentaire pour rendre visible qu'à IE pour Windows \*/
* html .block_header h1 {height: 1%;} /* Pour IE 5 Windows */

div.block 
{
 margin: 0 auto;
 width: 17em;
 background-image: url(bord-content-d.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
 font-size: 100%;
}

div.block_header 
{
 margin: 0;
 padding: 0;
 background-image: url(bord-header-d.gif);
 background-repeat: no-repeat;
 background-position: top right;
 text-align: center;
}

div.block_header h1 
{
 background-image: url(bord-header-g.gif);
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0;
 padding: 22px 30px 5px;
 color: white; 
 font-weight: bold; 
 font-size: 1.2em; 
 line-height: 1em;
 /* pour safari et firefox CSS3 */
 text-shadow: rgba(0,0,0,.4) 0px 2px 5px; 
}

div.block_content 
{
 background-image: url(bord-content-g.gif);
 background-repeat:no-repeat;
 background-position:bottom left;
 margin: 0;
 padding: 5px 30px 31px;
}

Cette astuce utilise le principe des portes coulissantes : les images utilisées pour les bords gauche et droit sont de largeurs différentes et coulissent les une derrière les autres. De cette façon, lorsque le texte augmente, la largeur du bloc augmente aussi automatiquement.


_{Illustration de l'astuce "Portes coulissantes"}

Bien évidemment, cette astuce a ses limites qui sont en fait celles de la plus grande image utilisée (ici celle de droite).

Pour plus d'informations sur les portes coulissantes, consultez l'article sur A List Apart Sliding Doors of CSS de Douglas Bowman.