La programmation orientée objet des interfaces et des animations en JavaScript 

   
  1.0   1.0
  1.0   1.0
00:00:00

Déplacez le pointeur de la souris sur la vidéo. Cliquez dans la vidéo ou appuyez sur la barre d'espace pour en démarrer la lecture. Cliquez ou appuyez sur la barre d'espace pour la mettre en pause, la relancer. Utilisez les flèches droite et gauche pour avancer ou reculer d'une seconde, appuyez en même temps sur la touche Maj ou la touche Ctrl pour avancer ou reculer de dix secondes ou de cent millisecondes. Appuyez sur la touche 0 pour revenir au début. Appuyez sur la touche plus pour accélérer la lecture, sur la touche moins pour la ralentir, sur la touche astérisque pour revenir à la vitesse normale. NOTE : Ces commandes sont disponibles pour tous les types de clips.

Activez le son.

IMPORTANT : La disposition et le style d'une interface sont à la discrétion du programmeur. Aucun modèle graphique n'est imposé. Les exemples utilisent les icônes de Font Awesome.

Modifiez la largeur ou la hauteur de la vidéo en pixels. NOTE : L'éditeur préserve la rapport d'affichage et ajuste automatiquement l'autre dimension. Inversez l'affichage dans le sens horizontal ou vertical. Essayez un effet grisé ou un effet sépia. Floutez l'affichage. Modifiez le contraste, la luminosité, la saturation, la teinte de la vidéo.

Essayez les boutons Défaire et Refaire.

Rechargez la page. Les modifications sont enregistrées.

VideoClip

Cliquez dans le texte pour démarrer l'animation. Cliquez de nouveau pour la mettre en pause, la relancer.

ProgramClip

 
 
 
 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.

RAPPEL : Les commandes au clavier sont effectives pour tous les types de clips. Déplacez le pointeur de la souris sur l'emblème. Appuyez sur la touche plus pour accélérer l'animation, sur la touche moins pour la ralentir, sur la touche astérisque pour revenir à la vitesse normale.

AnimateClip

00:00:00

Appuyez sur le bouton de lecture pour démarrer la lecture de l'audio. Appuyez sur le bouton pause pour la mettre en pause. Activez ou désactivez la lecture en boucle. Le lecteur passe automatiquement à la piste suivante si la lecture en boucle est désactivée. Cliquez sur le nom d'une piste pour la charger dans le lecteur.

Un lecteur audio peut aussi charger un fichier audio à partir du disque local, enregistrer une audio avec un microphone, envoyer un fichier audio chargé localement ou enregistré à un serveur, détruire un fichier audio sur un serveur. Toutes les fonctionnalités sont optionnelles.

AudioPlayer

   

Cliquez dans l'image. Sélectionnez un fichier JPG, PNG, GIF ou SVG. NOTE : La taille maximum du fichier est configurée à 1 Mo et la largeur maximum de l'affichage à 320 px. Replacez la souris sur l'image pour afficher ses dimensions. Ouvrez un dossier contenant des images avec l'explorateur de votre système de fichiers. Faites glisser et déposer un fichier JPG, PNG, GIF ou SVG sur l'image.

Éditez la largeur ou la hauteur de l'image. L'autre valeur est automatiquement calculée afin de préserver le rapport d'aspect de l'image.

Essayez d'enregistrer sur votre disque et de charger le logo de Chrome, de Firefox ou le sigle en SVG. NOTE : Un SVG n'a pas de taille maximum et ses dimensions dépendent de la largeur maximum de l'affichage (320 px).

Écrire des données sur un serveur

L'ensemble des classes Objective.js :

Installation
Téléchargez et installez la librairie, les programmes de test et tous les exemples dans votre environnement de développement.
Manuel du programmeur
Lisez la documentation complète sur toutes les classes Objective.js et leurs programmes de test.
Architecture d'un éditeur
Étudiez l'organisation du code d'un éditeur qui coordonne les échanges entre un modèle de données, des inspecteurs qui éditent les valeurs du modèle, une vue qui affiche en temps réel l'état du modèle et un délégué en charge de l'enregistrement automatique des données du modèle.
Édition d'un texte animé
Apprenez 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.
Édition d'un texte animé par un programme
Apprenez comment à partir d'une animation programmée en JavaScript obtenir l'effet équivalent dans un clip et coder l'édition des paramètres du clip.
Édition d'une vidéo filtrée dans un canevas
Apprenez comment à partir d'une vidéo filtrée avec un canevas obtenir l'effet équivalent dans un clip et coder l'édition des paramètres du clip.
Écrire des données sur un serveur
Construisez un éditeur qui permet à l'utilisateur de charger ou de glisser et déposer une image à partir du disque local, d'en définir les dimensions et de télécharger l'image et ses dimensions sur un serveur distant.
Gérer un espace fichier utilisateur en accès protégé
Gérez un dépôt de fichiers JPG, PNG, GIF ou PDF présenté avec un mur d'images.
Configurer des graphiques par Plotly
Éditez les données et les paramètres de configuration d'un graphique linéaire et d'un graphique à barres réalisés avec la librairie fournie par Plotly et voyez le résultat.

  • Construisez des applications interactives sophistiquées.
  • Fiez-vous à une architecture MVC simple et solide.
  • Travaillez avec vos outils de développement habituels.
  • Utilisez vos propres modèles graphiques.