Google Git
Sign in
apache / flex-site / HEAD / . / content / doc / flex / using / flx_transitions_tr.html
blob: 2e627607f40bde3d1bdab88e28f377389148f64f [file] [log] [blame]
<?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.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xml:lang="en-us">
<head>
<meta name="DC.Type" content="topic"/>
<meta name="DC.Title" content="Transitions"/>
<meta name="DC.Format" content="XHTML"/>
<meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7f6a_verapache"/>
<title>Transitions</title>
</head>
<body id="WS2db454920e96a9e51e63e3d11c0bf69084-7f6a_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7f6a_verapache"><!-- --></a>
<div>
<p>View states let you change the appearance of an application,
typically in response to a user action. Transitions define how a
change of view state looks as it occurs on the screen. You define
a transition by using the effect classes, in combination with several
effects designed explicitly for handling transitions. </p>
<p>To use transitions, you should be familiar with how effects and
view states work. For more information on effects, see <a href="flx_behaviors_be.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fec_verapache">Introduction
to effects</a>. For more information on view states, see <a href="flx_using_states_us.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb4_verapache">View
states</a>. </p>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7fff_verapache"><!-- --></a>
<h2 class="topictitle2">About transitions</h2>
<div>
<p>View
states let you vary the content and appearance of an application,
typically in response to a user action. To use view states, you
define the default view state of an application, and one or more
additional view states.</p>
<p>When you change view states, Flex performs
all the visual changes to the application at the same time. That
means when you resize, move, or in some other way alter the appearance
of the application, the application appears to jump from one view
state to the next. </p>
<p>Instead, you might want to define a smooth visual change from
one view state to the next, in which the change occurs over a period
of time. A <em>transition</em> is one or more effects grouped together
to play when a view state change occurs.</p>
<p>For example, your application defines a form that in its default
view state shows only a few fields, but in an expanded view state
shows additional fields. Rather than jumping from the base version
of the form to the expanded version, you define a transition that
uses the Resize effect to expand the form, and then uses the Fade
effect to slowly make the new form elements appear on the screen. </p>
<p>When a user changes back to the base version of the form, your
transition uses a Fade effect to make the fields of the expanded
form disappear, and then uses the Resize effect to slowly shrink
the form back to its original size. </p>
<p>By using a transition, you can apply one or more effects to the
form, to the fields added to the form, and to fields removed from
the form. You can apply the same effects to each form field, or
apply different effects. You can also define one set of effects
to play when you change state to the expanded form, and a different
set of effects to play when changing from the expanded state back
to the base state. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7dc3_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7dc3_verapache"><!-- --></a>
<h3 class="topictitle3">Example: Using transitions with
a login form</h3>
<div>
<p>The topic <a href="flx_using_states_us.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb4_verapache">View
states</a> contains an example of a login form with two states:
a base state and a register state. The following example adds a
transition to this form to use a Wipe effect and a Resize effect
with an easing function to animate the transition from view state
to view state:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions\LoginFormTransition.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"&gt;
&lt;!-- The Application class states property defines the view states.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="Register"/&gt;
&lt;/s:states&gt;
&lt;!-- Define the transition to animate the change of view state. --&gt;
&lt;s:transitions&gt;
&lt;s:Transition fromState="default"&gt;
&lt;s:Parallel&gt;
&lt;s:Wipe direction="right" target="{confirm}"/&gt;
&lt;s:Resize target="{loginPanel}" duration="100"/&gt;
&lt;/s:Parallel&gt;
&lt;/s:Transition&gt;
&lt;s:Transition fromState="Register"&gt;
&lt;s:Sequence&gt;
&lt;s:Resize target="{loginPanel}" duration="100"/&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;!-- Set title of the Panel container based on the view state.--&gt;
&lt;s:Panel id="loginPanel"
title="Login" title.Register="Register"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Form id="loginForm"&gt;
&lt;s:FormItem label="Username:"&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="Password:"&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;!-- Add a TextInput control to the form for the Register view state. --&gt;
&lt;s:FormItem id="confirm" label="Confirm:" includeIn="Register"&gt;
&lt;s:TextInput id="myTI"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem&gt;
&lt;!-- Use the LinkButton to change to the Register view state.--&gt;
&lt;!-- Exclude the LinkButton from the Register view state.--&gt;
&lt;!-- Add a LinkButton to the form for the Register view state. --&gt;
&lt;mx:LinkButton label="Return to Login"
includeIn="Register"
click="currentState=''"/&gt;
&lt;mx:LinkButton id="registerLink"
includeIn="default"
label="Need to Register?"
click="currentState='Register'"/&gt;
&lt;s:Button id="loginButton"
label="Login" label.Register="Register"/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7ffd_verapache"><!-- --></a>
<h3 class="topictitle3">Comparing transitions to effects</h3>
<div>
<p>Transitions do not replace effects; that is, you can still
apply a single effect to a component. Transitions give you the ability
to group multiple effects so that the effects are triggered together
as part of a change of view states. Transitions are designed to
work specifically with a change between view states, because a view state
change typically means multiple components are modified at the same time. </p>
<p>Transitions also support effect filters. A <em>filter</em> lets
you conditionalize an effect so that it plays an effect only when
the effect target changes in a certain way. For example, as part
of the change to the view state, one or more components may change
size. You can use a filter with an effect so that you apply the
effect only to the components being resized. For an example using
a filter, see <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb2_verapache">Filtering
effects</a>.</p>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7fae_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7fae_verapache"><!-- --></a>
<h2 class="topictitle2">Defining transitions</h2>
<div>
<p>You
use the <a href="https://flex.apache.org/asdoc/mx/states/Transition.html" target="_blank">Transition</a> class
to create a transition. The following table defines the properties
of the Transition class:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e151">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e157">
<p>Definition</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e151 ">
<div class="p">
<pre class="codeblock">fromState</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e157 ">
<p>A String that specifies the view state that
you are changing from when you apply the transition. The default value
is an asterisk, <samp class="codeph">"*"</samp>, which means any view state. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e151 ">
<div class="p">
<pre class="codeblock">toState</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e157 ">
<p>A String that specifies the view state that
you are changing to when you apply the transition. The default value
is an asterisk, <samp class="codeph">"*"</samp>, which means any view state.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e151 ">
<div class="p">
<pre class="codeblock">effect</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e157 ">
<p>The Effect object to play when you apply
the transition. Typically, this is a composite effect, such as the
Parallel or Sequence effect, that contains multiple effects.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>You can define multiple Transition objects in an application.
The <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">UIComponent</a> class
includes a <samp class="codeph">transitions</samp> property that you set to
an Array of Transition objects. For example, you define an application
with three Panel containers and three view states, as the following
example shows:</p>
<div class="figborder">
<img src="images/tr_transPanelStatesREAL.png" alt="Three Panel containers and three view states"/>
<dl>
<dt class="dlterm">
<strong>A.</strong>
</dt>
<dd>Default view state</dd>
<dt class="dlterm">
<strong>B.</strong>
</dt>
<dd>One view state</dd>
<dt class="dlterm">
<strong>C.</strong>
</dt>
<dd>Two view state</dd>
</dl>
</div>
<p>You define the transitions for this example in MXML using the <samp class="codeph">&lt;s:transitions&gt;</samp> tag,
as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions/DefiningTrans.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" width="400" &gt;
&lt;!-- Define the two view states, in addition to the base state.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="One"/&gt;
&lt;s:State name="Two"/&gt;
&lt;/s:states&gt;
&lt;!-- Define Transition array with one Transition object.--&gt;
&lt;s:transitions&gt;
&lt;!-- A transition for changing from any state to any state. --&gt;
&lt;s:Transition id="myTransition" fromState="*" toState="*"&gt;
&lt;!-- Define a Parallel effect as the top-level effect.--&gt;
&lt;s:Parallel id="t1" targets="{[p1,p2,p3]}"&gt;
&lt;!-- Define a Move and Resize effect.--&gt;
&lt;s:Move duration="400"/&gt;
&lt;s:Resize duration="400"/&gt;
&lt;/s:Parallel&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;!-- Define the container holding the three Panel containers.--&gt;
&lt;s:Group id="pm" width="100%" height="100%"&gt;
&lt;s:Panel id="p1" title="One"
x="0" y="0"
x.One="110" y.One="0"
x.Two="0" y.Two="0"
width="100" height="100"
width.One="200" height.One="210"
width.Two="100" height.Two="100"
click="currentState='One'"&gt;
&lt;s:Label fontSize="24" text="One"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Two"
x="0" y="110"
x.One="0" y.One="0"
x.Two="110" y.Two="0"
width="100" height="100"
width.One="100" height.One="100"
width.Two="200" height.Two="210"
click="currentState='Two'"&gt;
&lt;s:Label fontSize="24" text="Two"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p3" title="Three"
x="110" y="0"
x.One="0" y.One="110"
x.Two="0" y.Two="110"
width="200" height="210"
width.One="100" height.One="100"
width.Two="100" height.Two="100"
click="currentState='default'"&gt;
&lt;s:Label fontSize="24" text="Three"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Group&gt;
&lt;/s:Application&gt;</pre>
<p>In this example:</p>
<ol>
<li>
<p>You use the <samp class="codeph">click</samp> event of each Panel
container to change the view state. </p>
</li>
<li>
<p>When the application changes view state, Flex searches for
a Transition object that matches the current and destination view
state. In this example, you set the <samp class="codeph">fromState</samp> and <samp class="codeph">toState</samp> properties
to <samp class="codeph">"*"</samp>. Therefore, Flex applies myTransition to
all state changes. For more information on setting the <samp class="codeph">fromState</samp> and <samp class="codeph">toState</samp> properties,
see <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb1_verapache">Defining
multiple transitions</a>.</p>
</li>
<li>
<p>After Flex determines the transition that matches the change
of view state, Flex applies the effects defined by the transition
to the effect targets. In this example, you use the specification
of the top-level Parallel effect in the transition to specify the
targets as the three Panel containers. For more information on setting
the effect targets, see <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb0_verapache">Defining
effect targets</a>.</p>
</li>
</ol>
<p>The effects play in parallel on all effect targets, so the three
Panel containers move to a new position and change size simultaneously.
You can also define the top-level effect as a <a href="https://flex.apache.org/asdoc/mx/effects/Sequence.html" target="_blank">Sequence</a> effect
to make the effects occur sequentially, rather than in parallel. </p>
<p>Flex determines the start and end property values of the Move
and Resize effect by using information from any properties that
you specified to the effect, the current view state, and the destination
view state. In this example, you omit any property specifications
in the effect definitions, so Flex uses the current size and position
of each Panel container to determine the values of the <samp class="codeph">Move.xFrom</samp>, <samp class="codeph">Move.yFrom</samp>, <samp class="codeph">Resize.widthFrom</samp>,
and <samp class="codeph">Resize.heightFrom</samp> properties. Flex uses the
destination view state to determine the values of the <samp class="codeph">Move.xTo</samp>, <samp class="codeph">Move.yTo</samp>, <samp class="codeph">Resize.widthTo</samp>,
and <samp class="codeph">Resize.heightTo</samp> properties. For more information,
see <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7faf_verapache">Defining
the effect start and end values</a>.</p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7fb1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7fb1_verapache"><!-- --></a>
<h3 class="topictitle3">Defining multiple transitions</h3>
<div>
<p>You can define multiple transitions in your application
so that you can associate a specific transition with a specific
change to the view state. To specify the transition associated with
a change to the view states, you use the <a href="https://flex.apache.org/asdoc/mx/states/Transition.html#fromState" target="_blank">fromState</a> and <a href="https://flex.apache.org/asdoc/mx/states/Transition.html#toState" target="_blank">toState</a> properties.</p>
<p>By default, both the <samp class="codeph">fromState</samp> and <samp class="codeph">toState</samp> properties
are set to <samp class="codeph">"*"</samp>, which indicates that the transition
should be applied to any changes in the view state. You can set
either property to an empty string, <samp class="codeph">""</samp>, which corresponds
to the default view state.</p>
<p>You use the <samp class="codeph">fromState</samp> property to explicitly
specify the view state that your are changing from, and the <samp class="codeph">toState</samp> property
to explicitly specify the view state that you are changing to, as
the following example shows:</p>
<pre class="codeblock"> &lt;s:transitions&gt;
  &lt;!-- Play for a change to the login view state from any view state. --&gt;
  &lt;s:Transition id="toLoginFromAny" fromState="*" toState="login"&gt;
  ...
  &lt;/s:Transition&gt;
 
  &lt;!-- Play for a change to the login view state from the details view state. --&gt;
  &lt;s:Transition id="toLoginFromDetails" fromState="details" toState="login"&gt;
  ...
  &lt;/s:Transition&gt;
 
  &lt;!-- Play for a change from any view state to any other view state. --&gt;
  &lt;s:Transition id="toAnyFromAny" fromState="*" toState="*"&gt;
  ...
  &lt;/s:Transition&gt;
 &lt;/s:transitions&gt;
 
 &lt;!-- Go to the login view state, transition toLoginFromAny plays. --&gt;
 &lt;s:Button click="currentState="login";/&gt;
 
 &lt;!-- Go to the details view state, transition toAnyFromAny plays. --&gt;
 &lt;s:Button click="currentState="details";/&gt;
 
 &lt;!-- Go to the login view state, transition toLoginFromDetails plays because you transitioned from the details to the login view state. --&gt;
 &lt;s:Button click="currentState="login";/&gt;
 
 &lt;!-- Go to the default view state, transition toAnyFromAny plays. --&gt;
 &lt;s:Button click="currentState='';/&gt; </pre>
