<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>The Clutter Cookbook</title><link rel="stylesheet" type="text/css" href="style.css"><meta name="generator" content="DocBook XSL Stylesheets Vsnapshot"><link rel="home" href="index.html" title="The Clutter Cookbook"><link rel="next" href="introduction.html" title="Chapter 1. Preface"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">The Clutter Cookbook</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center"> </th><td width="20%" align="right"> <a accesskey="n" href="introduction.html">Next</a></td></tr></table><hr></div><div lang="en" class="book"><div class="titlepage"><div><div><h1 class="title"><a name="idm140200514705728"></a>The Clutter Cookbook</h1></div><div><div class="authorgroup"><div class="author"><h3 class="author"><span class="firstname">Emmanuele</span> <span class="surname">Bassi</span></h3></div><div class="author"><h3 class="author"><span class="firstname">Elliot</span> <span class="surname">Smith</span></h3></div></div></div><div><p class="releaseinfo">for Clutter 1.0</p></div><div><p class="copyright">Copyright © 2009, 2010, 2011 Intel Corporation</p></div><div><div class="legalnotice"><a name="idm140200518532176"></a><p>Permission is granted to copy, distribute and/or modify this
document under the terms of the <a class="ulink" href="http://creativecommons.org/licenses/by-nc-sa/2.0/uk/" target="_top">Creative
Commons Attribution-Non-Commercial-Share Alike 2.0 UK: England &
Wales</a> as published by Creative Commons.</p></div></div></div><hr></div><div class="toc"><p><b>Table of Contents</b></p><dl class="toc"><dt><span class="chapter"><a href="introduction.html">1. Preface</a></span></dt><dd><dl><dt><span class="section"><a href="introduction.html#idm140200511356448">1. About Clutter</a></span></dt><dt><span class="section"><a href="ch01s02.html">2. About this document</a></span></dt><dt><span class="section"><a href="ch01s03.html">3. Acknowledgments</a></span></dt><dt><span class="section"><a href="ch01s04.html">4. Where to get Clutter</a></span></dt></dl></dd><dt><span class="chapter"><a href="actors.html">2. Actors</a></span></dt><dd><dl><dt><span class="section"><a href="actors.html#actors-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="actors-composite.html">2. Implementing a simple custom actor</a></span></dt><dt><span class="section"><a href="actors-allocation-notify.html">3. Knowing when an actor's position or size changes</a></span></dt><dt><span class="section"><a href="actors-paint-wrappers.html">4. Overriding the paint sequence</a></span></dt><dt><span class="section"><a href="actors-opacity.html">5. Making an actor transparent by changing its opacity</a></span></dt><dt><span class="section"><a href="actors-non-rectangular.html">6. Creating an actor with a non-rectangular shape</a></span></dt></dl></dd><dt><span class="chapter"><a href="events.html">3. Events</a></span></dt><dd><dl><dt><span class="section"><a href="events.html#events-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="events-handling-key-events.html">2. Handling key events</a></span></dt><dt><span class="section"><a href="events-mouse-scroll.html">3. Detecting mouse scrolling on an actor</a></span></dt><dt><span class="section"><a href="events-pointer-motion.html">4. Detecting pointer movements on an actor</a></span></dt><dt><span class="section"><a href="events-buttons.html">5. Making an actor respond to button events</a></span></dt></dl></dd><dt><span class="chapter"><a href="textures.html">4. Textures</a></span></dt><dd><dl><dt><span class="section"><a href="textures.html#textures-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="textures-drawing-with-cairo.html">2. Drawing 2D graphics onto a texture</a></span></dt><dt><span class="section"><a href="textures-aspect-ratio.html">3. Maintaining the aspect ratio when loading an
image into a texture</a></span></dt><dt><span class="section"><a href="textures-image-loading.html">4. Loading image data into a texture</a></span></dt><dt><span class="section"><a href="textures-sub-textures.html">5. Creating sub-textures from an existing texture</a></span></dt><dt><span class="section"><a href="textures-reflection.html">6. Creating a reflection of a texture</a></span></dt><dt><span class="section"><a href="textures-crossfade.html">7. Cross-fading between two images</a></span></dt></dl></dd><dt><span class="chapter"><a href="animations.html">5. Animations</a></span></dt><dd><dl><dt><span class="section"><a href="animations.html#animations-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="animations-inversion.html">2. Inverting Animations</a></span></dt><dt><span class="section"><a href="animations-fading.html">3. Fading an actor out of or into view</a></span></dt><dt><span class="section"><a href="animations-rotating.html">4. Rotating an actor</a></span></dt><dt><span class="section"><a href="animations-complex.html">5. Creating complex animations with
<span class="type">ClutterAnimator</span></a></span></dt><dt><span class="section"><a href="animations-reuse.html">6. Reusing a complex animation on different actors</a></span></dt><dt><span class="section"><a href="animations-moving.html">7. Moving actors</a></span></dt><dt><span class="section"><a href="animations-looping.html">8. Looping an animation</a></span></dt><dt><span class="section"><a href="animations-scaling.html">9. Animated scaling</a></span></dt><dt><span class="section"><a href="animations-path.html">10. Animating an actor along a curved path</a></span></dt></dl></dd><dt><span class="chapter"><a href="text.html">6. Text</a></span></dt><dd><dl><dt><span class="section"><a href="text.html#text-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="text-shadow.html">2. Drawing a shadow under the text</a></span></dt></dl></dd><dt><span class="chapter"><a href="layouts.html">7. Layout management</a></span></dt><dd><dl><dt><span class="section"><a href="layouts.html#layouts-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="layouts-stacking.html">2. Stacking actors on top of each other</a></span></dt><dt><span class="section"><a href="layouts-bind-constraint.html">3. Binding the size of one actor to the size of another</a></span></dt><dt><span class="section"><a href="layouts-box.html">4. Arranging actors in a single row or column</a></span></dt></dl></dd><dt><span class="chapter"><a href="script.html">8. Script</a></span></dt><dd><dl><dt><span class="section"><a href="script.html#script-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="script-ui.html">2. Defining a user interface with JSON</a></span></dt><dt><span class="section"><a href="script-signals.html">3. Connecting to signals in <span class="type">ClutterScript</span></a></span></dt><dt><span class="section"><a href="script-state.html">4. Connecting <span class="type">ClutterState</span> states in <span class="type">ClutterScript</span></a></span></dt></dl></dd><dt><span class="chapter"><a href="effects.html">9. Effects</a></span></dt><dd><dl><dt><span class="section"><a href="effects.html#effects-introduction">1. Introduction</a></span></dt><dt><span class="section"><a href="effects-basic.html">2. Changing an actor's paint sequence using
<span class="type">ClutterEffect</span></a></span></dt><dt><span class="section"><a href="effects-custom-deform.html">3. Creating and animating a custom <span class="type">ClutterDeformEffect</span></a></span></dt></dl></dd><dt><span class="appendix"><a href="contributing.html">1. Contributing to this document</a></span></dt></dl></div><div class="list-of-examples"><p><b>List of Examples</b></p><dl><dt>2.1. <a href="actors-composite.html#actors-composite-cb-button-h"><code class="filename">cb-button.h</code>: header file</a></dt><dt>2.2. <a href="actors-composite.html#actors-composite-cb-button-c"><code class="filename">cb-button.c</code>: <span class="type">ClutterActor</span>
and GObject implementation</a></dt><dt>2.3. <a href="actors-composite.html#actors-composite-actors-composite-main-c"><code class="filename">actors-composite-main.c</code>: trivial
application demonstrating usage of <span class="type">CbButton</span></a></dt><dt>3.1. <a href="events-mouse-scroll.html#events-mouse-scroll-example">Mouse scrolling over a <span class="type">ClutterActor</span></a></dt><dt>3.2. <a href="events-pointer-motion.html#events-pointer-motion-example-1">Simple button with a hover animation (change in opacity
as the pointer enters and leaves it)</a></dt><dt>3.3. <a href="events-pointer-motion.html#events-pointer-motion-example-2">Detecting pointer motion on a <span class="type">ClutterRectangle</span></a></dt><dt>3.4. <a href="events-pointer-motion.html#events-pointer-motion-example-3">How actors influence pointer events on each other</a></dt><dt>3.5. <a href="events-pointer-motion.html#events-pointer-motion-example-4">Scribbling on a <span class="type">ClutterTexture</span> in response
to pointer events</a></dt><dt>3.6. <a href="events-buttons.html#events-buttons-example-1">Examining properties of a <span class="type">ClutterButtonEvent</span></a></dt><dt>3.7. <a href="events-buttons.html#events-buttons-example-2">Using <span class="type">ClutterClickAction</span> to capture
button events on an actor</a></dt><dt>3.8. <a href="events-buttons.html#events-buttons-example-3">Using button and pointer events for drawing</a></dt><dt>4.1. <a href="textures-sub-textures.html#textures-sub-texture">Creating a sub-texture from an existing texture</a></dt><dt>4.2. <a href="textures-sub-textures.html#textures-split-go">Creating a sub-texture from an existing texture</a></dt><dt>4.3. <a href="textures-reflection.html#textures-reflection-example">Creating a glassy reflection of a texture</a></dt><dt>4.4. <a href="textures-crossfade.html#textures-crossfade-example-1">Cross-fading between two images using two
<span class="type">ClutterTextures</span></a></dt><dt>4.5. <a href="textures-crossfade.html#textures-crossfade-example-2">Cross-fading between two images using one
<span class="type">ClutterTexture</span> and the COGL API</a></dt><dt>4.6. <a href="textures-crossfade.html#textures-crossfade-example-3">A simple slideshow application using two
<span class="type">ClutterTextures</span></a></dt><dt>5.1. <a href="animations-rotating.html#animations-rotating-example">Rotating an actor around x, y, and z axes using
<span class="type">ClutterState</span></a></dt><dt>5.2. <a href="animations-complex.html#animations-complex-example-1">JSON definition of a complex animation using
<span class="type">ClutterAnimator</span></a></dt><dt>5.3. <a href="animations-complex.html#animations-complex-example-2">Simple program for loading a JSON script;
any key press starts the animation</a></dt><dt>5.4. <a href="animations-complex.html#animations-complex-example-3">Running multiple transition sequences with
different key frames in parallel using
<span class="type">ClutterAnimator</span></a></dt><dt>5.5. <a href="animations-reuse.html#animations-reuse-example-1"><span class="type">ClutterScript</span> JSON defining several
rectangles with signal handlers</a></dt><dt>5.6. <a href="animations-reuse.html#animations-reuse-example-2"><span class="type">ClutterScript</span> JSON describing a "rig"
and a <span class="type">ClutterAnimator</span> animation</a></dt><dt>5.7. <a href="animations-reuse.html#animations-reuse-example-3">Loading <span class="type">ClutterScript</span> from JSON files
in response to events in a user interface</a></dt><dt>5.8. <a href="animations-moving.html#animations-moving-example-1">Simple movement using implicit animations</a></dt><dt>5.9. <a href="animations-moving.html#animations-moving-example-2">Using <span class="type">ClutterState</span> to repeatedly move
(and scale) two actors</a></dt><dt>5.10. <a href="animations-moving.html#animations-moving-example-3">Using <span class="type">ClutterAnimator</span> to randomly move
three actors along the <code class="varname">x</code> axis</a></dt><dt>5.11. <a href="animations-looping.html#animations-looping-example-1">Looping an implicit animation</a></dt><dt>5.12. <a href="animations-looping.html#animations-looping-example-2">Looping with <span class="type">ClutterAnimator</span></a></dt><dt>5.13. <a href="animations-looping.html#animations-looping-example-3">Looping with <span class="type">ClutterState</span></a></dt><dt>5.14. <a href="animations-scaling.html#animations-scaling-example-1">Animated scaling of an actor using each of the
scale gravities. Press any key to start the animation.</a></dt><dt>5.15. <a href="animations-scaling.html#animations-scaling-example-2">Animated scaling (up and down) of a texture in response
to button presses. Call with the path to an image as the
first argument.</a></dt><dt>5.16. <a href="animations-path.html#animations-path-example-1">Using a <span class="type">ClutterPathConstraint</span> with
implicit animations to move an actor along a curved path</a></dt><dt>5.17. <a href="animations-path.html#animations-path-example-2">Using a <span class="type">ClutterPathConstraint</span> with
<span class="type">ClutterAnimator</span> to animate an actor on
a simulated circular path</a></dt><dt>5.18. <a href="animations-path.html#animations-path-example-3">Animating actors on curved paths using easing modes</a></dt><dt>6.1. <a href="text-shadow.html#text-shadow-example">Creating a shadow of a text</a></dt><dt>7.1. <a href="layouts-stacking.html#layouts-stacking-example-1"><span class="type">ClutterBinLayout</span>, with actors in 9
combinations of start, center and end alignment combinations</a></dt><dt>7.2. <a href="layouts-stacking.html#layouts-stacking-example-2">Layering multiple textures on top of each other
inside a <span class="type">ClutterBinLayout</span></a></dt><dt>7.3. <a href="layouts-bind-constraint.html#layouts-bind-constraint-example-1">Constraining the size of a texture to
the size of the stage using <span class="type">ClutterBindConstraint</span></a></dt><dt>7.4. <a href="layouts-bind-constraint.html#layouts-bind-constraint-example-2">Creating an automatically-resizing overlay for a
texture using <span class="type">ClutterBindConstraint</span></a></dt><dt>7.5. <a href="layouts-bind-constraint.html#layouts-bind-constraint-example-3">Using the <code class="code">allocation-changed</code>
signal of one actor to trigger proportional size changes in
another</a></dt><dt>7.6. <a href="layouts-box.html#layouts-box-example-1">Different approaches to setting child layout properties
in a <span class="type">ClutterBoxLayout</span></a></dt><dt>7.7. <a href="layouts-box.html#layouts-box-example-2">A simple <span class="type">ClutterBoxLayout</span> menu</a></dt><dt>7.8. <a href="layouts-box.html#layouts-box-example-3">A demonstrator for "toggling and tweaking" a
<span class="type">ClutterBoxLayout's</span> properties</a></dt><dt>8.1. <a href="script.html#idm140200507669504">Example UI definition in JSON for use with
<span class="type">ClutterScript</span></a></dt><dt>8.2. <a href="script-ui.html#idm140200507608624">Loading JSON from a file and retrieving objects
defined by it</a></dt><dt>8.3. <a href="script-signals.html#script-signals-examples-1"><span class="type">ClutterScript</span> JSON with signal handler
definitions</a></dt><dt>8.4. <a href="script-signals.html#script-signals-examples-2">Loading a JSON file into a <span class="type">ClutterScript</span>
and connecting signal handlers</a></dt><dt>8.5. <a href="script-state.html#script-states-example-1"><span class="type">ClutterScript</span> JSON with state definitions</a></dt><dt>8.6. <a href="script-state.html#script-states-examples-2">Loading a JSON file into a <span class="type">ClutterScript</span> and connecting states</a></dt><dt>9.1. <a href="effects.html#effects-introduction-example-1">Applying a <span class="type">ClutterColorizeEffect</span> to
a texture loaded with an image</a></dt><dt>9.2. <a href="effects-basic.html#effects-basic-example-1"><code class="filename">cb-background-effect.h</code> (header file)</a></dt><dt>9.3. <a href="effects-basic.html#effects-basic-example-2"><code class="filename">cb-background-effect.c</code> (code file)</a></dt><dt>9.4. <a href="effects-basic.html#effects-basic-example-3"><code class="filename">cb-border-effect.h</code> (header file)</a></dt><dt>9.5. <a href="effects-basic.html#effects-basic-example-4"><code class="filename">cb-border-effect.c</code> (code file)</a></dt><dt>9.6. <a href="effects-basic.html#effects-basic-example-5">Application which applies <span class="type">CbBorderEffect</span>
and <span class="type">CbBackgroundEffect</span> to a group of
<span class="type">ClutterTextures</span>.</a></dt><dt>9.7. <a href="effects-custom-deform.html#effects-custom-deform-example-1"><code class="filename">cb-page-fold-effect.h</code> (header file)</a></dt><dt>9.8. <a href="effects-custom-deform.html#effects-custom-deform-example-2"><code class="filename">cb-page-fold-effect.c</code> (code file)</a></dt><dt>9.9. <a href="effects-custom-deform.html#effects-custom-deform-example-3">Application which uses <span class="type">CbPageFoldEffect</span>
to do animated folding of a <span class="type">ClutterTexture</span></a></dt></dl></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"> </td><td width="40%" align="right"> <a accesskey="n" href="introduction.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"> </td><td width="40%" align="right" valign="top"> Chapter 1. Preface</td></tr></table></div></body></html>