18

Éditer un clip animé

Cet article explique comment à partir d'une animation programmée en CSS obtenir l'effet équivalent dans un clip et coder l'édition des paramètres du clip.

Voir le Manuel du programmeur.

 
emblem.phtml
  1. <?php $text='Paris • London • '; ?>
  2. <?php $color='#ccbb66'?>
  3. <?php $font='Slackey'; ?>
  4. <?php $fontsize=36; ?>
  5. <?php $size=240; ?>

Définit le contenu du texte affiché, la couleur, la police et la taille de la police du texte, la taille de l'emblème.

  1. <?php head('font', $font); ?>

Ajoute la balise <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slackey" /> à la section <head> du document HTML. RAPPEL : head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

  1. #emblemtest {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     width: <?php echo $size; ?>px;
  6.     height: <?php echo $size; ?>px;
  7.     font-family: "<?php echo $font; ?>", sans-serif;
  8.     font-size: <?php echo $fontsize; ?>px;
  9.     font-weight: bold;
  10.     text-align: center;
  11.     text-transform: uppercase;
  12.     color: <?php echo $color; ?>
  13. }
  14.  
  15. #emblemtest span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configure le style du texte. Positionne chaque caractère individuel du texte.

  1. #emblemtest {
  2.     animation: spin 5s ease-in-out 1s 2 alternate;
  3. }
  4.  
  5. @keyframes spin {
  6. from { transform: rotate(0deg); }
  7.   to { transform: rotate(360deg); }
  8. }

Programme l'animation du texte.

  1. <div id="emblemtest">&nbsp;</div>

Le texte sera affiché dans cette <div>. NOTE  : Le &nbsp; dans la <div> fait en sorte que la police soit chargée par le navigateur.

  1. function draw(widget, text) {
  2.     let angle = 360/text.length;
  3.  
  4.     for (let i = 0; i < text.length; i++) {
  5.         let span = document.createElement('span');
  6.         let letter = document.createTextNode(text[i]);
  7.  
  8.         span.appendChild(letter);
  9.  
  10.         let r = i * angle;
  11.  
  12.         span.style.transform = `rotate(${r}deg)`;
  13.  
  14.         widget.appendChild(span);
  15.     }
  16. }

draw affiche text en rond dans widget. draw ajoute dans widget une balise <span> pour chaque caractère de text avec une rotation pour un total de 360°.

  1. const emblemtest = document.getElementById('emblemtest');

Assigne à emblemtest la <div> d'affichage du texte.

  1. draw(emblemtest, '<?php echo $text; ?>');

Dessine l'emblème.

Clip

Cliquez dans le texte pour démarrer l'animation.

Objective
  • Model
    • ClipModel
      • EmblemModel