<p>If a state change matches two transitions, the <samp class="codeph">toState</samp> property
takes precedence over the <samp class="codeph">fromState</samp> property. If
more than one transition matches, Flex uses the first matching definition
detected in the <samp class="codeph">transition</samp> Array. </p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7fb0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7fb0_verapache"><!-- --></a>
<h3 class="topictitle3">Defining effect targets</h3>
<div>
<p>The <samp class="codeph">&lt;s:Transition&gt;</samp> tag shown in
the section <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fae_verapache">Defining
transitions</a> defines the effects that make up a transition.
The top-level effect defines the target components of the effects
in the transition when the effect does not explicitly define a target.
In that example, the transition is performed on all three Panel containers
in the application. If you want the transition to play only on the
first two panels, you define the <a href="https://flex.apache.org/asdoc/mx/effects/Parallel.html" target="_blank">Parallel</a> effects
as the following example shows:</p>
<pre class="codeblock"> &lt;s:Transition fromState="*" toState="*"&gt;
  &lt;!-- Define a Parallel effect as the top most effect.--&gt;
  <strong>&lt;s:Parallel id="t1" targets="{[p1,p2]}"&gt;</strong>
  &lt;s:Move duration="400"/&gt;
  &lt;s:Resize duration="400"/&gt;
  &lt;/s:Parallel&gt;
 &lt;/s:Transition&gt;</pre>
<p>You removed the third panel from the transition, so it is no
longer a target of the Move and Resize effects. Therefore, the third
panel appears to jump to its new position and size during the change
in view state. The other two panels show a smooth change in size
and position for the 400-millisecond (ms) duration of the effects. </p>
<p>You can also use the <samp class="codeph">target</samp> or <samp class="codeph">targets</samp> properties
of the effects within the transition to explicitly specify the effect
target, as the following example shows: </p>
<pre class="codeblock"> &lt;s:Parallel id="t1" targets="{[p1,p2,p3]}"&gt;
  &lt;s:Move targets="{[p1,p2]}" duration="400"/&gt;
  &lt;s:Resize duration="400"/&gt;
 &lt;/s:Parallel&gt;</pre>
