Guide de conception du composant Expanding

Configurer une fonction d'expansion multidirectionnelle

L'API et le composant Expanding de DoubleClick Studio proposent également une fonctionnalité d'expansion multidirectionnelle permettant de déplier une création expand dans plusieurs directions en fonction de son emplacement sur la page. La création est capable de détecter sa position et, à partir de là, de déterminer la direction dans laquelle elle doit se déplier.

Par exemple, grâce à la fonctionnalité d'expansion multidirectionnelle, la même création peut se déplier vers la droite ou la gauche, selon qu'elle est diffusée sur le côté gauche ou droit de la page, respectivement.

 

Comment puis-je configurer une création expand multidirectionnelle?

Les créations expand multidirectionnelles doivent être configurées de la même manière que les autres créations expand, à quelques différences près : Commencez par définir une fonction d'expansion et de repli standard, puis procédez comme suit :

  1. Sélectionnez l'option "Multi-directionnelle" dans l'inspecteur du composant Expanding (Maj+F7) :
     

    Multi-directionnelle : cochez cette case.

  2. Dimensionnez l'espace de création du fichier parent de sorte qu'il puisse accueillir toutes les tailles post-expansion

    Tout comme pour le format expand standard, l'espace de création du fichier parent représente la zone dépliée de la création. Cet espace doit donc accueillir toutes les tailles post-expansion.

    Par exemple, l'espace d'une création 300 x 250, qui se déplie vers la gauche et la droite au format 500 x 250, doit faire 700 x 250 dans le fichier parent.

    Vous avez besoin d'aide pour déterminer la taille de l'espace de création dans le fichier parent ? Voici la solution :

    Pour calculer la taille totale de l'espace de votre création expand multidirectionnelle, vous devez d'abord déterminer la direction de l'expansion : vers la gauche et la droite, vers le haut et le bas, ou les deux.


    hauteur totale de l'espace de création = hauteur du panneau post-expansion + (hauteur du panneau post-expansion - hauteur de la création avant expansion)
    • Si la création se déplie vers la gauche et la droite, modifiez la largeur totale de l'espace de création dans le fichier parent.
      largeur totale de l'espace de création = largeur du panneau déplié + (largeur du panneau déplié - largeur de la création repliée)
      Reprenons l'exemple précédent, où une création de 300 x 250 se déplie vers la gauche et vers la droite pour atteindre les dimensions 500 x 250. On obtient la formule suivante : 500 + (500 - 300) = 700 (largeur totale de l'espace de création dans le fichier parent).
       
    • Si la création se déplie vers le haut et le bas, modifiez la hauteur totale de l'espace de création dans le fichier parent.
    •  
    • Si la création se déplie dans toutes les directions, aidez-vous des deux formules précédentes pour calculer la largeur et la hauteur de l'espace de création.
  3. Ajoutez un conteneur MovieClip afin de charger des panneaux expand multidirectionnels

    Les blocs expand multidirectionnels chargent des panneaux enfants répartis dans différents conteneurs MovieClip, en fonction de la position de la création sur la page. Pour déterminer à partir d'où le panneau enfant doit être déplié, le fichier parent doit inclure deux conteneurs MovieClip.
       
    Par exemple, une création de 300 x 250 qui se déplie vers la gauche et vers la droite doit inclure les deux conteneurs MovieClip suivants :
       
       

        Ajoutez un MovieClip expansionGauche_mc à la position 0,0 qui accueillera l'enfant se dépliant vers la gauche.
        Ajoutez un MovieClip expansionDroite_mc à la position 200,0 qui accueillera l'enfant se dépliant vers la droite.

         

    Vous avez besoin d'aide pour positionner les conteneurs MovieClip ? Voici la solution :

    Pour calculer la position des conteneurs MovieClip, vous devez déterminer la direction d'expansion de l'annonce :

    • Si la création se déplie vers la gauche et la droite, ajoutez un MovieClip vide à la position 0,0. L'autre MovieClip évolue sur l'axe X. La coordonnée X correspond à la largeur du panneau déplié moins celle de la création repliée.

      Reprenons l'exemple précédent, où une création de 300 x 250 se déplie vers la gauche et vers la droite pour atteindre les dimensions 500 x 250. Vous devez placer le MovieClip du panneau se dépliant vers la gauche à la position 0,0 et celui du panneau se dépliant vers la droite à la position 200,0 (car 500 - 300 = 200).

    • Si la création se déplie vers le haut et le bas, ajoutez un MovieClip vide à la position 0,0. L'autre MovieClip évolue sur l'axe Y. La coordonnée Y correspond à la hauteur du panneau déplié moins celle de la création repliée.

      Prenons le cas d'une création de 728 x 90 qui se déplie vers le haut et vers le bas pour atteindre les dimensions 728 x 250. Vous devez placer le MovieClip du panneau se dépliant vers le haut à la position 0,0 et celui du panneau se dépliant vers le bas à la position 0,160 (car 250 - 90 = 160).

    •  

  4. Ajoutez des panneaux enfants post-expansion et associez-les aux conteneurs MovieClip
    Pour que l'annonce puisse se déplier dans plusieurs directions, vous devez configurer au moins deux panneaux enfants (un par direction d'expansion). Si la création se déplie vers la gauche et la droite, paramétrez deux panneaux enfants comme suit dans l'inspecteur du composant Expanding :
     
        Panneau enfant se dépliant vers la gauche :
    • Nom de l'enfant : enfant_gauche
    • Nom du fichier SWF1 : enfant_expansion_gauche.swf
    • Instance MovieClip cible : expansionGauche_mc
     
    Panneau enfant se dépliant vers la droite :
    • Nom de l'enfant : enfant_droite
    • Nom du fichier SWF1 : enfant_expansion_droite.swf
    • Instance MovieClip cible : expansionDroite_mc

    1 Il est possible de déplier un panneau enfant différent, selon que l'annonce se déplie vers la gauche ou la droite. Dans ce cas, vous indiquerez deux fichiers SWF différents dans le champ Nom du fichier SWF. Si vous préférez qu'un seul fichier enfant se déplie quelle que soit la direction d'expansion, utilisez le même nom de fichier SWF pour les deux panneaux enfants.
     
    Paramétrez un panneau enfant dans l'inspecteur de composant 

    Pour ajouter un panneau enfant, cliquez sur Ajouter un enfant dans le panneau d'expansion du composant Expanding.

    Nom de l'enfant : nom de la référence interne au composant et à l'API.

    Nom du fichier SWF : indiquez le nom du fichier SWF correspondant au panneau déplié.

    Instance MovieClip cible : indiquez le nom de l'instance expandedHolder. Reprenez le nom d'instance du MovieClip vide créé à l'étape précédente.

    (facultatif) Ajouter des panneaux enfants : vous pouvez ajouter plusieurs fichiers enfants pour que l'internaute puisse charger différents panneaux post-expansion. Lorsque vous cochez la case Décharger le fichier SWF, un nouveau panneau enfant se déplie dans la même instance MovieClip tandis que le panneau ouvert se replie.


  5. Associez les panneaux enfants à une direction d'expansion

    Après avoir configuré les panneaux enfants dans l'inspecteur de composant, vous devez définir leur direction d'expansion respective à l'aide de l'API du composant Expanding.
     
    Reprenons les panneaux enfants créés à l'étape précédente. Vous devez à présent indiquer que les enfants enfant_gauche et enfant_droite doivent se déplier vers la gauche et vers la droite, respectivement. Pour cela, définissez les directions suivantes dans le code ActionScript du fichier FLA incluant le composant Expanding :
     

    expanding.setLeftChild("enfant_gauche");
    expanding.setRightChild("enfant_droite");

        Pour définir d'autres directions d'expansion, reportez-vous à l'API du composant Expanding.
     
    Il existe trois types de créations expand multidirectionnelle :
    • Avec expansion vers la gauche/droite
    • Avec expansion vers le haut/bas
    • Avec expansion dans les quatre directions
    Lorsque vous configurez une direction d'expansion haut/gauche en utilisant setTopLeftChild("enfant_hautGauche”);, vous devez définir les trois directions en respectant le même format (haut/droite, bas/gauche et bas/droite), faute de quoi une erreur sera générée.
    Extrait de code AS3
        import com.google.ads.studio.utils.StudioClassAccessor;
     
        // Faire référence à la classe Expanding
        var expanding:Object = StudioClassAccessor.getClass(StudioClassAccessor.CLASS_EXPANDING)["getInstance"]();
     
        // Définir la direction d'expansion de chaque panneau enfant
              expanding.setLeftChild("enfant_gauche");
              expanding.setRightChild("enfant_droite");
     

Rappel concernant DoubleClick Studio

Pour vérifier que l'annonce multidirectionnelle se déplie correctement, vous devez importer la création dans DoubleClick Studio et la tester dans l'onglet Aperçu. Pour savoir comment tester votre création, consultez l'article Page d'aperçu dynamique personnalisée.