Intégration et optimisation de Flash pour le HTML

Intégration dans une page HTML
Lien URL et Mail
Création d'une fenêtre Pop up
Le préchargement

Le préchargement

Le préchargement d'une animation Flash permet de faire patienter les visiteurs de votre site. Il s'agit d'une animation d'attente ou d'une barre qui avance annonçant le chargement par exemple. Il est conseillé de placer une animation de préchargement dès que l'animation dépasse 50 Ko.

Il existe plusieurs méthodes, je vous en présente deux.

Première méthode

Cette méthode est la plus simple. Nous demandons au visiteur de patienter pendant que le programme charge. Nous affichons un message "chargement en cours" par exemple. Nous lançons l'animation une fois le chargement terminé.
1. Créer un calque "préchargement" sur la scènce de votre animation (choisissez une animation terminée).
2. Décalez vos images sur la droite d'une avec votre flèche sélection en faisant glisser les images sur le scénario. Votre animation commence à l'image 2.
3. Placez un texte statique "chargement en cours" par exemple sur la première image.
4. Créez un calque actions et placez sur l'image 1ce code :

stop();
total = _root.getBytesTotal();
_root.onEnterFrame = function() {
   charge = _root.getBytesLoaded();
   part = charge/total;
   if (part == 1) {
      delete _root.onEnterFrame;
      gotoAndStop(2);
   }
}

Nous utilisons deux fonctions :

getBytesLoaded()	renvoie au nombre d'octets chargés (en flux continu)
getBytesTotal()	renvoie la taille, en octets

Dans une première variable("total"), nous stockons le poids total de l'animation .Dans une variable intitulée "charge", nous stockons le nombre d'octets chargés de l'animation._root correspond à notre animation principale. Nous demandons à notre tête de lecture de faire une boucle jusuqu'à ce que l'animation soit chargée.

L'inconvénient de cette méthode est que le visiteur ne sait pas combien de temps il doit attendre.

Deuxième méthode

Pour animer un peu l'attente, vous pouvez utiliser cette seconde méthode:

1. Créez un calque "préchargement" où vous placez un texte dynamique dont le nom de variable est "chargement".
2. Placez sur la scène un clip dont l'occurence s'appelle "barre"( vous aurez créé auparavant un clip animé d'une barre qui avance).
2 . Placez le code qui suit sur l'image 1 du calque actions dans votre scénario :

stop();
total = _root.getBytesTotal();
_root.onEnterFrame = function() {
   charge = _root.getBytesLoaded();
   part = Math.ceil((charge/total)*100);
   chargement = part+" %";
   barre._xscale = part;
   if (part == 100) {
      delete _root.onEnterFrame;
      gotoAndStop(2);
   }
}

Dans cette seconde méthode, une barre avance selon le préchargement de votre animation et un compte en pourcentage vous annonce quel est le taux de chargement de votre animation. Vous aurez placé votre animation à partir de l'image 2. Il est très important de régler le point d'alignement de votre clip sur l'un de ses 4 côtés ( ici à gauche). Le calcul de la variable part est arrondi grâce à la fonction Math.ceil().

haut de page