<!DOCTYPE html>
<!-- <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/montage-serialization">
{
"image1": {
"module": "montage/ui/image3d.reel",
"name": "Image3D",
"properties": {
"element": {"#": "image"}
},
"bindings": {
"data": {
"boundObject": {"@": "flow1"},
"boundObjectPropertyPath": "objectAtCurrentIteration",
"oneway": true
}
}
},
"scroll1": {
"module": "montage/ui/scroll",
"name": "Scroll",
"properties": {
"pointerSpeedMultiplier": 1,
"component": {"@": "offset"}
},
"bindings": {
"element": {
"boundObject": {"@": "flow1"},
"boundObjectPropertyPath": "_element",
"oneway": true
},
"maxScrollX": {
"boundObject": {"@": "offset"},
"boundObjectPropertyPath": "length",
"oneway": true
},
"scrollX": {
"boundObject": {"@": "offset"},
"boundObjectPropertyPath": "origin",
"oneway": false
}
}
},
"offset": {
"module": "montage/ui/flow-offset",
"name": "FlowOffset",
"properties": {
"scale": 350,
"component": {"@": "flow1"}
},
"bindings": {
"numberOfNodes": {
"boundObject": {"@": "flow1"},
"boundObjectPropertyPath": "numberOfNodes",
"oneway": true
},
"selectedComponent": {
"boundObject": {"@": "nearest"},
"boundObjectPropertyPath": "nearestNeighborComponent",
"oneway": true
}
}
},
"nearest": {
"module": "montage/ui/nearest-neighbor-component-search",
"name": "NearestNeighborComponentSearch",
"bindings": {
"componentList": {
"boundObject": {"@": "flow1"},
"boundObjectPropertyPath": "_repetitionComponents",
"oneway": true
},
"pointerPosition": {
"boundObject": {"@": "scroll1"},
"boundObjectPropertyPath": "pointerStartEventPosition",
"oneway": true
}
}
},
"flow1": {
"module": "montage/ui/flow.reel",
"name": "Flow",
"properties": {
"element": {"#": "flow"}
},
"bindings": {
"nodeOffset": {
"boundObject": {"@": "offset"},
"boundObjectPropertyPath": "offset",
"oneway": true
},
"objects": {
"boundObject": {"@": "owner"},
"boundObjectPropertyPath": "images",
"oneway": true
}
}
},
"path1": {
"module": "montage/ui/flow-path",
"name": "FlowPath",
"properties": {
"evalPath": [
"path.translateX = slide.time-slide.index*155+50",
"path.translateY = (slide.index%3)*240+50",
"path.translateZ = -slide.time/3",
"path.rotateX = slide.speed/200",
"path.rotateY = 1",
"path.rotateZ = slide.time/500",
"path.style.opacity = 1.2 - slide.time/4000"
]
}
},
"path2": {
"module": "montage/ui/flow-path",
"name": "FlowPath",
"properties": {
"evalPath": [
"path.translateX = slide.time",
"path.translateZ = ((slide.time-400)*(slide.time-400))/-1500",
"path.rotateX = 0",
"path.rotateY = (slide.time-400)/1200",
"path.rotateZ = slide.speed/1500",
"path.style.opacity = 1"
]
}
},
"pathLerp1": {
"module": "montage/ui/flow-path-lerp",
"name": "FlowPathLerp",
"bindings": {
"path1": {
"boundObject": {"@": "path1"},
"boundObjectPropertyPath": "path",
"oneway": true
},
"path2": {
"boundObject": {"@": "path2"},
"boundObjectPropertyPath": "path",
"oneway": true
},
"interpolant": {
"boundObject": {"@": "owner"},
"boundObjectPropertyPath": "interpValue"
}
}
},
"path3": {
"module": "montage/ui/flow-path",
"name": "FlowPath",
"properties": {
},
"bindings": {
"translateX": {
"boundObject": {"@": "translateX"},
"boundObjectPropertyPath": "path",
"oneway": true
},
"rotateY": {
"boundObject": {"@": "rotateY"},
"boundObjectPropertyPath": "path",
"oneway": true
},
"translateZ": {
"boundObject": {"@": "translateZ"},
"boundObjectPropertyPath": "path",
"oneway": true
}
}
},
"translateX": {
"module": "montage/ui/flow-path-sigmoid",
"name": "FlowPathSigmoid",
"properties": {
"smoothness": 300,
"scale": 0.05,
"width": 10000,
"origin": -8000,
"sigmoidCenter": 8000
}
},
"rotateY": {
"module": "montage/ui/flow-path-sigmoid",
"name": "FlowPathSigmoid",
"properties": {
"smoothness": 300,
"scale": -0.00024,
"width": 10000,
"origin": -8000,
"sigmoidCenter": 8000,
"slope": 0
}
},
"path4": {
"module": "montage/ui/flow-path",
"name": "FlowPath",
"bindings": {
"translateX": {
"boundObject": {"@": "path1TranslateX"},
"boundObjectPropertyPath": "path",
"oneway": true
},
"translateY": {
"boundObject": {"@": "path1TranslateY"},
"boundObjectPropertyPath": "path",
"oneway": true
}
}
},
"path1TranslateX": {
"module": "montage/ui/flow-path-linear",
"name": "FlowPathLinear",
"properties": {
"origin": 0,
"multiplier": 0.5
}
},
"path1TranslateY": {
"module": "montage/ui/flow-path-cubic",
"name": "FlowPathCubic",
"properties": {
"a": 0,
"b": -0.0001,
"c": 0,
"d": 300
}
},
"owner": {
"module": "montage/ui/flow-controller.reel",
"name": "FlowController",
"properties": {
"element": {"#": "flowc"},
"scrollController": {"@": "scroll1"},
"offsetController": {"@": "offset"},
"flowComponent": {"@": "flow1"},
"spacing": 350,
"momentumDuration": 650,
"bouncingDuration": 750,
"animation": {"@": "path2"},
"path1": {"@": "path1"},
"path2": {"@": "path2"},
"path3": {"@": "path3"},
"path4": {"@": "path4"}
}
}
}
</script>
<style>
.flow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-perspective: 800px;
/*background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); */
}
</style>
</head>
<body>
<div id="flowc">
<div id="flow" class="flow">
<div id="image"></div>
</div>
</div>
</body>
</html>