EmblemModel.js
  1. function EmblemModel(clipname) {
  2.     ClipModel.call(this, clipname);
  3.  
  4.     this._value = {
  5.         size:       EmblemModel.defaultSize,
  6.         text:       EmblemModel.defaultText,
  7.         textFont:   EmblemModel.defaultTextFont,
  8.         textSize:   EmblemModel.defaultTextSize,
  9.         textBold:   EmblemModel.defaultTextBold,
  10.         textColor:  EmblemModel.defaultTextColor,
  11.         duration:   EmblemModel.defaultDuration,
  12.         easing:     EmblemModel.defaultEasing,
  13.         delay:      EmblemModel.defaultDelay
  14.     };
  15. }
  16.  
  17. EmblemModel.prototype = Object.create(ClipModel.prototype);
  18.  
  19. Object.defineProperty(EmblemModel.prototype, 'constructor', { value: EmblemModel, enumerable: false, writable: true });
  20.  
  21. EmblemModel.defaultSize = 160;
  22. EmblemModel.defaultText = '';   // 'London • Paris • ';
  23. EmblemModel.defaultTextFont = 'Open Sans';
  24. EmblemModel.defaultTextSize = 22;
  25. EmblemModel.defaultTextBold = true;
  26. EmblemModel.defaultTextColor = '#cccccc';
  27. EmblemModel.defaultEasing = 'ease-in-out';
  28. EmblemModel.defaultDuration = 5;
  29. EmblemModel.defaultDelay = 1;
  30.  
  31. EmblemModel.minSize = 120;
  32. EmblemModel.maxSize = 960;
  33. EmblemModel.minTextLength = 0;
  34. EmblemModel.maxTextLength = 40;
  35. EmblemModel.minTextSize = 10;
  36. EmblemModel.maxTextSize = 60;
  37. EmblemModel.minDuration = 1;
  38. EmblemModel.maxDuration = 9;
  39. EmblemModel.minDelay = 0;
  40. EmblemModel.maxDelay = 5;
  41.  
  42. EmblemModel.easingOptions = Validator.easingOptions;
  43.  
  44. EmblemModel.prototype.validateValue = function(prop, val) {
  45.     if (prop == 'size')
  46.         return Number.isInteger(val);
  47.  
  48.     if (prop == 'text')
  49.         return typeof val === 'string' && val.length >= EmblemModel.minTextLength;
  50.  
  51.     if (prop == 'textFont')
  52.         return typeof val === 'string';
  53.  
  54.     if (prop == 'textSize')
  55.         return Number.isInteger(val);
  56.  
  57.     if (prop == 'textColor')
  58.         return Validator.validateColor(val);
  59.  
  60.     if (prop == 'duration')
  61.         return Number.isInteger(val);
  62.  
  63.     if (prop == 'delay')
  64.         return Number.isInteger(val);
  65.  
  66.     if (prop == 'easing')
  67.         return Validator.validateEasing(val);
  68.  
  69.     return true;
  70. };
  71.  
  72. EmblemModel.prototype.normalizeValue = function(prop, val) {
  73.     if (prop == 'size') {
  74.         if (val < EmblemModel.minSize)
  75.             val = EmblemModel.minSize;
  76.         else if (val > EmblemModel.maxSize)
  77.             val = EmblemModel.maxSize;
  78.     }
  79.     else if (prop == 'text') {
  80.         if (val.length > EmblemModel.maxTextLength)
  81.             val = val.substring(0, EmblemModel.maxTextLength);
  82.     }
  83.     else if (prop == 'textSize') {
  84.         if (val < EmblemModel.minTextSize)
  85.             val = EmblemModel.minTextSize;
  86.         else if (val > EmblemModel.maxTextSize)
  87.             val = EmblemModel.maxTextSize;
  88.     }
  89.     else if (prop == 'textBold')
  90.         val = val ? true : false;
  91.     else if (prop == 'textColor')
  92.         val = Validator.normalizeColor(val);
  93.     else if (prop == 'duration') {
  94.         if (val < EmblemModel.minDuration)
  95.             val = EmblemModel.minDuration;
  96.         else if (val > EmblemModel.maxDuration)
  97.             val = EmblemModel.maxDuration;
  98.     }
  99.     else if (prop == 'delay') {
  100.         if (val < EmblemModel.minDelay)
  101.             val = EmblemModel.minDelay;
  102.         else if (val > EmblemModel.maxDelay)
  103.             val = EmblemModel.maxDelay;
  104.     }
  105.  
  106.     return val;
  107. };
Objective
  • Responder
    • View
      • Clip
        • AnimateClip
          • EmblemClip
