Utilisation des boutons REFRESH avec flash.

Apres le cas concret du BACK, voyons le probleme pos? par le bouton REFRESH sur un site realis? en Flash.

Voici un cas concret : un internaute est en train de surfer sur le site e-commerce flambant neuf que vous venez de developper vous offrir. Le service commercial attend desesperement que la premiere vente soit faite et la logistique fretille a l’idee d’envoyer le premier colis. Mais voila… La SSI ou webagency a oublie de penser au bouton REFRESH sur votre site Flash.

Et au moment ou votre premier acheteur est en train de visionner son panier, l’envie subite d’actualiser la page lui prend. H? oui, il vient modifier une quantite dans son panier. Ca fait 12 minutes qu’il est sur votre site. Sa souris se deplace lentement vers le haut de la page, le haut, au milieu pour etre exact.

D’un clic frenetique, il appuie sur le petit bouton qui represente deux fleches qui se reniflent, persuade de se retrouver bientot avec le panier actualis? et la commande prete ? partir. Ce REFRESH sera fatal pour sa navigation, les nerfs de votre service statistique (qui suivait son surf en temps reel), le portefeuille de votre service commercial (qui se demande bien comment ils ont pu payer un site internet qui ne sait pas actauliser une page) et les timbres de votre service logistique (qui restent colles sur les pouces des preparateurs qui se voyaient deje brandir fierement le premier pli au facteur).

La commande est perdue et votre internaute, qui vient de se retrouver sur la home page de votre site, se demande s’il n’a pas participipe a on insu a un vaste canular planetaire pour lui faire perdre patience. Automatiquement, il essaye de se souvenir des articles precedemment commandes, des quantites, de l’ordre de navigation pour atteindre les dits-articles. Mais tres vite, la tache est laborieuse et il abandonne aussi sec le projet de toute commande sur votre site internet. Dites aurevoir a cet internaute. D?finitivement.

Scenario catastrophe ? Non, simple realite. D’un site Flash mal developpe. Pour eviter tout cela, suivez les conseils suivants :

# usage des boutons de navigation (Refresh, Back, Favoris, Envoi d’url)

Les boutons de Refresh et de Back sous-tendent le probleme de la chronologie dans la navigation. Lorsque vous etes sur une page n et que vous desirez revenir sur une page n-1, il faudrait trouver une solution pour que le flash se souvienne :

  • de l’endroit ou il est a l’instant n.

On ne peut recuperer via Flash ou Javascript l’ev?nement Refresh du navigateur. On va donc ?crire la chronologie dans l’url en utilisant l Anchor. Le ”Hash Property” est la partie de l’url qui correspond au lieu interne de la page consultee (?galement appele ancre). Dans une url, le Anchor correspond au morceau d’url situ? apres le #.

En changeant le Anchor de l’url, on ne peut demander a flash de s’ajuster automatiquement sur le nouveau Anchor . La methode couramment utilisee est donc de mettre un timer en javascript qui va lire l’url periodiquement et s’il detecte une difference entre le Flash loade et le Anchor , va demander au flash de s’ajuster sur le Anchor . Dans ce cas, attention aussi a prevoir une gestion des erreurs de Anchor et v?rifier si un flash existe bel et bien pour le Anchor demande.

Je prends l’url suivante comme exemple : http://nikefootball.nike.com/nikefootball//siteshell/index.jsp#,fr,0;frontpage

Dans cet exemple, nous avons l’url racine : http://nikefootball.nike.com/nikefootball//siteshell/index.jsp et l’Anchor #,fr,0;frontpage

A chaque fois que nous cliquons sur un lien flash, l’anchor est directement mis ? jour par Flash lui-meme. Et si je rafraichis la page, j’indique au Javascript Timer de Loader le flash qui correspond a l’url+Anchor.

Instant T0 :

#,fr,0;frontpage

Hypothese : Le Timer en Javascript vient de lire l’url et remarque qu’elle correspond au flash actuellement charge.

Instant T1 :

#,fr,0;frontpage

La page HTML est rafraichie donc, elle revient a l ecran flash de debut. Le Timer en Javascript a lu l’url. Il va donc charger automatiquement l’ecran flash qui correspond a l’anchor lue.

L’utilisation du bouton REFRESH permet juste de revenir a l’Anchor n et a forcer le chargement d’un ecran flash a la place de l’ecran initial. Ainsi, apres avoir cliqu? sur le Refresh, l’internaute n’a plus qu’a attendre que le timer ait lu l’Anchor pour etre redirige sur la brique Flash qu’il consultait juste avant le refresh.

*** Merci a Frank pour son aide sur la redaction de cet article ***