Improve flipable example.

7 files changed, 46 insertions, 32 deletions

diff --git a/examples/declarative/flipable/back.png b/examples/declarative/flipable/back.png
deleted file mode 100644
index 0b4cafc..0000000
--- a/examples/declarative/flipable/back.png
+++ /dev/null
diff --git a/examples/declarative/flipable/content/5_heart.png b/examples/declarative/flipable/content/5_heart.png
new file mode 100644
index 0000000..fb59d81
--- /dev/null
+++ b/examples/declarative/flipable/content/5_heart.png
diff --git a/examples/declarative/flipable/content/9_club.png b/examples/declarative/flipable/content/9_club.png
new file mode 100644
index 0000000..2545001
--- /dev/null
+++ b/examples/declarative/flipable/content/9_club.png
diff --git a/examples/declarative/flipable/content/Card.qml b/examples/declarative/flipable/content/Card.qml
new file mode 100644
index 0000000..6b8fa69
--- /dev/null
+++ b/examples/declarative/flipable/content/Card.qml
@@ -0,0 +1,38 @@
+import Qt 4.6
+
+Flipable {
+    id: container
+
+    property alias image: frontImage.source
+    property bool flipped: true
+    property int xAxis: 0
+    property int yAxis: 0
+    property int angle: 0
+
+    width: front.width; height: front.height; state: "back"
+
+    front: Image { id: frontImage; smooth: true }
+    back: Image { source: "back.png"; smooth: true }
+
+    MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped }
+
+    transform: Rotation {
+        id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
+        axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
+    }
+
+    states: State {
+        name: "back"; when: container.flipped
+        PropertyChanges { target: rotation; angle: container.angle }
+    }
+
+    transitions: Transition {
+        ParallelAnimation {
+            NumberAnimation { target: rotation; properties: "angle"; duration: 600 }
+            SequentialAnimation {
+                NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
+                NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/flipable/content/back.png b/examples/declarative/flipable/content/back.png
new file mode 100644
index 0000000..f715d74
--- /dev/null
+++ b/examples/declarative/flipable/content/back.png
diff --git a/examples/declarative/flipable/flipable-example.qml b/examples/declarative/flipable/flipable-example.qml
index c837ebc..eebc721 100644
--- a/examples/declarative/flipable/flipable-example.qml
+++ b/examples/declarative/flipable/flipable-example.qml
@@ -1,37 +1,13 @@
-//! [0]
 import Qt 4.6
+import "content"
 
-Flipable {
-    id: flipable
-    width: 240
-    height: 240
+Rectangle {
+    id: window; width: 480; height: 320
+    color: "darkgreen"
 
-    property int angle: 0
-    property bool flipped: false
-
-    front: Image { source: "front.png" }
-    back: Image { source: "back.png" }
-
-    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
-    }
-
-    states: State {
-        name: "back"
-        PropertyChanges { target: flipable; angle: 180 }
-        when: flipable.flipped
-    }
-
-    transitions: Transition {
-        NumberAnimation { properties: "angle"; duration: 1000 }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: flipable.flipped = !flipable.flipped
+    Row {
+        anchors.centerIn: parent; spacing: 30
+        Card { image: "content/9_club.png"; angle: 180; yAxis: 1 }
+        Card { image: "content/5_heart.png"; angle: 540; xAxis: 1 }
     }
 }
-//! [0]
-
diff --git a/examples/declarative/flipable/front.png b/examples/declarative/flipable/front.png
deleted file mode 100644
index 796b605..0000000
--- a/examples/declarative/flipable/front.png
+++ /dev/null