EmblemClip.js
  1. function EmblemClip() {
  2.     AnimateClip.call(this);
  3.  
  4.     this._options = {duration: 0, delay: 0, easing: 'linear'};
  5. }
  6.  
  7. EmblemClip.prototype = Object.create(AnimateClip.prototype);
  8.  
  9. Object.defineProperty(EmblemClip.prototype, 'constructor', { value: EmblemClip, enumerable: false, writable: true });
  10.  
  11. EmblemClip.prototype._draw = function(text) {
  12.     while (this._widget.firstChild)
  13.         this._widget.removeChild(this._widget.firstChild);
  14.  
  15.     let angle = 360/text.length;
  16.  
  17.     for (let i = 0; i < text.length; i++) {
  18.         let span = document.createElement('span');
  19.         let letter = document.createTextNode(text[i]);
  20.  
  21.         span.appendChild(letter);
  22.  
  23.         let r = i * angle;
  24.  
  25.         span.style.transform = `rotate(${r}deg)`;
  26.  
  27.         this._widget.appendChild(span);
  28.     }
  29.  
  30.     return this;
  31. };
  32.  
  33. EmblemClip.prototype.set = function(options) {
  34.     const {size, text, textFont, textSize, textBold, textColor, duration, delay, easing} = options;
  35.  
  36.     this.setSize(size);
  37.     this.setText(text);
  38.     this.setTextFont(textFont);
  39.     this.setTextSize(textSize);
  40.     this.setTextBold(textBold);
  41.     this.setTextColor(textColor);
  42.  
  43.     this.setAnimation(duration, delay, easing);
  44.  
  45.     return this;
  46. };
  47.  
  48. EmblemClip.prototype.setValue = function(prop, val) {
  49.     if (prop == 'size')
  50.         this.setSize(val);
  51.     else if (prop == 'text')
  52.         this.setText(val);
  53.     else if (prop == 'textFont')
  54.         this.setTextFont(val);
  55.     else if (prop == 'textSize')
  56.         this.setTextSize(val);
  57.     else if (prop == 'textBold')
  58.         this.setTextBold(val);
  59.     else if (prop == 'textColor')
  60.         this.setTextColor(val);
  61.     else if (prop == 'duration')
  62.         this.setDuration(val);
  63.     else if (prop == 'delay')
  64.         this.setDelay(val);
  65.     else if (prop == 'easing')
  66.         this.setEasing(val);
  67.  
  68.     return this;
  69. };
  70.  
  71. EmblemClip.prototype.setSize = function(px) {
  72.     this.setStyle('width', `${px}px`);
  73.     this.setStyle('height', `${px}px`);
  74.  
  75.     this._width = this._height = px;
  76.  
  77.     return this;
  78. };
  79.  
  80. EmblemClip.prototype.setText = function(text) {
  81.     if (text)
  82.         this._draw(text);
  83.  
  84.     return this;
  85. };
  86.  
  87. EmblemClip.prototype.setTextFont = function(font) {
  88.     this.addFont(font).setStyle('fontFamily', `"${font}", sans-serif`);
  89.  
  90.     return this;
  91. };
  92.  
  93. EmblemClip.prototype.setTextSize = function(px) {
  94.     this.setStyle('fontSize', `${px}px`);
  95.  
  96.     return this;
  97. };
  98.  
  99. EmblemClip.prototype.setTextBold = function(bold) {
  100.     this.setStyle('fontWeight', bold ? 'bold' : 'normal');
  101.  
  102.     return this;
  103. };
  104.  
  105. EmblemClip.prototype.setTextColor = function(color) {
  106.     this.setStyle('color', color);
  107.  
  108.     return this;
  109. };
  110.  
  111. EmblemClip.prototype.setDuration = function(ms) {
  112.     this.setAnimation(ms, this._options.delay, this._options.easing);
  113.  
  114.     return this;
  115. };
  116.  
  117. EmblemClip.prototype.setDelay = function(s) {
  118.     this.setAnimation(this._options.duration, s, this._options.easing);
  119.  
  120.     return this;
  121. };
  122.  
  123. EmblemClip.prototype.setEasing = function(easing) {
  124.     this.setAnimation(this._options.duration, this._options.delay, easing);
  125.  
  126.     return this;
  127. };
  128.  
  129. EmblemClip.prototype.setAnimation = function(duration, delay, easing) {
  130.     const keyframes = [
  131.         { transform: 'rotate(0deg)' },
  132.         { transform: 'rotate(360deg)' }
  133.     ];
  134.  
  135.     const options = {
  136.         duration: duration*1000,
  137.         direction: 'alternate',
  138.         iterations: 2,
  139.         easing: easing,
  140.         delay: delay*1000,
  141.         endDelay: 0
  142.     };
  143.  
  144.     const animations = [
  145.         [this._widget, keyframes, options]
  146.     ];
  147.  
  148.     this.animate(animations, false);
  149.  
  150.     this._options.duration = duration;
  151.     this._options.delay = delay;
  152.     this._options.easing = easing;
  153.  
  154.     return this;
  155. };