<p>In this example, the Resize effect plays on all three panels,
while the Move effect plays only on the first two panels. You could
also write this example as the following code shows:</p>
<pre class="codeblock"> &lt;s:Parallel id="t1" targets="{[p1,p2]}"&gt;
  &lt;s:Move duration="400"/&gt;
  &lt;s:Resize targets="{[p1,p2,p3]}" duration="400"/&gt;
 &lt;/s:Parallel&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7faf_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7faf_verapache"><!-- --></a>
<h3 class="topictitle3">Defining the effect start and end
values</h3>
<div>
<p>Like any effect, an effect within a transition has properties
that you use to configure it. For example, most effects have properties
that define starting and ending information for the target component,
such as the <samp class="codeph">xFrom</samp>, <samp class="codeph">yFrom</samp>, <samp class="codeph">xTo</samp>, and <samp class="codeph">yTo</samp> properties
of the Move effect. </p>
<p>Effects defined in a transition must determine their property
values for the effect to execute. Flex uses the following rules
to determine the start and end values of effect properties of a
transition: </p>
<ol>
<li>
<p>If the effect explicitly defines the values of any properties,
use them in the transition, as the following example shows:</p>
<pre class="codeblock"> &lt;s:Transition fromState="*" toState="*"&gt;
  &lt;s:Sequence id="t1" targets="{[p1,p2,p3]}"&gt;
  <strong>&lt;mx:Blur duration="100" blurXFrom="0.0" blurXTo="10.0"
blurYFrom="0.0" </strong> <strong>blurYTo="10.0"</strong>/&gt;
  &lt;s:Parallel&gt;
  &lt;s:Move duration="400"/&gt;
  &lt;s:Resize duration="400"/&gt;
  &lt;/s:Parallel&gt;
  <strong> &lt;mx:Blur duration="100" blurXFrom="10.0" blurXTo="0.0"
blurYFrom="10.0" </strong> <strong> blurYTo="0.0"</strong>/&gt;
  &lt;/s:Sequence&gt;
 &lt;/s:Transition&gt;</pre>
<p>In this example, the two Blur
filters explicitly define the properties of the effect.</p>
</li>
<li>
<p>If the effect does not explicitly define the start values
of the effect, Flex determines them from the current settings of
the target component, as defined by the current view state.</p>
<p>In
the example in rule 1, notice that the Move and Resize effects do
not define start values. Therefore, Flex determines them from the
current size and position of the effect targets in the current view
state.</p>
</li>
<li>
<p>If the effect does not explicitly define the end values of
the effect, Flex determines them from the settings of the target
component in the destination view state.</p>
<p>In the example in
rule 1, the Move and Resize effects determine the end values from
the size and position of the effect targets in the destination view
state. In some cases, the destination view state explicitly defines
these values. If the destination view state does not define the
values, Flex determines them from the settings of the default view
state. </p>
</li>
<li>
<p>If there are no explicit values, and Flex cannot determine
values from the current or destination view states, the effect uses
its default property values. </p>
</li>
</ol>
<p>The following example modifies the three-panel example shown
in <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fae_verapache">Defining transitions</a> by
adding Blur effects to the transition, where the Blur effect explicitly defines
the values of the <samp class="codeph">blurXFrom</samp>, <samp class="codeph">blurXTo</samp>, <samp class="codeph">blurYFrom</samp>,
and <samp class="codeph">blurYTo</samp> properties:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions\DefiningTransWithBlurs.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" width="400" &gt;
&lt;!-- Define the two view states, in addition to the base state.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="One"/&gt;
&lt;s:State name="Two"/&gt;
&lt;/s:states&gt;
&lt;!-- Define the single transition for all view state changes.--&gt;
&lt;s:transitions&gt;
&lt;s:Transition fromState="*" toState="*"&gt;
&lt;s:Sequence id="t1" targets="{[p1,p2,p3]}"&gt;
&lt;mx:Blur duration="100" blurXFrom="0.0" blurXTo="10.0"
blurYFrom="0.0" blurYTo="10.0"/&gt;
&lt;s:Parallel&gt;
&lt;mx:Move duration="400"/&gt;
&lt;mx:Resize duration="400"/&gt;
&lt;/s:Parallel&gt;
&lt;mx:Blur duration="100" blurXFrom="10.0" blurXTo="0.0"
blurYFrom="10.0" blurYTo="0.0"/&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;!-- Define the container holding the three Panel containers.--&gt;
&lt;s:Group id="pm" width="100%" height="100%"&gt;
&lt;s:Panel id="p1" title="One"
x="0" y="0"
x.One="110" y.One="0"
x.Two="0" y.Two="0"
width="100" height="100"
width.One="200" height.One="210"
width.Two="100" height.Two="100"
click="currentState='One'"&gt;
&lt;mx:Label fontSize="24" text="One"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Two"
x="0" y="110"
x.One="0" y.One="0"
x.Two="110" y.Two="0"
width="100" height="100"
width.One="100" height.One="100"
width.Two="200" height.Two="210"
click="currentState='Two'"&gt;
&lt;mx:Label fontSize="24" text="Two"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p3" title="Three"
x="110" y="0"
x.One="0" y.One="110"
x.Two="0" y.Two="110"
width="200" height="210"
width.One="100" height.One="100"
width.Two="100" height.Two="100"
click="currentState='default'"&gt;
&lt;mx:Label fontSize="24" text="Three"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Group&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WSE91C8086-C85B-430c-B340-F3224F5AD719_verapache"><a name="WSE91C8086-C85B-430c-B340-F3224F5AD719_verapache"><!-- --></a>
<h3 class="topictitle3">Interrupting and reversing a transition</h3>
<div>
<p>Flex does not support the playing of multiple transitions
simultaneously. If a transition is currently playing when a new
transition occurs, by default the currently playing transition stops
by calling the <samp class="codeph">end()</samp> method on all effects in the
transition. </p>
<p>For example, a transition is playing between view states A and
B. While it is playing, a transition is triggered because of a change
from view state B to view state C. The <samp class="codeph">end()</samp> method
causes the current transition, from view state A to B, to snap to
the B view state. The new transition, from view state B to C, then
starts playing.</p>
<p>Use the <samp class="codeph">Transition.interruptionBehavior</samp> property
of the new transition to control the behavior of the current transition.
By default, the <samp class="codeph">interruptionBehavior</samp> property is
set to <samp class="codeph">end</samp> to specify that the current transition
snaps to its end view state. Set the <samp class="codeph">interruptionBehavior</samp> property
of the new transition to <samp class="codeph">stop</samp> to halt that current
transition instead. The new transition then plays from the halt
location in the current transition, rather than having the current
transition snap to its end view state. The value of <samp class="codeph">stop</samp> can
smooth out the appearance of an interrupted transition. That is
because the user does not see the current transition snap to its
end state before the new transition begins. </p>
<p>In some cases, the new transition is the reverse of the current
transition. For example, a transition is playing between view states
A and B. While it is playing, a transition is triggered to change
back from view state B to A. </p>
<div class="p">When your application requires a reverse transition, you can
either:<ul>
<li>
<div class="p">Defines two transitions. Define one transition
for the change from view state A to view state B, and one for the
change from B to A. Use the <samp class="codeph">toState</samp> and <samp class="codeph">fromState</samp> properties
of the Transition class to specify the view states for the two transitions,
as shown below:<pre class="codeblock"> &lt;s:transitions&gt;
  <strong>&lt;s:Transition id="fromAtoB" fromState="A" toState="B"&gt;</strong>
