一个做flash涂鸦的国外类库Graffiti Library
2009-05-14 11:21
381 查看
Getting Started with version 1.2
Tutorial: Getting Started with version 1.2
In this tutorial I'll go through setting up the Graffiti library within a Flash CS4 project.Setting Up
Start by downloading the Graffiti Library and extract the contents of the zip file.![](http://www.nocircleno.com/graffiti/tutorials/images/extracted_file.gif)
Browse to the 'source' directory and copy the 'com' folder and all it's contents to your project directory.
![](http://www.nocircleno.com/graffiti/tutorials/images/extracted_file_class_directory.gif)
Create a new Flash CS4 (ActionScript 3) document and save it to your project directory.
![](http://www.nocircleno.com/graffiti/tutorials/images/new_flashcs3_document.jpg)
If your FLA document and the 'com' folder are NOT
in the same directory, you will need to add the location of the 'com'
folder to the classpath.
Import Classes
You need to import a few classes before we can use the Graffiti Library.import com.nocircleno.graffiti.GraffitiCanvas; import com.nocircleno.graffiti.tools.BrushTool; import com.nocircleno.graffiti.tools.BrushType; import com.nocircleno.graffiti.tools.LineTool; import com.nocircleno.graffiti.tools.LineType; import com.nocircleno.graffiti.tools.ShapeTool; import com.nocircleno.graffiti.tools.ShapeType;
Creating a Canvas
The GraffitiCanvas Class is the main component of the GraffitiLibrary. The GraffitiCanvas Class extends the Sprite Class so it can be
added anywhere in the Display List.
There are 5 optional parameters we can set when creating a new instance of the GraffitiCanvas Class.
Canvas Width -- default is 100 px
Canvas Height -- default is 100 px
Number of History Levels to keep -- default is 0
A DisplayObject to lay over the canvas.
A DisplayObject to lay under the canvas.
// create a canvas with a width and height that matches the stage dimensions var canvas:GraffitiCanvas = new GraffitiCanvas(stage.stageWidth, stage.stageHeight); addChild(canvas);
When we create a new instance of the GraffitiCanvas, a Brush instance is created and assigned as the active tool automatically.
Creating and Assigning Tools
Now that you have a canvas you may want to change the default Brushthat is assigned. With the 1.1 release you can create additional
Brushes, Lines, Rectangle, Square, Oval and Circle tools.
Creating a Brush
There are 6 optional parameters we can set when creating a new instance of the Brush Class.Brush Size -- default is 4
Brush Color -- default is Black
Brush Alpha -- default is 1 (fully opaque)
Brush Blur -- default is 0 (no blur)
Brush Type -- the BrushType Class defines the constant values for all brush types.
Tool
Mode -- the ToolMode Class defines the constant values for all Tool
Modes. Use this to switch between drawing and easer functionality.
// create a diamond brush of size 8 and color red var diamondBrush:BrushTool = new BrushTool(8, 0xFF0000, 1, 0, BrushType.DIAMOND);
Assign Tool to Canvas
We can use the activeTool property of the GraffitiCanvas Class to assign a Brush, Line or Shape instance.// Set canvas active tool to use the diamond brush we just created. canvas.activeTool = diamondBrush;
Creating a Line
There are 5 optional parameters we can set when creating a new instance of the Line Class.Line Width -- default is 4
Line Color -- default is Black
Line Alpha -- default is 1 (fully opaque)
Line Type -- the LineType Class defines the constant values for all line types.
Tool
Mode -- the ToolMode Class defines the constant values for all Tool
Modes. Use this to switch between drawing and easer functionality.
// create a dotted line of size 4 and grey var dottedLine:Line = new Line(4, 0xBBBBBB, 1, LineType.DOTTED); // Set canvas active tool to use the dotted line we just created. canvas.activeTool = dottedLine;
Creating a Shape
There are 7 optional parameters we can set when creating a new instance of the Shape Class.Stroke Width -- default is 1
Stroke Color -- default is Black. You can pass -1 for no Stroke.
Fill Color -- default is White. You can pass -1 for no Fill.
Stroke Alpha -- default is 1 (fully opaque)
Fill Alpha -- default is 1 (fully opaque)
Shape Type -- the ShapeType Class defines the constant values for all shape types.
Tool
Mode -- the ToolMode Class defines the constant values for all Tool
Modes. Use this to switch between drawing and easer functionality.
// create a rectangle shape tool with grey stroke and a red fill. var rectangleShape:ShapeTool = new ShapeTool(2, 0xBBBBBB, 0xFF0000, 1, 1, ShapeType.RECTANGLE); // Set canvas active tool to use the rectangle shape tool we just created. canvas.activeTool = rectangleShape;
Changing Tool Settings
You can change the properties for an instance of the Brush, Line or Shape Classes after they are created.// create a dotted line of size 4 and grey var dottedLine:LineTool = new LineTool(4, 0xBBBBBB, 1, LineType.DOTTED); // Set canvas active tool to use the dotted line we just created. canvas.activeTool = dottedLine; // change dottedLine properties dottedLine.lineWidth = 8; dottedLine.color = 0xFF0000;
If you change a property of a Tool that is currently assigned to the Canvas then the Canvas is automatically updated.
Where to go from here...
As an ActionScript developer, you must create a UI to control toolsetup and application. Use the Flash CS3 components to get started
setting up a UI to let a user switch Tools and change properties like
color and size.
In a later tutorial I'll go over some more advanced features and techniques.
相关文章推荐
- 一个免费的Excel输出类库:CarlosAg Excel Xml Writer Library
- 一个国外的flash 照片浏览3d效果的web插件
- owl_cpp,一个用于操作OWL本体的C++类库(owl_cpp, a C++ Library for Working with OWL Ontologies)
- 转 国外大牛写的一个通用行转列 oralce专用
- flash的一个展示效果
- STM32中的常量数组的首地址如何指定FLASH的某一个地址
- 从头开始构建一个web即时通讯系统 - 客户端 - flash socket
- 用flash制作一个倒计时(并插入宣传视频轮播)
- 推荐一个winform 界面交互类库
- 一个可以返回验证码图片的类库源码(C#)
- LTTng调试: 一个系统软件工程师的随手涂鸦
- 引入一个项目作为library
- 免费网站模版:一个黑色系的公司网站模版(flash幻灯)
- 我上传了一个自己做的flash 网站
- js矢量图类库:Raphaël—JavaScript Library
- 一个flash日历
- 完成“易写易库(EXEK)”之后,计划再开发一个可以写EF类库的易语言模块
- 一个禁止flash右键的方法
- flashgallery:一个免费的flash幻灯片
- 推荐一个非常棒的连接字符串大全的国外网站!