testEmblemClip.phtml
  1. <?php $debug=false; ?>

Mettre $debug à true permet d'accéder dans la console du navigateur à tous les composants de l'interface. Si $debug vaut false, tout le code en JavaScript est protégé par une fonction de fermeture.

  1. <?php $text='Paris • London • '; ?>
  2. <?php $color='#ccbb66'?>
  3. <?php $size=240; ?>
  4. <?php $font='Slackey'; ?>
  5. <?php $fontsize=36; ?>

Définit le texte affiché par l'emblème, sa couleur et sa taille, la police de caractères du texte et sa taille.

  1. <?php head('font', $font); ?>

Ajoute la balise <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slackey" /> à la section <head> du document HTML. RAPPEL : head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

  1. <?php $id=uniqid('id'); ?>

Définit l'identifiant de la <div> qui encadre le HTML de l'interface.

  1. .emblem {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     text-align: center;
  6.     text-transform: uppercase;
  7.     user-select: none;
  8. }
  9. .emblem span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configure le CSS de l'emblème. Positionne chaque caractère.

  1. <div id="<?php echo $id; ?>" class="clip">
  2. <div class="emblem"></div>
  3. </div>

Crée la <div> qui affiche l'emblème.

  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Clip.js'); ?>
  5. <?php head('javascript', '/objectivejs/Model.js'); ?>
  6. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  7. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  8. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  9. <?php head('javascript', '/objectivejs/AnimateClip.js'); ?>
  10. <?php head('javascript', '/objectivejs/tests/EmblemModel.js'); ?>
  11. <?php head('javascript', '/objectivejs/tests/EmblemClip.js'); ?>

Inclut le code de toutes les classes nécessaires.

  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isole tout le code en JavaScript dans une fonction de fermeture si $debug vaut false.

  1.     const clip = new EmblemClip();
  2.  
  3.     const model = new EmblemModel();
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.emblem'));
  8.  
  9.     clip.enablePlayer();
  10.  
  11.     const controller = new ClipController(clip, model);
  12.  
  13.     const options = {
  14.         size: <?php echo $size; ?>,
  15.         text: '<?php echo $text; ?>',
  16.         textColor: '<?php echo $color; ?>',
  17.         textFont: '<?php echo $font; ?>',
  18.         textSize: <?php echo $fontsize; ?>
  19.     };
  20.  
  21.     model.set(options);

Crée le clip, le modèle du clip et son interface. Active les contrôles au clavier et à la souris du clip. Crée un simple contrôleur qui configure le clip quand le modèle a été changé. Configure le modèle du clip.

  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

Ferme la fonction qui isole le code en JavaScript si $debug vaut false.

Éditeur
 
 
 
 0    

Tapez quelques mots, e.g. Paris • London • . Appuyez sur Entrée pour valider le texte. NOTE : Le texte est toujours affiché en lettres capitales. Modifiez la taille de la police. Cochez la case pour mettre le texte en gras. Changez la police du texte en entrant le nom d'une police de Google Fonts, e.g. Slackey ou Righteous. Choisissez la couleur du texte, e.g. #CB6. Ajustez les dimensions du clip. Changez la durée en nombre de secondes de l'animation et du délai au démarrage. Essayez différents effets d'animation, e.g. linear ou ease-in-out. NOTE : L'animation s'exécute deux fois en alternant le sens de rotation. La durée totale du clip est égale à 2 fois la durée de l'animation + le délai au démarrage.

