SVGT 1.2 Walkthrough

A simple video-zapper

1. Get a brandnew sandbox

   Create your new SVG document

   This main file should start by declaring the basic information on the SVG version, the intended viewBox and several other relations to other namespaces you will make use of.

   By omitting width and height attributes on the <svg> we make it scale to whatever viewport.

2. Setup the menu structure

   We will be using uDom ecmascript to coordinate the interaction. Therefore we define an array with one object per video, defining their properties.

   Add a <script> element to your document with a structure like this:

3. Add your graphics

   You can now add some graphics. We will be using icons that were designed in Adobe Illustrator, and then exported to an SVG file. Here is an example of how it can turn out, wrapped into a <defs>-section for later use.

   You can now use this on a <use>-element like this:

   

   We add more icons which you can see in the <defs>-section in the code. None of them is visible initially, except for the special-empty one, in this case called "noIcon". Think of it as the "blind.gif" of SVG, making it possible to define a <use>-element without a reference yet.

4. Make it move

   Setting up animations

   Surrounding the <use>-elements with animateTransform elements, will make it easy to move the icons around when the user presses a key. It could look like so:

   As you can see, these are two pretty complex animations, taking care of rotating the first icon in case the user presses the left softkey. The first one rotates it into landscape mode, the second one rotates it back.

   Both animations are in fact almost the same, the only have their "from" and "to" values swapped. And some different "begin" values, because they are triggered at different times. The animations use keySplines, making them look better. Of course this is optional.

5. Apply some shine

   Gain an easy mirror-effect

   

   The use elements are done without fill-colors. The default for the "fill"-attribute is black, but they inherit a color from the containing <g> element.

   The mirror effect is achieved with another <use>-element, with different values but the same icon.

    

6. Make it usable

   We use the <handler>-element to react on user-interaction with the keyboard. For trying on opera an event-listener is also added, translating the keyCodes to appropriate values.

   Now the keyIdentifier property will be passed on to the keyDown function. We use it to define reactions on different keys, for example left and right:

   On horizontal movement the menu-position is changed, then an animation is triggered, moving the x-position of the icon to the left or to the right. All other animations, like scaling, are triggered at the same time, due to their begin values. Apart from that, the other icons will follow as well:

7. At the movies

   The user can push the center-key to choose a video. The video is now stopped, the url of that menu-element is set as the xlink:href-attribute of the video-element, and it gets restarted. Stopping the video while its not running doesn't make much sense, but it also doesn't hurt, since it has to be stopped in all other cases. To stop and start the video we use functions like these:

   This changes the attributes of the <video>-element and triggers a <set>-element, making the video start to play.

   You may also want to add some indication that the video is starting, which will be hidden by the video as soon as it has started.

   Video rotation

   Apart from turning the whole user interface around, which is done using animations, you will also want to turn the video. This can be done with a function that adds a "transformBehavior"-attribute and changes the x- and y-attributes to appropriate values. It can also be used for flipping it back. A global variable is used to save the current state of the video.

   The "rotate0" and "rotate1" animations also trigger all other animations that have a begin attribute saying "rotate0.begin" or "rotate1.begin", so they can be used to activate all animations to turn the user interface.

   Changing the volume

   The volume the video is playing at is set by the "audio-level"-attribute of the <video>-element. Initially it is set to 0.1, which means 10% of what the device it capable to do. It can be manipulated easily, in this case when pressing up/down. It turns out it is easiest to keep the volume that is set as a global variable, in a range from 0 to 100. When applied to the <video>-Element it is divided by 100.

8. Tools

   Some code is added to the file in order to make it work in Opera. uDom methods will get substitutes in case they are not available in a special context like on the desktop. Feel free to use it

   These explanations should cover the basis on how to make a little video-zapper in SVG Tiny 1.2. As more and more implementations appear, you will be able to use this on a lot of phones and on desktops. Have fun!