COAP:COAP-2100/week5: Difference between revisions
Jump to navigation
Jump to search
m (→Week 5) |
m (→Wednesday) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 19: | Line 19: | ||
* (Short) discussion of term projects | * (Short) discussion of term projects | ||
* [[SVG/SMIL animation tutorial]] (try it yourself) | |||
* [[Interactive SVG-SMIL animation tutorial]] (interactivity demo) | * [[Interactive SVG-SMIL animation tutorial]] (interactivity demo) | ||
* [[Using Inkscape for web animation]] (some tips on preparing complex SVG files for animation) | |||
SVG animation hands on: | SVG animation hands on: | ||
| Line 75: | Line 77: | ||
==== Homework 5 ==== | ==== Homework 5 ==== | ||
Create either | Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation: | ||
* The page should include at least 2 animations | * The page should include at least 2 animations | ||
* The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. a comment in the world classroom) | * The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom) | ||
* Bonus: Some | * Bonus: Some interactivity (e.g. a mouse click or mouse over) | ||
You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org | You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the ''desc'' element. | ||
Due: Wednesday week 6 before class (upload to the | Due: Wednesday week 6 before class (upload to the world classroom) | ||
[[Category: COAP_2100]] | [[Category: COAP_2100]] | ||
Latest revision as of 19:46, 12 February 2014
Week 5
Topics covered
- Static SVG (continued)
- Dynamic SVG
Monday
- Work on project 4 (See week 4)
- Static SVG tutorial (grouping constructs)
- SVG/SMIL animation tutorial (demos)
- SVG Essentials/Animating and Scripting SVG, part of SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
- You can find a PDFs of SVG book chapter in the worldclassroom / Documents folder
Wednesday
- (Short) discussion of term projects
- SVG/SMIL animation tutorial (try it yourself)
- Interactive SVG-SMIL animation tutorial (interactivity demo)
- Using Inkscape for web animation (some tips on preparing complex SVG files for animation)
SVG animation hands on:
animateexample code that you can copy / paste into an editor
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<title>Simple animate example</title>
<desc>Rectangle shape will change</desc>
<rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
<animate attributeName="width" from="10px" to="100px"
begin="0s" dur="10s" />
<animate attributeName="height" from="100px" to="10px"
begin="0s" dur="10s" />
</rect>
<text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
Hello. Admire the dynamic rectangle</text>
</svg>
Simple Motion example using mpath, variant 1 (more difficult):
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Simple Motion animation example</title>
<rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/>
</animateMotion>
</rect>
<path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"
stroke-width="5" stroke="#000000" fill="none"/>
</svg>
Simple Motion example using path, variant2
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Simple Motion animation example</title>
<rect x="15" y="5" rx="5" ry="5" width="20" height="10"
style="fill:#CCCCFF;stroke:#000099">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
</rect>
</svg>
Homework 5
Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:
- The page should include at least 2 animations
- The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
- Bonus: Some interactivity (e.g. a mouse click or mouse over)
You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the desc element.
Due: Wednesday week 6 before class (upload to the world classroom)