Cliquez sur l'emblème pour démarrer l'animation. Cliquez de nouveau pour la mettre en pause, la relancer.

Rechargez la page. Les modifications sont enregistrées.

Voir Architecture d'un éditeur.

testEmblemEditor.phtml
  1. <?php $debug=false; ?>

Mettre $debug à true permet d'accéder dans la console du navigateur à tous les composants de l'interface. Si $debug vaut false, tout le code en JavaScript est protégé par une fonction de fermeture.

  1. <?php $editor=true; ?>
  2. <?php $player=true; ?>

Mettre $editor à true affiche l'éditeur du clip. Mettre $player à true active les contrôles du clip. Essayez de mettre chaque option à false.

  1. <?php $clipname='emblem'; ?>

Définit le nom du modèle qui définit le nom du cookie qui enregistre les données du modèle.

  1. <?php head('javascript', 'js.cookie.js'); ?>

Ajoute la balise <script src="/js/js.cookie.js"/> à la section <head> du document HTML. RAPPEL : head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

  1. <?php if ($editor): ?>
  2. <?php head('javascript', 'jquery.minicolors'); ?>
  3. <?php head('stylesheet', 'jquery.minicolors', 'screen'); ?>
  4. <?php endif; ?>

Si l'éditeur est affiché, ajoute les balises <script src="/js/jquery.minicolors.js"/> et <link rel="stylesheet" href="/css/jquery.minicolors.css" media="screen"/> à la section <head> du document HTML pour charger le code et la feuille de style de MiniColors en jQuery.

  1. <?php $id=uniqid('id'); ?>

Définit l'identifiant de la <div> qui encadre le HTML de l'interface.

  1. .emblem {
  2.     position: relative;
  3.     overflow: hidden;
  4.     margin: 0;
  5.     text-align: center;
  6.     text-transform: uppercase;
  7.     user-select: none;
  8. }
  9. .emblem span {position:absolute;left:0;right:0;top:0;bottom:0;}

Configure le CSS de l'emblème. Positionne chaque caractère.

  1. #<?php echo $id; ?>_emblem_text {
  2.     width: 20em;
  3. }
  4. #<?php echo $id; ?>_emblem_textsize {
  5.     width: 3em;
  6. }

Configure la largeur des champs de saisie du texte de l'emblème et de sa largeur.

  1. <div id="<?php echo $id; ?>" class="clip">
  2. <?php if ($editor): ?>
  3. <div class="ojs">
  4. <div>
  5. <div class="ojs_undo">
  6. <button type="submit" class="ojs_button narrow control_undo" disabled><i class="fas fa-undo"></i></button>
  7. <button type="submit" class="ojs_button narrow control_redo" disabled><i class="fas fa-redo"></i></button>
  8. </div>
  9. <span><input class="ojs_size" type="number" step="10"/>&nbsp;<i class="fas fa-expand small"></i></span>
  10. </div>
  11. <span><input id="<?php echo $id; ?>_emblem_text" type="text" size="20" spellcheck="false"/></span>
  12. <div>
  13. <span><input id="<?php echo $id; ?>_emblem_textsize" type="number" step="1"/>&nbsp;<i class="fas fa-text-height small"></i></span>
  14. <span><input id="<?php echo $id; ?>_emblem_textbold" type="checkbox"/><label for="<?php echo $id; ?>_emblem_textbold"><i class="fas fa-bold small"></i></label></span>
  15. <span id="<?php echo $id; ?>_emblem_textcolor"></span>
  16. </div>
  17. <div>
  18. <span><input id="<?php echo $id; ?>_emblem_textfont" type="text" size="20" spellcheck="false"/>&nbsp;<i class="fas fa-font small"></i></span>
  19. </div>
  20. <fieldset class="ojs_animation">
  21. <legend><i class="fas fa-history"></i>&nbsp;<span class="ojs_timing">0</span></legend>
  22. <span><input class="ojs_duration" type="number" min="1" step="1"/>&nbsp;<i class="fas fa-clock small"></i></span>
  23. <span><input class="ojs_delay" type="number" min="0" max="5" step="1"/>&nbsp;<i class="fas fa-play-circle small"></i></span>
  24. <select class="ojs_easing" size="1">
  25. <option value="linear">linear</option>
  26. <option value="ease">ease</option>
  27. <option value="ease-in">ease-in</option>
  28. <option value="ease-out">ease-out</option>
  29. <option value="ease-in-out">ease-in-out</option>
  30. </select>
  31. </fieldset>
  32. </div>
  33. <?php endif; ?>
  34. <div class="emblem"></div>
  35. </div>

