Add previous screencast transcripts

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1545 eee81c28-f429-11dd-99c0-75d572ba1ddd

screencasts/svgedit-screencast-1.txt

@@ -0,0 +1,27 @@
+Hello, my name is Jeff Schiller and I'll be giving you a brief introduction to SVG-edit.  In this video, I'll describe what SVG-edit is, what it can do and I'll demonstrate some of its features.
+
+SVG-edit is a new, open-source, lightweight vector graphics editor similar in nature to Adobe Illustrator or Inkscape.  But what's exciting about SVG-edit is that it runs directly in the browser and is powered only by open web technologies such as HTML, CSS, JavaScript and SVG.  SVG-edit runs in any modern browser including Firefox, Opera, Safari and Chrome.
+
+So here is SVG-edit.  What we're looking at is a small collection of tools, a color palette at the bottom and a white canvas on which you can draw your masterpiece.  We'll see that drawing simple shapes is as simple as clicking the tool you want, I'll choose a simple rectangle here, and then dragging and lifting on the canvas.
+
+We can draw many types of shapes: rectangles, circles [draw one large one for sun], ellipses [draw two small ones], lines [draw three for sun radiation], or even freehand drawing [draw a smile].
+
+If we want to move the elements around, we click on the Select Tool and then drag the element to the correct position.  We can click to select one shape or we can drag on the canvas to select multiple shapes.  We can use the resizing grips to change the size of the element to our hearts content.  [arrange sun, beams, eyes, rectangle floor, and text]
+
+If we want to change the interior color of a particular shape, we first select the shape using the Select Tool, and then either click on a palette box or we can click on the Fill Paint box and choose the color we want from the standard picker.  We can also set the opacity or alpha of the paint.
+
+Changing the border color of the shape can be done in a similar manner by using the color picker for the Stroke.  We can also shift-click on the palette to change the stroke color or to clear the Stroke color.  We can also change the thickness of the stroke or the dash-style of the stroke using controls near the bottom of the window.
+
+A simple Text tool is also included [set stroke to None, set fill to Red, then create a text element that says "Vector Graphics are powerful"]
+
+I'd like to talk a bit about the tool panel near the top of the window.  Apart from some standard buttons on the left, which I'll go over in a minute, the rest of the panel is dedicated to context-sensitive tools.  This means that you only see controls on this toolbar for the tool and element you have selected.  For instance, when I select a Text element, I see controls to change the text contents, font family, font size and whether the text should be bold or italic.  If I select a rectangle, I see controls to change the rectangle's position, size and whether the rectangle should have rounded corners.
+
+You may have noticed that some buttons were available in both cases.  These controls manipulate the selected element.  For instance, you can delete an element or move it to the top of the stack.
+
+The final thing I'd like to talk about is the controls on the left.  These controls are always present.  There are the standard Undo/Redo buttons.  And there are the standard New Document or Save Document buttons.  Clicking New will wipe out all existing work.  Clicking Save will open a new tab in the browser containing your document.  You can then save this document to your desktop, publish it to a website or whatever.
+
+One final thing to mention:  because SVG-edit is a web application, it's quite trivial to embed the editor in a web page using nothing more than an HTML iframe element.  Here we see an entry on my blog in which I've done this very thing.
+
+SVG-edit is still in the beginning stages of development, there are a lot of features missing, but I hope this video has given you a sense of SVG-edit's capabilities and its ease of use.
+
+Thanks for watching!

screencasts/svgedit-screencast-2.txt

@@ -0,0 +1,23 @@
+Hi, this is Jeff Schiller and I'll be describing the new features in the latest release of SVG-edit, version 2.3.
+
+For those of you who didn't watch the first screencast, SVG-edit is an open source vector graphics editor that works in any modern browser that natively supports SVG.  This includes Firefox, Opera, Safari, and Chrome.
+
+The latest release of SVG-edit sports more than just a new logo, this release brings some powerful new features.  Features that you would expect of a first-class vector editor on your desktop.  So let's launch the 2.3 Demo [click]
+
+Probably the most significant new capability that SVG-edit brings is the ability to actually save and reload your work.  SVG-edit now comes with a source editor [click on editor], which means you can save your SVG files to your hard disk and then copy and paste them back into SVG-edit and continue your work.  You can also fine-tune the source of your drawing if there's something you want to do that isn't yet supported by the editor [add Jeff Schiller to comment and delete -->, show dialog].
+
+Another important addition in 2.3 is the ability to construct arbitrary polygons or connected line segments.  Once the shape is complete, click on the first point to close the shape or any other point if you want to leave it open.  Polys can be dragged and resized just like any other shape.  Click the shape again to edit the position of the points. [draw an arrow and position the points]
+
+Rotation is now supported on shapes.  There are a variety of ways to do this:  by drag-rotating the handle, by holding shift and pressing the left/right arrow keys or by adjusting the spinner control at the top. [rotate the arrow]
+
+The final major feature in SVG-edit 2.3 is the ability to pick linear gradients as fill/stroke paints instead of just solid colors.  The color picker now has two tabs, one for solid colors and one for gradients.  You choose the position of the begin and end stops and the color/opacity of each stop. [set fill on the black ellipse to a vert gradient from white to transparent]
+
+There are also several minor features worthy of note:
+
+Elements can now be copy-pasted using the Clone Tool.  Select any number of elements and click Clone (or press C) to get the copied elements.
+
+If you want fine-grained element navigation, you can use the keyboard shortcuts Shift-O and Shift-P to cycle forward or backward through elements on the canvas.
+
+Compared to desktop vector graphics editors, SVG-edit still has a long ways to go, but already pretty sophisticated artwork can be achieved [open mickey.svg].  It's also important to remember that SVG-edit runs directly in the browser, with no plugins required.  This means zero install hassle for users.  You don't even need a bleeding edge browser, any SVG-capable browser released for the last few years will just work.
+
+Thanks for watching.

