Guide de conception du composant Expanding

Configurer un repli animé

Qu'est-ce qu'un repli animé ?

Le repli animé vous permet de lancer une séquence d'animation lorsque l'internaute ferme la création. Avec cette fonctionnalité, la création n'est pas animée, mais une séquence d'animation est lue avant que l'annonce ne se replie totalement. Pour créer un repli animé, vous devez coder l'animation de repli dans le fichier SWF. N'activez pas le repli animé si votre création expand n'inclut pas cette animation.

Comment le repli animé fonctionne-t-il ?

Lors de l'expansion d'une création, une couche div HTML sur un site Web se déplie pour afficher le panneau déplié.

Sans repli animé, le bouton de fermeture ou un appel de la méthode expanding.collapse() déclenche la fermeture immédiate de la couche div HTML, entraînant également celle du fichier SWF post-expansion.

 


Avec un repli animé, la couche div HTML reste ouverte lors de l'animation de repli et ne se ferme qu'une fois cette dernière achevée.

Comment puis-je configurer un repli animé ?

Sous Lors du repli, sélectionnez une option pour lancer l'animation :

Atteindre et afficher l'image… : permet de lancer l'animation à partir d'une image donnée de la timeline. Dans le champ suivant, indiquez le numéro de l'image, au sein du panneau enfant déplié, à partir de laquelle l'animation doit démarrer.

Appeler la fonction : permet de lancer l'animation en appelant une fonction. Saisissez un nom de fonction dans le champ de texte, par exemple : myCollapseFunction. Définissez cette fonction personnalisée dans ActionScript pour lancer l'animation. Vous pouvez la définir dans la timeline ou dans les fichiers de classe.

 
  1. Configurez une fonction de repli de base à l'aide d'un composant Close Button ou de l'API.
  2. Activez l'option Repli animé afin que la couche div HTML reste ouverte lors du déclenchement du bouton de fermeture.
  3. Ouvrez l'inspecteur du composant Expanding puis, dans la section Paramètres, cochez la case Repli animé.

  4. Définissez à quel moment l'animation de repli doit démarrer :
  5. Faites en sorte que la couche div HTML se ferme une fois l'animation de repli achevée.
    • Appelez la méthode expanding.endAnimatedCollapse(); au niveau de la dernière image dans la timeline de l'animation de repli. Cette méthode permet d'indiquer au site Web que l'animation de repli est terminée et que la couche div HTML peut être fermée en toute sécurité.
    • Déclenchez la méthode expanding.endAnimatedCollapse(); à la fin de l'animation pour fermer la couche div HTML transparente. Si celle-ci ne se ferme pas après l'animation, la création sera refusée au contrôle qualité.
    • Pour être certain que la création se replie bien à l'issue de l'animation de repli, le panneau de sortie doit renvoyer l'information suivante :

      Événement du composant Expanding : collapseComplete