Programming object oriented interfaces and animations in JavaScript 

   
  1.0   1.0
  1.0   1.0
00:00:00

Move the pointer of the mouse over the video. Click in the video or press the space bar to start playing it. Click or press the space bar to pause it, to continue to play it. Use the right and left arrows to move forward or backward by one second, press the Shift key or the Ctrl key at the same time to move forward or backward by ten seconds or a hundred milliseconds. Press the 0 key to come back to the beginning. Press the plus key to play the video faster, the minus key to play it slower, the asterisk key to come back to the normal speed. NOTE: These commands are available for all the types of clips.

Activate the sound.

IMPORTANT: The layout and the style of an interface are in the hands of the programmer. No graphical design is imposed. The examples use the icons from Font Awesome.

Modify the width or the height of the video in pixels. NOTE: The editor preserves the aspect ratio of the display and adjusts the other dimension automatically. Invert the display horizontally or vertically. Try a grayscale or a sepia effect. Blur the display. Modify the contrast, the brightness, the saturation, the tint of the video.

Try the Undo and Redo buttons.

Reload the page. The modifications are saved.

VideoClip

 
 
 
 0    

Type in a couple of words, e.g. Paris • London • . Press Enter to validate the text. NOTE: The text is always displayed in capital letters. Modify the size of the font. Check the box to show the text in bold. Change the font of the text by entering the name of a font from Google Fonts, e.g. Slackey or Righteous. Choose the color of the text, e.g. #CB6. Adjust the dimensions of the clip. Change the numbers of seconds of the duration of the animation and the start delay. Try different animation effects, e.g. linear ou ease-in-out. NOTE: The animation runs two times alternating the direction of the rotation. The total duration of the clip is equal to 2 times the duration of the animation + the start delay.

Click on the emblem to start the animation. Click again to pause it, to continue to play it.

AnimateClip

   

Click in the image. Select a JPG, PNG, GIF or SVG file. NOTE: The maximum size of the file is configured to 1Mb and the maximum width of the display to 320px. Move the pointer of the mouse over the image to display its dimensions. Open a folder containing images with the explorer of your file system. Drag and drop a JPG, PNG, GIF or SVG file over the image.

Edit the width or the height of the image. The other value is automatically computed to preserve the aspect ratio of the image.

Try saving on your disk and loading the logo of Chrome, of Firefox or the acronym in SVG. NOTE: An SVG doesn't have a maximum size and its dimensions depend on the maximum width of the display (320px).

Write data on a server

Objective

Manual

Programmer's manual
Read the complete documentation on all the classes of Objective.js and their test programs.
Architecture of an editor
Editing an animated text
Write data on a server
Build an editor which lets the user load or drag and drop an image from the local disk, define its dimensions and upload the image and its dimensions to a remote server.

  • Build sophisticated interactive applications.
  • Rely on a simple and solid MVC architecture.
  • Work with your usual development tools.
  • Use your own graphical designs.