Vous pouvez configurer une création pour qu'elle se déplie dans différentes directions selon l'endroit où elle est diffusée sur une page. La création est capable de détecter sa position et de déterminer, en fonction de cette dernière, la direction dans laquelle elle doit se déplier. Par exemple, en activant la fonctionnalité d'expansion multidirectionnelle, vous pouvez faire en sorte qu'une même création se déplie vers la droite lorsqu'elle est diffusée sur le côté gauche de la page, et vers la gauche lorsqu'elle apparaît sur le côté droit.
- Dans le fichier HTML, créez trois panneaux :
- Panneau principal : contient les panneaux replié et déplié, y compris les différentes directions d'expansion.
- Panneau replié : comporte le contenu du panneau replié.
- Panneau déplié : comporte le contenu du panneau déplié.
- Dans le fichier CSS, appliquez un style aux trois objets pour représenter la position de l'annonce et la direction d'expansion.
- Dans le fichier JavaScript :
- Utilisez la méthode
setExpandingPixelOffsetsdu composant Enabler pour définir des décalages pour le panneau replié. Ce décalage n'affecte pas l'environnement de test local, mais lorsque l'annonce est diffusée, la partie repliée de l'annonce apparaît à 0, 0. Cette méthode définit les propriétés CSSmarginLeftetmarginTopde l'élément "body" positionné de manière relative. - Utilisez la méthode
setIsMultiDirectionaldu composant Enabler pour activer les expansions multidirectionnelles. - Utilisez la méthode
getExpandDirectiondu composant Enabler pour déterminer la direction d'expansion de l'annonce. Ensuite, modifiez en conséquence de façon dynamique la position et l'animation du panneau déplié.
- Utilisez la méthode
Exemple de mise en page du panneau |
700x350 – Panneau principal |
Créez trois objets dans le fichier HTML à l'aide de tags <div>, puis attribuez-leur des ID.
Exemple HTML
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Ajouter le contenu replié ici. -->
</div>
<div id="expanded-panel">
<!-- Ajouter le contenu déplié ici. -->
</div>
</div>
</body>
Appliquez un style aux objets que vous avez créés dans le fichier CSS en utilisant les ID que vous leur avez attribués.
- Positionnez systématiquement le panneau principal à l'emplacement 0,0. Veillez par ailleurs à ce que sa taille lui permette d'inclure le panneau replié, ainsi que toutes les directions possibles pour le panneau déplié. Calculez la taille du panneau principal comme suit :
- Largeur du panneau principal = Largeur du panneau déplié + (Largeur du panneau déplié - Largeur du panneau replié)
- Hauteur du panneau principal = Hauteur du panneau déplié + (Hauteur du panneau déplié - Hauteur du panneau replié)
- Exemple
Selon l'image présentée ci-dessus :- largeur = 500px + (500px - 300px) = 700px
- hauteur = 300px + (300px - 250px) = 350px
- Positionnez systématiquement la zone du panneau replié au centre du panneau principal. Calculez cette position comme suit :
- Position gauche du panneau replié = Largeur du panneau déplié [moins] Largeur du panneau replié
- Position supérieure du panneau replié = Hauteur du panneau déplié [moins] Hauteur du panneau replié
- Exemple
Selon l'image présentée ci-dessus :- position gauche = 500px - 300px = 200px
- position supérieure = 300px - 250px = 50px
- La position du panneau déplié dépend de la direction d'expansion, mais doit être modifiée de façon dynamique à l'aide de JavaScript. Dans cet exemple, des classes ont été ajoutées pour chaque direction possible, y compris les positions gauche et supérieure. Ces classes sont ensuite utilisées dans le fichier JavaScript en fonction de la direction détectée par le composant Enabler.
#main-panel {
position: absolute;
left: 0px;
top: 0px;
width: 700px;
height: 350px;
}
#collapsed-panel {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 250px;
}
#expanded-panel {
position: absolute;
width: 500px;
height: 300px;
}
.direction-tl {
left: 0px;
top: 0px;
}
.direction-tr {
left: 100px;
top: 0px;
}
.direction-bl {
left: 0px;
top: 200px;
}
.direction-br {
left: 100px;
top: 200px;
}
Définissez les décalages de pixels du panneau replié de l'annonce et les dimensions du panneau déplié. Cela permet à Studio d'identifier la position de l'annonce sur la page Web où elle est diffusée, ainsi que la direction d'expansion. Pour cela, utilisez la méthode setExpandingPixelOffsets une fois le composant Enabler initialisé :
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- De la même façon que pour l'application d'un style au panneau replié, les valeurs que vous définissez pour les paramètres
left(position gauche) ettop(position supérieure) doivent positionner la zone correspondant au panneau replié au centre du panneau principal. Calculez ces positions comme suit :- position gauche = Largeur du panneau déplié [moins] Largeur du panneau replié
- position supérieure = Hauteur du panneau déplié [moins] Hauteur du panneau replié
- La définition des valeurs des paramètres
opt_expandedWidthetopt_expandedHeightpour l'expansion multidirectionnelle ne s'effectue pas de la même manière que la configuration de l'expansion standard. Ces valeurs doivent être définies de façon à correspondre aux dimensions du panneau principal, et non pas à celles du panneau déplié. Calculez-les comme suit :opt_expandedWidth= Largeur du panneau déplié + (Largeur du panneau déplié - Largeur du panneau replié)opt_expandedHeight= Hauteur du panneau déplié + (Hauteur du panneau déplié - Hauteur du panneau replié)
Enabler.setExpandingPixelOffsets(
200, // Décalage gauche de l'annonce dépliée
100, // Décalage supérieur de l'annonce dépliée
700, // Largeur développée d'une annonce
350); // Hauteur développée d'une annonce
// Afficher ou non à l'état déplié. La valeur par défaut est false.
Enabler.setStartExpanded(false);
// Permettre une expansion multidirectionnelle dans la
// meilleure direction possible en fonction de la position de l'annonce sur la page.
// La valeur par défaut est false.
Enabler.setIsMultiDirectional(true);
if (Enabler.isInitialized) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
function enablerInitHandler() {
// Ajouter du code pour charger les éléments de la création une fois que la méthode Enabler
// a été initialisée.
}
Vous devez modifier la position du panneau déplié sur le panneau principal en fonction de la direction d'expansion. Pour cela, déterminez la direction d'expansion au moyen de la méthode getExpandedDirection du composant Enabler et modifiez la création en conséquence lorsque l'événement EXPAND_START est déclenché. Dans l'exemple CSS ci-dessus, différentes classes sont définies pour chaque direction d'expansion. Dans l'extrait de code ci-dessous, un élément className est affecté à l'objet du panneau déplié en fonction de la direction d'expansion.
function expandAd(e) {
Enabler.requestExpand();
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
function() {
document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
// Ajouter du code pour l'animation d'expansion souhaitée.
Enabler.finishExpand();
});
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
function() {
// Ajouter du code pour afficher le panneau déplié et charger des éléments ou
// lancer l'animation.
});
}
document.getElementById('expand-button').addEventListener('click', expandAd, false);
Lorsque vous prévisualisez localement une création expand multidirectionnelle, toutes les directions d'expansion possibles s'affichent chaque fois que vous dépliez l'annonce. Elles sont indiquées dans l'ordre suivant :
- tl : vers le haut et la gauche
- tr : vers le haut et la droite
- bl : vers le bas et la gauche
- br : vers le bas et la droite
Lorsque vous prévisualisez une création dans DoucleClick Studio, seule la direction détectée par DoubleClick Studio est indiquée. Pour tester et prévisualiser la création dans les différentes directions, vous devez la positionner en conséquence dans l'onglet d'aperçu.