| <?xml version="1.0" encoding="utf-8"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx"> |
| |
| <!-- NOTE: This sample was compiled with Flex SDK version 4.0.0.13875 --> |
| |
| <fx:Declarations> |
| <s:Animate id="a" |
| duration="750" |
| target="{tileGroup}" |
| repeatBehavior="reverse" |
| repeatCount="2"> |
| <s:SimpleMotionPath valueFrom="1" |
| valueTo="15" |
| property="horizontalGap" /> |
| <s:SimpleMotionPath valueFrom="1" |
| valueTo="15" |
| property="verticalGap" /> |
| <s:SimpleMotionPath valueFrom="0" |
| valueTo="-50" |
| property="z" /> |
| </s:Animate> |
| </fx:Declarations> |
| |
| <s:Panel title="Animate Properties Effect Sample" width="100%" height="100%" > |
| |
| <s:layout> |
| <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> |
| </s:layout> |
| |
| <s:TileGroup id="tileGroup" |
| horizontalGap="1" |
| verticalGap="1" |
| direction="ltr" |
| columnWidth="50" |
| rowHeight="50" |
| useHandCursor="true" |
| buttonMode="true"> |
| |
| <mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" /> |
| <mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" /> |
| |
| </s:TileGroup> |
| |
| <s:VGroup width="100%"> |
| <s:Label width="250" |
| verticalAlign="justify" |
| text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/> |
| |
| <s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/> |
| <s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" /> |
| </s:VGroup> |
| |
| </s:Panel> |
| </s:Module> |