Flash Course

These three tools for drawing geometric shapes: Rectangle (Rectangle Tool (R)), Oval (Oval Tool (O)) and Polygon (PolyStar Tool) are on the Tools Panel, all in the "Rectangle" button (see the image below). They are used to quickly draw simple geometric shapes.

Rectangle, Oval, Polygon Tools
To select one of the tools "hidden" in the Rectangle Tool button, click and hold it.
They are easy to use; you just click and drag on the Stage to create the shapes.
There are two types of tools to each rectangle and oval: Standard and those with Primitive (as shown in the image above).
The Standard Tools have the two main options for drawing: "Merge Drawing" and "Object Drawing", which can be changed in the options area of the Tools panel, for more details see Merge Drawing and Object Drawing.

1. The shapes drawn with Standard tools have two main elements that can be selected and modified separately or together: the stroke (margin line) and the fill.

2. Primitive tools ("Primitive Rectangle Tool" and "Oval Primitive Tool") have a single drawing mode, similar with "Object Drawing", but the edge line and Fill are united in a single element, they can't be selected separately.
The Primitive shape tools allow you to specify the corner radius of rectangles, and the start and end angle and the inner radius of ovals using controls in the Properties Panel.

You can draw shapes with no line or no fill by choosing colorless button -> colorless, located in the top-right of the "Stroke Color" and "Fill Color" pannels.

Line and Fill

Rectangle, Oval, Polygon Tools

Rectangle and Oval

The Rectangle tool creates rectangles with square or rounded corners. The Oval tool creates circular shapes such as ovals and circles.
Properties, such as size, color, border line, can be modified in the Properties panel.
In the next picture you can find explanations about the properties that can be set.

Properties for Rectangle and Oval

Properties for Rectangle and Oval
- The settings from "Rectangle Options" and "Oval options" can be defined after the "Rectangle Tool" (or "Oval Tool") was selected, but before to draw the shape.
These options can not be set or changed after the shape was drawn with Standard tools (except the shapes drawn with Primitive, which allows you to set these options after drawing).

You can hold down the Shift key while dragging to produce a perfect square with equal sides or a perfect circle.
- You can set specific sizes with a dialog box. Alt+click after you select "Rectangle tool" (or "Oval tool"), set the values you want, and then click OK.

Polygon - Star (PolyStar)

Polystar tool allows you to easily create complex vector shapes.
You can use this tool to create polygons and stars. Both styles have characteristics that can be defined in the "Properties panel" before you draw the shape.
Both the polygon and star style can have up to 32 sides.
Experiment with several options to get the kind of shape you want.

PolyStar options

PolyStar options
- Click and hold the "Rectangle tool" on the Tools panel, and then point to PolyStar Tool.
- Click Options in the "Properies panel".
- Click the Style list arrow, and then select Polygon or Star.
- Enter a value for the number of sides (from 3 to 32).
- For the Star style, you can specify an additional option for Star point size. You can enter a value ranging from 0.1 to 1.0 points.
- Click OK, drag on the Stage, and then release the mouse.
See the example in the image below.
Polystar example

After it has been drawn a polygon, or star, the settings for sides and "Star Point Size" can not longer be changed from the Properties.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Rectangle, Oval, Polygon - Star

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142529)
  2. Display data from PHP Array, or MySQL in HTML table (26988)
  3. PHP Simple HTML DOM Parser (12469)
  4. Paragraphs, Line break, Horizontal rule (4310)
  5. Convert BBCode to HTML and HTML to BBCode with JavaScript (9417)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (532)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (63)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)