Crée les widgets de l'interface.

  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Clip.js'); ?>
  5. <?php head('javascript', '/objectivejs/Model.js'); ?>
  6. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  7. <?php if ($editor): ?>
  8. <?php head('javascript', '/objectivejs/Editor.js'); ?>
  9. <?php head('javascript', '/objectivejs/ClipEditor.js'); ?>
  10. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  11. <?php head('javascript', '/objectivejs/BooleanInspector.js'); ?>
  12. <?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
  13. <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
  14. <?php head('javascript', '/objectivejs/SelectInspector.js'); ?>
  15. <?php head('javascript', '/objectivejs/ColorInspector.js'); ?>
  16. <?php head('javascript', '/objectivejs/Undo.js'); ?>
  17. <?php head('javascript', '/objectivejs/Panel.js'); ?>
  18. <?php head('javascript', '/objectivejs/UndoPanel.js'); ?>
  19. <?php else: ?>
  20. <?php head('javascript', '/objectivejs/ClipController.js'); ?>
  21. <?php endif; ?>
  22. <?php head('javascript', '/objectivejs/ClipModel.js'); ?>
  23. <?php head('javascript', '/objectivejs/AnimateClip.js'); ?>
  24. <?php head('javascript', '/objectivejs/ModelCookieDelegate.js'); ?>
  25. <?php head('javascript', '/objectivejs/tests/EmblemModel.js'); ?>
  26. <?php head('javascript', '/objectivejs/tests/EmblemClip.js'); ?>

Inclut le code de toutes les classes nécessaires. Si l'éditeur n'est pas affiché, un simple contrôleur configure le clip quand le modèle a été changé. RAPPEL : La fonction head de la librairie iZend ajoute une balise telle que <script src="/objectivejs/Objective.js"></script> à la section <head> du document HTML. Adaptez le code à votre environnement de développement.

  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isole tout le code en JavaScript dans une fonction de fermeture si $debug vaut false.

  1.     const clip = new EmblemClip();
  2.  
  3.     const model = new EmblemModel('<?php echo $clipname; ?>');
  4.  
  5.     const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7.     clip.setManagedWidget(container.querySelector('.emblem'));
  8.  
  9.     clip.set(model.get());

Crée le clip et le modèle de données à éditer. Récupère la <div> qui encadre le HTML du programme. Configure l'interface du clip. Initialise le clip avec les données du modèle.

  1.     clip.enablePlayer();