...
  &lt;/s:Transition&gt;
 
  <strong>&lt;s:Transition id="fromBtoA" fromState="B" toState="A"&gt;</strong>
...
  &lt;/s:Transition&gt;
 &lt;/s:transitions&gt;</pre>
</div>
<p>The <samp class="codeph">interruptionBehavior</samp> property
controls the behavior of the current transition when the reverse
transition starts playing.</p>
</li>
<li>
<p>Define a single transition. Set the <samp class="codeph">autoReverse</samp> property
of the Transition class to <samp class="codeph">true</samp> to specify that
this transition applies to both the forward and reverse view state
changes. Therefore, use this transition on a change from view state
A to view state B, and on the change from B to A.</p>
<div class="p">
<pre class="codeblock"> &lt;s:transitions&gt;
  <strong>&lt;s:Transition id="fromAtoBtoA" fromState="A" toState="B" autoReverse="true"&gt;</strong>
...
 &lt;/s:transitions&gt;</pre>
</div>
<div class="p">
<div class="note"><span class="notetitle">Note:</span> If a transition
uses the <samp class="codeph">toState</samp> and <samp class="codeph">fromState</samp> properties
to explicitly handle the transition from view state B to A, then
Flex ignores the <samp class="codeph">autoReverse</samp> property.</div>
While
the transition from view state A to view state B is playing, the
reverse transition can occur to interrupt the current transition.
The reverse transition always halts the current transition at its
current location. That is, the reverse transition always plays as
if the <samp class="codeph">interruptionBehavior</samp> property was set to <samp class="codeph">stop</samp>,
regardless of the real value of <samp class="codeph">interruptionBehavior</samp>.</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff8_verapache"><!-- --></a>
<h2 class="topictitle2">Handling events when using transitions</h2>
<div>
<p>You
can handle view state events, such as <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html#currentStateChange" target="_blank">currentStateChange</a> and <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html#currentStateChanging" target="_blank">currentStateChanging</a>,
as part of an application that defines transitions. Changes to the
view state, dispatching events, and playing transition effects occur
in the following order:</p>
<ol>
<li>
<p>You set the <samp class="codeph">currentState</samp> property to
the destination view state.</p>
</li>
<li>
<p>Flex dispatches the <samp class="codeph">currentStateChanging</samp> event.</p>
</li>
<li>
<p>Flex examines the list of transitions to determine the one
that matches the change of the view state.</p>
</li>
<li>
<p>Flex examines the components to determine the start values
of any effects.</p>
</li>
<li>
<p>Flex applies the destination view state to the application.</p>
</li>
<li>
<p>Flex dispatches the <samp class="codeph">currentStateChange</samp> event.</p>
</li>
<li>
<p>Flex plays the effects that you defined in the transition. </p>
</li>
</ol>
<p>If you change state again while a transition plays, Flex jumps
to the end of the transition before starting any transition associated
with the new change of view state. </p>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7fab_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7fab_verapache"><!-- --></a>
<h2 class="topictitle2">Using action effects in a transition</h2>
<div>
<p>In the following example, you define an application that
has two view states:</p>
<div class="figborder">
<img src="images/tr_transActions.png" alt="An application that has two view states"/>
<dl>
<dt class="dlterm">
<strong>A.</strong>
</dt>
<dd>Default view state</dd>
<dt class="dlterm">
<strong>B.</strong>
</dt>
<dd>OneOnly view state</dd>
</dl>
</div>
<p>To move from the default view state to the OneOnly view state,
you create the following view state definition:</p>
<pre class="codeblock"> &lt;s:states&gt;
&lt;s:State name="default"/&gt;
  &lt;s:State name="OneOnly"/&gt;
&lt;/s:states&gt; </pre>
<p>To move from the default view state to the OneOnly view state,
you set the value of the <samp class="codeph">visible</samp> and <samp class="codeph">includeInLayout</samp> properties
to <samp class="codeph">false</samp> so that Flex makes the second Panel container
invisible and ignores it when laying out the application. If the <samp class="codeph">visible</samp> property
is <samp class="codeph">false</samp>, and the <samp class="codeph">includeInLayout</samp> property
is <samp class="codeph">true</samp>, the container is invisible, but Flex lays
out the application as if the component were visible. </p>
<p>A view state defines how to change states, and the transition
defines the order in which the visual changes occur. In the example
shown in the previous image, you play an Wipe effect on the second
panel when it disappears, and when it reappears on a transition
back to the base state. </p>
<p>For the change from the base state to the OneOnly state, you
define the toOneOnly transition which uses the Wipe effect to make
the second panel disappear, and then sets the panel's <samp class="codeph">visible</samp> and <samp class="codeph">includeInLayout</samp> properties
to <samp class="codeph">false</samp>. For a transition back to the base state,
you define the toAnyFromAny transition that makes the second panel
visible by setting its <samp class="codeph">visible</samp> and <samp class="codeph">includeInLayout</samp> properties
to <samp class="codeph">true</samp>, and then uses the Wipe effect to make
the panel appear, as the following example shows:</p>
<pre class="codeblock"> &lt;s:transitions&gt;
  <strong>&lt;s:Transition id="toOneOnly" fromState="*" toState="OneOnly"&gt;</strong>
  &lt;s:Sequence id="t1" targets="{[p2]}"&gt;
&lt;s:Wipe direction="left" duration="350"/&gt;
  &lt;s:SetAction property="visible"/&gt;
  &lt;s:SetAction target="{p2}" property="includeInLayout"/&gt;
  &lt;/Sequence&gt;
  &lt;/s:Transition&gt;
 
  <strong>&lt;s:Transition id="toAnyFromAny" fromState="*" toState="*"&gt;</strong>
  &lt;s:Sequence id="t2" targets="{[p2]}"&gt;
  &lt;s:SetAction target="{p2}" property="includeInLayout"/&gt;
  &lt;s:SetAction property="visible"/&gt;
&lt;s:Wipe direction="left" duration="350"/&gt;
  &lt;/s:Sequence&gt;
  &lt;/s:Transition&gt;
 &lt;/s:transitions&gt;</pre>
