HTML5 Canvas. Drawing on a Web page. Laura Farinetti - DAUIN
|
|
|
- Steven Thornton
- 9 years ago
- Views:
Transcription
1 HTML5 Canvas Drawing on a Web page Laura Farinetti - DAUIN
2 Summary The canvas element Basic shapes Images Colors and gradients Pixel manipulation Animations Video and canvas 5/5/2016 HTML5 Canvas 2
3 Drawing on a Web page Possible just very recently SVG and canvas Provide native drawing functionality on the Web Completely integrated into HTML5 documents (part of DOM) Can be styled with CSS Can be controlled with JavaScript 5/5/2016 HTML5 Canvas 3
4 Canvas HTML5 element and plugin-free 2D drawing API that enables to dynamically generate and render graphics, charts, images, animation Scriptable bitmap canvas Images that are drawn are final and cannot be resized Can be manipulated with JavaScript and styled with CSS 2D Context 3D Context (Web GL) Canvas was originally introduced by Apple to be used in Mac OS 5/5/2016 HTML5 Canvas 4
5 Canvas The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript) A canvas is a rectangular area, where it is possible to control every pixel The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images The <canvas> element is only a container for graphics You must use a script to actually draw the graphics <canvas id="mycanvas" width="200" height="100"> </canvas> 5/5/2016 HTML5 Canvas 5
6 Canvas features Canvas can draw text Colorful text, with or without animation Canvas can draw graphics Great features for graphical data presentation Canvas can be animated Canvas objects can move: from simple bouncing balls to complex animations Canvas can be interactive Canvas can respond to JavaScript events Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement) HTML canvas can be used in games 5/5/2016 HTML5 Canvas 6
7 Canvas The canvas is initially blank To display something a script needs to access the rendering context and draw on it The canvas element has a DOM method called getcontext, used to obtain the rendering context and its drawing functions getcontext() takes one parameter: the type of context (2D or 3D) getcontext() is a built-in HTML object, with properties and methods for drawing (paths, boxes, circles, characters, images, and more) var canvas = document.getelementbyid('example'); var ctx = canvas.getcontext('2d'); 5/5/2016 HTML5 Canvas 7
8 Canvas Skeleton template <html> <head> <title>canvas</title> <script type="application/javascript"> function draw(){ var canvas = document.getelementbyid('example'); if (canvas.getcontext){ var ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="example" width="150" height="150"></canvas> </body> </html> 5/5/2016 HTML5 Canvas 8
9 Example: basic shape All drawing must be done in JavaScript <html> <head> <script type="application/javascript"> function draw() { var canvas=document.getelementbyid("canvas"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="200" height="100"> </canvas> </body> </html> 5/5/2016 HTML5 Canvas 9
10 Example <html> <head> <script type="application/javascript"> function draw() { var canvas=document.getelementbyid("canvas"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"> </canvas> </body> </html> 5/5/2016 HTML5 Canvas 10
11 Rectangles functions fillrect(x,y,width,height) draws a filled rectangle strokerect(x,y,width,height) draws a rectangular outline clearrect(x,y,width,height) clears the specified area and makes it fully transparent Canvas coordinate space 5/5/2016 HTML5 Canvas 11
12 Path functions beginpath(): creates a path (list of lines, arcs, ) closepath() closes the path by drawing a straight line from the current point to the start stroke() draws an outlined shape fill() paints a solid shape moveto(x,y) move the pencil to the x and y coordinates lineto(x,y) draws a straight line to the specified ending point arc(x, y, radius, startangle, endangle, anticlockwise) draws an arc using a center point (x, y), a radius, a start and end angle (in radians), and a direction flag (false for clockwise, true for counter-clockwise to convert degrees to radians: var radians = (Math.PI/180)*degrees 5/5/2016 HTML5 Canvas 12
13 Example: path function drawshape() { var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext){ // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // Draw shapes ctx.beginpath(); ctx.arc(75,75,50,0,math.pi*2,true); ctx.moveto(110,75); ctx.arc(75,75,35,0,math.pi,false); ctx.moveto(65,65); ctx.arc(60,65,5,0,math.pi*2,true); ctx.moveto(95,65); ctx.arc(90,65,5,0,math.pi*2,true); ctx.stroke(); } else {... } } 5/5/2016 HTML5 Canvas 13
14 Examples: image drawimage(image, x, y) renders an image function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new Image(); img.src = "img_flwr.png"; img.onload = function(){ ctx.drawimage(img,0,0); } } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new Image(); img.src = 'images/backdrop.png'; img.onload = function(){ ctx.drawimage(img,0,0); ctx.beginpath(); ctx.moveto(30,96); ctx.lineto(70,66); ctx.lineto(103,76); ctx.lineto(170,15); ctx.stroke(); } } 5/5/2016 HTML5 Canvas 14
15 Images Images can be scaled drawimage(image, x, y, width, height) and sliced drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) 5/5/2016 HTML5 Canvas 15
16 Example function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new Image(); img.src = 'images/rhino.jpg'; img.onload = function(){ for (i=0;i<4;i++) { for (j=0;j<3;j++) { ctx.drawimage(img,j*50,i*38,50,38); } } } } 5/5/2016 HTML5 Canvas 16
17 Example function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.drawimage(document.getelementbyid('source'), 33,71,104,124,21,20,87,104); ctx.drawimage(document.getelementbyid('frame'),0,0); } 5/5/2016 HTML5 Canvas 17
18 Example: colors and interaction <body> <canvas id="drawing" style="" > </canvas> <p>click on the buttons below to change the color of the rectangle. </p> <input type="button" value="blue" id="blue" onclick="bluerect()" /> <input type="button" value="green" id="green" onclick="greenrect()" /> <input type="button" value="yellow" id="yellow" onclick="yellrect()" /> <input type="button" value="red" id="red" onclick="redrect()" /> <input type="button" value="click to clear canvas" id="clear" onclick="imgclr()" /> </body> 5/5/2016 HTML5 Canvas 18
19 Example: colors and interaction <script type="text/javascript"> var canvas=null; var context=null; window.onload = function() { canvas=document.getelementbyid("drawing"); context=canvas.getcontext("2d"); // Border context.beginpath(); //This initiates the border context.rect(100,60,175,70); context.fillstyle="#ffffff"; context.fill(); // Border width context.linewidth=1; //This sets the width of the border // Border color context.strokestyle="#000000"; context.stroke(); } function BlueRect () { context.fillstyle="#701be0"; // Changes the rectangle to blue context.fill(); context.strokestyle="#000000"; context.stroke(); } function GreenRect () {... } function ImgClr () { context.clearrect(0,0, canvas.width, canvas.height); } </script> 5/5/2016 HTML5 Canvas 19
20 Gradients createlineargradient(x1,y1,x2,y2) starting point (x1,y1) and end point (x2,y2) of the gradient createradialgradient(x1,y1,r1,x2,y2,r2) starting circle (x1,y1, r1) and end circle (x2,y2, r2) addcolorstop(position,color) position: a number between 0.0 and 1.0 that defines the relative position of the color in the gradient color: string var lineargradient = ctx.createlineargradient(0,0,150,150); lineargradient.addcolorstop(0,'red'); lineargradient.addcolorstop(1,'green'); 5/5/2016 HTML5 Canvas 20
21 Example: linear gradients function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // Create gradient var lingrad = ctx.createlineargradient(0,0,0,150); lingrad.addcolorstop(0, '#00ABEB'); lingrad.addcolorstop(0.5, '#fff'); lingrad.addcolorstop(0.5, '#66CC00'); lingrad.addcolorstop(1, '#fff'); // assign gradients to fill style ctx.fillstyle = lingrad; // draw shape ctx.fillrect(10,10,130,130); } 5/5/2016 HTML5 Canvas 21
22 Example 14 Radial gradients function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // Create gradients var radgrad = ctx.createradialgradient(45,45,10,52,50,30); radgrad.addcolorstop(0, '#A7D30C'); radgrad.addcolorstop(0.9, '#019F62'); radgrad.addcolorstop(1, 'rgba(1,159,98,0)'); var radgrad2 = ctx.createradialgradient(105,105,20,112,120,50); radgrad2.addcolorstop(0, '#FF5F98'); radgrad2.addcolorstop(0.75, '#FF0188'); radgrad2.addcolorstop(1, 'rgba(255,1,136,0)');... 5/5/2016 HTML5 Canvas 22
23 Example: radial gradients function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // Create gradients var radgrad = ctx.createradialgradient(45,45,10,52,50,30); radgrad.addcolorstop(0, '#A7D30C'); radgrad.addcolorstop(0.9, '#019F62'); radgrad.addcolorstop(1, 'rgba(1,159,98,0)'); var radgrad2 = ctx.createradialgradient(105,105,20,112,120,50); radgrad2.addcolorstop(0, '#FF5F98'); radgrad2.addcolorstop(0.75, '#FF0188'); radgrad2.addcolorstop(1, 'rgba(255,1,136,0)'); var radgrad3 = ctx.createradialgradient(95,15,15,102,20,40); radgrad3.addcolorstop(0, '#00C9FF'); radgrad3.addcolorstop(0.8, '#00B5E2'); radgrad3.addcolorstop(1, 'rgba(0,201,255,0)'); var radgrad4 = ctx.createradialgradient(0,150,50,0,140,90); radgrad4.addcolorstop(0, '#F4F201'); radgrad4.addcolorstop(0.8, '#E4C700'); radgrad4.addcolorstop(1, 'rgba(228,199,0,0)'); // draw shapes ctx.fillstyle = radgrad4; ctx.fillrect(0,0,150,150); ctx.fillstyle = radgrad3; ctx.fillrect(0,0,150,150); ctx.fillstyle = radgrad2; ctx.fillrect(0,0,150,150); ctx.fillstyle = radgrad; ctx.fillrect(0,0,150,150); } 5/5/2016 HTML5 Canvas 23
24 Example: save and restore Canvas states can be stored on a stack Methods save() and restore() function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0,0,150,150); // default settings ctx.save(); // Save the default state ctx.fillstyle = '#09F' // Make changes to the settings ctx.fillrect(15,15,120,120); // Draw with new settings ctx.save(); // Save the current state ctx.fillstyle = '#FFF' // Make changes to the settings ctx.globalalpha = 0.5; ctx.fillrect(30,30,90,90); // Draw with new settings ctx.restore(); // Restore previous state ctx.fillrect(45,45,60,60); // Draw with restored settings ctx.restore(); // Restore original state ctx.fillrect(60,60,30,30); // Draw with restored settings } 5/5/2016 HTML5 Canvas 24
25 Example: trasformations translate(x,y) rotate(angle) scale(x,y) transform(m11,m12,m21,m22,dx,dy) function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.translate(75,75); for (i=1;i<6;i++){ ctx.save(); ctx.fillstyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; for (j=0;j<i*6;j++){ ctx.rotate(math.pi*2/(i*6)); ctx.beginpath(); ctx.arc(0,i*12.5,5,0,math.pi*2,true); ctx.fill(); } ctx.restore(); } } 5/5/2016 HTML5 Canvas 25
26 Compositing globalcompositeoperation = type source-over (default) draws new shapes on top of the existing canvas content destination-over new shapes are drawn behind the existing canvas content source-in the new shape is drawn only where both the new shape and the destination canvas overlap; everything else is transparent destination-in the existing canvas content is kept where both the new shape and existing canvas content overlap; everything else is transparent 5/5/2016 HTML5 Canvas 26
27 Compositing globalcompositeoperation = type source-out the new shape is drawn where it doesn't overlap the existing canvas content destination-out the existing content is kept where it doesn't overlap the new shape source-atop the new shape is only drawn where it overlaps the existing canvas content destination-atop the existing canvas is only kept where it overlaps the new shape; the new shape is drawn behind the canvas content 5/5/2016 HTML5 Canvas 27
28 Compositing globalcompositeoperation = type lighter where both shapes overlap the color is determined by adding color values darker (unimplemented) where both shapes overlap the color is determined by subtracting color values xor shapes are made transparent where both overlap and drawn normal everywhere else copy only draws the new shape and removes everything else 5/5/2016 HTML5 Canvas 28
29 Example: clipping path function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d');... // Create a circular clipping path ctx.beginpath(); ctx.arc(0,0,60,0,math.pi*2,true); ctx.clip();... 5/5/2016 HTML5 Canvas 29
30 Canvas pixel manipulation It is possible to access the individual pixels of a canvas, by using the ImageData object The ImageData object has three properties: width, height and data The width and height properties contain the width and height of the graphical data area The data property is a byte array containing the pixel values The 2D context API provides three methods to draw pixel-by-pixel createimagedata() getimagedata() putimagedata() 5/5/2016 HTML5 Canvas 30
31 Pixel manipulation Example: create a 100 x 100 pixels ImageData object var canvas = document.getelementbyid("ex1"); var context = canvas.getcontext("2d"); var width = 100; var height = 100; var imagedata = context.createimagedata(width, height); Each pixel in the data array consists of 4 bytes values: one value for the red color, green color and blue color, and a value for the alpha channel Each of the red, green, blue and alpha values can take values between 0 and 255 Example: sets the color and alpha values of the first pixel var pixelindex = 0; imagedata.data[pixelindex ] = 255; // red color imagedata.data[pixelindex + 1] = 0; // green color imagedata.data[pixelindex + 2] = 0; // blue color imagedata.data[pixelindex + 3] = 255; // alpha 5/5/2016 HTML5 Canvas 31
32 Pixel manipulation Once you have finished manipulating the pixels, you can copy them onto the canvas using the function putimagedata() var canvasx = 25; var canvasy = 25; context.putimagedata(imagedata, canvasx, canvasy); It is also possible to grab a rectangle of pixels from a canvas into an ImageData object, by using the getimagedata() function x and y: coordinates of the upper left corner of the rectangle to grab from the canvas width and height: width and height of the rectangle to grab from the canvas var x = 25; var y = 25; var width = 100; var height = 100; var imagedata2 = context.getimagedata(x, y, width, height); 5/5/2016 HTML5 Canvas 32
33 Example: pixel manipulation function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var imgd = false; var w = 50, var h = 50, x = 0, y = 0; } imgd = ctx.createimagedata(w, h); var pix = imgd.data; // Loop over each pixel for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255; // the red channel pix[i+3] = 127; // the alpha channel } // Draw the ImageData object. ctx.putimagedata(imgd, x, y); 5/5/2016 HTML5 Canvas 33
34 Example: pixel manipulation function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var x = 0, y = 0; // Create a new image var img = new Image(); img.src = 'tree.jpg'; // Draw the image on canvas img.onload = function(){ ctx.drawimage(img,0,0); // Get the pixels var imgd = ctx.getimagedata(x, y, this.width, this.height); var pix = imgd.data; // Loop over each pixel and invert the color. for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = pix[i ]; // red pix[i+1] = pix[i+1]; // green pix[i+2] = pix[i+2]; // blue // i+3 is alpha (the fourth element) } // Draw the ImageData object ctx.putimagedata(imgd, x, y); } } 5/5/2016 HTML5 Canvas 34
35 Animations Since scripts can control canvas elements, it s easy to make animations Unfortunately there are limitations: once a shape gets drawn it stays that way To move it we have to redraw it and everything that was drawn before it It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it s running on 5/5/2016 HTML5 Canvas 35
36 Basic animation steps Clear the canvas Unless the shapes you ll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously The easiest way to do this is using the clearrect method Save the canvas state If you re changing any setting (styles, transformations, etc) which affect the canvas state and want to make sure the original state is used each time a frame is drawn, you need to save it Draw animated shapes The step where you do the actual frame rendering Restore the canvas state If you ve saved the state, restore it before drawing a new frame 5/5/2016 HTML5 Canvas 36
37 Controlling animations Two ways Execute the drawing functions over a period of time // execute every 500 milliseconds setinterval(animateshape,500); // execute once after 500 milliseconds settimeout(animateshape,500); User input: by setting eventlisteners to catch user interaction Examples 5/5/2016 HTML5 Canvas 37
38 Example: video and canvas 5/5/2016 HTML5 Canvas 38
39 Example: video timeline viewer Autoplay attribute: the video starts as soon as the page loads Two additional event handler functions, oncanplay (when the video is loaded and ready to begin play) and onended (when the video ends) <video id="movies" autoplay oncanplay="startvideo()" onended="stoptimeline()" autobuffer="true" width="400px" height="300px"> <source src="intermission-walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="intermission-walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"'> </video> Canvas called timeline into which we will draw frames of video at regular intervals <canvas id="timeline" width="400px" height="300px"> 5/5/2016 HTML5 Canvas 39
40 Example: video timeline viewer Variables declaration // # of milliseconds between timeline frame updates (5sec) var updateinterval = 5000; // size of the timeline frames var framewidth = 100; var frameheight = 75; // number of timeline frames var framerows = 4; var framecolumns = 4; var framegrid = framerows * framecolumns; // current frame var framecount = 0; // to cancel the timer at end of play var intervalid; var videostarted = false; 5/5/2016 HTML5 Canvas 40
41 Example: video timeline viewer Function updateframe: grabs a video frame and draws it onto the canvas // paints a representation of the video frame into canvas function updateframe() { var video = document.getelementbyid("movies"); var timeline = document.getelementbyid("timeline"); var ctx = timeline.getcontext("2d"); // calculate out the current position based on frame // count, then draw the image there using the video // as a source var frameposition = framecount % framegrid; var framex = (frameposition % framecolumns) * framewidth; var framey = (Math.floor(framePosition / framerows)) * frameheight; ctx.drawimage(video, 0, 0, 400, 300, framex, framey, framewidth, frameheight); framecount++; } 5/5/2016 HTML5 Canvas 41
42 Example: video timeline viewer framecount = 25 frameposition = 25 % 16 = 9 framex = (9 % 4) * 100 = 100 framey = (Math.floor(9 / 4)) * 75 = 150 ctx.drawimage(video, 0, 0, 400, 300, 100, 150, 100, 75) 5/5/2016 HTML5 Canvas 42
43 Canvas: drawimage cxt.drawimage(image, dx, dy) cxt.drawimage(image, dx, dy, dw, dh) cxt.drawimage(image, sx, sy, sw, sh, dx, dy, dw, dh) The first argument can be an image, a canvas or a video element When a canvas uses a video as an input source, it draws only the currently displayed video frame Canvas displays will not dynamically update as the video plays If you want the canvas content to update, you must redraw your images as the video is playing 5/5/2016 HTML5 Canvas 43
44 Example: video timeline viewer Function startvideo: updates the timeline frames regularly The startvideo() function is triggered as soon as the video has loaded enough to begin playing function startvideo() { // only set up the timer the first time the video starts if (videostarted) return; videostarted = true; // calculate an initial frame, then create // additional frames on a regular timer updateframe(); intervalid = setinterval(updateframe, updateinterval);... setinterval: calls a function repeatedly, with a fixed time delay between each call to that function var intervalid = window.setinterval(func, delay); 5/5/2016 HTML5 Canvas 44
45 Example: video timeline viewer Function startvideo: handles user clicks on the individual timeline frames // set up a handler to seek the video when a frame // is clicked var timeline = document.getelementbyid("timeline"); timeline.onclick = function(evt) { var offx = evt.layerx - timeline.offsetleft; var offy = evt.layery - timeline.offsettop; offsetleft: returns the number of pixels that the upper left corner of the current element is offset to the left within the parent node offsettop: returns the distance of the current element relative to the top of the parent node layerx: returns the horizontal coordinate of the event relative to the current layer layery: returns the vertical coordinate of the event relative to the current layer 5/5/2016 HTML5 Canvas 45
46 Example: video timeline viewer // calculate which frame in the grid was clicked // from a zero-based index var clickedframe = Math.floor(offY/frameHeight)* framerows; clickedframe += Math.floor(offX/frameWidth); // find the actual frame since the video started var seekedframe = (((Math.floor(frameCount/frameGrid))* framegrid) + clickedframe); The clicked frame should be only one of the most recent video frames, so seekedframe determines the most recent frame that corresponds to that grid index 5/5/2016 HTML5 Canvas 46
47 Example: video timeline viewer offx= 120 offy= 60 clickedframe = Math.floor(60/75)* 4 = 0 clickedframe += Math.floor(120/100)= 1 seekedframe = (((Math.floor(25/16))* 16) + 1 = 17 5/5/2016 HTML5 Canvas 47
48 Example: video timeline viewer Function startvideo: handles user clicks on the individual timeline frames } } // if the user clicked ahead of the current frame // then assume it was the last round of frames if (clickedframe > (framecount%16)) seekedframe -= framegrid; // can't seek before the video if (seekedframe < 0) return; // seek the video to that frame (in seconds) var video = document.getelementbyid("movies"); video.currenttime = seekedframe * updateinterval / 1000; // then set the frame count to our destination framecount = seekedframe; 5/5/2016 HTML5 Canvas 48
49 Example: video timeline viewer Function stoptimeline: stops capturing frames when the video finishes playing The stoptimeline handler is be called when the onended video handler is triggered, i.e. by the completion of video playback. // stop gathering the timeline frames function stoptimeline() { clearinterval(intervalid); } clearinterval: cancels repeated action which was set up using setinterval() 5/5/2016 HTML5 Canvas 49
50 License This work is licensed under the Creative Commons Attribution- NonCommercial-ShareAlike Unported (CC BY-NC-SA 3,0) License. You are free: to Share - to copy, distribute and transmit the work to Remix - to adapt the work Under the following conditions: Attribution - You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). Noncommercial - You may not use this work for commercial purposes. Share Alike - If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one. To view a copy of this license, visit 5/5/2016 HTML5 Canvas 50
Basics of HTML Canvas. Material taken from http://www.w3schools.com CSCU9B2
Basics of HTML Canvas Material taken from http://www.w3schools.com CSCU9B2 CSCU9B2 1 We are going to cover What is HTML canvas and what it can do Most commonly used canvas methods Example of a simple animated
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2
Dashboard Skin Tutorial For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard engine overview Dashboard menu Skin file structure config.json Available telemetry properties dashboard.html dashboard.css Telemetry
How to rotoscope in Adobe After Effects
Adobe After Effects CS6 Project 6 guide How to rotoscope in Adobe After Effects Rotoscoping is an animation technique in which you draw, paint, or add other visual effects in a layer over live-action film
Logo Design Studio Pro Guide
Logo Design Studio Pro Guide This guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used
Overview of the Adobe Flash Professional CS6 workspace
Overview of the Adobe Flash Professional CS6 workspace In this guide, you learn how to do the following: Identify the elements of the Adobe Flash Professional CS6 workspace Customize the layout of the
Working With Animation: Introduction to Flash
Working With Animation: Introduction to Flash With Adobe Flash, you can create artwork and animations that add motion and visual interest to your Web pages. Flash movies can be interactive users can click
Yandex.Widgets Quick start
17.09.2013 .. Version 2 Document build date: 17.09.2013. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2013 Yandex LLC. All rights reserved.
PowerPoint 2007 Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ PowerPoint is the presentation program included in the Microsoft Office suite. With PowerPoint, you can create engaging presentations that can be presented in person, online,
Recipes4Success. Animate a Rocket Ship. Frames 6 - Drawing Tools
Recipes4Success You can use the drawing tools and path animation tools in Frames to create illustrated cartoons. In this Recipe, you will draw and animate a rocket ship. 2014. All Rights Reserved. This
BCC Multi Stripe Wipe
BCC Multi Stripe Wipe The BCC Multi Stripe Wipe is a similar to a Horizontal or Vertical Blind wipe. It offers extensive controls to randomize the stripes parameters. The following example shows a Multi
JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript
Epson Brightlink Interactive Board and Pen Training. Step One: Install the Brightlink Easy Interactive Driver
California State University, Fullerton Campus Information Technology Division Documentation and Training Services Handout Epson Brightlink Interactive Board and Pen Training Downloading Brightlink Drivers
Graphic Design Studio Guide
Graphic Design Studio Guide This guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used
Using Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene.
Graphic Design Active Layer- When you create multi layers for your images the active layer, or the only one that will be affected by your actions, is the one with a blue background in your layers palette.
Wincopy Screen Capture
Wincopy Screen Capture Version 4.0 User Guide March 26, 2008 Please visit www.informatik.com for the latest version of the software. Table of Contents General...3 Capture...3 Capture a Rectangle...3 Capture
Smart Board Notebook Software A guide for new Smart Board users
Smart Board Notebook Software A guide for new Smart Board users This guide will address the following tasks in Notebook: 1. Adding shapes, text, and pictures. 2. Searching the Gallery. 3. Arranging objects
ACE: Illustrator CC Exam Guide
Adobe Training Services Exam Guide ACE: Illustrator CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation
Copyright 2006 TechSmith Corporation. All Rights Reserved.
TechSmith Corporation provides this manual as is, makes no representations or warranties with respect to its contents or use, and specifically disclaims any expressed or implied warranties or merchantability
SMART NOTEBOOK 10. Instructional Technology Enhancing ACHievement
SMART NOTEBOOK 10 Instructional Technology Enhancing ACHievement TABLE OF CONTENTS SMART Notebook 10 Themes... 3 Page Groups... 4 Magic Pen... 5 Shape Pen... 6 Tables... 7 Object Animation... 8 Aligning
Mail Programming Topics
Mail Programming Topics Contents Introduction 4 Organization of This Document 4 Creating Mail Stationery Bundles 5 Stationery Bundles 5 Description Property List 5 HTML File 6 Images 8 Composite Images
SketchUp Instructions
SketchUp Instructions Every architect needs to know how to use SketchUp! SketchUp is free from Google just Google it and download to your computer. You can do just about anything with it, but it is especially
Fireworks CS4 Tutorial Part 1: Intro
Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the
Using Image J to Measure the Brightness of Stars (Written by Do H. Kim)
Using Image J to Measure the Brightness of Stars (Written by Do H. Kim) What is Image J? Image J is Java-based image processing program developed at the National Institutes of Health. Image J runs on everywhere,
Firefox, Opera, Safari for Windows BMP file handling information leak. September 2008. Discovered by: Mateusz j00ru Jurczyk, Hispasec Labs
Firefox, Opera, Safari for Windows BMP file handling information leak September 2008 Discovered by: Mateusz j00ru Jurczyk, Hispasec Labs 1. Introduction The bitmap format implementations in Mozilla Firefox
MASKS & CHANNELS WORKING WITH MASKS AND CHANNELS
MASKS & CHANNELS WORKING WITH MASKS AND CHANNELS Masks let you isolate and protect parts of an image. When you create a mask from a selection, the area not selected is masked or protected from editing.
Formulas, Functions and Charts
Formulas, Functions and Charts :: 167 8 Formulas, Functions and Charts 8.1 INTRODUCTION In this leson you can enter formula and functions and perform mathematical calcualtions. You will also be able to
Using HTML5 Pack for ADOBE ILLUSTRATOR CS5
Using HTML5 Pack for ADOBE ILLUSTRATOR CS5 ii Contents Chapter 1: Parameterized SVG.....................................................................................................1 Multi-screen SVG.......................................................................................................4
The following is an overview of lessons included in the tutorial.
Chapter 2 Tutorial Tutorial Introduction This tutorial is designed to introduce you to some of Surfer's basic features. After you have completed the tutorial, you should be able to begin creating your
Fireworks 3 Animation and Rollovers
Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos
Sizmek Formats. Collage. Build Guide
Formats Collage Build Guide Table Of Contents Overview... 3 Supported Platforms... 3 Specifications... 3 Known Issues... 3 Ad Behavior Screenshots... 4 Template Included Files... 8 Setting up in Workshop...
ClarisWorks 5.0. Graphics
ClarisWorks 5.0 Graphics Level 1 Training Guide DRAFT Instructional Technology Page 1 Table of Contents Objectives... Page 3 Course Description and Organization... Page 4 Technology Requirements... Page
Open icon. The Select Layer To Add dialog opens. Click here to display
Mosaic Introduction This tour guide gives you the steps for mosaicking two or more image files to produce one image file. The mosaicking process works with rectified and/or calibrated images. Here, you
How to build text and objects in the Titler
How to build text and objects in the Titler You can use the Titler in Adobe Premiere Pro to create text and geometric objects. There are three methods for creating text, each capable of producing either
Creating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
2012 Ward s Natural Science
2012 Ward s Natural Science Contents Recommended System Requirements...3 Additional Assistance...3 QUICK START GUIDE Installation Instructions...4 How It Works...5 Your First View...6 Navigating the Library...7
CREATE A 3D MOVIE IN DIRECTOR
CREATE A 3D MOVIE IN DIRECTOR 2 Building Your First 3D Movie in Director Welcome to the 3D tutorial for Adobe Director. Director includes the option to create three-dimensional (3D) images, text, and animations.
TUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
DinoXcope User Manual
DinoXcope User Manual Contents 1 System Requirements 1 Installation 2 Adding a time stamp to the live view 3 Capturing an image 4 Creating a real time movie 5 Creating a time-lapse movie 6 Drawing on an
ACE: After Effects CC
Adobe Training Services Exam Guide ACE: After Effects CC Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation as
ART 170: Web Design 1
Banner Design Project Overview & Objectives Everyone will design a banner for a veterinary clinic. Objective Summary of the Project General objectives for the project in its entirety are: Design a banner
TABLE OF CONTENTS SURUDESIGNER YEARBOOK TUTORIAL. IMPORTANT: How to search this Tutorial for the exact topic you need.
SURUDESIGNER YEARBOOK TUTORIAL TABLE OF CONTENTS INTRODUCTION Download, Layout, Getting Started... p. 1-5 COVER/FRONT PAGE Text, Text Editing, Adding Images, Background... p. 6-11 CLASS PAGE Layout, Photo
Modern PHP Graphics with Cairo. Michael Maclean FrOSCon 2011
Modern PHP Graphics with Cairo Michael Maclean FrOSCon 2011 Who am I? PHP developer for a number of years Working on some PECL extensions Mainly graphics extensions What is Cairo? It's a vector graphics
TRIGONOMETRY FOR ANIMATION
TRIGONOMETRY FOR ANIMATION What is Trigonometry? Trigonometry is basically the study of triangles and the relationship of their sides and angles. For example, if you take any triangle and make one of the
Creating Posters in Excel (2007 & 2010)
Creating Posters in Excel (2007 & 2010) Although it would be nice to have a poster printer in each of our homes and work areas, having such a tool is unfortunately not something that will become a reality
Microsoft Excel 2010 Charts and Graphs
Microsoft Excel 2010 Charts and Graphs Email: [email protected] Web Page: http://training.health.ufl.edu Microsoft Excel 2010: Charts and Graphs 2.0 hours Topics include data groupings; creating
Website Login Integration
SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2
IE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
3D Viewer. user's manual 10017352_2
EN 3D Viewer user's manual 10017352_2 TABLE OF CONTENTS 1 SYSTEM REQUIREMENTS...1 2 STARTING PLANMECA 3D VIEWER...2 3 PLANMECA 3D VIEWER INTRODUCTION...3 3.1 Menu Toolbar... 4 4 EXPLORER...6 4.1 3D Volume
Done. Click Done to close the Capture Preview window.
The Capture Preview window allows you to preview, edit, and customize a screen capture before it is saved to a file, inserted into your document, attached to an e-mail, or sent to a variety of other Output
How to Create a Fun Circus Tent Icon. Final Image Preview. Tutorial Details. Step 1. By: Andrei Marius
How to Create a Fun Circus Tent Icon By: Andrei Marius Roll up, roll up! In the following tutorial you will learn how to create a simple circus tent icon. You may discover some interesting things about
Figure 3.5: Exporting SWF Files
Li kewhatyou see? Buyt hebookat t hefocalbookst or e Fl ash + Af t eref f ect s Chr i sjackson ISBN 9780240810317 Flash Video (FLV) contains only rasterized images, not vector art. FLV files can be output
Visualization: Combo Chart - Google Chart Tools - Google Code
Page 1 of 8 Google Chart Tools Home Docs FAQ Forum Terms Visualization: Combo Chart Overview Example Loading Data Format Configuration Options Methods Events Data Policy Overview A chart that lets you
Visualizing an OrientDB Graph Database with KeyLines
Visualizing an OrientDB Graph Database with KeyLines Visualizing an OrientDB Graph Database with KeyLines 1! Introduction 2! What is a graph database? 2! What is OrientDB? 2! Why visualize OrientDB? 3!
PLAYER DEVELOPER GUIDE
PLAYER DEVELOPER GUIDE CONTENTS CREATING AND BRANDING A PLAYER IN BACKLOT 5 Player Platform and Browser Support 5 How Player Works 6 Setting up Players Using the Backlot API 6 Creating a Player Using the
Scripting in Unity3D (vers. 4.2)
AD41700 Computer Games Prof. Fabian Winkler Fall 2013 Scripting in Unity3D (vers. 4.2) The most basic concepts of scripting in Unity 3D are very well explained in Unity s Using Scripts tutorial: http://docs.unity3d.com/documentation/manual/scripting42.html
Lession: 2 Animation Tool: Synfig Card or Page based Icon and Event based Time based Pencil: Synfig Studio: Getting Started: Toolbox Canvas Panels
Lession: 2 Animation Tool: Synfig In previous chapter we learn Multimedia and basic building block of multimedia. To create a multimedia presentation using these building blocks we need application programs
What You ll Build. CHAPTER 3 MoleMash
CHAPTER 3 MoleMash This chapter shows you how to create MoleMash, a game inspired by the arcade classic Whac-A-Mole, in which mechanical critters pop out of holes, and players score points when they successfully
MovieClip, Button, Graphic, Motion Tween, Classic Motion Tween, Shape Tween, Motion Guide, Masking, Bone Tool, 3D Tool
1 CEIT 323 Lab Worksheet 1 MovieClip, Button, Graphic, Motion Tween, Classic Motion Tween, Shape Tween, Motion Guide, Masking, Bone Tool, 3D Tool Classic Motion Tween Classic tweens are an older way of
Script Handbook for Interactive Scientific Website Building
Script Handbook for Interactive Scientific Website Building Version: 173205 Released: March 25, 2014 Chung-Lin Shan Contents 1 Basic Structures 1 11 Preparation 2 12 form 4 13 switch for the further step
What s New in QuarkXPress 8
What s New in QuarkXPress 8 LEGAL NOTICES 2008 Quark Inc. as to the content and arrangement of this material. All rights reserved. 1986 2008 Quark Inc. and its licensors as to the technology. All rights
Sharing Presentations, Documents, and Whiteboards
Chapter 19 19 Sharing Presentations, Documents, and Whiteboards Your user role in an event determines your level of sharing. Whichever role you take, the following table describes the basic tasks associated
Layout Tutorial. Chapter 10: Getting Started
Chapter 10: Layout Tutorial In this tutorial we will create a layout template, send a few views to a layout page, then save this document in PDF format. In this tutorial you will learn about: Creating
Creating a Flash.swf animation
GRC 119 Assignment 5 Creating a Flash.swf animation 1. How to get started in Flash 2. Creating layers and adding content 3. Tweening or animating between two keyframes 4. How to import multiple images
How to resize, rotate, and crop images
How to resize, rotate, and crop images You will frequently want to resize and crop an image after opening it in Photoshop from a digital camera or scanner. Cropping means cutting some parts of the image
Graphic Design Basics Tutorial
Graphic Design Basics Tutorial This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You ll get hands-on experience using the industry s leading
User Guide. idraw for Mac OS X v2.5.1
User Guide idraw for Mac OS X v2.5.1 1 Welcome to idraw 6 Vector Illustration 6 Getting Started 8 Creating a New Document 8 Interface Overview 10 Document Tabs 11 Switching Between Documents 11 Closing
Embroidery Fonts Plus ( EFP ) Tutorial Guide Version 1.0505
Embroidery Fonts Plus ( EFP ) Tutorial Guide Version 1.0505 1 Contents Chapter 1 System Requirements.................. 3 Chapter 2 Quick Start Installation.................. 4 System Requirements................
Creating Animated Apps
Chapter 17 Creating Animated Apps This chapter discusses methods for creating apps with simple animations objects that move. You ll learn the basics of creating two-dimensional games with App Inventor
jquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
Using Text & Graphics with Softron s OnTheAir CG and OnTheAir Video
OnTheAir CG (OTACG) and OnTheAir Video Express (OTAVE) are two very different Softron products that are used to overlay text and graphics onto a live video source. Elements as diverse as still logos, clocks,
Flash MX Image Animation
Flash MX Image Animation Introduction (Preparing the Stage) Movie Property Definitions: Go to the Properties panel at the bottom of the window to choose the frame rate, width, height, and background color
Basic AutoSketch Manual
Basic AutoSketch Manual Instruction for students Skf-Manual.doc of 3 Contents BASIC AUTOSKETCH MANUAL... INSTRUCTION FOR STUDENTS... BASIC AUTOSKETCH INSTRUCTION... 3 SCREEN LAYOUT... 3 MENU BAR... 3 FILE
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
A Guide to Microsoft Paint (Windows XP)
A Guide to Microsoft Paint (Windows XP) Introduction Microsoft Paint allows you to produce your own pictures (or edit existing ones). In Windows XP, you can no longer access Paint directly from the Microsoft
Tutorial for Tracker and Supporting Software By David Chandler
Tutorial for Tracker and Supporting Software By David Chandler I use a number of free, open source programs to do video analysis. 1. Avidemux, to exerpt the video clip, read the video properties, and save
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
DIA Creating Charts and Diagrams
DIA Creating Charts and Diagrams Dia is a vector-based drawing tool similar to Win32 OS Visio. It is suitable for graphical languages such as dataflow diagrams, entity-relationship diagrams, organization
CORSAIR GAMING KEYBOARD SOFTWARE USER MANUAL
CORSAIR GAMING KEYBOARD SOFTWARE USER MANUAL TABLE OF CONTENTS CORSAIR UTILITY ENGINE OVERVIEW PROFILES 1 9 Introduction 2 Starting the Corsair Utility Engine 2 Profiles: Settings for a Specific Program
c. Write a JavaScript statement to print out as an alert box the value of the third Radio button (whether or not selected) in the second form.
Practice Problems: These problems are intended to clarify some of the basic concepts related to access to some of the form controls. In the process you should enter the problems in the computer and run
Mobile App Tutorial Animation with Custom View Class and Animated Object Bouncing and Frame Based Animation
Mobile App Tutorial Animation with Custom View Class and Animated Object Bouncing and Frame Based Animation Description of View Based Animation and Control-Model-View Design process In mobile device programming,
m ac romed ia Fl a s h Curriculum Guide
m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks
THINKDIGITAL. ZOO Ad specifications
THINKDIGITAL ZOO Ad specifications Last update: 30/08/2012 Contents ZOO: Advertising Opportunities... 3 Large Rectangle 300x250... 3 Leaderboard 728x90... 4 Skyscraper 120x600... 5 Newsletter 520x210...
Layout Tutorial. Chapter 10: Getting Started
Chapter 10: Layout Tutorial In this tutorial we will create a layout template, send a few views to a layout page, then save this document in PDF format. In this tutorial you will learn about: Creating
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Course Project Lab 3 - Creating a Logo (Illustrator)
Course Project Lab 3 - Creating a Logo (Illustrator) In this lab you will learn to use Adobe Illustrator to create a vector-based design logo. 1. Start Illustrator. Open the lizard.ai file via the File>Open
GRC 119 Assignment 7 Create a Flash Animation Banner Ad
GRC 119 Assignment 7 Create a Flash Animation Banner Ad 1. Brainstorm your Ad Concept and identify the 5 components 2. Storyboard your ad concept 3. Develop the visual components 4. Develop banner ad web
JavaScript Basics & HTML DOM. Sang Shin Java Technology Architect Sun Microsystems, Inc. [email protected] www.javapassion.com
JavaScript Basics & HTML DOM Sang Shin Java Technology Architect Sun Microsystems, Inc. [email protected] www.javapassion.com 2 Disclaimer & Acknowledgments Even though Sang Shin is a full-time employee
JISIS and Web Technologies
27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
Plotting: Customizing the Graph
Plotting: Customizing the Graph Data Plots: General Tips Making a Data Plot Active Within a graph layer, only one data plot can be active. A data plot must be set active before you can use the Data Selector
Torchmate CAD User s Guide
Torchmate CAD User s Guide Revised May 2011 Table of Contents: Overview of the Manual Installation and Setup Important Configuration Changes Overview of Menus Navigation and Selection Methods Basic CAD
MASTERTAG DEVELOPER GUIDE
MASTERTAG DEVELOPER GUIDE TABLE OF CONTENTS 1 Introduction... 4 1.1 What is the zanox MasterTag?... 4 1.2 What is the zanox page type?... 4 2 Create a MasterTag application in the zanox Application Store...
CSS Techniques: Scrolling gradient over a fixed background
This is a little hard to describe, so view the example and be sure to scroll to the bottom of the page. The background is a gradient that fades into a simple graphic. As you scroll down the page, the graphic