Caption

La fonctionnalité Caption permet de changer l'aspect visuel des sous-titres associés aux fichiers audio et vidéo importés dans Storyline.

La fonctionnalité a été écrite à l'origine pour remédier au problème de ratio rencontré lors du changement de résolution d'un projet. La taille du conteneur des sous-titres ne suit pas le ratio des résolutions appliquées au module, ce qui pose problème lorsque l'on opte pour une résolution élevée : la boîte de sous-titres apparaît « minuscule ».

Présentation

La fonctionnalité utilise CustomCSS pour redéfinir les règles de feuilles de styles appliquées aux différents nœuds HTML qui composent l'élément Sous-titre.

La structure HTML s'articule comme suit :

Structure HTML
<div class='caption-container'>     // pointé par GetCaptionContainer()
    <div class='caption'>           // pointé par GetCaption()
        <p>/*   Sous-titres */</p>  // pointé par GetCaptionText()
    </div>
</div>

La fonctionnalité propose plusieurs méthodes pour raccourcir les déclarations dans le déclencheur principal d'initialisation.

  • clearBox : réinitialise les attributs margin et padding des nœuds GetCaption() et GetCaptionText(), et efface tous les styles appliqués sur les deux noeuds ;

  • setBackground : applique un fond, ainsi qu'une ombre au nœud GetCaptionText() ;

  • setFont : applique une police de caractères au nœud GetCaptionText().

Informations pour les développeurs


Les méthodes retournent des définitions pré-construites de feuilles de style pour simplifier l'habillage graphique de base.
Pour les développeurs avancés qui souhaitent des définitions plus spécifiques, vous pouvez redéfinir les styles CSS .caption et .caption p directement en utilisant CustomCSS.newRule.


Voyons en détail chacune des méthodes.

Utilisation

Pour réinitialiser la boîte de sous-titre afin de prendre en compte le nouveau ratio d'un projet Storyline simplement, appelez les méthodes les unes après les autres en l'état, sans arguments sauf cas mentionné contraire.

JavaScript
Caption.clearBox();
Caption.setBackground();
GoogleFonts.link('Inter:wght@400;700');
Caption.setFont("Inter");

Caption.clearBox

Afin d'éviter les conflits avec les styles natifs du lecteur Storyline, la méthode Caption.clearBox efface les styles de mise en forme dans les nœuds GetCaption() et GetCaptionText().

Elle doit être appelée avant d'utiliser les 2 autres méthodes.

Caption.setBackground

La méthode permet de définir la couleur du fond du nœud GetCaptionText() et accepte plusieurs arguments.

JavaScript
Caption.setBackground("#000000", 0.6, 2, 1);

Si les arguments sont omis, la méthode applique les valeurs suivantes :

  • Couleur : couleur du fond au format #00000 (noir) ;
  • Transparence : transparence du fond à 60%, exprimé en valeur décimale comprise entre 0 et 1 ;
  • Flou : effet de flou pour une ombre appliquée de 2 pixels de large ;
  • Décalage : décalage de 1 pixel de l'ombre appliquée sur les 4 axes.

Caption.setFont

Caption offre enfin la possibilité de changer la police de caractères, la couleur et la taille du nœud GetCaptionText()

JavaScript
GoogleFonts.link('Inter:wght@400;700');
Caption.setFont('Inter','white','2em');

Seul le premier argument est obligatoire pour définir la police de caractères à utiliser.

  • Police de caractères : argument obligatoire, à combiner avec l'une des méthodes de GoogleFonts ou CustomCSS.newFontFace ;
  • Couleur : couleur du texte définit à blanc si omis ;
  • Taille : taille du texte définit à 2em si omis.