| <!-- |
| 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> |
| <html xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml" lang="en"> |
| <head> |
| <title>Flex in a Week - Applying transitions to view states | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <meta name="robots" content="noodp" /> |
| <meta name="keywords" content="RIA" /> |
| <meta name="description" content="Practice creating a project and adding controls." /><meta name="creationDate" content="2011-05-03 @ 17:53:17" /> |
| <meta name="lastModifiedDate" content="2011-05-03 @ 17:53:17" /> |
| <meta name="viewport" content="width=device-width" /> |
| <meta name="page" content="main" /> |
| <meta name="shortTitle" content="Exercise 4.10: Applying transitions to view states"/> |
| <meta name="blurb" content="Practice creating a project and adding controls." /> |
| <meta name="author" content="Trilemetry" /> |
| <meta name="area" content="devnet" /> |
| <link rel="icon" href="http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/> |
| <link rel="shortcut icon" href="http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/> |
| <link rel="canonical" href="http://www.adobe.com/devnet/flex/newcontent/videotraining/exercises/ex4_10.html"/> |
| <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/adobe-light-compressed.css"/> |
| <!--[if !IE]><!--> |
| <link rel="stylesheet" media="screen,print" href="http://wwwimages.adobe.com/www.adobe.com/include/style/compressed.css"/> |
| <!--<![endif]--> |
| <!--[if IE]> |
| <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-compressed.css" /> |
| <link rel="stylesheet" media="screen,print" href="/include/style/default/SearchBuddy.css" /> |
| <link rel="stylesheet" media="screen,print" href="/include/style/dotcom-css-modes.css" /> |
| <![endif]--> |
| <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-configurator-compressed.css"/> |
| <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.css"/> |
| <!--[if lt IE 10]> |
| <link rel="stylesheet" media="screen" href="/include/style/modes/MirrorIE.css" /> |
| <![endif]--> |
| <script> |
| function createNs ( ns ) |
| { |
| var o, a; |
| a = ns.split("."); |
| o = window[a[0]] = window[a[0]] || {}; |
| for(i=1; i < a.length; i++) |
| { |
| o = o[a[i]] = o[a[i]] || {}; |
| } |
| return o; |
| } |
| |
| createNs("Adobe.PageInfo"); |
| createNs("Adobe.Tokens"); |
| createNs("Adobe.UserInfo"); |
| Adobe.PageInfo.AuthenticatedState = false; |
| Adobe.PageInfo.localeCode = "en"; |
| Adobe.PageInfo.accountPageName = ""; |
| Adobe.PageInfo.productKey = ""; |
| Adobe.PageInfo.catalogName = ""; |
| Adobe.PageInfo.countryCode = "US"; |
| Adobe.PageInfo.localeString = "en_us"; |
| Adobe.PageInfo.marketSegment = "COM"; |
| Adobe.PageInfo.sitecatalystMarketSegment = "COM"; |
| Adobe.PageInfo.akamaiURLPrefix = "http://wwwimages.adobe.com/www.adobe.com"; |
| Adobe.PageInfo.pageLevel = "9"; |
| </script> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/include/script/compressed.js"></script> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/include/jmvc/adobe-store-compressed.js"></script> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/include/bach/bach-1.0.1.min.js"></script> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/VisitorAPI.js"></script> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/uber/js/omniture/mbox.js"></script> |
| <!--[if IE 6]> |
| <script> |
| try{void(document.execCommand("BackgroundImageCache",false,true));} catch(e) {} |
| </script> |
| <![endif]--> |
| <script> |
| //<![CDATA[ |
| $(window).bind("hashchange load", adobe.fn.focusHashElement); |
| cart = new adobe.ui.CartFacade("cart-dialog", "cart-dialog-flash"); |
| cart.setRequiredFlashVersion("9.0.115"); |
| cart.setDefaultCountry(""); |
| cart.setDomain(".adobe.com"); // set this to ".adobe.com" |
| cart.setContextPath(""); // set this to empty when web context is '/' |
| // Possibly add the .edu selector or override market segment |
| Adobe.Product.Controller.CPod.EduController.processLocation(true); |
| if(cart.isOverlaySupported()) { |
| var PromoIDReport = new Array(); |
| var prmid = window.location.search.match(/\bpromoid\=([^&#$]+)/); |
| if(prmid) { |
| prmid[1]=prmid[1].toUpperCase(); |
| cart.setEmailTrackingId(prmid[1]); |
| } |
| // if a promo code is pass thru the URL, set the promo in the cart and the cookie |
| prmid = window.location.search.match(/\bpromocode\=([^&#$]+)/) || null; |
| if(prmid) { |
| if (Adobe && Adobe.Cart && Adobe.Cart.Models && Adobe.Cart.Models.Cart) { |
| var cart = Adobe.Cart.Models.Cart; |
| var marketSegment = cart.getMarketSegment() || Adobe.Product.Controller.CPod.EduController.COM; |
| cart.addPromotion({code:prmid[1], marketSegment:marketSegment}); |
| cart.savePromoCode(prmid[1]); |
| } |
| } |
| } |
| //]]> |
| </script> |
| <script> |
| $(document).ready(function() |
| { |
| adobe.dom.param("wcmmode=disabled"); |
| adobe.dom.param("compress=false"); |
| }); |
| </script> |
| <script> |
| var locales = {"cn":true,"us":true,"en_xx":true,"mena_fr":true,"tw":true}; |
| var tokens = document.location.pathname.split('/'); |
| var locale = ((tokens.length < 2) || ((locales[tokens[1]] == undefined) && tokens[1]!='content')) ? 'us' : tokens[1]; |
| var geoCook = 'international='; |
| var cookies = document.cookie.split(';'); |
| for(var i=0;i < cookies.length;i++) { |
| var c = cookies[i]; |
| if ((c.indexOf(geoCook) >= 0) && !(locale=='content') ){ |
| var preferredLocale = c.substring(c.indexOf(geoCook) + geoCook.length,c.length); |
| if ((preferredLocale != locale)&&(locales[preferredLocale])){ |
| var url = document.location.pathname + document.location.search; |
| if (locale == 'us'){ |
| url = '/' + preferredLocale + url; |
| } else { |
| var suffix = url.substring(locale.length + 1); |
| if ((suffix == null) || (suffix == "")) |
| { |
| suffix = "/"; |
| } |
| if (preferredLocale != 'us'){ |
| url = '/' + preferredLocale + suffix; |
| } else { |
| url = suffix; |
| } |
| } |
| window.location.replace(url); |
| } |
| } |
| } |
| </script> |
| <!--[if (gte IE 9)|(IEMobile)]><!--> |
| <link rel="stylesheet" media="only screen" href="/etc/pagetables/reflowtypes/adobe_adc_article.css"/> |
| <script src="/etc/pagetables/reflowtypes/adobe_adc_article.js"></script> |
| <!--<![endif]--> |
| <script> |
| //<![CDATA[ |
| if(typeof jQuery != 'undefined'){ |
| (function($) { |
| var dispatcher = (adobe.vrbl("reflowDispatcher") || adobe.vrbl("reflowDispatcher", adobe.reflow.createDispatcher("width", window.document))), |
| viewport = $(window), |
| viewportWidth = NaN, |
| meta = window.document.getElementsByName("viewport")[0], |
| metaContent; |
| |
| $(window).bind("resize orientationchange", setRenderMode); |
| |
| if(meta) { |
| $(window.document).bind("adobe.reflow.LayoutChange", snapViewportToMaxWidth); |
| } |
| |
| setRenderMode(); |
| |
| function snapViewportToMaxWidth(event, layout_event) { |
| if (layout_event.snapView && layout_event.active) { |
| var widthSetter = "width=", |
| width = widthSetter+layout_event.maxRange, |
| content = meta.getAttribute("content"); |
| |
| if(content.indexOf(widthSetter) > -1) { |
| content = content.replace(/width=[^,$]+/, width); |
| } else { |
| content = width; |
| } |
| meta.setAttribute("content", content); |
| } |
| } |
| |
| function setRenderMode() { |
| var currentViewportWidth = viewport.width(); |
| if (viewportWidth == currentViewportWidth) { |
| return; |
| } //trottle noisy event |
| viewportWidth = currentViewportWidth; |
| dispatcher.updateLayout(viewportWidth); |
| } |
| })(jQuery); |
| } |
| //]]> |
| </script> |
| <link rel="stylesheet" media="screen" href="http://wwwimages.adobe.com/www.adobe.com/include/style/article-compressed.css"/> |
| <script src="http://community.adobe.com/help/badge/v4/ionLoader.js"></script> |
| <script src="http://community.adobe.com/help/badge/v4/ionSupport.js"></script> |
| <script src="http://community.adobe.com/help/badge/v4/ionBadge.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/granite/jquery.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/granite/utils.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/granite/jquery/granite.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/foundation/shared.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/foundation/personalization/kernel.js"></script> |
| <link rel="stylesheet" href="/apps/dotcom/ag-widgets.css" type="text/css"> |
| <script type="text/javascript"> |
| $CQ(function() { |
| CQ_Analytics.SegmentMgr.loadSegments("/etc/segmentation"); |
| CQ_Analytics.ClientContextUtils.init("/etc/clientcontext/default","/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10"); |
| |
| |
| }); |
| </script><script type="text/javascript" src="/etc/clientlibs/granite/jquery-ui.js"></script> |
| <script type="text/javascript" src="/etc/clientlibs/foundation/jquery-ui.js"></script> |
| <script type="text/javascript" src="/etc/designs/dotcom/clientlib/stores.js"></script> |
| <link rel="stylesheet" href="/etc/clientlibs/granite/jquery-ui.css" type="text/css"> |
| <link rel="stylesheet" href="/etc/clientlibs/foundation/jquery-ui/themes/default.css" type="text/css"> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/typekit/yoe7ink.js"></script> |
| <script>try{Typekit.load();}catch(e){}</script> |
| </head> |
| <body class="Text TextMedium Link"> |
| <div class="ArticleGrid ArticleWideGrid LayoutSlimGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight LayoutP"> |
| <div class="PrintLayoutHide"> |
| <!--googleoff: all--><div class="sitenav"><script> |
| //<![CDATA[ |
| if (navigator.userAgent.match(/iPad/i) != null){ |
| adobe.dom.createStyleSheet($('head').get(0), "/include/style/default/SiteHeader-iPad.css"); |
| } |
| |
| $(document).ready(adobe.fn.initGlobalNav); |
| //]]> |
| </script> |
| <!--googleoff: index--> |
| <!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/globalnav/en_us/globalnav_ssi.html#1 $ --> |
| <form id="globalnav-search" class="searchbuddy LayoutSlimHidden" name="globalnav-search" method="get" action="/go/gnav_search" accept-charset="utf-8"> |
| <div id="SiteHeader" class="SiteHeader Text TextSmall"> |
| <span id="globalnav"></span> |
| <a href="/" id="shHome" class="SiteHeaderHome">Adobe</a> |
| <div class="SiteHeaderBar" id="shBar"> |
| <div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shProducts"> |
| <a href="/products/catalog.html?promoid=KAWQI" id="shProductsLink" class="SiteHeaderBarLink">Products</a> |
| <div class="SiteHeaderDropPanel SiteHeaderDropdown-Full" id="ProductsPanel"> |
| <div class="SiteHeaderColumnSingle"> |
| <div class="SiteHeaderRow"> |
| <p class="SiteHeaderPanelHeader">Top destinations</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=JQPEQ" id="Products_Topdestinations_AdobeCreativeCloud">Adobe Creative Cloud</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=KFKQF" id="Products_Topdestinations_CreativeCloudforteams">Creative Cloud for teams</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/cs6.html?promoid=JOLIS" id="Product_Topdestinationss_CreativeSuite6">Creative Suite 6</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/marketing?promoid=JOLIT" id="Products_Topdestinations_AdobeMarketingCloud">Adobe Marketing Cloud</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=JOLIR" id="Products_Topdestinations_Acrobat">Acrobat</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=JOLIW" id="Products_Topdestinations_Photoshop">Photoshop</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAWQH" id="Product_Topdestinationss_SiteCatalyst">SiteCatalyst</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/education/students.html?marketSegment=EDU&promoid=KFKQD" id="Product_Topdestinationss_Students">Students</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/elements-family.html?promoid=JOLIV" id="Product_Topdestinationss_Elementsfamily">Elements family</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft"> |
| <div class="SiteHeaderRow"> |
| <p class="SiteHeaderPanelHeader">Adobe Creative Cloud</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud.html?promoid=KAUBZ" id="Products_AdobeCreativeCloud_WhatisAdobeCreativeCloud">What is Adobe Creative Cloud?</a></li> |
| </ul> |
| |
| <div class="SiteHeaderColumn-1"> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/design.html?promoid=KFKPZ" id="Products_AdobeCreativeCloud_Design">Design</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/web.html?promoid=KFKQC" id="Products_AdobeCreativeCloud_Web">Web</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/photography.html?promoid=KFKQA" id="Products_AdobeCreativeCloud_Photography">Photography</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KFKQB" id="Products_AdobeCreativeCloud_Video">Video</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/students.html?marketSegment=EDU&promoid=JUTMG" id="Products_AdobeCreativeCloud_Students">Students</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-2"> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/teams.html?promoid=JZVVU" id="Products_AdobeCreativeCloud_Teams">Teams</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPX" id="Products_AdobeCreativeCloud_Enterprise">Enterprise</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise/education.html?promoid=KFKQE" id="Products_AdobeCreativeCloud_Educationalinstitutions">Educational institutions</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/enterprise.html?promoid=KFKPY" id="Products_AdobeCreativeCloud_Government">Government</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-1"> |
| <p class="SiteHeaderPanelHeaderSmall">Design and photography</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/photoshop.html?promoid=KAUCA" id="Products_DesignandPhotography_Photoshop">Photoshop</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/illustrator.html?promoid=KAUCB" id="Products_DesignandPhotography_Illustrator">Illustrator</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/indesign.html?promoid=KAUCC" id="Products_DesignandPhotography_InDesign">InDesign</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/muse.html?promoid=KAUCE" id="Products_DesignandPhotography_AdobeMuse">Adobe Muse</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/photoshop-lightroom.html?promoid=KAUCD" id="Products_DesignandPhotography_Lightroom">Lightroom</a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeaderSmall">Video</p> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/products/premiere.html?promoid=KAUCJ" id="Products_Video_AdobePremiere">Adobe Premiere</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/aftereffects.html?promoid=KAUCK" id="Products_Video_AfterEffects">After Effects</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-2"> |
| <p class="SiteHeaderPanelHeaderSmall">Web development and HTML5</p> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com/edge/?promoid=KAGMS" target="_blank" id="Products_WebdevelopmentHTML5_EdgeToolsServices">Edge Tools & <span class="SiteHeaderIconNewWindowNoWrap">Services<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/dreamweaver.html?promoid=KAUCF" id="Products_WebdevelopmentHTML5_Dreamweaver">Dreamweaver</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://gaming.adobe.com/?promoid=KAUCG" target="_blank" id="Products_WebdevelopmentHTML5_Gaming"><span class="SiteHeaderIconNewWindowNoWrap">Gaming<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="SiteHeaderColumnDouble SiteHeaderShadowLeft"> |
| <div class="SiteHeaderRow"> |
| <p class="SiteHeaderPanelHeader">Adobe Marketing Cloud</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing.html?promoid=KAUCL" id="Products_AdobeMarketingCloud_WhatisAdobeMarketingCloud">What is Adobe Marketing Cloud?</a></li> |
| </ul> |
| |
| <div class="SiteHeaderColumn-1"> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=KAVVU" id="Products_AdobeMarketingCloud_Digitalanalytics">Digital analytics</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAVVV" id="Products_AdobeMarketingCloud_Socialmarketing">Social marketing</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=KAVVX" id="Products_AdobeMarketingCloud_Webexperiencemanagement">Web experience management</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-2"> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAVVW" id="Products_AdobeMarketingCloud_Testingandtargeting">Testing and targeting</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=KAVVY" id="Products_AdobeMarketingCloud_Mediaoptimization">Media optimization</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQH" id="Products_AdobeMarketingCloud_Campaignmanagement">Campaign management</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-1"> |
| <p class="SiteHeaderPanelHeaderSmall">Analytics</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/sitecatalyst.html?promoid=KAUCM" id="Products_Analytics_SiteCatalyst">SiteCatalyst</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/discover.html?promoid=KAUCN" id="Products_Analytics_AdobeDiscover">Adobe Discover</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/insight.html?promoid=KAUCO" id="Products_Analytics_Insight">Insight</a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeaderSmall">Social</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=KAUCP" id="Products_Social_AdobeSocial">Adobe Social</a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeaderSmall">Experience Manager</p> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/products/cq.html?promoid=KAUCQ" id="Products_ExperienceManager_CQ">CQ</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/scene7.html?promoid=KAUCR" id="Products_ExperienceManager_Scene7">Scene7</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-2"> |
| <p class="SiteHeaderPanelHeaderSmall">Target</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/testandtarget.html?promoid=KAUCS" id="Products_Target_TestTarget">Test&Target</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/recommendations.html?promoid=KAUCT" id="Products_Target_Recommendations">Recommendations</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/searchandpromote.html?promoid=KAUCU" id="Products_Target_SearchPromote">Search&Promote</a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeaderSmall">Media Optimizer</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/adlens.html?promoid=KAUCV" id="Products_MediaOptimizer_AdLens">AdLens</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/audiencemanager.html?promoid=KAUCW" id="Products_MediaOptimizer_AudienceManager">AudienceManager</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/audienceresearch.html?promoid=KAUCX" id="Products_MediaOptimizer_AudienceResearch">AudienceResearch</a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeaderSmall">Campaign management</p> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/campaign-management.html?promoid=KFKQI" id="Products_Campaignmanagement_AdobeCampaign">Adobe Campaign</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="SiteHeaderColumnSingle SiteHeaderShadowLeft"> |
| <div class="SiteHeaderRow"> |
| <p class="SiteHeaderPanelHeader">Document services</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAUCY" id="Products_DocumentServices_Acrobat">Acrobat</a></li> |
| <li class="SiteHeaderPanelLink"><a href="https://www.echosign.adobe.com/en/home.html?promoid=KAUDB" target="_blank" class="SiteHeaderLinkNewWindow" id="Products_DocumentServices_EchoSign"><span class="SiteHeaderIconNewWindowNoWrap">EchoSign<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/formscentral/en/home.html?promoid=KAUCZ" target="_blank" id="Products_DocumentServices_FormsCentral"><span class="SiteHeaderIconNewWindowNoWrap">FormsCentral<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/sendnow/en/home.html?promoid=KAUDA" target="_blank" id="Products_DocumentServices_SendNow"><span class="SiteHeaderIconNewWindowNoWrap">SendNow<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="https://www.acrobat.com/welcome/en/home.html?promoid=KAUDC" target="_blank" id="Products_DocumentServices_Acrobatcom"><span class="SiteHeaderIconNewWindowNoWrap">Acrobat.com<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeader">Publishing</p> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/products/digital-publishing-suite-family.html?promoid=JOLIU" id="Products_Publishing_DigitalPublishingSuite">Digital Publishing Suite</a></li> |
| </ul> |
| </div> |
| </div> |
| <br style="clear: both" /> |
| |
| <div class="SiteHeaderRow"> |
| <ul class="SiteHeaderRightLink"> |
| <li class="SiteHeaderPanelLink"><a href="/products/catalog.html?promoid=JOOTH" id="Products_Seeallproducts">See all products</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBusinessSolutions"> |
| <a href="/solutions.html?promoid=KAWQJ" id="shBusinessSolutionsLink" class="SiteHeaderBarLink">Business solutions</a> |
| <div class="SiteHeaderDropPanel SiteHeaderDropdown-Double" id="BusinessSolutionsPanel"> |
| <div class="SiteHeaderRow"> |
| <div class="SiteHeaderColumn-1"> |
| <p class="SiteHeaderPanelHeaderSmall">By business need</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/digital-analytics.html?promoid=JOLJB" id="BusinessSolutions_Bybusinessneed_Digitalanalytics">Digital analytics</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=JOLJA" id="BusinessSolutions_Bybusinessneed_Digitalpublishing">Digital publishing</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/acrobat.html?promoid=KAWSC" id="BusinessSolutions_Bybusinessneed_Documentmanagement">Document management</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/media-optimization.html?promoid=JOLIX" id="BusinessSolutions_Bybusinessneed_Mediaoptimization">Media optimization</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/social-marketing.html?promoid=JZPNO" id="BusinessSolutions_Bybusinessneed_Socialmarketing">Social marketing</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/testing-targeting.html?promoid=KAXLU" id="BusinessSolutions_Bybusinessneed_Testingandtargeting">Testing and targeting</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/creativecloud/video.html?promoid=KAUDD" id="BusinessSolutions_Bybusinessneed_Videoeditingandserving">Video editing and serving</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://html.adobe.com?promoid=JZEFF" target="_blank" class="SiteHeaderLinkNewWindow" id="BusinessSolutions_Bybusinessneed_Webdevelopment">Web <span class="SiteHeaderIconNewWindowNoWrap">development<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/web-experience-management.html?promoid=JOOYM" id="BusinessSolutions_Bybusinessneed_Webexperiencemanagement">Web experience management</a></li> |
| </ul> |
| |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=JOOTI" id="BusinessSolutions_Seeallbusinessneeds">See all business needs</a></li> |
| </ul> |
| </div> |
| |
| <div class="SiteHeaderColumn-2"> |
| <p class="SiteHeaderPanelHeaderSmall">By industry</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/broadcasting.html?promoid=JOLIY" id="BusinessSolutions_Byindustry_Broadcast">Broadcast</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/education.html?marketSegment=EDU&promoid=JOLIZ" id="BusinessSolutions_Byindustry_Education">Education</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/financial-services.html?promoid=KAUDE" id="BusinessSolutions_Byindustry_Financialservices">Financial services</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/government.html?promoid=KAUDF" id="BusinessSolutions_Byindustry_Government">Government</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/digital-publishing.html?promoid=KAUDG" id="BusinessSolutions_Byindustry_Publishing">Publishing</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/retail.html?promoid=KAWSD" id="BusinessSolutions_Byindustry_Retail">Retail</a></li> |
| </ul> |
| |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/solutions.html?promoid=KAUDH" id="BusinessSolutions_Seeallindustries">See all industries</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shSupportLearning"> |
| <a href="http://helpx.adobe.com/support/?promoid=KAWQK" id="shSupportLearningLink" class="SiteHeaderBarLink">Support & Learning</a> |
| <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="SupportLearningPanel"> |
| <div class="SiteHeaderRow"> |
| <p class="SiteHeaderPanelHeaderSmall">I need help</p> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/support/?promoid=JZEFP" id="SupportLearning_Ineedhelp_Products">Products</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/creative-cloud/topics/getting-started.html?promoid=JZEFO" id="SupportLearning_Ineedhelp_AdobeCreativeCloud">Adobe Creative Cloud</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/marketing-cloud.html?promoid=KAWSE" id="SupportLearning_Ineedhelp_AdobeMarketingCloud">Adobe Marketing Cloud</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://forums.adobe.com/index.jspa?promoid=JZEFM" target="_blank" id="SupportLearning_Ineedhelp_Forums"><span class="SiteHeaderIconNewWindowNoWrap">Forums<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| </ul> |
| |
| <p class="SiteHeaderPanelHeaderSmall">I want to learn</p> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="http://helpx.adobe.com/learning.html?promoid=KAUDK" id="SupportLearning_Iwanttolearn_Trainingandtutorials">Training and tutorials</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://training.adobe.com/certification.html?promoid=KAUDM" target="_blank" id="SupportLearning_Iwanttolearn_Certification"><span class="SiteHeaderIconNewWindowNoWrap">Certification<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="/devnet.html?promoid=KAUDN" id="SupportLearning_Iwanttolearn_AdobeDeveloperConnection">Adobe Developer Connection</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/designcenter.html?promoid=KAUDO" id="SupportLearning_Iwanttolearn_AdobeDesignCenter">Adobe Design Center</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://tv.adobe.com?promoid=KFELF" target="_blank" id="SupportLearning_Iwanttolearn_AdobeTV">Adobe <span class="SiteHeaderIconNewWindowNoWrap">TV<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| <li class="SiteHeaderPanelLink"><a href="/solutions/digital-marketing/guides.html?promoid=KAWSF" id="SupportLearning_Iwanttolearn_AdobeMarketingCenter">Adobe Marketing Center</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://labs.adobe.com/?promoid=JZEFQ" target="_blank" id="SupportLearning_Iwanttolearn_AdobeLabs">Adobe <span class="SiteHeaderIconNewWindowNoWrap">Labs<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shDownload"> |
| <a href="/downloads/?promoid=KAWQL" id="shDownloadLink" class="SiteHeaderBarLink">Download</a> |
| <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="DownloadPanel"> |
| <div class="SiteHeaderRow"> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFS" id="Download_Producttrials">Product trials</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/flashplayer/?promoid=JZEFT" id="Download_AdobeFlashPlayer">Adobe Flash Player</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/reader/?promoid=JZEFU" id="Download_AdobeReader">Adobe Reader</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://get.adobe.com/air/?promoid=JZEFV" id="Download_AdobeAIR">Adobe AIR</a></li> |
| </ul> |
| |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/downloads/?promoid=JZEFW" id="Download_Seealldownloads">See all downloads</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shCompany"> |
| <a href="/company.html?promoid=KAWQM" id="shCompanyLink" class="SiteHeaderBarLink">Company</a> |
| <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="CompanyPanel"> |
| <div class="SiteHeaderRow"> |
| <ul> |
| <li class="SiteHeaderPanelLink"><a href="/careers.html?promoid=JZEFX" id="Company_CareersatAdobe">Careers at Adobe</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/aboutadobe/invrelations/?promoid=JZEFZ" id="Company_InvestorRelations">Investor Relations</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/aboutadobe/pressroom/?promoid=JZEGA" id="Company_Newsroom">Newsroom</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/privacy.html?promoid=JZEGB" id="Company_Privacy">Privacy</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/corporate-responsibility.html?promoid=JZEFY" id="Company_CorporateResponsibility">Corporate Responsibility</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/customershowcase.html?promoid=KEWBG" id="Company_CustomerShowcase">Customer Showcase</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/company/contact.html?promoid=JZEGC" id="Company_Contactus">Contact us</a></li> |
| </ul> |
| |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/company.html?promoid=JZPLK" id="Company_Morecompanyinfo">More company info</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shBuy"> |
| <a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_software_sl_mostpopular.html?promoid=KAWQN" id="shBuyLink" class="SiteHeaderBarLink">Buy</a> |
| <div class="SiteHeaderDropPanel SiteHeaderDropdown-Single" id="BuyPanel"> |
| <div class="SiteHeaderRow"> |
| <ul class="SiteHeaderPanelLinkNoBottom"> |
| <li class="SiteHeaderPanelLink"><a href="/products/catalog/software.html?marketSegment=COM&promoid=KAWQO" id="Buy_Forpersonalandprofessionaluse">For personal and professional use</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/catalog/software._sl_id-contentfilter_sl_catalog_sl_education_sl_alledu.html?marketSegment=EDU&promoid=KAWQP" id="Buy_Forstudentseducatorsandstaff">For students, educators, and staff</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOLJE" id="Buy_Forsmallandmediumbusinesses">For small and medium businesses</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/volume-licensing.html?promoid=KAWQQ" id="Buy_VolumeLicensing">Volume Licensing</a></li> |
| <li class="SiteHeaderPanelLink"><a href="/products/discount-software-coupons.html?promoid=KAWQR" id="Buy_Specialoffers">Special offers</a></li> |
| <li class="SiteHeaderPanelLink"><a href="http://success.adobe.com/en/na/programs/rfi/dm_sales_inquiries.html?promoid=KAWSG" target="_blank" id="Buy_AdobeMarketingCloudsales">Adobe Marketing Cloud <span class="SiteHeaderIconNewWindowNoWrap">sales<span class="SiteHeaderIconNewWindow"> [opens in a new window]</span></span></a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <!-- |
| <div id="tooltipStrings" class="SiteHeaderTooltipStrings LayoutHidden"> |
| <span id="tooltipStringExpandMenu">Expand menu</span> |
| <span id="tooltipStringOpenLink">Open link</span> |
| </div> |
| --> |
| |
| <a href="/go/gnav_search" id="shSearchButton" class="SiteHeaderBarItem SiteHeaderSearchButton" style="display: none;">Search</a> |
| <div class="SiteHeaderBarItem SiteHeaderBarItemLast"> </div> |
| <div id="site-search" class="SiteHeaderSearch"> |
| <input title="Search" type="text" id="search-input" name="term" maxlength="1000" /> |
| <input type="hidden" id="searchbuddy-loc" name="loc" value="en_us" /> |
| <button type="submit" id="search-submit" class="icon-replace search">Search</button> |
| </div> |
| </div> |
| <div class="SiteHeaderUser"> |
| <div id="shSignInBlock"> |
| <a id="shInfo" class="SiteHeaderUserItem SiteHeaderInfo">Info</a> |
| <a href="/account/sign-in.adobedotcom.html" id="shSignIn" class="SiteHeaderUserItem LinkStrong">Sign in</a> |
| <div class="SiteHeaderPopPanelShadow width-250" id="InfoPanelShadow" style="display: none;"></div> |
| <div class="SiteHeaderPopPanel width-250" id="InfoPanel" style="display: none;"> |
| <div class="SiteHeaderPanelRow"> |
| <span class="SiteHeaderPanelHeader">Why sign in?</span> |
| Sign in to manage your account and access trial downloads, product extensions, community areas, and more. |
| </div> |
| </div> |
| </div> |
| |
| <a href="/account.html" id="shWelcome" class="SiteHeaderUserItem SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a> |
| |
| <div class="SiteHeaderPopPanelShadow" id="WelcomePanelShadow" style="display: none;"></div> |
| <div class="SiteHeaderPopPanel" id="WelcomePanel" style="display: none;"> |
| <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyAccount"> |
| <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_en_us">My Adobe</a> |
| </div> |
| <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyOrders"> |
| <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myorders_en_us">My orders</a> |
| </div> |
| <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyInformation"> |
| <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myinformation_en_us">My information</a> |
| </div> |
| <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyPreferences"> |
| <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_mypreferences_en_us">My preferences</a> |
| </div> |
| <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyProductsServices"> |
| <a class="SiteHeaderPanelHeader" href="/go/gnavtray_myadobe_myproducts_services_en_us">My products and services</a> |
| </div> |
| <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSignOut"> |
| <a class="SiteHeaderPanelHeader" id="shSignOutLink" href="/cfusion/membership/logout.cfm">Sign out</a> |
| </div> |
| </div> |
| |
| <div id="MyCartLinkContainer"> |
| <a href="/go/gnav_mycart_en_us" id="shMyCart" class="SiteHeaderUserItem SiteHeaderCart">My cart<span id="cartQuantity"></span></a> |
| </div> |
| |
| <a href="/privacy.html" id="shPrivacy" class="SiteHeaderUserItem">Privacy</a> |
| <a href="/go/gnav_myadobe_en_us" id="shMyAdobe" class="SiteHeaderUserItem">My Adobe</a> |
| </div> |
| </div> |
| </form> |
| |
| <div id="SiteHeaderMobile" class="SiteHeaderMobile LayoutHidden LayoutSlim Text TextSmall"> |
| <a href="/go/gnav_adobe_logo_en_us" id="shHomeMobile" class="SiteHeaderHome SiteHeaderHomeMobile">Adobe</a> |
| |
| <div class="SiteHeaderBar SiteHeaderBarMobile" id="shBarMobile"> |
| <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder" id="shProductsMobileSpan"><a href="/go/gnav_products_en_us" id="shProductsMobile" class="SiteHeaderBarLink">Products</a></span> |
| <span class="SiteHeaderBarItemMobile" id="shSectionsMobileSpan"><a href="#" id="shSectionsMobile" class="SiteHeaderArrowMobile SiteHeaderBarLink">Sections</a></span> |
| <span class="SiteHeaderBarItemMobile" id="shSectionsMobileBuy"><a href="/go/gnav_store_en_us" id="shBuyMobile" class="SiteHeaderBarLink">Buy</a></span> |
| <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemMobileNoPadding"> </span> |
| <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemFloatRight" id="shSearchMobileSpan"><a href="/go/gnav_search" id="shSearchMobile" class="SiteHeaderSearchButtonMobile">Search</a></span> |
| <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder SiteHeaderBarItemFloatRight SiteHeaderBarItemMobileNoPadding"> </span> |
| </div> |
| <div class="SiteHeaderBarMobileExtend" id="shBarExtend"> |
| <div id="shBarExtendSections" style="display: none;"> |
| <div id="shBarExtendSections1" class="SiteHeaderBarMobileExtendSections"> |
| <a href="/go/gnav_solutions_en_us" id="shSectionsSolutionsMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Solutions</a> |
| <a href="/go/gnav_company_en_us" id="shSectionsCompanyMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Company</a> |
| </div> |
| <div id="shBarExtendSections2" class="SiteHeaderBarMobileExtendSections"> |
| <a href="/go/gnav_help_en_us" id="shSectionsHelpMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Help</a> |
| <a href="/go/gnav_learning_en_us" id="shSectionsLearningMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Learning</a> |
| </div> |
| </div> |
| <div id="shBarExtendSearch" style="display: none;"> |
| <form id="globalnav-search-mobile" class="SiteHeaderSearchMobileForm" name="globalnav-search-mobile" method="get" action="/go/gnav_search" accept-charset="utf-8"> |
| <input title="Search" type="text" id="search-input-mobile" name="term" maxlength="1000" /> |
| <button type="submit" id="search-submit-mobile">Search</button> |
| </form> |
| </div> |
| </div> |
| <div class="SiteHeaderUser"> |
| <a href="/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shSignInMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong">Sign in</a> |
| <a href="/cfusion/membership/logout.cfm" id="shSignOutMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile LinkStrong" style="display: none;">Sign out</a> |
| <a href="/privacy.html" id="shPrivacyMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">Privacy</a> |
| <a href="/go/gnav_myadobe_en_us" id="shMyAdobeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My Adobe</a> |
| </div> |
| </div> |
| <!--googleon: index--><div class="hovercart"><div id="HoverCartModal"> |
| <div class="CartHeaderPopPanelShadow HoverCartwidth" id="CartPanelShadow" style="display: none;"> |
| <div class="CartHeaderPopPanel HoverCart" id="CartPanel"> |
| <div id="HoverCartItem" class="RuleHBottom HoverCart-1-3 LayoutBigRowTop" style="display: none"> |
| <div class="LayoutBreakAfter"> |
| <div class="HoverCart-1 LayoutHItem"> |
| <div style="padding-left:60px;" class=" LayoutBreakAfter LayoutPullout"> |
| <div id="HoverCartBoxShotxyz" class="HoverCartBoxShot"> |
| <a href=""> |
| <img src="" class="LayoutImage" alt=""/> |
| </a> |
| </div> |
| <div style="float:left;width:100%" class="CPodCostCell"> |
| <span class="TextStrong ProductName" id="HoverCartHeaderxyz"> |
| <a href="#"> |
| </a> |
| </span> |
| <div class="LayoutBigRowBottom" id="HoverCartDescriptionxyz"> |
| </div> |
| <span id="HoverCartPreOrderHardGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderHardGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.</span> |
| <span id="HoverCartPreOrderSoftGoodMsgxyz" style="display:none;" class="TextWarning TextPostScript">Preorder Estimated Availability <span id="HoverCartPreOrderSoftGoodMsgDatexyz">Date</span>. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.</span> |
| |
| </div> |
| </div> |
| </div> |
| <div class="LayoutHItem HoverCart-2"> |
| <div class="HoverCartQty"> |
| Qty: |
| <span id="HoverCartQtyxyz"> |
| </span> |
| </div> |
| </div> |
| <div class="LayoutRight"> |
| <div class="CheckoutCostDark LayoutRight TextRight"> |
| <span id="HoverCartPricexyz"> |
| </span> |
| <span id="HoverCartSubscriptionxyz" class="CheckoutSubscription"> |
| </span> |
| <div id="HoverCartVatPercentageLabelxyz" class="TextEm TextSmall" style="display:none; max-width: 100px;"><span id="HoverCartVatPercentagePreTextxyz"></span> |
| <span id="HoverCartVatPercentagexyz"></span></div> |
| </div> |
| </div> |
| |
| </div> |
| <div class="HoverCartEDUMessage LayoutBigCellBottom" style="display:none">Purchase requires verification of academic eligibility</div> |
| </div> |
| <div id="HoverCartContainer" class="LayoutBreakAfter" style=""></div> |
| <a id="HoverCartMoreItems" class="LayoutBreakAfter" style="text-align: center;" href="/cart.html"></a> |
| <div id="HoverCartButtons" class="HoverCart-1-3"> |
| <table border="0" align="right" width="70%"> |
| <tr> |
| <td> |
| <div class="TextRight HoverCartSubTotal">Subtotal</div> |
| <div id="ExVatLabel" style="display:none" class="TextEm TextSmall TextRight"></div> |
| </td> |
| <td> |
| <div class="LayoutRight TextRight"> |
| <div class="CheckoutCostDark"> |
| <span id="HoverCartSubTotal"> |
| </span> |
| </div> |
| </div> |
| </td> |
| </tr> |
| <tr id="HoverCartPromotionsRow"> |
| <td> |
| <div class="TextRight HoverCartPromotionsLabel HoverCartSubTotal">Promotions</div> |
| </td> |
| <td> |
| <div class="LayoutRight TextRight"> |
| <div class="CheckoutCostDark"> |
| <span id="HoverCartPromotions"> |
| </span> |
| </div> |
| </div> |
| </td> |
| </tr> |
| <tr id="HoverCartShippingRow"> |
| <td> |
| <div class="TextRight HoverCartShippingLabel HoverCartSubTotal">Estimated shipping</div> |
| </td> |
| <td> |
| <div class="LayoutRight TextRight"> |
| <div class="CheckoutCostDark"> |
| <span id="HoverCartShipping"> |
| </span> |
| </div> |
| </div> |
| </td> |
| </tr> |
| <tr id="HoverCartVATRow"> |
| <td> |
| <div class="TextRight HoverCartVATLabel HoverCartSubTotal">Tax</div> |
| </td> |
| <td> |
| <div class="LayoutRight TextRight"> |
| <div class="CheckoutCostDark"> |
| <span id="HoverCartVat"> |
| </span> |
| </div> |
| <div id="CartTaxHeader"> |
| Calculated at checkout</div> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td><div class="RuleH"></div></td> |
| <td><div class="RuleH"></div></td> |
| </tr> |
| <tr> |
| <td> |
| <div class="TextRight HoverCartTotalLabel HoverCartSubTotal">Total</div> |
| </td> |
| <td> |
| <div class="LayoutRight TextRight"> |
| <div class="CheckoutCostDark"> |
| <span id="HoverCartTotal"> |
| </span> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| <div class="LayoutBreak"></div> |
| |
| <div class="HoverCart-1-3 LayoutRight LayoutCellTop LayoutBreakAfter"> |
| <a href="/cart.html" id="HoverCartCheckOut" class="CartButtonYellow CartShopCheckOut LayoutRight"><span class="CartBuyIconText">Review and Checkout</span></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| /*global jQuery,adobe*/ |
| jQuery.createNs("Adobe.Cart.ShoppingCart"); |
| |
| Adobe.Cart.ShoppingCart.HoverCart = { |
| |
| MaxItems: "4", |
| |
| DisplayTime: "5000", |
| |
| MoreItemsTextSingular: "() more item in your cart", |
| |
| MoreItemsTextPlural: "() more items in your cart", |
| |
| MonthToMonthText: "per month", |
| |
| YearlyText: "per year" |
| }; |
| |
| Adobe.Cart.TaxLabels = { |
| TaxInclusiveText : "", |
| TaxNotApplicable : "Tax not applicable" |
| }; |
| |
| Adobe.Cart.ShoppingCart.GlobalVars = { |
| |
| CountryCode: "US", |
| |
| MarketSegment: "COM", |
| |
| AkamaiURLPrefix: "http://wwwimages.adobe.com/www.adobe.com", |
| |
| PriceMonthText: "per month", |
| |
| PriceYearText: "per year", |
| |
| FullSubMonthText: "Month-to-month", |
| |
| FullSubYearText: "One-year", |
| |
| SubMonthText: "Monthly", |
| |
| SubYearText: "Annual", |
| |
| SubscriptionItemText: "NONE", |
| |
| TermTypeMonth: "MONTH", |
| |
| TermTypeYear: "YEAR", |
| |
| BackupDVDParent: "_PARENT", |
| /* |
| params: { |
| cart, |
| price, |
| categoryPath, |
| originalPrice, |
| storeName, |
| locale, |
| usePrecision, |
| type, |
| taxCode, |
| delimiter, |
| showCentDelim, |
| distributionMethod |
| } |
| */ |
| getPriceLabel: function(params) { |
| var currency = params.cart.currency; |
| var params = { |
| storeName: params.storeName, |
| locale: params.locale, |
| productKey: params.categoryPath, |
| priceObject: { |
| price: { |
| orginalPriceWithoutTax: params.originalPrice, |
| priceWithoutTax: params.price, |
| taxCode: params.taxCode || "" |
| }, |
| priceTypeKey: params.distributionMethod |
| }, |
| currencyObject: { |
| delimiter: params.delimiter || ",", |
| formatString: currency.FORMATSTRING, |
| iso3Code: currency.CODE, |
| symbol: currency.SYMBOL, |
| usePrecision: params.usePrecision |
| }, |
| showCentDelim : params.showCentDelim || false, |
| type: params.type |
| }; |
| return params; |
| }, |
| |
| isSubscription: function(serviceCommitment, termType) { |
| return (serviceCommitment == this.SubscriptionItemText && |
| (termType == this.TermTypeMonth || termType == this.TermTypeYear)); |
| }, |
| |
| subscriptionItem: function(serviceCommitment, termType) { |
| return (termType == this.TermTypeMonth && |
| (serviceCommitment == this.TermTypeMonth || serviceCommitment == this.TermTypeYear)); |
| }, |
| |
| getSubscriptionText: function(serviceCommitment, termType) { |
| if (this.isSubscription(serviceCommitment, termType)) { |
| if (termType === this.TermTypeMonth) { |
| return this.SubMonthText; |
| } else if (termType === this.TermTypeYear) { |
| return this.SubYearText; |
| } |
| } else if (this.subscriptionItem(serviceCommitment, termType)) { |
| if (serviceCommitment === this.TermTypeMonth) { |
| return this.FullSubMonthText; |
| } else if (serviceCommitment === this.TermTypeYear) { |
| return this.FullSubYearText; |
| } |
| } |
| return ""; |
| }, |
| |
| getSubscriptionPriceText: function(serviceCommitment, termType) { |
| if (this.isSubscription(serviceCommitment, termType)) { |
| if (termType === this.TermTypeMonth) { |
| return this.PriceMonthText; |
| } else if (termType === this.TermTypeYear) { |
| return this.PriceYearText; |
| } |
| } else if (this.subscriptionItem(serviceCommitment, termType)) { |
| return this.PriceMonthText; |
| } |
| return ""; |
| } |
| |
| }; |
| </script> |
| </div> |
| <div id="modalContent" style="display:none;"></div> |
| </div> |
| <!--googleon: all--></div> |
| <div class="Link" id="top"> |
| <div class="Link LayoutBreakAfter"> |
| <div class="parbase compbase breadcrumb"><div class="LayoutHeader LayoutBreakAfter Link"> |
| <div class="LayoutHeaderPath"> |
| <div class="LayoutCellSides LinkStrong LayoutH IconAlign"> |
| <span class="LayoutHItem LayoutSmallGutterRight"> |
| <a href="/devnet.html"> |
| Adobe Developer Connection</a> |
| </span> |
| <span class="LayoutSmallGutterRight LayoutHItem">/</span> |
| <span class="LayoutHItem LayoutSmallGutterRight"> |
| <a href="/devnet/flex.html"> |
| Flex Developer Center</a> |
| </span> |
| <span class="LayoutSmallGutterRight LayoutHItem">/</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutGrid-1-3 LayoutSlimGrid-1-2"> |
| <h1 class="LayoutCellSides LayoutSmallRow TextH1"> |
| Exercise 4.10: Applying transitions to view states</h1> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutRow Link RuleH"> |
| <div class="LayoutBreakAfter"> |
| <!-- Article Leaf --> |
| <div class="ArticleGrid-1 LayoutSlimGrid-1-2 ArticleWideGrid-1 TextSmall"> |
| <div class="LayoutCellSides LayoutRow"> |
| <div class="articleAuthorDisplay authordisplay"><h2 class="TextH5 LayoutRow"> |
| by <a href="/devnet/author_bios/trilemetry.html">Trilemetry</a></h2> |
| <div class="LayoutRow"> |
| <img title="trilemetry_bio" alt="Trilemetry" class="ImageShadow LayoutImage" src="devnet/authors/bio/t/trilemetry_bio.gif.adimg.mw.160.png"/></div> |
| <div class="LayoutRow"> |
| <ul> |
| <li><a href="http://www.trilemetry.com" title="Trilemetry, Inc." target="_blank">Trilemetry, Inc.</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutCellSides LayoutRow"> |
| <div class="parbase compbase articleTOC singlepagetoc"><div class="LayoutRow"> |
| <h2 class="TextH5 LayoutSmallRow">Content</h2> |
| <ul class="LayoutSmallRow"> |
| <li class="LayoutSmallRow ListItemIndent"> |
| <a href="#articlecontentAdobe_numberedheader"> |
| Instantiate transitions</a> |
| </li> |
| <li class="LayoutSmallRow ListItemIndent"> |
| <a href="#articlecontentAdobe_numberedheader_0"> |
| Transition multiple controls</a> |
| </li> |
| <li class="LayoutSmallRow ListItemIndent"> |
| <a href="#articlecontentAdobe_numberedheader_1"> |
| Nest composite effects</a> |
| </li> |
| <li class="LayoutSmallRow ListItemIndent"> |
| <a href="#articlecontentAdobe_numberedheader_2"> |
| Add and remove components during the transition</a> |
| </li> |
| <li class="LayoutSmallRow ListItemIndent"> |
| <a href="#articlecontentAdobe_numberedheader_3"> |
| Use the Resize effect</a> |
| </li> |
| <li class="LayoutSmallRow ListItemIndent"> |
| <a href="#articlecontentAdobe_numberedheader_4"> |
| Create a logout transition</a> |
| </li> |
| </ul> |
| </div> |
| |
| </div> |
| </div> |
| <div class="LayoutCellSides LayoutRow"> |
| <div class="articleTools articletools"><div class="LayoutRow LayoutCellVSides"> |
| <h2 class="TextH5 LayoutSmallRow">Modified</h2> |
| <p>2 May 2011</p> |
| </div> |
| <ul class="LayoutRow"> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutRow"> |
| <div class="articleCommentSummary commentsummary"><div class="LayoutRow LayoutCellSides"> |
| <div id="articleRankAndCommentSummary"></div> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutRow"> |
| <!-- Page Tools --> |
| <div class="pagetools pageTools"><div class="LayoutBreakAfter"> |
| <div class="LayoutRow LayoutBreakAfter TextH5"> |
| <table class="LayoutMaxH"> |
| <tbody> |
| <tr> |
| <td class="PanelFillDark"> |
| <h2 class="TextH5 LayoutCellSides LayoutSmallCellVSides"> |
| Page tools</h2> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="LayoutCellSides"> |
| <div class="LayoutRow"> |
| <div id="PageTools" style="padding-left:23px;" class=" LayoutBreakAfter LayoutPullout"> |
| <div class="LayoutSmallRowBottom LayoutBreakAfter"> |
| <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> |
| <a class="Facebook-button Icon IconFacebook" href="http://www.facebook.com/sharer.php"></a> |
| </div> |
| <div style="float:left;width:100%"> |
| <a href="http://www.facebook.com/sharer.php" class="Facebook-button" title="Share on Facebook" target="_blank">Share on Facebook</a></div> |
| </div> |
| <div class="LayoutSmallRowBottom LayoutBreakAfter"> |
| <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> |
| <a class="Twitter-button Icon IconTwitter" href="http://twitter.com/"></a> |
| </div> |
| <div style="float:left;width:100%"> |
| <a href="http://twitter.com/" class="Twitter-button" title="Share on Twitter" target="_blank">Share on Twitter</a></div> |
| </div> |
| <div class="LayoutSmallRowBottom LayoutBreakAfter"> |
| <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> |
| <a class="LinkedIn-button Icon IconLinkedIn" href="http://www.linkedin.com/"></a> |
| </div> |
| <div style="float:left;width:100%"> |
| <a href="http://www.linkedin.com/" class="LinkedIn-button" title="Share on LinkedIn" target="_blank">Share on LinkedIn</a></div> |
| </div> |
| <div class="LayoutSmallRowBottom LayoutBreakAfter"> |
| <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> |
| <a class="Bookmark-button Icon IconBookmark" href="#"></a> |
| </div> |
| <div style="float:left;width:100%"> |
| <a class="Bookmark-button" href="#">Bookmark</a> |
| </div> |
| </div> |
| <div class="LayoutSmallRowBottom LayoutBreakAfter"> |
| <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> |
| <a class="Print-button Icon IconPrint" href="#"></a> |
| </div> |
| <div style="float:left;width:100%"> |
| <a class="Print-button" href="#">Print</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutCellSides LayoutRow"> |
| <!-- Article Community --> |
| <div class="articletags articleTags"><div class="LayoutRow"> |
| <div class="LayoutH LinkWeak TextTag"> |
| <a href="/devnet/tagsearch.tsb.prod-_sl_flash_builder_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flash Builder">Flash Builder</a><a href="/devnet/tagsearch.tsb.prod-_sl_flex_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flex">Flex</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_ria.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="RIA">RIA</a></div> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutCellSides LayoutRow"> |
| <div class="parbase adcFeedBack compbase adcfeedback"><script type="javascript"> |
| //<![CDATA[ |
| s_tagEnv = 'dev'; |
| //]]> |
| </script> |
| <script src="http://wwwimages.adobe.com/www.adobe.com/include/script/article-compressed.js"></script> |
| |
| <div id="helpful-pod"> |
| <div id="helpful" class="collapsed"> |
| <div id="helpfulspan">Was this helpful?</div> |
| <input type="radio" name="feedback" id="radioyes" onClick="showForm();"/><span id="yesspan" class="radio-option">Yes</span>   |
| <input type="radio" name="feedback" id="radiono" onClick="showForm();"/><span id="nospan" class="radio-option">No</span> |
| <textarea title="(Optional) Please let us know how we can improve this page. " id="feedbacktext" placeholder="" rows="5" cols="25" style="font-family:sans-serif;display:none"></textarea> |
| <button id="submitButton" onClick="submitForm();" style="display:none">Submit</button> |
| <button id="noCommentButton" onClick="hideForm();" style="display:none">No comment</button> |
| <br clear="both"> |
| <div id="termsofuse"><p>By clicking Submit, you accept the <a href="/misc/terms.html">Adobe Terms of Use</a>.</p> |
| </div> |
| </div> |
| <div id="fold"> </div> |
| </div> |
| <div id="helpful-thankyou" class="thankyou">Thanks for your feedback.</div> |
| |
| <script> |
| //<![CDATA[ |
| // Send CHL-specific data to SiteCatalyst |
| var s_chl = s_gi("mxchlprod"); |
| var urlMatch = /(https?:\/\/)([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*))(index.html)?(\?\S+)?(#\S+)?/; |
| var adobeMatch = /(https?:\/\/)([-\w\.]+)+(\.adobe\.com)/; |
| var adobeLocaleMatch = /^\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/; |
| var cqLocaleMatch = /^\/content\/help\/(ae|bg|cz|dk|de|gr|es|ee|fi|fr|il|hr|hu|it|jp|kr|lt|lv|no|nl|pl|br|ro|ru|sk|si|se|tr|ua|cn|tw)\/.+/; |
| var ua = navigator.userAgent.toLowerCase(); |
| s_chl.channel = "helpx"; |
| s_chl.eVar3 = window.location.toString().replace(/[\?,#](.*)/, ""); |
| s_chl.pageName = s_chl.eVar11 = document.title; |
| if ( typeof(omtrPageName) != 'undefined' && omtrPageName.length > 0 ) { |
| s_chl.pageName = s_chl.eVar11 = omtrPageName; |
| } |
| // s_chl.list1 = omtrProductList.replace(/,/g,":"); |
| var omtrLocale = "en"; |
| if (adobeLocaleMatch.test(location.pathname)) { |
| var matchArray = adobeLocaleMatch.exec(location.pathname).slice(); |
| omtrLocale = matchArray[1]; |
| if ( typeof(matchArray[1]) != 'undefined') { |
| omtrLocale = matchArray[1]; |
| } |
| } |
| else if (cqLocaleMatch.test(location.pathname)) { |
| var matchArray = cqLocaleMatch.exec(location.pathname).slice(); |
| omtrLocale = matchArray[1]; |
| if ( typeof(matchArray[1]) != 'undefined') { |
| omtrLocale = matchArray[1]; |
| } |
| } |
| |
| s_chl.eVar8 = omtrLocale; |
| if (omtrLocale != "en") { |
| s_chl.eVar9 = document.title; |
| } |
| // Transmit |
| // The s_gs() call in compressed.js causes problems with any .t() call in any report suite |
| function s_gs(){} |
| s_chl.t(); |
| |
| function showForm(){ |
| if (ua.indexOf('msie 6') == -1 ){ |
| $('#helpfulspan').hide(); |
| $('#radioyes').hide(); |
| $('#radiono').hide(); |
| $('#yesspan').hide(); |
| $('#nospan').hide(); |
| $('#feedbacktext').autofill(); |
| $('#helpful').animate({width:'420px', height: '185px'}); |
| $('#helpful').removeClass('collapsed'); |
| $('#helpful').addClass('expanded'); |
| $('#fold').css('background-position', '-12px 0'); |
| displayTextField(); |
| }else{ |
| submitForm(); |
| } |
| } |
| |
| |
| |
| $(document).ready(function() { |
| var feedbackLocales = "en, jp, fr, de, it, se, es, nl , dk, br, no, fi"; |
| if ( feedbackLocales.indexOf( omtrLocale ) > -1 ){ |
| $('#helpful-pod').fadeIn(); |
| $('#helpful-pod').animate({ |
| opacity: 1, |
| top: '+=20'}, |
| 1500); |
| } |
| }); |
| |
| // ]]> |
| </script> |
| </div> |
| </div> |
| <div class="LayoutBreak"></div> |
| </div> |
| <!-- Main Content --> |
| <div class="LayoutSlimGrid-1-2 ArticleGrid-2-4 ArticleWideGrid-2-6"> |
| <div class="ArticleWideGrid-2-4"> |
| <div class="articlerequirements articlePrerequistes"><div class="PanelFillMedium PanelBorder LayoutRow TextSmall"> |
| <div id="requirements-title" class="LayoutCell Link"> |
| <h2 class="TextH5"> |
| <span class="LayoutSmallGutterRight Icon IconSmallerAdd"></span> |
| Requirements</h2> |
| </div> |
| <div id="requirements-content" class="LayoutBreakAfter"> |
| <div class="ArticleGrid-2"> |
| <div class="LayoutCellSides"> |
| <h3 class="TextH5 LayoutSmallRowTop"> |
| Prerequisite knowledge</h3> |
| <div class="LayoutRowBottom"> |
| <ul> |
| <li>Exercise 1.1: <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_01.html">Setting up Flash Builder and your project files</a></li> |
| <li>Exercise 4.7: <a href="/devnet/flex/newcontent/videotraining/exercises/ex4_07.html">Creating and navigating application states</a></li> |
| <li>Exercise 4.9: <a href="/devnet/flex/newcontent/videotraining/exercises/ex4_09.html">Animating components with effects</a></li> |
| </ul> |
| </div> |
| <h3 class="TextH5 LayoutSmallRowTop"> |
| User level</h3> |
| <p class="LayoutRowBottom">Beginning</p> |
| </div> |
| </div> |
| <div class="ArticleGrid-3"> |
| <div class="LayoutCellSides"> |
| <h3 class="TextH5 LayoutSmallRowTop"> |
| Required products</h3> |
| <ul class="LayoutSmallRowTop LayoutRowBottom"> |
| <li class="LayoutSmallRow"> |
| <span class="IconLeft IconSmallDownload"></span>Flash Builder 4.7 Premium<a href="/go/try_flashbuilder/"> (Download trial)</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="ArticleGrid-4"> |
| <div class="LayoutCellSides"> |
| <h3 class="TextH5 LayoutSmallRowTop"> |
| Sample files</h3> |
| <ul class="LayoutSmallRowTop LayoutRowBottom"> |
| <li class="LayoutSmallRow"><a href="fiaw/ex4_10_starter.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>ex4_10_starter.zip</a></li> |
| <li class="LayoutSmallRow"><a href="fiaw/ex4_10_solution.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>ex4_10_solution.zip</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| adobe.fn.panelToggle("requirements-title", "requirements-content", true); |
| </script> |
| <script> |
| adobe.fn.panelToggle("requirements-title", "requirements-content", true); |
| </script> |
| </div> |
| <div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter"> |
| <div class="parsys articlecontentAdobe"><div id="articlecontentAdobe"> |
| <a name="articlecontentAdobe_text" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In this exercise you will use effects to animate components as they transition between states of an application.</p> |
| <p>In the Employee Portal example, Panel containers in the login and portal states will move and fade in and out as you switch states. You will also use composite effects to control which elements move in parallel or sequentially. Lastly, you will learn how to explicitly control the appearance and disappearance of components during the transition that exist in one state but not the other.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Review your task for this exercise." alt="Review your task for this exercise." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image.adimg.mw.600.jpg/1303281856423.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 1. Review your task for this exercise.</div> |
| </div> |
| <a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In this exercise, you will learn how to:</p> |
| <ul> |
| <li><a href="#articlecontentAdobe_numberedheader">Instantiate transitions</a></li> |
| <li><a href="#articlecontentAdobe_numberedheader_0">Transition multiple controls</a></li> |
| <li><a href="#articlecontentAdobe_numberedheader_1">Nest composite effects</a></li> |
| <li><a href="#articlecontentAdobe_numberedheader_2">Add and remove components during the transition</a></li> |
| <li><a href="#articlecontentAdobe_numberedheader_3">Use the Resize effect</a></li> |
| <li><a href="#articlecontentAdobe_numberedheader_4">Create a logout transition</a></li> |
| </ul> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_numberedheader" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow"> |
| <a id="articlecontentAdobe_numberedheader"></a> |
| Instantiate transitions</h3> |
| </div> |
| <a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In this section you will animate the Employee of the Month <code>Panel</code> container as it transitions between two applications states.</p> |
| <ol> |
| <li>Download the <a href="fiaw/ex4_10_starter.zip">ex4_10_starter.zip</a> file if you haven't already and extract the ex4_10_starter.fxp file to your computer.</li> |
| <li>Open Flash Builder.</li> |
| <li>Import the ex4_10_starter.fxp file.</li> |
| <li>Open the ex4_10_starter.mxml file.</li> |
| <li>Locate the <code>states</code> block.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:states> |
| <s:State name="portalState"/> |
| <s:State name="loginState"/> |
| </s:states></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>Remember that the Employee Portal application has two distinct states that you defined in earlier exercises. Next, you will define the animation that occurs on the Employee of the Month <code>Panel</code> container when the application transitions from the login to the portal state.</p> |
| <ol start="6"> |
| <li>Below the closing <code>states</code> tag, create the <code>transitions</code> property of the application.</li> |
| <li>Within the <code>transitions</code> block, create a <code>Transition</code> tag block.</li> |
| <li>To the opening <code>Transition</code> tag, add the <code>fromState</code> property with a value of <code>loginState</code> and the <code>toState</code> property with a value of <code>portalState</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_0" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Transition fromState="loginState" toState="portalState"> |
| </s:Transition></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>This is a one-way transition. You will create an animation for the reverse transition later in this exercise.</p> |
| <ol start="9"> |
| <li> Between the <code>Transition</code> tags, create a <code>Parallel</code> effect tag block.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_1" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Transition fromState="loginState" toState="portalState"> |
| <s:Parallel> |
| |
| </s:Parallel> |
| </s:Transition></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In the following steps you will apply both a <code>Fade</code> and a <code>Move</code> effect to the Employee of the Month <code>Panel</code> container. The effects will happen at the same time, which is why you are using a <code>Parallel</code> composite effect instead of a <code>Sequence</code> effect.</p> |
| <ol start="10"> |
| <li> To the <code>Parallel</code> effect, assign the <code>target</code> property value to the <code>employeeOfTheMonth</code> <code>Panel</code> container.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_2" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel target="{employeeOfTheMonth}"> |
| |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="11"> |
| <li>Within the <code>Parallel</code> effect tags, add a <code>Fade</code> effect instance.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_3" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel target="{employeeOfTheMonth}"> |
| <s:Fade/> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="12"> |
| <li>Below the <code>Fade</code> effect, add a <code>Move</code> effect.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_4" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel target="{employeeOfTheMonth}"> |
| <s:Fade/> |
| <s:Move/> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="13"> |
| <li>Save the file.</li> |
| <li>Run the application and log in with the username, <b>flex</b>, and the password,<b>hero</b>. </li> |
| </ol> |
| <p>You should see the login <code>Panel</code> container disappear, the <code>employeeOfTheMonth</code> <code>Panel</code> container fade into view while moving into position, and the other <code>Panel</code> containers in the <code>portalState</code> just appear (see Figure 2).</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="See the Panel container fades and moves into place." alt="See the Panel container fades and moves into place." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image_0.adimg.mw.600.jpg/1303282364927.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 2. See the Panel container fades and moves into place.</div> |
| </div> |
| <a name="articlecontentAdobe_numberedheader_0" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow"> |
| <a id="articlecontentAdobe_numberedheader_0"></a> |
| Transition multiple controls</h3> |
| </div> |
| <a name="articlecontentAdobe_text_8" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p id="b">In this section you will animate multiple containers so that they move into place from the locations shown in Figure 3.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="See how the Panel containers are positioned before the animation effects are processed." alt="See how the Panel containers are positioned before the animation effects are processed." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image_1.adimg.mw.600.jpg/1303282623943.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 3. See how the Panel containers are positioned before the animation effects are processed.</div> |
| </div> |
| <a name="articlecontentAdobe_text_9" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol> |
| <li>Return to Flash Builder.</li> |
| <li> To the <code>Parallel</code> effect, convert the <code>target</code> property to the <code>targets</code> property.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_5" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel targets="{employeeOfTheMonth}"> |
| ... |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_10" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You want all the Panel instances to animate at the same time.</p> |
| <ol start="3"> |
| <li> Assign the <code>targets</code> property value to the four <code>Panel</code> instances that appear in the <code>portalState</code>. Remember to add the array syntax square brackets inside the curly braces of the binding.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_6" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel targets="{[employeeOfTheMonth, search, |
| cafeteriaSpecial, monthlyEvents]}"> |
| ... |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_11" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="4"> |
| <li>To the nested <code>Move</code> effect, assign the <code>target</code> property value to the <code>employeeOfTheMonth</code> <code>Panel</code> container.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_7" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel targets="{[employeeOfTheMonth, search, |
| cafeteriaSpecial, monthlyEvents]}"> |
| <s:Fade/> |
| <s:Move target="{employeeOfTheMonth}"/> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_12" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You want all of the <code>Panel</code> instances to fade in except for the <code>employeeOfTheMonth</code> panel, which already appears in both states. By simply leaving the <code>Fade</code> effect without any properties, the application will automatically determine the <code>alpha</code> property of each target component and extrapolate from there how to make it fade from one state to the other.</p> |
| <p>Each <code>Panel</code> instance will move in a different way. Since the <code>employeeOfTheMonth</code> instance already has a starting point in the <code>loginState</code> of the application, you simply left the <code>Move</code> effect without properties. Again, the application will automatically determine how to animate the <code>x</code> and <code>y</code> properties of the <code>employeeOfTheMonth</code> instance to make it move to the proper location in the <code>portalState</code> from its initial position in the <code>loginState</code>.</p> |
| <p>The other three <code>Panel</code> container instances that are referenced in the <code>targets</code> property of the <code>Parallel</code> effect do not exist in the <code>loginState</code> and they currently just appear in their final position in the <code>portalState</code>. In the next steps, you will define a starting position for each of the instances using either the <code>xFrom</code> or <code>yFrom</code> properties of the <code>Move</code> effect.</p> |
| <p>Figure 3 above gives a practical illustration of where the <code>Panel</code> instances will start from when the animation begins.</p> |
| <ol start="5"> |
| <li>Below the <code>Move</code> effect for the <code>employeeOfTheMonth</code> instance, add another <code>Move</code> effect instance.</li> |
| <li>To the second <code>Move</code> effect, assign the <code>target</code> property value to the <code>search</code> <code>Panel</code> container and the <code>xFrom</code> property value to <code>-166</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_8" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Move target="{employeeOfTheMonth}"/> |
| <s:Move target="{search}" xFrom="-166"/></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_13" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="7"> |
| <li>Below the second <code>Move</code> effect, add a third <code>Move</code> effect and assign the <code>target</code> property value to the <code>cafeteriaSpecial</code> <code>Panel</code> container and the <code>yFrom</code> property value to <code>-329</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_9" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Move target="{search}" xFrom="-166"/> |
| <s:Move target="{cafeteriaSpecial}" yFrom="-329" /></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_14" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="8"> |
| <li>Below the third <code>Move</code> effect, add a fourth <code>Move</code> effect and assign the <code>target</code> property value to the <code>monthlyEvents</code> <code>Panel</code> container and the <code>xFrom</code> property to <code>833</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_10" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Move target="{cafeteriaSpecial}" yFrom="-329" /> |
| <s:Move target="{monthlyEvents}" xFrom="833" /></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_15" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="9"> |
| <li>Save the file and run the application.</li> |
| <li>Enter <b>flex</b> for the username and <b>hero</b> for the password, and then click the Submit button.</li> |
| </ol> |
| <p>You should see the login panel disappear and the panels within the portal state move into place from their off-screen locations as shown in Figure 4.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_2" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Run the application and log in to see the Panel containers animate into place." alt="Run the application and log in to see the Panel containers animate into place." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image_2.adimg.mw.600.jpg/1303282825544.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 4. Run the application and log in to see the Panel containers animate into place.</div> |
| </div> |
| <a name="articlecontentAdobe_numberedheader_1" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow"> |
| <a id="articlecontentAdobe_numberedheader_1"></a> |
| Nest composite effects</h3> |
| </div> |
| <a name="articlecontentAdobe_text_16" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p id="c">In this section you will use a <code>Sequence</code> effect to define the order in which the panels will animate as they transition between the login and portal states. In the last section you had all the panels in the portal state fade and move into place in parallel. But before that happens, you need the login Panel instance to fade and move out of view.</p> |
| <ol> |
| <li>Return to Flash Builder.</li> |
| <li>Surround the <code>Parallel</code> effect with a <code>Sequence</code> effect tag block.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_11" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Sequence> |
| <s:Parallel target="{[employeeOfTheMonth, search, cafeteriaSpecial, monthlyEvents]}"> |
| ... |
| </s:Parallel> |
| </s:Sequence></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_17" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="3"> |
| <li>Between the opening <code>Sequence</code> tag and the <code>Parallel</code> effect, create another <code>Parallel</code> effect instance.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_12" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Sequence> |
| <s:Parallel> |
| </s:Parallel> |
| <s:Parallel target="{[employeeOfTheMonth, search, cafeteriaSpecial, monthlyEvents]}"> |
| ... |
| </s:Parallel> |
| </s:Sequence></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_18" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="4"> |
| <li>Within the new <code>Parallel</code> effect tags, add a <code>Fade</code> effect and assign the <code>target</code> property value to the <code>login</code> <code>Panel</code> container.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_13" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel> |
| <s:Fade target="{login}"/> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_40" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You could have put the <code>target</code> property on the<code> Parallel</code> effect instead of on the nested<code> Fade</code> effect. However, we will next add more effects inside of this composite effect that target another component.</p> |
| <ol start="5"> |
| <li>Under the <code>Fade</code> effect, add a <code>Move</code> effect and assign the <code>target</code> property value to the<code> login Panel</code> container and add the <code>xTo</code> property with a value of <code>-266</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_31" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel> |
| <s:Fade target="{login}"/> |
| <s:Move target="{login}" |
| xTo="-266"/> |
| </s:Parallel> |
| </code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_19" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="6"> |
| <li>Below the <code>Move</code> effect, add another <code>Move</code> effect and assign the <code>target</code> property value to the <code>employeeOfTheMonth</code> <code>Panel</code> container.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_14" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Fade target="{login}"/> |
| <s:Move target="{login}" |
| xTo="-266"/> |
| <s:Move target="{employeeOfTheMonth}"/> |
| </code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_20" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="7"> |
| <li>From the second <code>Parallel</code> effect block, remove the <code>employeeOfTheMonth</code> <code>Panel</code> container from the <code>targets</code> property value and the corresponding <code>Move</code> effect.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_15" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel targets="{[search, cafeteriaSpecial, monthlyEvents]}"> |
| <s:Fade/> |
| <s:Move target="{search}" xFrom="-166"/> |
| <s:Move target="{cafeteriaSpecial}" yFrom="-329" /> |
| <s:Move target="{monthlyEvents}" xFrom="833" /> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_41" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p id="d">The changes you just made will fade and move the <code>login</code> panel out while the <code>employeeOfTheMonth</code> panel moves into its new location in the <code>portalState</code>. Only after that happens, will the second set of effects run, which animate the rest of the <code>portalState</code> panels into place.</p> |
| <ol start="8"> |
| <li>Save the file and run the application.</li> |
| <li>Enter <b>flex</b> for the username and <b>hero</b> for the password, and then click the Submit button.</li> |
| </ol> |
| <p>You should see the animation is not correct. The <code>Panel</code> containers within the <code>portalState</code> state are visible in their final locations before the animations occur.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_numberedheader_2" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow"> |
| <a id="articlecontentAdobe_numberedheader_2"></a> |
| Add and remove components during the transition</h3> |
| </div> |
| <a name="articlecontentAdobe_text_21" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You have seen that the application can usually determine how to animate an effect on a component based on the beginning and ending properties that it is modifying. However, as an animation becomes more complex, the Flex framework needs more direction for how to animate elements that exist in only one state of the transition.</p> |
| <p>In this section, you will use the <code>AddAction</code> and <code>RemoveAction</code> effects to explicitly define when a component is added or removed during the transition between the two states.</p> |
| <ol> |
| <li>Return to Flash Builder.</li> |
| <li>Within the <code>Sequence</code> tag, between the <code>Parallel</code> effects, add the <code>RemoveAction</code> tag with a <code>target</code> property bound to the <code>login</code> instance.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_16" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel> |
| ... |
| |
| </s:Parallel> |
| <s:RemoveAction target="{login}"/> |
| <s:Parallel targets="{[search, |
| cafeteriaSpecial, monthlyEvents]}"> |
| ... |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_22" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You have just told the application to first animate the login and <code>employeeOfTheMonth</code> instances and then remove the login instance, which does not exist in the portal state.</p> |
| <ol start="3"> |
| <li> Within the second set of <code>Parallel</code> tags, add the <code>AddAction</code> tag as the first effect.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_17" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel targets="{[search, |
| cafeteriaSpecial, monthlyEvents]}"> |
| <s:AddAction/> |
| <s:Fade/> |
| ...</code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_23" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>You have now told the application to explicitly add the panel instances to the transition at this point before you fade and move them.</p> |
| <ol start="4"> |
| <li>Save the file and run the application.</li> |
| <li>Enter <b>flex</b> for the username and <b>hero</b> for the password, then click the Submit button.</li> |
| </ol> |
| <p>You should see the <code>Panel</code> containers except for the Employee of the Month panel<code> </code>animate properly upon switching to the <code>portalState</code> state, as shown in Figure 5.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_3" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Log in and see the Panel containers except for the Employee of the Month, animate correctly." alt="Log in and see the Panel containers except for the Employee of the Month, animate correctly." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image_3.adimg.mw.600.jpg/1303284327935.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 5. Log in and see the Panel containers except for the Employee of the Month, animate correctly.</div> |
| </div> |
| <a name="articlecontentAdobe_numberedheader_3" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow"> |
| <a id="articlecontentAdobe_numberedheader_3"></a> |
| Use the Resize effect</h3> |
| </div> |
| <a name="articlecontentAdobe_text_24" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p id="e">In this section you will use the <code>Resize</code> effect to change the size of the <code>employeeOfTheMonth</code> <code>Panel</code> container between states.</p> |
| <ol> |
| <li>Return to Flash Builder.</li> |
| <li>Locate the first <code>Parallel</code> effect tag.</li> |
| <li>To the second nested <code>Move</code> effect, add the <code>xFrom</code> property with a value of <code>298</code> and the <code>xTo</code> property value of <code>24</code>. These properties values represent the x position of the <code>employeeOfTheMonth</code> component in each application state.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_18" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Move target="{login}" xTo="-266"/> |
| <s:Move target="{employeeOfTheMonth}" |
| xFrom="298" |
| xTo="24"/></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_25" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="4"> |
| <li>Between the <code>Fade and the Move</code> effects, add a <code>Resize</code> effect and assign the <code>target</code> property value to <code>employeeOfTheMonth</code>, the <code>widthFrom</code> property value to <code>390</code> and the <code>widthTo</code> property value to <code>250</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_19" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Fade target="{login}"/> |
| <s:Resize target="{employeeOfTheMonth}" |
| widthFrom="390" |
| widthTo="250"/> |
| <s:Move target="{login}" |
| xTo="-266"/> |
| <s:Move target="{employeeOfTheMonth}" |
| xFrom="298" xTo="24"/></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_26" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="5"> |
| <li>Save the file and run the application.</li> |
| <li>Enter <b>flex</b> for the username and <b>hero </b> for the password, then click the Submit button.</li> |
| </ol> |
| <p>You should see the Employee of the Month panel animate before the other Panel containers within the portal state (see Figure 6).</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_4" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Log in and see the Employee of the Month Panel container animates first." alt="Log in and see the Employee of the Month Panel container animates first." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image_4.adimg.mw.600.jpg/1303284618491.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 6. Log in and see the Employee of the Month Panel container animates first.</div> |
| </div> |
| <a name="articlecontentAdobe_text_42" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p id="f">Now you will add the <code>autoReverse</code> property to the transition so that your application animates when you transition from the portalState back to the loginState.</p> |
| <ol start="7"> |
| <li>Return to the ex4_10_starter.mxml file.</li> |
| <li>To the opening <code>Transition</code> tag, add the <code>autoReverse</code> property with a value of <code>true</code>.</li> |
| <li>Save the file and run the application.</li> |
| <li>Enter flex for the username and hero for the password, then click the Submit button.</li> |
| <li>Click the Logout button.<p>Notice that the transition reverses, however, it does not animate correctly. In the next section you will add a second transition from the portalState to the loginState.</p> |
| </li> |
| <li>Return to Flash Builder.</li> |
| <li>From the opening <code>Transition</code> tag, remove the <code>autoReverse</code> property.</li> |
| <li>Save the file.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_numberedheader_4" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"><h3 class="TextH3 LayoutCellSides LayoutRow"> |
| <a id="articlecontentAdobe_numberedheader_4"></a> |
| Create a logout transition</h3> |
| </div> |
| <a name="articlecontentAdobe_text_27" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In this section you will create a second transition to animate the components when the user logs out of the application. When this happens, you will animate from the portal state back to the login state.</p> |
| <ol> |
| <li>Return to Flash Builder.</li> |
| <li>Within the <code>transitions</code> tags, below the existing <code>Transition</code> block, add another <code>Transition</code> tag block.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_20" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Transition fromState="loginState" toState="portalState"> |
| ... |
| </s:Transition> |
| <s:Transition> |
| |
| </s:Transition></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_28" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="3"> |
| <li>To the new <code>Transition</code> instance, add the <code>fromState</code> property with a value of <code>portalState</code> and the <code>toState</code> property with a value of <code>loginState</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_21" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Transition fromState="portalState" toState="loginState"> |
| </s:Transition></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_29" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>When the user logs out of the Employee Portal application, you will fade out the <code>search</code>, <code>cafeteriaSpecial</code>, and <code>monthlyEvents</code> panels while the <code>employeeOfTheMonth</code> instance resizes and moves to its proper position in the login state. The next composite effect that you want to animate when that is done is for the Login panel to fade and move in from the left of the screen.</p> |
| <ol start="4"> |
| <li> Within the <code>Transition</code> effect, nest a <code>Sequence</code> effect.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_22" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Transition fromState="portalState" toState="loginState"> |
| <s:Sequence> |
| |
| </s:Sequence> |
| </s:Transition></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_30" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="5"> |
| <li>Within the <code>Sequence</code> tags, add a <code>Parallel</code> effect to animate out the panels in the <code>portalState</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_23" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Sequence> |
| <s:Parallel> |
| |
| </s:Parallel> |
| </s:Sequence></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_31" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="6"> |
| <li>Within the <code>Parallel</code> effect add a <code>Fade</code> effect and assign the <code>targets</code> property value to the three <code>Panel</code> containers that exist only in the <code>portalState</code> state.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_24" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel> |
| <s:Fade targets="{[search, cafeteriaSpecial, monthlyEvents]}"/> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_32" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="7"> |
| <li>Below the <code>Fade</code> effect, add a <code>Resize</code> effect and assign the <code>target</code> property value to the <code>employeeOfTheMonth Panel</code> container, the <code>widthFrom</code> property value to <code>250</code> and the <code>widthTo</code> property value to <code>390</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_25" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Fade targets="{[search, cafeteriaSpecial, monthlyEvents]}"/> |
| <s:Resize target="{employeeOfTheMonth}" widthFrom="250" widthTo="390"/></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_33" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="8"> |
| <li>Below the <code>Resize</code> effect, add the <code>Move</code> effect and assign the <code>target</code> property value to the <code>employeeOfTheMonth</code> <code>Panel</code> container, the <code>xFrom</code> property value to <code>24</code> and the <code>xTo</code> property value to <code>434</code>.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_26" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Resize target="{employeeOfTheMonth}" |
| widthFrom="177" widthTo="264"/> |
| <s:Move target="{employeeOfTheMonth}" |
| xFrom="24" xTo="434"/> </code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_34" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="9"> |
| <li>Below the <code>Parallel</code> composite effect, but still inside the Sequence effect, create a second set of <code>Parallel</code> tags that target the <code>login</code> instance.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_27" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Sequence> |
| <s:Parallel> |
| ... |
| </s:Parallel> |
| <s:Parallel target="{login}"> |
| |
| </s:Parallel> |
| </s:Sequence></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_35" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="10"> |
| <li>Within the new <code>Parallel</code> effect, add a <code>Fade</code> effect.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_28" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Parallel target="{login}"> |
| <s:Fade/> |
| </s:Parallel></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_36" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In the previous steps, you have defined the animations that should occur in sequence. First, all the panels in the portal state will fade, except the Employee of the Month panel, which will move to its new location. Then the Login panel will fade and move into place in the login state.</p> |
| <p>Lastly you need to define when the panels that do not exist in both states need to be added or removed during the transition.</p> |
| <ol start="11"> |
| <li>Between the two <code>Parallel</code> tag blocks, add the <code>RemoveAction</code> tag and assign the <code>targets</code> <code>property</code> value to the <code>Panel</code> containers that exist only in the <code>portalState</code> state.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_29" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Sequence> |
| <s:Parallel> |
| ... |
| </s:Parallel> |
| <s:RemoveAction targets="{[search, cafeteriaSpecial, monthlyEvents]}"/> |
| <s:Parallel target="{login}"> |
| ... |
| </s:Parallel> |
| </s:Sequence> </code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_37" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="12"> |
| <li>Still between the <code>Parallel</code> tag blocks, but below the <code>RemoveAction</code> effect, add an <code>AddAction</code> tag and assign the <code>target</code> property value to the <code>login</code> Panel container.</li> |
| </ol> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_codeblock_30" style="visibility:hidden"></a><div class="parbase codeblock compbase section"><div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> |
| <code class="CodeBlock"><s:Sequence> |
| <s:Parallel> |
| ... |
| </s:Parallel> |
| <s:RemoveAction targets="{[search, cafeteriaSpecial, monthlyEvents]}"/> |
| <s:AddAction target="{login}"/> |
| <s:Parallel target="{login}"> |
| ... |
| </s:Parallel> |
| </s:Sequence></code> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_text_38" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <ol start="13"> |
| <li>Save the file and run the application.</li> |
| <li>Enter <b>flex</b> for the username and <b>hero</b> for the password, and then click the Submit button.</li> |
| <li>Click the Logout button.</li> |
| </ol> |
| <p>You should see that the Employee of the Month panel moves and resizes while the other panels fade away, and then the Login panel fades into view and moves into place as shown in Figure 7.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_image_5" style="visibility:hidden"></a><div class="parbase image section"><div class="LayoutRow LayoutCellSides"> |
| <img title="Log out to see the Login and Employee of the Month panels animate." alt="Log out to see the Login and Employee of the Month panels animate." class="cq-dd-image LayoutImage LayoutRow " src="/content/dotcom/en/devnet/flex/newcontent/videotraining/exercises/ex4_10/_jcr_content/articlecontentAdobe/image_5.adimg.mw.600.jpg/1303285632731.jpg"/></div> |
| <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> |
| Figure 7. Log out to see the Login and Employee of the Month panels animate.</div> |
| </div> |
| <a name="articlecontentAdobe_text_39" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p>In this exercise you used effects to animate components as they transition between states of an application.</p> |
| </div> |
| </div> |
| <a name="articlecontentAdobe_reference" style="visibility:hidden"></a><div class="parbase section reference"><div style="display:inline;" class="cq-dd-paragraph"><div class="text parbase"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak"> |
| <p><a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img src="http://cookbooks.adobe.com/resources/images/license_creative_commons.png" alt="Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License"></a>+<a target="_blank" href="/communities/guidelines/ccplus/commercialcode_plus_permission.html"><img src="http://cookbooks.adobe.com/resources/images/license_adobe.jpg" alt="Adobe Commercial Rights"></a></p> |
| <p>This work is licensed under a <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at <a target="_blank" href="/communities/guidelines/ccplus/commercialcode_plus_permission.html">Adobe</a>.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div></div> |
| <div class="LayoutRow"> |
| <div class="articlePaging paging"></div> |
| </div> |
| </div> |
| </div> |
| <div class="ArticleWideGrid-5-6 ArticleWideRight"> |
| <div class="LayoutBreakAfter RuleH ArticleWideRuleHide TextSmall LayoutBreak"> |
| <div class="ArticleGrid-2-3 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="morelikethis"><div class="LayoutCellSides"> |
| <h2 class="TextH5 LayoutRow">More Like This</h2> |
| |
| <ul class="LayoutRow"> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_01.html" title="Exercise 1.1: Setting up your project files">Exercise 1.1: Setting up your project files</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_04.html" title="Exercise 1.4: Adding data to your application">Exercise 1.4: Adding data to your application</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_03.html" title="Exercise 1.3: Generating an email address using data binding">Exercise 1.3: Generating an email address using data binding</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_05.html" title="Exercise 1.5: Experimenting with container layouts">Exercise 1.5: Experimenting with container layouts</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex5_03.html" title="Exercise 5.2: Defining selector styles">Exercise 5.2: Defining selector styles</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex1_02.html" title="Exercise 1.2: Creating an application user interface">Exercise 1.2: Creating an application user interface</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex4_02.html" title="Exercise 4.2: Displaying dynamic data in a custom item renderer">Exercise 4.2: Displaying dynamic data in a custom item renderer</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex3_05.html" title="Exercise 3.5: Using formatters">Exercise 3.5: Using formatters</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex3_08.html" title="Exercise 3.8: Creating a master/detail interface with a wizard">Exercise 3.8: Creating a master/detail interface with a wizard</a></li> |
| <li class="LayoutSmallRowBottom"> |
| <a href="/devnet/flex/newcontent/videotraining/exercises/ex3_06.html" title="Exercise 3.6: Validating form data">Exercise 3.6: Validating form data</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter"> |
| <div class="LayoutRow"> |
| <div class="parbase compbase inheritedpromo"> |
| |
| |
| |
| |
| |
| <div class="LayoutRow"></div></div> |
| </div> |
| </div> |
| </div> |
| <div class="LayoutBreakAfter TextSmall"> |
| <div class="ArticleGrid-2 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="parsys inheritedresources inheritedResources"></div> |
| </div> |
| <div class="ArticleGrid-3 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="parsys inheritedresources inheritedResources2"></div> |
| </div> |
| <div class="ArticleGrid-4 LayoutSlimGrid-1-2 ArticleWideGridColReset"> |
| <div class="parsys inheritedResources3 inheritedresources"></div> |
| </div> |
| </div> |
| </div> |
| <!-- Main Content Comments --> |
| |
| <div class="LayoutRow LayoutGridBreak LayoutBreakAfter"> |
| <div class="parbase compbase jivecomments jiveComments"></div> |
| </div> |
| |
| </div> |
| |
| </div> |
| </div> |
| <div class="PrintLayoutHide"> |
| <!--googleoff: all--><script> |
| //<![CDATA[ |
| var hideEvidon = false; |
| |
| $(document).ready(function() { |
| adobe.fn.initGlobalFooter(); |
| adobe.fn.evidon('_bapw-link'); |
| |
| adobe.fn.initGeorouting(); |
| }); |
| changeRegion = adobe.fn.changeRegionFooter; |
| //]]> |
| </script> |
| |
| <!--googleoff: index--> |
| <!-- $Id: //depot/projects/dylan/releases/rc_13_11/ubi/footer/en_us/globalfooter_ssi.html#1 $ --> |
| <div id="SiteFooter" class="SiteFooter Text TextSmall TextInvert Link LayoutBreak"> |
| <span id="Georouting"></span> |
| <div class="LayoutBreakAfter"> |
| <div class="LayoutGrid-1 LayoutSlimGrid-1 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/products/catalog.html?promoid=JOPBT">Products</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconCloud" href="/products/creativecloud.html?promoid=JQPER">Adobe Creative Cloud</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconCS" href="/products/cs6.html?promoid=KFHNH">Creative Suite 6</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconOMS" href="/solutions/digital-marketing.html?promoid=JOPBY">Adobe Marketing Cloud</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconAcrobat" href="/products/acrobat.html?promoid=JOPBV">Acrobat</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconPS" href="/products/photoshop.html?promoid=JOPCB">Photoshop</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconDPS" href="/products/digital-publishing-suite-family.html?promoid=JOPBZ">Digital Publishing Suite</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconElements" href="/products/elements-family.html?promoid=JOPBX">Elements family</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconSC" href="/products/sitecatalyst.html?promoid=KFGCH">SiteCatalyst</a></li> |
| <li><a class="icon Icon SiteFooterMenuItemIconProducts" href="/education.html?marketSegment=EDU&promoid=JUTMH">For education</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-2 LayoutSlimGrid-2 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/downloads/?promoid=JOPDB">Download</a></h4> |
| <ul class="SiteFooterLinkList SiteFooterLinkListBottom"> |
| <li><a href="/downloads/?promoid=KEWBH">Product trials</a></li> |
| <li><a href="/go/gffooter_adobe_reader">Adobe Reader</a></li> |
| <li><a href="http://get2.adobe.com/flashplayer/?promoid=KFHNI">Adobe Flash Player</a></li> |
| <li><a href="/go/gffooter_adobe_air">Adobe AIR</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-3 LayoutSlimGrid-1 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/go/gffooter_help">Support & Learning</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a href="http://helpx.adobe.com/support.html?promoid=KFKQG">Product help</a></li> |
| <li><a href="http://forums.adobe.com/index.jspa?promoid=JOPCT" target="_blank">Forums</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-4 LayoutSlimGrid-2 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/buy.html?promoid=JOPCV">Buy</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a href="/go/gffooter_homeuse">For personal and professional use</a></li> |
| <li><a href="/go/gffooter_students_store">For students, educators, and staff</a></li> |
| <li><a href="/products/small-business-pricing/software-catalog._sl_id-contentfilter_sl_catalog_sl_software_sl_creativecloudmembership.html?marketSegment=COM&promoid=JOPCY">For small and medium businesses</a></li> |
| <li><a href="/go/gffooter_licensingprograms">Volume Licensing</a></li> |
| <li><a href="/go/gffooter_special_offers">Special offers</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="LayoutGrid-5 LayoutSlimGrid-1-2 LinkInvert"> |
| <div class="LayoutCellSides LayoutCellTop"> |
| <h4><a href="/company.html?promoid=JOPDG">Company</a></h4> |
| <ul class="SiteFooterLinkList"> |
| <li><a href="/go/gffooter_news_room">News room</a></li> |
| <li><a href="/go/gffooter_partner_programs">Partner programs</a></li> |
| <li><a href="/go/gffooter_corporate_social_responsibility">Corporate responsibility</a></li> |
| <li><a href="/go/gffooter_career_opportunities">Career opportunities</a></li> |
| <li><a href="/go/gffooter_investor_relation">Investor Relations</a></li> |
| <li><a href="/go/gffooter_events">Events</a></li> |
| <li><a href="/go/gffooter_legal">Legal</a></li> |
| <li><a href="/go/gffooter_security">Security</a></li> |
| <li><a href="/company/contact.html?promoid=JOPDO">Contact Adobe</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="LayoutGridBreak"> |
| <div class="LayoutCellSides LayoutCellBottom"> |
| <div class="SiteFooterRegionSelector TextInvert LinkInvert LinkStrong"> |
| <a href="/go/gffooter_choose_region" id="sfRegion" class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlue">Choose your region</a> |
| <span id="sfRegionSet" class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlack" style="display: none;">United States <a href="/go/gffooter_choose_region" id="sfRegionChange">(Change)</a></span> |
| </div> |
| <div class="SiteFooterRegionPanel SiteFooterRegionPanelEvidon" id="RegionPanel" style="display: none;"> |
| <div class="SiteFooterRegionPanelHeader"> |
| <span class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlack">Choose your region</span> |
| <a id="sfRegionClose" class="SiteFooterRegionPanelHeaderClose">Close</a> |
| </div> |
| <div class="Column"> |
| <div class="Column-1"> |
| <p class="SiteFooterRegionPanelRegionHeader">North America</p> |
| </div> |
| <div class="Column-2-3"> |
| <p class="SiteFooterRegionPanelRegionHeader">Europe, Middle East and Africa</p> |
| </div> |
| <div class="Column-4"> |
| <p class="SiteFooterRegionPanelRegionHeader">Asia Pacific</p> |
| </div> |
| <div class="Column-1"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('ca');">Canada - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('ca_fr');">Canada - Français</a></li> |
| <li lang="es"><a onClick="changeRegion('la');">Latinoamérica</a></li> |
| <li lang="es"><a onClick="changeRegion('mx');">México</a></li> |
| <li lang="en"><a onClick="changeRegion('us');">United States</a></li> |
| </ul> |
| |
| <p class="SiteFooterRegionPanelRegionHeader">South America</p> |
| <ul> |
| <li lang="pt"><a onClick="changeRegion('br');">Brasil</a></li> |
| </ul> |
| </div> |
| <div class="Column-2"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('africa');">Africa - English</a></li> |
| <li lang="de"><a onClick="changeRegion('at');">Österreich - Deutsch</a></li> |
| <li lang="en"><a onClick="changeRegion('be_en');">Belgium - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('be_fr');">Belgique - Français</a></li> |
| <li lang="nl"><a onClick="changeRegion('be_nl');">België - Nederlands</a></li> |
| <li lang="bg"><a onClick="changeRegion('bg');">България</a></li> |
| <li lang="hr"><a onClick="changeRegion('hr');">Hrvatska</a></li> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Cyprus - English</a></li> |
| <li lang="cs"><a onClick="changeRegion('cz');">Česká republika</a></li> |
| <li lang="da"><a onClick="changeRegion('dk');">Danmark</a></li> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Eastern Europe - English</a></li> |
| <li lang="et"><a onClick="changeRegion('ee');">Eesti</a></li> |
| <li lang="fi"><a onClick="changeRegion('fi');">Suomi</a></li> |
| <li lang="fr"><a onClick="changeRegion('fr');">France</a></li> |
| <li lang="de"><a onClick="changeRegion('de');">Deutschland</a></li> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Greece - English</a></li> |
| <li lang="hu"><a onClick="changeRegion('hu');">Magyarország</a></li> |
| <li lang="en"><a onClick="changeRegion('ie');">Ireland</a></li> |
| <li lang="en"><a onClick="changeRegion('il_en');">Israel - English</a></li> |
| <li lang="he"><a onClick="changeRegion('il_he');">ישראל - עברית</a></li> |
| <li lang="it"><a onClick="changeRegion('it');">Italia</a></li> |
| <li lang="lv"><a onClick="changeRegion('lv');">Latvija</a></li> |
| <li lang="lt"><a onClick="changeRegion('lt');">Lietuva</a></li> |
| <li lang="de"><a onClick="changeRegion('lu_de');">Luxembourg - Deutsch</a></li> |
| <li lang="en"><a onClick="changeRegion('lu_en');">Luxembourg - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('lu_fr');">Luxembourg - Français</a></li> |
| </ul> |
| </div> |
| <div class="Column-3"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('eeurope');">Malta - English</a></li> |
| <li lang="ar"><a onClick="changeRegion('mena_ar');">الشرق الأوسط وشمال أفريقيا - اللغة العربية</a></li> <li lang="en"><a onClick="changeRegion('mena_en');">Middle East and North Africa - English</a></li> |
| <li lang="fr"><a onClick="changeRegion('mena_fr');">Moyen-Orient et Afrique du Nord - Français</a></li> |
| <li lang="nl"><a onClick="changeRegion('nl');">Nederland</a></li> |
| <li lang="no"><a onClick="changeRegion('no');">Norge</a></li> |
| <li lang="pl"><a onClick="changeRegion('pl');">Polska</a></li> |
| <li lang="pt"><a onClick="changeRegion('pt');">Portugal</a></li> |
| <li lang="ro"><a onClick="changeRegion('ro');">România</a></li> |
| <li lang="ru"><a onClick="changeRegion('ru');">Россия</a></li> |
| <li lang="sr"><a onClick="changeRegion('rs');">Srbija</a></li> |
| <li lang="sk"><a onClick="changeRegion('sk');">Slovensko</a></li> |
| <li lang="sl"><a onClick="changeRegion('si');">Slovenija</a></li> |
| <li lang="es"><a onClick="changeRegion('es');">España</a></li> |
| <li lang="sv"><a onClick="changeRegion('se');">Sverige</a></li> |
| <li lang="de"><a onClick="changeRegion('ch_de');">Schweiz - Deutsch</a></li> |
| <li lang="fr"><a onClick="changeRegion('ch_fr');">Suisse - Français</a></li> |
| <li lang="it"><a onClick="changeRegion('ch_it');">Svizzera - Italiano</a></li> |
| <li lang="tr"><a onClick="changeRegion('tr');">Türkiye</a></li> |
| <li lang="uk"><a onClick="changeRegion('ua');">Україна</a></li> |
| <li lang="en"><a onClick="changeRegion('uk');">United Kingdom</a></li> |
| </ul> |
| </div> |
| <div class="Column-4"> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('au');">Australia</a></li> |
| <li lang="zh"><a onClick="changeRegion('cn');">中国</a></li> |
| <li lang="zh"><a onClick="changeRegion('hk_zh');">中國香港特別行政區</a></li> |
| <li lang="en"><a onClick="changeRegion('hk_en');">Hong Kong S.A.R. of China</a></li> |
| <li lang="en"><a onClick="changeRegion('in');">India - English</a></li> |
| <li lang="ja"><a onClick="changeRegion('jp');">日本</a></li> |
| <li lang="ko"><a onClick="changeRegion('kr');">한국</a></li> |
| <li lang="en"><a onClick="changeRegion('nz');">New Zealand</a></li> |
| <li lang="zh"><a onClick="changeRegion('tw');">台灣</a></li> |
| </ul> |
| |
| <p class="SiteFooterRegionPanelRegionHeader">Southeast Asia</p> |
| <ul> |
| <li lang="en"><a onClick="changeRegion('sea');">Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="LayoutGridBreak"> |
| <div class="LayoutCellSides"> |
| <hr /> |
| </div> |
| </div> |
| |
| <div class="LayoutGrid-1-5 LayoutSlimGrid-1-2 LinkInvert LinkStrong"> |
| <div class="LayoutCellSides LayoutCellBottom LinkInvert"> |
| <p class="SiteFooterRow TextSmall">Copyright © 2013 Adobe Systems Incorporated. All rights reserved.</p> |
| <p class="SiteFooterRow TextSmall"><a href="/go/gffooter_terms_of_use">Terms of Use</a> | <a href="/privacy.html">Privacy</a> | <a href="/privacy/cookies.html">Cookies</a></p> |
| <p class="SiteFooterRow SiteFooterRowTop"><a href="#" id="_bapw-link" class="TextSmall icon Icon SiteFooterMenuItemIconEvidon" style="display:none;">Ad Choices</a></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!--googleon: index--><!--googleon: all--></div> |
| <div class="parsys templatembox bottomofbodymbox"><div class="mboxDefault"> |
| </div> |
| <script> |
| mboxCreate('defaultmboxname'); |
| </script> |
| </div> |
| <div class="parsys doubleclickfloodlight"><!-- Fetch either EDU or COM snippet based on the Mode selection--> |
| </div> |
| |
| <!-- Invoking faas form engine tracking Script !! ---> |
| </div> |
| </body> |
| </html> |