<p>In the toOneOnly transition, if you hide the target by setting
its <samp class="codeph">visible</samp> property to <samp class="codeph">false</samp>,
and then play the Iris effect, you would not see the Iris effect play
because the target is already invisible. </p>
<p>To control the order of view state changes during a transition,
Flex defines several <em>action</em>
<em>effects</em>. The previous
example uses the Spark SetAction action effect to control when to
set the <samp class="codeph">visible</samp> and <samp class="codeph">includeInLayout</samp> properties
in the transition. The following table describes the action effects:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e981">
<p>Spark action effect</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e987">
<p>MX action effect</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e993">
<p>Corresponding view state class</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e999">
<p>Use</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e981 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/effects/SetAction.html" target="_blank">SetAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e987 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/effects/SetPropertyAction.html" target="_blank">SetPropertyAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e993 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/states/SetProperty.html" target="_blank">SetProperty</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e999 ">
<p>Sets a property value as part of a transition.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e981 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/effects/SetAction.html" target="_blank">SetAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e987 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/effects/SetStyleAction.html" target="_blank">SetStyleAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e993 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/states/SetStyle.html" target="_blank">SetStyle</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e999 ">
<p>Sets a style to a value as part of a transition.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e981 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/effects/AddAction.html" target="_blank">AddAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e987 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/effects/AddChildAction.html" target="_blank">AddChildAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e993 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/states/AddChild.html" target="_blank">AddChild</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e999 ">
<p>Adds a child as part of a transition.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e981 ">
<p>
<a href="https://flex.apache.org/asdoc/spark/effects/RemoveAction.html" target="_blank">RemoveAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e987 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/effects/RemoveChildAction.html" target="_blank">RemoveChildAction</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e993 ">
<p>
<a href="https://flex.apache.org/asdoc/mx/states/RemoveChild.html" target="_blank">RemoveChild</a>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e999 ">
<p>Removes a child as part of a transition.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>It's best to use the Spark action effects instead of the MX action
effects.</p>
<p>To control when a change defined by the view state property occurs
in a transition, you use the corresponding action effect. The action
effects give you control over the order of the state change.</p>
<p>In the previous example, you used the following statement to
define an action effect to occur when the value of the <samp class="codeph">visible</samp> property
of a component changes:</p>
<pre class="codeblock"> &lt;s:SetAction property="visible"/&gt;</pre>
<p>This action effect plays when the value of the <samp class="codeph">visible</samp> property
changes to either <samp class="codeph">true</samp> or <samp class="codeph">false</samp>.
You can further control the effect using the <samp class="codeph">value</samp> property
of the <samp class="codeph">&lt;s:SetAction&gt;</samp> tag, as the following
example shows:</p>
<pre class="codeblock"> &lt;s:SetAction property="visible" value="true"/&gt;</pre>
<p>In this example, you specify to play the effect only when the
value of the <samp class="codeph">visible</samp> property changes to <samp class="codeph">true</samp>.
Adding this type of information to the action effect can be useful
if you want to use filters with your transitions. For more information,
see <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb2_verapache">Filtering
effects</a>. </p>
<p>The action effects do not support a <samp class="codeph">duration</samp> property;
they only perform the specified action. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff6_verapache"><!-- --></a>
<h3 class="topictitle3">Example: Using action effects</h3>
<div>
<p>The following example shows the complete code for the example
in <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fab_verapache">Using
action effects in a transition</a>:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions\ActionTransitions.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;!-- Define one view state, in addition to the base state.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="OneOnly"/&gt;
&lt;/s:states&gt;
&lt;!-- Define Transition array with one Transition object.--&gt;
&lt;s:transitions&gt;
&lt;s:Transition id="toOneOnly" fromState="*" toState="OneOnly"&gt;
&lt;s:Sequence id="t1" targets="{[p2]}"&gt;
&lt;s:Wipe direction="left" duration="350"/&gt;
&lt;s:SetAction property="visible"/&gt;
&lt;s:SetAction property="includeInLayout"/&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;s:Transition id="toAnyFromAny" fromState="*" toState="*"&gt;
&lt;s:Sequence id="t2" targets="{[p2]}"&gt;
&lt;s:SetAction property="includeInLayout"/&gt;
&lt;s:SetAction property="visible"/&gt;
&lt;s:Wipe direction="right" duration="350"/&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;s:Panel id="p1" title="One"
width="100" height="100"&gt;
&lt;s:Label fontSize="24" text="One"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Two"
width="100" height="100"
visible="true" visible.OneOnly="false"
includeInLayout="true" includeInLayout.OneOnly="false"&gt;
&lt;s:Label fontSize="24" text="Two"/&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" label="Change state"
click="currentState = currentState == 'OneOnly' ? '' : 'OneOnly';"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7fb2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7fb2_verapache"><!-- --></a>
<h2 class="topictitle2">Filtering effects</h2>
<div>
<p>By default, Flex applies all of the effects defined in
a transition to all of the target components of the transition.
Therefore, in the following example, Flex applies the Move and Resize
effects to all three targets:</p>
<pre class="codeblock"> &lt;s:Transition fromState="*" toState="*"&gt;
  &lt;!-- Define a Parallel effect as the top most effect.--&gt;
  <strong>&lt;s:Parallel id="t1" targets="{[p1,p2,p3]}"&gt;</strong>
  &lt;!-- Define a Move and Resize effect.--&gt;
  &lt;s:Move duration="400"/&gt;
  &lt;s:Resize duration="400"/&gt;
  &lt;/s:Parallel&gt;
 &lt;/s:Transition&gt;</pre>
<p>However, you might want to conditionalize an effect so that it
does not apply to all target components, but only to a subset of
the components. For example, you define an application with three
view states, as the following image shows:</p>
<div class="figborder">
<img src="images/tr_transFilters.png" alt="An application with three view states"/>
<dl>
<dt class="dlterm">
<strong>A.</strong>
</dt>
<dd>Default view state</dd>
<dt class="dlterm">
<strong>B.</strong>
</dt>
<dd>Two view state</dd>
<dt class="dlterm">
<strong>C.</strong>
</dt>
<dd>Three view state</dd>
</dl>
</div>
<p>Each change of view state removes the top panel, moves the bottom
panel to the top, and adds the next panel to the bottom of the screen.
In this example, the third panel is invisible in the default view
state. </p>
<p>For this example, you define a single transition that applies
a Wipe effect to the top panel as it is removed, applies a Move
effect to the bottom panel as it moves to the top position, and
applies another Wipe effect to the panel being added to the bottom,
as the following example shows:</p>
<pre class="codeblock"> &lt;s:transitions&gt;
  &lt;s:Transition fromState="*" toState="*"&gt;
  &lt;s:Sequence targets="{[p1,p2,p3]}"&gt;
  &lt;s:Sequence id="sequence1" filter="hide"&gt;
  &lt;s:Wipe direction="up"/&gt;
  &lt;s:SetPropertyAction name="visible" value="false"/&gt;
  &lt;/s:Sequence&gt;
  &lt;s:Move filter="move"/&gt;
  &lt;s:Sequence id="sequence2" filter="show"&gt;
  &lt;s:SetAction property="visible" value="true"/&gt;
  &lt;s:Wipe direction="up"/&gt;
  &lt;/s:Sequence&gt;
  &lt;/s:Sequence&gt;
  &lt;/s:Transition&gt;
 &lt;/s:transitions&gt;</pre>
