Fix Flipable docs

Task-number: QTBUG-13789

2 files changed, 23 insertions, 21 deletions

diff --git a/doc/src/snippets/declarative/flipable/flipable.qml b/doc/src/snippets/declarative/flipable/flipable.qml
index cd5da4b..8d48bd9 100644
--- a/doc/src/snippets/declarative/flipable/flipable.qml
+++ b/doc/src/snippets/declarative/flipable/flipable.qml
@@ -46,26 +46,27 @@ Flipable {
     width: 240
     height: 240
 
-    property int angle: 0
     property bool flipped: false
 
-    front: Image { source: "front.png" }
-    back: Image { source: "back.png" }
+    front: Image { source: "front.png"; anchors.centerIn: parent }
+    back: Image { source: "back.png"; anchors.centerIn: parent }
 
     transform: Rotation {
-        origin.x: flipable.width/2; origin.y: flipable.height/2
-        axis.x: 0; axis.y: 1; axis.z: 0     // rotate around y-axis
-        angle: flipable.angle
+        id: rotation
+        origin.x: flipable.width/2
+        origin.y: flipable.height/2
+        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
+        angle: 0    // the default angle
     }
 
     states: State {
         name: "back"
-        PropertyChanges { target: flipable; angle: 180 }
+        PropertyChanges { target: rotation; angle: 180 }
         when: flipable.flipped
     }
 
     transitions: Transition {
-        NumberAnimation { properties: "angle"; duration: 1000 }
+        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
     }
 
     MouseArea {
diff --git a/src/declarative/graphicsitems/qdeclarativeflipable.cpp b/src/declarative/graphicsitems/qdeclarativeflipable.cpp
index 4ecf87b..f118a85 100644
--- a/src/declarative/graphicsitems/qdeclarativeflipable.cpp
+++ b/src/declarative/graphicsitems/qdeclarativeflipable.cpp
@@ -83,27 +83,28 @@ public:
 
     \section1 Example Usage
 
-    \beginfloatright
-    \inlineimage flipable.gif
-    \endfloat
-
     The following example shows a Flipable item that flips whenever it is
     clicked, rotating about the y-axis.
 
-    The \l Rotation element is used to specify the angle and axis of the flip.
-    When \c flipped is true, the item changes to the "back" state, where
-    the angle is changed to 180 degrees to produce the flipping effect. 
+    This flipable item has a \c flipped boolean property that is toggled 
+    whenever the MouseArea within the flipable is clicked. When 
+    \c flipped is true, the item changes to the "back" state; in this 
+    state, the \c angle of the \l Rotation item is changed to 180
+    degrees to produce the flipping effect. When \c flipped is false, the
+    item reverts to the default state, in which the \c angle value is 0. 
+   
+    \snippet doc/src/snippets/declarative/flipable/flipable.qml 0
 
-    \clearfloat
-    \snippet doc/src/snippets/declarative/flipable/flipable-snippet.qml 0
+    \image flipable.gif
 
-    The \l Transition creates the animation that changes the angle over the
-    duration of one second. When the item changes between its "back" and
+    The \l Transition creates the animation that changes the angle over
+    four seconds. When the item changes between its "back" and
     default states, the NumberAnimation animates the angle between
     its old and new values.
 
-    See the \l {QML States} and \l {QML Animation} documentation for more
-    details on state changes and how animations work within transitions.
+    See \l {QML States} for details on state changes and the default
+    state, and \l {QML Animation} for more information on how animations
+    work within transitions.
 
     \sa {declarative/ui-components/flipable}{Flipable example}
 */