Active les contrôles au clavier et à la souris du clip si $player vaut true.

  1.     const panel = new UndoPanel();
  2.  
  3.     panel.setManagedWidget(container.querySelector('.ojs_undo')).resetWidget();
  4.  
  5.     const sizeInspector = new NumberInspector(model.getValue('size'), {min: EmblemModel.minSize, max: EmblemModel.maxSize});
  6.  
  7.     sizeInspector.setManagedWidget(container.querySelector('.ojs_size')).resetWidget();
  8.  
  9.     const textInspector = new StringInspector(model.getValue('text'), {min: EmblemModel.minTextLength, max: EmblemModel.maxTextLength, trim: false, required: false});
  10.  
  11.     textInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_text')).resetWidget();
  12.  
  13.     const textSizeInspector = new NumberInspector(model.getValue('textSize'), {min: EmblemModel.minTextSize, max: EmblemModel.maxTextSize});
  14.  
  15.     textSizeInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textsize')).resetWidget();
  16.  
  17.     const textBoldInspector = new BooleanInspector(model.getValue('textBold'));
  18.  
  19.     textBoldInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textbold')).resetWidget();
  20.  
  21.     const textColorInspector = new ColorInspector(model.getValue('textColor'));
  22.  
  23.     textColorInspector.createManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textcolor'));
  24.  
  25.     const textFontInspector = new StringInspector(model.getValue('textFont'));
  26.  
  27.     textFontInspector.setManagedWidget(container.querySelector('#<?php echo $id; ?>_emblem_textfont')).resetWidget();
  28.  
  29.     const durationInspector = new NumberInspector(model.getValue('duration'), {min: EmblemModel.minDuration, max: EmblemModel.maxDuration});
  30.  
  31.     durationInspector.setManagedWidget(container.querySelector('.ojs_duration')).resetWidget();
  32.  
  33.     const delayInspector = new NumberInspector(model.getValue('delay'), {min: EmblemModel.minDelay, max: EmblemModel.maxDelay});
  34.  
  35.     delayInspector.setManagedWidget(container.querySelector('.ojs_delay')).resetWidget();
  36.  
  37.     const easingInspector = new SelectInspector(model.getValue('easing'), {tags: EmblemModel.easingOptions});
  38.  
  39.     easingInspector.setManagedWidget(container.querySelector('.ojs_easing')).resetWidget();
  40.  
  41.     const timing = new View();
  42.  
  43.     timing.setManagedWidget(container.querySelector('.ojs_timing'));
  44.  
  45.     const inspectors = {
  46.         size:       sizeInspector,
  47.         text:       textInspector,
  48.         textFont:   textFontInspector,
  49.         textSize:   textSizeInspector,
  50.         textBold:   textBoldInspector,
  51.         textColor:  textColorInspector,
  52.         duration:   durationInspector,
  53.         delay:      delayInspector,
  54.         easing:     easingInspector
  55.     };
  56.  
  57.     const editor = new ClipEditor(model, clip, inspectors, panel, timing);

Si $editor vaut true, crée le panneau avec les boutons pour défaire et refaire une modification, crée les inspecteurs de tous les paramètres du clip, crée la vue qui affiche la durée du clip, crée l'éditeur.

  1.     const controller = new ClipController(clip, model);

Si l'éditeur n'est pas affiché, crée un contrôleur.

  1.     model.setDelegate(new ModelCookieDelegate());
  2.  
  3.     if (model.isSaved())
  4.         model.readIn();
  5.     else {
  6.         model.setValue('text', 'Paris • London • ');
  7.         model.setValue('textFont', 'Slackey');
  8.         model.setValue('textColor', '#CB6');
  9.         model.setValue('textSize', 36);
  10.         model.setValue('size', 240);
  11.     }
  12.  
  13.     model.enableSync();

Associe le modèle à un délégué en charge de la sauvegarde de ses données dans un cookie. Configure le modèle avec les données déjà enregistrées ou l'initialise avec des valeurs par défaut. Active la sauvegarde des données du modèle dès modification.

  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

Ferme la fonction qui isole le code en JavaScript si $debug vaut false.

Un clip peut toujours être converti en une vidéo.

emblem.webm
emblem.mp4

Cliquez dans la vidéo pour la démarrer. Cliquez de nouveau pour la mettre en pause.

VOIR AUSSI

Objective, Model, Clip, AnimateClip, Inspector, ModelCookieDelegate, Editor, Architecture d'un éditeur, Éditer un clip programmé, Éditer un clip vidéo, Écrire des données sur un serveur

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].