<p>The sequence1 <a href="https://flex.apache.org/asdoc/mx/effects/Sequence.html" target="_blank">Sequence</a> effect
uses the <samp class="codeph">filter</samp> property to specify the change that
a component must go through in order for the effect to play on it.
In this example, the sequence1 effect specifies a value of <samp class="codeph">"hide"</samp> for
the <samp class="codeph">filter</samp> property. Therefore, the Wipe and SetAction
effects only play on those components that change from visible to
invisible by setting their <samp class="codeph">visible</samp> property to <samp class="codeph">false</samp>. </p>
<p>In the sequence2 Sequence effect, you set the <samp class="codeph">filter</samp> property
to <samp class="codeph">show</samp>. Therefore, the Wipe and SetAction effects
only play on those components whose state changes from invisible
to visible by setting their <samp class="codeph">visible</samp> property to <samp class="codeph">true</samp>.</p>
<p>The Move effect also specifies a <samp class="codeph">filter</samp> property
with a value of <samp class="codeph">move</samp>. Therefore, it applies to
all target components that are changing position. </p>
<p>The following table describes the possible values of the <samp class="codeph">filter</samp> property: </p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e1396">
<p>Value</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e1402">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1396 ">
<div class="p">
<pre class="codeblock">add</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1402 ">
<p>Specifies to play the effect on all children
added during the change of view state.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1396 ">
<div class="p">
<pre class="codeblock">hide</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1402 ">
<p>Specifies to play the effect on all children
whose <samp class="codeph">visible</samp> property changes from <samp class="codeph">true</samp> to <samp class="codeph">false</samp> during
the change of view state.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1396 ">
<div class="p">
<pre class="codeblock">move</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1402 ">
<p>Specifies to play the effect on all children
whose <samp class="codeph">x</samp> or <samp class="codeph">y</samp> properties change
during the change of view state.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1396 ">
<div class="p">
<pre class="codeblock">remove</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1402 ">
<p>Specifies to play the effect on all children
removed during the change of view state.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1396 ">
<div class="p">
<pre class="codeblock">resize</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1402 ">
<p>Specifies to play the effect on all children
whose <samp class="codeph">width</samp> or <samp class="codeph">height</samp> properties
change during the change of view state.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1396 ">
<div class="p">
<pre class="codeblock">show</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1402 ">
<p>Specifies to play the effect on all children
whose <samp class="codeph">visible</samp> property changes from <samp class="codeph">false</samp> to <samp class="codeph">true</samp> during
the change of view state.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff4_verapache"><!-- --></a>
<h3 class="topictitle3">Example: Using a filter</h3>
<div>
<p>The following example shows the complete code for the example
in <a href="flx_transitions_tr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb2_verapache">Filtering effects</a>:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions\FilterShowHide.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" width="700" &gt;
&lt;!-- Define two view state, in addition to the base state.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="Two"/&gt;
&lt;s:State name="Three"/&gt;
&lt;/s:states&gt;
&lt;!-- Define a single transition for all state changes.--&gt;
&lt;s:transitions&gt;
&lt;s:Transition fromState="*" toState="*"&gt;
&lt;s:Sequence targets="{[p1,p2,p3]}"&gt;
&lt;s:Sequence id="sequence1" filter="hide" &gt;
&lt;s:Wipe direction="up"/&gt;
&lt;s:SetAction property="visible" value="false"/&gt;
&lt;/s:Sequence&gt;
&lt;s:Move filter="move"/&gt;
&lt;s:Sequence id="sequence2" filter="show" &gt;
&lt;s:SetAction property="visible" value="true"/&gt;
&lt;s:Wipe direction="up"/&gt;
&lt;/s:Sequence&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;s:Group id="pm" width="100%" height="100%"&gt;
&lt;s:Panel id="p1" title="One"
visible="true" visible.Two="false"
x="0" y="0"
x.Three="0" y.Three="110"
width="100" height="100"
click="currentState=''" &gt;
&lt;s:Label fontSize="24" text="One"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Two"
visible="true" visible.Three="false"
x="0" y="110"
x.Two="0" y.Two="0"
width="100" height="100"
click="currentState='Two'" &gt;
&lt;s:Label fontSize="24" text="Two"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p3" title="Three"
visible="false" visible.Two="true" visible.Three="true"
x.Two="0" y.Two="110"
x.Three="0" y.Three="0"
width="100" height="100"
click="currentState='Three'" &gt;
&lt;s:Label fontSize="24" text="Three"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Group&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff3_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7ff3_verapache"><!-- --></a>
<h3 class="topictitle3">Defining a custom filter</h3>
<div>
<p>Flex lets you use the <a href="https://flex.apache.org/asdoc/mx/effects/EffectTargetFilter.html" target="_blank">EffectTargetFilter</a> class
to define a custom filter that is executed by each transition effect
on each target of the effect. By defining a custom filter, you can
specify your own logic for controlling a transition. The following
table describes the properties of the EffectTargetFilter class: </p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e1610">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e1616">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1610 ">
<div class="p">
<pre class="codeblock">filterProperties</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1616 ">
<p>An Array of Strings specifying component
properties. If any of the properties in the Array have changed on
the target component, play the effect on the target. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1610 ">
<div class="p">
<pre class="codeblock">filterStyles</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1616 ">
<p>An Array of Strings specifying style properties.
If any of the style properties in the Array have changed on the target
component, play the effect on the target. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1610 ">
<div class="p">
<pre class="codeblock">filterFunction</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1616 ">
<p>A property containing a reference to a callback
function that defines custom filter logic. Flex calls this method on
every target of the effect. If the function returns <samp class="codeph">true</samp>,
the effect plays on the target; if it returns <samp class="codeph">false</samp>,
the target is skipped by that effect. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1610 ">
<div class="p">
<pre class="codeblock">requiredSemantics</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1616 ">
<p>A collection of properties and associated
values which must be associated with a target for the effect to
be played.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>The callback function specified by the <samp class="codeph">filterFunction</samp> property
has the following signature:</p>
<pre class="codeblock"> <em>filterFunc</em>(<em>propChanges</em>:Array, <em>instanceTarget</em>:Object):Boolean {
  // Return true to play the effect on instanceTarget,
  // or false to not play the effect.
 }</pre>
<p>The function takes the following arguments:</p>
<dl>
<dt class="dlterm">
<samp class="codeph">
<em>propChanges</em>
</samp>
</dt>
<dd>
<p>An Array of <a href="https://flex.apache.org/asdoc/mx/effects/effectClasses/PropertyChanges.html" target="_blank">PropertyChanges</a> objects,
one object per target component of the effect. If a property of
a target is not modified by the transition, it is not included in
this Array.</p>
</dd>
<dt class="dlterm">
<samp class="codeph">
<em>instanceTarget</em>
</samp>
</dt>
<dd>
<p>The specific target component of the effect that you filter. </p>
<p>For
an example using a custom filter function, see <a href="flx_transitions_tr.html#WS19f279b149e7481c-b6fc4ee12c13701f38-7fff_verapache">Example:
Using a custom effect filter</a>.</p>
<p>The following example
defines a custom filter that specifies to play the effect only on
a target component whose <samp class="codeph">x</samp> or <samp class="codeph">width</samp> property
is modified as part of the change of view state:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions\EffectFilterExampleMXML.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="700"&gt;
&lt;!-- Define the two view states, in addition to the base state.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="One"/&gt;
&lt;s:State name="Two"/&gt;
&lt;/s:states&gt;
&lt;s:transitions&gt;
&lt;s:Transition fromState="*" toState="*"&gt;
&lt;s:Sequence id="t1" targets="{[p1,p2,p3]}"&gt;
&lt;mx:Blur id="myBlur" duration="100" blurXFrom="0.0"
blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0"&gt;
&lt;!-- Define the custom filter. --&gt;
&lt;mx:customFilter&gt;
&lt;mx:EffectTargetFilter
filterProperties="['width','x']"/&gt;
&lt;/mx:customFilter&gt;
&lt;/mx:Blur&gt;
&lt;s:Parallel&gt;
&lt;s:Move duration="400"/&gt;
&lt;s:Resize duration="400"/&gt;
&lt;/s:Parallel&gt;
&lt;mx:Blur id="myUnBlur" duration="100" blurXFrom="10.0"
blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"&gt;
&lt;!-- Define the custom filter. --&gt;
&lt;mx:customFilter&gt;
&lt;mx:EffectTargetFilter
filterProperties="['width','x']"/&gt;
&lt;/mx:customFilter&gt;
&lt;/mx:Blur&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;!-- Define the container holding the three Panel containers.--&gt;
&lt;s:Group id="pm" width="100%" height="100%"&gt;
&lt;s:Panel id="p1" title="One"
x="0" y="0"
x.One="110" y.One="0"
x.Two="0" y.Two="0"
width="100" height="100"
width.One="200" height.One="210"
width.Two="100" height.Two="100"
click="currentState='One'"&gt;
&lt;s:Label fontSize="24" text="One"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Two"
x="0" y="110"
x.One="0" y.One="0"
x.Two="110" y.Two="0"
width="100" height="100"
width.One="100" height.One="100"
width.Two="200" height.Two="210"
click="currentState='Two'"&gt;
&lt;s:Label fontSize="24" text="Two"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p3" title="Three"
x="110" y="0"
x.One="0" y.One="110"
x.Two="0" y.Two="110"
width="200" height="210"
width.One="100" height.One="100"
width.Two="100" height.Two="100"
click="currentState='default'"&gt;
&lt;s:Label fontSize="24" text="Three"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Group&gt;
&lt;/s:Application&gt;</pre>
</dd>
</dl>
</div>
<div class="nested3" id="WS19f279b149e7481c-b6fc4ee12c13701f38-8000_verapache"><a name="WS19f279b149e7481c-b6fc4ee12c13701f38-8000_verapache"><!-- --></a>
<h4 class="topictitle4">Writing a filter function</h4>
<div>
<p>To create a filter function, you define an <a href="https://flex.apache.org/asdoc/mx/effects/EffectTargetFilter.html" target="_blank">EffectTargetFilter</a> object,
and then specify that object as the value of the <samp class="codeph">Effect.customFilter</samp> property
for an effect. The following example uses the <samp class="codeph">creationComplete</samp> event
of an application to initialize an EffectTargetFilter object, and
then specify it as the value of the <samp class="codeph">customFilter</samp> property
for two <a href="https://flex.apache.org/asdoc/mx/effects/Blur.html" target="_blank">Blur</a> effects:</p>
<pre class="codeblock"> &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
<strong>creationComplete="initFilter(event);"</strong> width="700"&gt;
 
  &lt;fx:Script&gt;
  &lt;![CDATA[
 
  import mx.effects.EffectTargetFilter;
  import flash.events.Event;
 
  // This function returns true for the Panel moving to x=110.
  <strong>public function filterFunc(propChanges:Array,instanceTarget:Object):Boolean</strong>
  {
  ...
  }
 
  <strong>// Define the EffectTargetFilter object.</strong>
  private var myBlurFilter:EffectTargetFilter;
 
  <strong>// Initialize the EffectTargetFilter object, and set the</strong>
  <strong>// customFilter property for two Blur effects.</strong>
  private function initFilter(event:Event):void {
  myBlurFilter = new EffectTargetFilter();
 
  myBlurFilter.filterFunction=filterFunc;
 
  myBlur.customFilter=myBlurFilter;
  myUnBlur.customFilter=myBlurFilter;
  }
 
  ]]&gt;
  &lt;/Script&gt;
 
  &lt;s:transitions&gt;
  &lt;s:Transition fromState="*" toState="*"&gt;
  &lt;s:Sequence id="t1" targets="{[p1,p2,p3]}"&gt;
  <strong>&lt;mx:Blur id="myBlur"/&gt;</strong>
  &lt;s:Parallel&gt;
  &lt;s:Move duration="400"/&gt;
  &lt;s:Resize duration="400"/&gt;
  &lt;/Parallel&gt;
  <strong>&lt;mx:Blur id="myUnBlur"/&gt;</strong>
  &lt;/s:Sequence&gt;
  &lt;/s:Transition&gt;
  &lt;/s:transitions&gt;
 
  ...
 
 &lt;/s:Application&gt;</pre>