screencasts/svgedit-screencast-3.txt

@@ -0,0 +1,50 @@
+SVG-edit 2.4
+------------
+
+Hi, this is Jeff Schiller and this is part one of two videos in which I'll be describing the new features in the latest release of SVG-edit 2.4.
+
+First, some background: SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG.  This includes Firefox, Opera, Safari and Chrome.  SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed.
+
+So Version 2.4, code-named Arbelos, is a significant improvement over the previous release:  SVG-edit has now evolved from a proof-of-concept demo into a full-featured application.
+
+In this video I'll talk about the new path tool and the concept of zooming, I'll also cover some of the improvements to the user interface.
+
+First up is the new path tool.  In SVG-edit 2.3, the user had the ability to create a connected series of line segments and polygons [Draw a polyline].  In 2.4, the Poly Tool has evolved into a general purpose Path tool that draw straight lines or curves.  To change a line segment into a curve, double-click on the starting point of that segment.  Users can also manipulate the look of the curve by moving control points.  Curves can be configured to be symmetrical by a push-button in the context panel.  As you can see, when I change the position of a control point, the opposite control point also moves.  The user also has the ability to add/delete segments to an existing path element.  One final note on paths: most graphical elements (rectangles, ellipses, etc) can now be converted into paths for finer editing.  This conversion is a one-way process, though it can be undone.
+
+So next I'm going to talk about zooming.  In 2.4, it is now possible to zoom in and out of a graphic.  Zooming can be achieved in a variety of ways:  Using the zoom control at the bottom left, you can type in a zoom percentage, use the spinner or pick a zoom level from the popup.  Also included in the popup are things like "Fit to selection", which can be quite handy.  Zooming is also possible via the Zoom tool on the left.  Select it, then drag the area you wish to zoom in on.  A final option is to just use the mousewheel to zoom the canvas quickly around the mouse pointer.
+
+From a usability perspective, we've created a Document Properties dialog, available by clicking on the button in the top panel.  This dialog box serves as housing for image and editor properties that are seldom accessed, but still important.
+
+In terms of image properties:
+
+	* Give the image a title
+	* Change the canvas size, or pick one of several options
+	(* You can choose to have all local raster images referenced via URL or embedded inline as a data: URL.  This will make your SVG image larger, but self-contained and thus, more portable.)
+
+In terms of editor properties:
+
+	* SVG-edit's entire user interface (tooltips, labels) is fully localizable, and SVG-edit has now been translated into 8 languages.  If you would like to contribute translation for a language, please contact us on the mailing list.
+	* Another nice feature is the ability to set the icon size of the editor, which can help with adapting SVG-edit to different environments (mobile devices, smaller netbooks, widescreen displays).
+	(* One final editor preference that can be changed is the canvas' colour.  For most situations, a white canvas might be fine for creating your graphic, but if you are trying to draw an image with a lot of white in it, you might find this option useful.)
+
+So that's it for this video.  In the next video I'll talk about grouping, layers and a few other features of SVG-edit 2.4.
+
+
+--------------------
+
+Hi, this is Jeff Schiller and this is the second of two videos describing the new features in the latest release of SVG-edit 2.4, code-named Arbelos.
+
+If you missed the first video, SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG.  This includes Firefox, Opera, Safari and Chrome.  SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed.
+
+In the first video I gave an overview of the Path tool, Zooming and the new Document Properties dialog.  In this video I'll talk about grouping, layers and a couple other features that round out the release.
+
+So first is grouping.  In SVG-edit 2.3 one could draw graphical primitives such as ellipses, rectangles, lines and polygons - and those elements could be moved, resized, and rotated.  In 2.4 we've added the ability to arrange any number of elements together into a group.  Groups behave just like other element types: they can be moved, resized and rotated - and they can be added to larger groups to create even more complex objects.  You can copy/delete groups just like any other element.  Ungrouping a group allows you to manipulate the elements individually again.
+
+The next thing I'll talk about is Layers.  The Layers panel lies tucked to the side but can be clicked or dragged open at any time.  Layers work very much like they do in other drawing programs: you can create new layers, rename them, change the order and delete them.  Elements not on the current layer are not selectable, so it's an excellent way to separate elements in your drawing so that you can work on them without interfering with other parts of the drawing.  If you want to move elements between layers, select them, then select the layer you want to move them to.
+
+There are a couple of other minor features that round out SVG-edit 2.4:
+	* It is now possible to embed raster images (via URL) into the canvas using the Image tool on the left
+	* It is also possible to keep the ratio of any element fixed when resizing by holding down the shift key.
+	* Finally, if the canvas is starting to become obscured, you can turn on 'wireframe mode' which shows the outline of all shapes in your drawing, but none of the fill or stroke properties.
+
+There are several minor features that I didn't have time to talk about, but feel free to browse to the project page and try out the demo.  Thanks for your time.