<p>The <samp class="codeph">propChanges</samp> argument passed to the filter
function contains an Array of <a href="https://flex.apache.org/asdoc/mx/effects/effectClasses/PropertyChanges.html" target="_blank">PropertyChanges</a> objects,
one object per target component of the effect. The following table
describes the properties of the PropertyChanges class:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e1871">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d922515e1877">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1871 ">
<div class="p">
<pre class="codeblock">target</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1877 ">
<p>A target component of the effect. The <samp class="codeph">end</samp> and <samp class="codeph">start</samp> properties
of the PropertyChanges class define how the target component is
modified by the change to the view state. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1871 ">
<div class="p">
<pre class="codeblock">start</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1877 ">
<p>An Object that contains the starting properties
of the <samp class="codeph">target</samp> component, as defined by the current
view state. For example, for a <samp class="codeph">target</samp> component
that is both moved and resized by a change to the view state, the <samp class="codeph">start</samp> property
contains the starting position and size of the component, as the
following example shows:</p>
<div class="p">
<pre class="codeblock">{x:00, y:00, width:100, height:100}</pre>
</div>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1871 ">
<div class="p">
<pre class="codeblock">end</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d922515e1877 ">
<p>An Object that contains the ending properties
of the <samp class="codeph">target</samp> component, as defined by the destination
view state. For example, for a <samp class="codeph">target</samp> component
that is both moved and resized by a change to the view state, the <samp class="codeph">end</samp> property
contains the ending position and size of the component, as the following
example shows:</p>
<div class="p">
<pre class="codeblock">{x:100, y:100, width:200, height:200}</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>Within the custom filter function, you first search the <samp class="codeph">propChanges</samp> Array
for the PropertyChanges object that matches the <samp class="codeph">instanceTarget</samp> argument
by comparing the <samp class="codeph">instanceTarget</samp> argument to the <samp class="codeph">propChanges.target</samp> property. </p>
<p>The following filter function examines the <samp class="codeph">propChanges</samp> Array
to determine if it should play the effect on the <samp class="codeph">instanceTarget</samp>.
In this example, the filter function returns <samp class="codeph">true</samp> only
for those components being moved to a position where the <samp class="codeph">translationX</samp>
property equals 110, as the following example shows:</p>
<pre class="codeblock"> // This function returns true for a target moving to x=110.
 public function filterFunc(propChanges:Array, instanceTarget:Object):Boolean {
 
  <strong>// Determine the length of the propChanges Array.</strong>
  for (var i:uint=0; i &lt; propChanges.length; i++)
  {
  // Determine the Array element that matches the effect target.
  if (propChanges[i].target == instanceTarget)
  {
  // Check to see if the end Object contains a value for x.
  <strong>if (propChanges[i].end["translationX"] != undefined)</strong>
  {
  // Return true of the end value for x is 110.
  <strong>return (propChanges[i].end.translationX == 110);</strong>
  }
  }
  }
  // Otherwise, return false.
  return false;
 }</pre>
</div>
</div>
<div class="nested3" id="WS19f279b149e7481c-b6fc4ee12c13701f38-7fff_verapache"><a name="WS19f279b149e7481c-b6fc4ee12c13701f38-7fff_verapache"><!-- --></a>
<h4 class="topictitle4">Example: Using a custom effect
filter</h4>
<div>
<p>In the following example, you use a custom filter function
to apply <a href="https://flex.apache.org/asdoc/mx/effects/Blur.html" target="_blank">Blur</a> effects
to one of the three targets of a transition. The other two targets
are not modified by the Blur effects. </p>
<p>To determine the target of the Blur effects, the custom filter
function examines the <samp class="codeph">translationX</samp> property of
each target. The Blur effects play only on the component moving
to x=110, as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- transitions\EffectFilterExample.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="initFilter(event);"
width="700"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.effects.EffectTargetFilter;
import flash.events.Event;
// This function returns true for the Panel moving to x=110.
public function filterFunc(propChanges:Array,
instanceTarget:Object):Boolean {
// Determine the length of the propChanges Array.
for (var i:uint=0; i &lt; propChanges.length; i++)
{
// Determine the Array element
// that matches the effect target.
if (propChanges[i].target == instanceTarget)
{
// Check whether the end Object contains
// a value for x.
if (propChanges[i].end["translationX"] != undefined)
{
// Return true if the end value for x is 110.
return (propChanges[i].end.translationX == 110);
}
}
}
return false;
}
// Define the EffectTargetFilter object.
private var myBlurFilter:EffectTargetFilter;
// Initialize the EffectTargetFilter object, and set the
// customFilter property for two Blur effects.
private function initFilter(event:Event):void {
myBlurFilter = new EffectTargetFilter();
myBlurFilter.filterFunction=filterFunc;
myBlur.customFilter=myBlurFilter;
myUnBlur.customFilter=myBlurFilter;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;!-- Define the two view states, in addition to the base state.--&gt;
&lt;s:states&gt;
&lt;s:State name="default"/&gt;
&lt;s:State name="One"/&gt;
&lt;s:State name="Two"/&gt;
&lt;/s:states&gt;
&lt;s:transitions&gt;
&lt;s:Transition fromState="*" toState="*"&gt;
&lt;s:Sequence id="t1" targets="{[p1,p2,p3]}"&gt;
&lt;mx:Blur id="myBlur" duration="100" blurXFrom="0.0"
blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0"/&gt;
&lt;s:Parallel&gt;
&lt;s:Move duration="400"/&gt;
&lt;s:Resize duration="400"/&gt;
&lt;/s:Parallel&gt;
&lt;mx:Blur id="myUnBlur" duration="100" blurXFrom="10.0"
blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/&gt;
&lt;/s:Sequence&gt;
&lt;/s:Transition&gt;
&lt;/s:transitions&gt;
&lt;!-- Define the container holding the three Panel containers.--&gt;
&lt;s:Group id="pm" width="100%" height="100%"&gt;
&lt;s:Panel id="p1" title="One"
x="0" y="0"
x.One="110" y.One="0"
x.Two="0" y.Two="0"
width="100" height="100"
width.One="200" height.One="210"
width.Two="100" height.Two="100"
click="currentState='One'"&gt;
&lt;s:Label fontSize="24" text="One"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Two"
x="0" y="110"
x.One="0" y.One="0"
x.Two="110" y.Two="0"
width="100" height="100"
width.One="100" height.One="100"
width.Two="200" height.Two="210"
click="currentState='Two'"&gt;
&lt;s:Label fontSize="24" text="Two"/&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p3" title="Three"
x="110" y="0"
x.One="0" y.One="110"
x.Two="0" y.Two="110"
width="200" height="210"
width.One="100" height.One="100"
width.Two="100" height.Two="100"
click="currentState='default'"&gt;
&lt;s:Label fontSize="24" text="Three"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Group&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested3" id="WS19f279b149e7481c-b6fc4ee12c13701f38-7ffe_verapache"><a name="WS19f279b149e7481c-b6fc4ee12c13701f38-7ffe_verapache"><!-- --></a>
<h4 class="topictitle4">Using the requiredSemantics property</h4>
<div>
<p>When working with data effects, you can use the <samp class="codeph">EffectTargetFiler.requiredSemantics</samp> property
to filter effects. If you want to play a data effect on all targets
of a list control that are not added by the effect, meaning targets
that are removed, replaced, moved, or affected in any other way,
you can write the effect definition as shown below:</p>
<pre class="codeblock"> &lt;mx:Blur&gt;
  &lt;mx:customFilter&gt;
  &lt;mx:EffectTargetFilter requiredSemantics="{{'added':false}}"/&gt;
  &lt;/mx:customFilter&gt;
 &lt;/mx:Blur&gt;</pre>
<p>To play a data effect on all targets that are not added or not
removed by the effect, you can write the effect definition as shown
below:</p>
<pre class="codeblock"> &lt;mx:Blur&gt;
  &lt;mx:customFilter&gt;
  &lt;mx:EffectTargetFilter requiredSemantics="{{'added':false}, {'removed':false}}"/&gt;
  &lt;/mx:customFilter&gt;
 &lt;/mx:Blur&gt;</pre>
<p>The allowed list of properties that you can specify includes <samp class="codeph">added</samp>, <samp class="codeph">removed</samp>, <samp class="codeph">replaced</samp>,
and <samp class="codeph">replacement</samp>. The allowed values for the properties
are <samp class="codeph">true</samp> and <samp class="codeph">false</samp>.</p>
<p>For more information on data effects, see <a href="flx_halo_effects_hf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fa8_verapache">Using
MX data effects</a>.</p>
</div>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7fef_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7fef_verapache"><!-- --></a>
<h2 class="topictitle2">Transition tips and troubleshooting</h2>
<div/>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7fee_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7fee_verapache"><!-- --></a>
<h3 class="topictitle3">Tips</h3>
<div>
<p>Determine the type of transition you are defining:</p>
<ul>
<li>
<p>With <em>dynamic</em> transitions, you know what effects
you want to play, but not which targets they will play on. </p>
</li>
<li>
<p>With <em>explicit</em> transitions, you know exactly what happens
to each individual target.</p>
</li>
</ul>
<p>
<em>Complex</em> transitions may consist of both dynamic and explicit
elements.</p>
<p>Tips for dynamic transitions:</p>
<ul>
<li>
<p>List all possible targets in the parent composite effect.</p>
</li>
<li>
<p>By default, all effects play on all specified targets. Use
filtering with dynamic transitions to limit the target set.</p>
</li>
<li>
<p>Dynamic transitions can be used with a wide variety of state
changes.</p>
</li>
</ul>
<p>Tips for explicit transitions:</p>
<ul>
<li>
<p>Specify targets on the child effects, or on a composite
effect when all child effects of the composite effect have the same
targets.</p>
</li>
<li>
<p>By default, all effects play on all specified targets. For
explicit transitions, make sure the targets are correctly set.</p>
</li>
<li>
<p>Explicit transitions typically require a different transition
for each change to the view state.</p>
</li>
</ul>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf600c1-7fed_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf600c1-7fed_verapache"><!-- --></a>
<h3 class="topictitle3">Troubleshooting</h3>
<div>
<p>Troubleshooting a transition effect that does not play:</p>
<ul>
<li>
<p>Is the effect target being hidden or removed? If so,
make sure you add an <samp class="codeph">&lt;RemoveChild&gt;</samp> property
to the view state definition, or an <samp class="codeph">&lt;s:SetPropertyAction name="visible"&gt;</samp> tag
in the transition definition. </p>
</li>
<li>
<p>Does the change to the view state define settings that pertain
to the transition effect? For example, if you have a Resize effect,
you must change the <samp class="codeph">width</samp> or <samp class="codeph">height</samp> property
of the target when the view state changes to trigger the effect.</p>
</li>
<li>
<p>Check that you specified the correct targets to the transition.</p>
</li>
<li>
<p>Check that your filter settings on the effect and on any
parent effect are not excluding the target.</p>
</li>
</ul>
<p>Troubleshooting an effect playing on too many targets:</p>
<ul>
<li>
<p>Add a filter for a dynamic transition, or change the
targets for an explicit transition.</p>
</li>
</ul>
<p>Troubleshooting wrong effect parameters:</p>
<ul>
<li>
<p>Did you specify explicit parameters on the effect? Are
they correct?</p>
</li>
<li>
<p>Ensure that you correctly set the <samp class="codeph">showTarget</samp> property
for mask effects such as the <a href="https://flex.apache.org/asdoc/mx/effects/Iris.html" target="_blank">Iris</a> effect,
and the wipe effects.</p>
</li>
</ul>
<p>Troubleshooting a flickering or flashing target:</p>
<ul>
<li>
<p>Ensure that you correctly set the <samp class="codeph">showTarget</samp> property
for mask effects such as the <a href="https://flex.apache.org/asdoc/mx/effects/Iris.html" target="_blank">Iris</a> effect,
and the wipe effects.</p>
</li>
<li>
<p>Is the effect target being hidden or removed? If so, make
sure you add an <samp class="codeph">&lt;RemoveChild&gt;</samp> property to
the view state definition to remove the target, or an <samp class="codeph">&lt;SetPropertyAction name="visible"&gt;</samp> tag
in the transition definition to hide the target. </p>
</li>
</ul>
<p>Troubleshooting when an application does not look correct after
a transition:</p>
<ul>
<li>
<p>Some effects leave the target with changed properties.
For example, a Fade effect leaves the <samp class="codeph">alpha</samp> property
of the target at the <samp class="codeph">alphaTo</samp> value specified to
the effect. If you use the Fade effect on a target that sets <samp class="codeph">alpha</samp> property
to zero, you must set the <samp class="codeph">alpha</samp> property to a nonzero
value before the object appears again.</p>
</li>
<li>
<p>Try removing one effect at a time from the transition until
it no longer leaves your application with the incorrect appearance.</p>
</li>
</ul>
</div>
</div>
<div>
<p><strong>Navigation</strong></p>
<p><a href="index.html">Using Flex</a> &raquo; <a href="flx_p5_enhancing_ui.html">Enhancing the user interface</a></p>
</div>
<p>Adobe and Adobe Flash Platform are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p>
</div>
</body>
</html>