Google Git
Sign in
apache / flex-external / 1bcc0e180bf86438b89c0150109497d447125e8b / . / ADC / devnet / flex / articles / flex4_effects_pt2.html
blob: bdcfab2128bb870361f1c5d9e36415878fe8cb40 [file] [log] [blame]
<!--
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>Effects in Adobe Flex 4 – Part 2: Advanced graphical effects | Adobe Developer Connection</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noodp" />
<meta name="keywords" content="graphic effects,effects,design" />
<meta name="description" content="Learn how to take your Flex applications to the next level with the new effects included in the Flex 4 SDK." /><meta name="creationDate" content="2010-09-09 @ 00:19:20" />
<meta name="lastModifiedDate" content="2010-09-09 @ 00:19:20" />
<meta name="viewport" content="width=device-width" />
<meta name="page" content="main" />
<meta name="shortTitle" content="Effects in Adobe Flex 4 – Part 2: Advanced graphical effects"/>
<meta name="blurb" content="Learn how to take your Flex applications to the next level with the new effects included in the Flex 4 SDK." />
<meta name="author" content="Chet Haase" />
<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/articles/flex4_effects_pt2.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 = "7";
</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,"jp":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/articles/flex4_effects_pt2");
});
</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 &amp; <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&amp;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&amp;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 &amp; 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">&nbsp;</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">&nbsp;</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">&nbsp;</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&amp;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">
Effects in Adobe Flex 4 – Part 2: Advanced graphical effects</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&nbsp;<a href="/devnet/author_bios/chet_haase.html">Chet Haase</a></h2>
<div class="LayoutRow">
<img title="" alt="Chet Haase" class="ImageShadow LayoutImage" src="/content/dotcom/en/devnet/author_bios/chet_haase/_jcr_content/image.adimg.mw.160.jpg/1296456569298.jpg"/></div>
<div class="LayoutRow">
<ul>
<li><a href="http://www.adobe.com/" title="Adobe">Adobe</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">
3D: Taking effects into the next dimension</a>
</li>
<li class="LayoutSmallRow ListItemIndent">
<a href="#articlecontentAdobe_numberedheader_0">
Using Pixel Bender shader effects</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>22 March 2010</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.tag-ADC%2BKeywords_c_design.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="design">design</a><a href="/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_effects.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="effects">effects</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_graphic_effects.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="graphic&nbsp;effects">graphic&nbsp;effects</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> &#160;
<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">&nbsp;</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">
<p>Basic understanding of the Flex Builder environment and prior experience developing Flex applications is recommended.</p>
</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<a href="/go/try_flashbuilder/"> (Download trial)</a></li>
<li class="LayoutSmallRow">
<span class="IconLeft IconSmallDownload"></span>Flex<a href="/go/tryflex/"> (Download trial)</a></li>
<li class="LayoutSmallRow">
<a href="http://get.adobe.com/flashplayer/"><span class="IconLeft IconSmallDownload"></span>Flash Player</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="/content/dotcom/en/devnet/flex/articles/flex4_effects_pt2/_jcr_content/articlePrerequistes/multiplefiles/node_1279008002163/file.res/flex4_effects_pt2[1].zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>flex4_effects_pt2.zip</a>
(2122 KB)</li>
<ul class="LayoutGutterLeft"><li class="LayoutGutterLeft">
</li></ul>
</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 <a href="/devnet/flex/articles/flex4_effects_pt1.html">Part 1</a> of this article series on using Flex 4 to create basic effects, we looked at the superclass of the new effects, Animate, and some of the fundamental effect subclasses. In this article, we'll take a look at some other effect subclasses that enable more advanced graphics capabilities in Flex 4.</p>
<p>The code snippets included in this article are included in the sample files that you can download below. If you feel like playing with the applications, grab the source code, <a href="/go/flex4_sdk_download/" target="_blank">download</a> the open source Flex and start coding.</p>
</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>
3D: Taking effects into the next dimension</h3>
</div>
<a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>While the Flex team was busy working on Flex 4 and thinking about component architectures, skinning and namespaces, the Flash team was releasing Flash Player 10 with all kinds of cool, new features. One of those features was 3D; the ability to position and orient Flash display objects in Z as well as x and Y.</p>
<p>Flash Player does not support a complete 3D graphics engine. In particular, there is no Z buffer, which means you may encounter some overlapping artifacts if you are trying to render complex 3D models. However, Flash Player does support correct 3D positioning and perspective projection, which allows you to create some stunning visual effects. You may not be able to easily write a 3D modeler without some extra processing on the objects to avoid depth issues, but you can certainly write cover flow-like or other 3D UI effects in a much easier and more visually-correct way than was previously possible.</p>
<p>With all of new features included in Flash Player 10, it behooved the Flex team to take advantage of them. Flex 4 includes new effects that allow you to easily manipulate objects in 3D—just as you can in 2D. In particular, the new subclasses of the transform effects (discussed in Part 1 of this article series) make it possible to manipulate the 3D attributes of an object's transform matrix:</p>
<ul>
<li><b>Move3D</b> exposes from, to, and by properties for x, y, and z to allow you to animate objects between 3D positions (the default position of Flex objects are at z=0).</li>
<li><b>Rotate3D</b> exposes from and to properties for the x, y, and z axes for rotation in 3D (the usual 2D rotation is around the z axis only and the rotation values around the other axes are typically 0).</li>
<li><b>Scale3D</b> exposes the from, to, and by properties for scaling in x, y, and z to allow scaling in 3D. Note that scaling in 2D is just in x and y, with the z scale factor being 1.</li>
</ul>
<p>These three classes expose both 2D and 3D properties and make it easy to manipulate objects in all three dimensions simultaneously.</p>
</div>
</div>
<a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<h4><b>Example: 3D mouseOver</b></h4>
<p>Let's look at the code used to animate the 3D properties of some UI elements.</p>
<p>If you've downloaded the sample files from the <a></a><a href="/devnet/flex/articles/flex4_effects_pt2.html">first page of this article</a> and want to follow along, this sample is found in the application named ThreeDButtons.</p>
<p>The ThreeDButtons application is a simple application that animates buttons whenever the mouse hovers over them. In this example, both rotation and movement in 3D are animated. You can switch between the effects using the radio buttons at the top of the application. As the user's mouse moves over the buttons, effects are run on each button that either rotate the button 360 degrees around the y axis or move the button toward the viewer and then back into place. The effects are declared like this:</p>
</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">&lt;s:Rotate3D id=&#034;rotator&#034; angleYFrom=&#034;0&#034; angleYTo=&#034;360&#034;
autoCenterTransform=&#034;true&#034;
effectEnd=&#034;effectEndHandler(event)&#034;/&gt;
&lt;s:Move3D id=&#034;mover&#034; duration=&#034;200&#034; zBy=&#034;-30&#034; repeatCount=&#034;2&#034;
repeatBehavior=&#034;{RepeatBehavior.REVERSE}&#034;
autoCenterTransform=&#034;true&#034;
effectEnd=&#034;effectEndHandler(event)&#034;/&gt;</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>The &quot;rotator&quot; effect spins a target object around the y axis, with the transform center anchored at the center of the object. The &quot;mover&quot; effect will move an object toward the viewer (using a decreasing Z value) and then move it back again.</p>
<p> The effects are played when the buttons detect that the mouse is over them, via the mouseOver event. An event handler calls a script function to start the appropriate effect, like this:</p>
</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">&lt;s:Button id=&#034;button0&#034; width=&#034;100&#034; height=&#034;100&#034;
mouseOver=&#034;animateHover(button0)&#034;/&gt;</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>The animateHover() function is defined in a script block, as shown below: </p>
</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">private function animateHover(target:Object):void
{
if (animatingTargets[target.id] === undefined)
{
var effect:Effect;
if (rotationButton.selected)
effect = rotator;
else
effect = mover;
effect.target = target;
animatingTargets[target.id] = effect;
effect.play();
}
}</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 code example above, the appropriate effect is set up (based on which radio button the user selected), the target is set and the effect is played. We also add an entry into an Object map for the target, to note that we are currently playing an effect on this target. This prevents the effect from restarting if another mouseOver event is broadcast while the effect is still playing. We also register an event listener for the effectEnd event in our effects so that we can remove that entry from the map when the effect is done:</p>
</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">private function effectEndHandler(event:EffectEvent):void
{
delete animatingTargets[event.effectInstance.target.id];
}</code>
</div>
</div>
<a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>Setting up and playing 3D effects using Flex 4 is fairly straightforward. Next, let's see how we can use Pixel Bender to create shader effects with Flex 4. </p>
</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>
Using Pixel Bender shader effects</h3>
</div>
<a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>Another amazing graphics feature included in Flash Player 10 is support for Pixel Bender shaders. <span class="asReserved"><a href="http://labs.adobe.com/technologies/pixelbender/" target="_blank">Pixel Bender Toolkit</a></span> is a technology available from Adobe Labs that allows you to create small programs to manipulate images on a per-pixel basis, based on arbitrary numbers of image inputs and other constants and calculations defined in your programs. Think of this process as iterating through each pixel of an image, running your program at each step and calculating the final pixel value for the image based on the inputs and computations specified by your program.</p>
<p>A thorough discussion of the Pixel Bender Toolkit and how to use it is beyond the scope of this article. However, I highly recommend visiting the <span class="asReserved"><a href="http://labs.adobe.com/technologies/pixelbender/" target="_blank">Pixel Bender</a></span> site to download the free toolkit, read the documentation and play with the sample projects. This section is about how this technology can be used in Flex.</p>
<p>The great thing about Pixel Bender support in Flash is that it is now possible to create custom filters on Flash display objects. Flash filters are powerful mechanisms for changing the way that objects are displayed on the screen. With Flash filters, it is a simple matter to perform tasks that would otherwise require a lot of tedious code to get right, such as adding a drop shadow to a component or a glow around a button. Prior to Flash Player 10, it was not possible to create custom Flash filters; you had to rely on the pre-built filters included with Flash. But with the Pixel Bender Toolkit, you now have a framework to plug in very custom filters to make objects display in arbitrary ways on the screen. And it is possible to animate these filters with the effects in Flex 4 to get all kinds of different visual results.</p>
<p>There are two effects in Flex 4 which enable the use of Pixel Bender shaders: AnimateFilter and AnimateTransitionShader. </p>
</div>
</div>
<a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<h4><b>Working with AnimateFilter </b></h4>
<p>The AnimateFilter effect is not specific to Pixel Bender shaders; it can be used to animate the properties of any filter object attached to a UI element. For example, AnimateFilter can animate a glow around a component.</p>
<p>If you're following along and you've downloaded the sample files from the <a></a><a href="/devnet/flex/articles/flex4_effects_pt2.html">first page of this article</a>, this sample is found in the application named GlowingButton.</p>
</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">&lt;s:GlowFilter id=&#034;glow&#034; blurX=&#034;20&#034; blurY=&#034;20&#034; color=&#034;0 x 80ffff&#034;/&gt;
&lt;s:AnimateFilter id=&#034;glower&#034; target=&#034;{button}&#034; bitmapFilter=&#034;{glow}&#034;
duration=&#034;600&#034; repeatCount=&#034;0&#034;
repeatBehavior=&#034;{RepeatBehavior.REVERSE}&#034;&gt;
&lt;s:SimpleMotionPath property=&#034;alpha&#034; valueFrom=&#034;0&#034; valueTo=&#034;1&#034;/&gt;
&lt;/s:AnimateFilter&gt; </code>
</div>
</div>
<a name="articlecontentAdobe_text_8" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>This code defines an appropriate GlowFilter to use, then applies an AnimateFilter effect that varies the alpha property of that filter over time. To make the animation run while the mouse is hovering over a button, define the glowing button like this: </p>
</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">&lt;s:Button id=&#034;button&#034; x=&#034;100&#034; y=&#034;100&#034;
mouseOver=&#034;if (!animating) { glower.play(); animating = true}&#034;
mouseOut=&#034;if (animating) { glower.end(); animating = false}&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_9" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>The button uses the boolean flag <code>animating</code> to determine whether the animation is already running, in order to prevent it from continually restarting as the mouse moves around and over the button.</p>
<p>This example shows the basic process of using the AnimateFilter effect: You pass in an effect, define the properties you want to animate on that effect and then play it. This works like most of the other effects in the system except that rather than animating the properties on the target object, it animates those of the filter you provide instead, and then sets that filter on the target object while the effect is playing.</p>
<p>But what does this have to do with Pixel Bender? There is a new filter in Flash Player 10 called ShaderFilter, and you can use this filter as an input to AnimateFilter to make it animate the properties of a Pixel Bender shader —just like we animated the properties of GlowFilter in the example above.</p>
<p>If you'd like to run the next example, open the AnimatedCrossfade application provided in the sample files.</p>
<p>This example performs a simple cross-fade between two images, which are embedded as follows (awesome San Francisco pictures provided by <span class="asReserved"><a href="http://www.curious-creature.org/photos/" target="_blank">Romain Guy</a></span>):</p>
</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">[Embed(source=&#034;images/GoldenGate.jpg&#034;)]
[Bindable]
private var GoldenGate:Class;
[Embed(source=&#034;images/Harbor.jpg&#034;)]
[Bindable]
private var Harbor:Class;</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>An Image component is used to hold the current image, like this:</p>
</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">&lt;mx:Image id=&#034;img&#034; source=&#034;{GoldenGate}&#034; click=&#034;clickHandler()&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_11" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>Meanwhile, the code defines a ShaderFilter to hold the Pixel Bender shader. The shader we are using is one of the samples that is included with the Pixel Bender Toolkit. This shader has not been modified from its original source, but I've simply compiled it into a &quot;pbj&quot; file for use with Flash Player 10. </p>
<p class="note"><b>Note:</b> You can use the menu options in the toolkit application to compile shaders into pbj files.</p>
<p>The shader performs a cross fade between two image inputs, calculating the final output pixel value by combining the two input image pixel values in a ratio determined by the intensity parameter, which is a value from 0 to 1. As the value of intensity gets closer to 1, the result becomes closer to the second image input. Here's the code:</p>
</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">&lt;s:ShaderFilter id=&#034;crossfadeFilter&#034;
shader=&#034;@Embed(source=&#039;shaders/crossfade.pbj&#039;)&#034;/&gt;</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>Finally, we declare our AnimateFilter effect using the code snippet below. Note that AnimateFilter takes our ShaderFilter as an input for its shader property so that it can animate the <code>intensity</code> variable in the filter:</p>
</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">&lt;s:AnimateFilter id=&#034;crossfader&#034; target=&#034;{img}&#034;
bitmapFilter=&#034;{crossfadeFilter}&#034;
effectEnd=&#034;effectEndHandler()&#034;&gt;
&lt;s:SimpleMotionPath property=&#034;intensity&#034;
valueFrom=&#034;0&#034; valueTo=&#034;1&#034;/&gt;
&lt;/s:AnimateFilter&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_13" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>Now let's see how to set up and play the effect. First, we have to get a handle to the underlying BitmapData objects of our images, which are provided to the shader as inputs when we play the effect. We grab the handle to the BitmapData objects in our creationComplete() handler when the application first starts up, like this:</p>
</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">private var goldenGateBD:BitmapData;
private var harborBD:BitmapData;
private function creationComplete():void
{
goldenGateBD = (new GoldenGate()).bitmapData;
harborBD = (new Harbor()).bitmapData;
}</code>
</div>
</div>
<a name="articlecontentAdobe_text_14" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>When the user clicks on the image, the clickHandler() function is called. This sets up the image inputs for the shader filter and also sets up the <code>newImageSource</code> property, which will be used when the effect ends to switch the image control's source in our Image control:</p>
</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">private function clickHandler():void
{
var bd0:BitmapData;
var bd1:BitmapData;
if (img.source == GoldenGate)
{
newImageSource = Harbor;
bd0 = goldenGateBD;
bd1 = harborBD;
}
else
{
newImageSource = GoldenGate;
bd0 = harborBD;
bd1 = goldenGateBD;
}
crossfadeFilter.shader.data.frontImage.input = bd0;
crossfadeFilter.shader.data.backImage.input = bd1;
crossfader.play();
}</code>
</div>
</div>
<a name="articlecontentAdobe_text_15" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>Finally, once the effect ends, we set up our Image control to display the correct image that we cross-faded to, so that it is now displayed on screen:</p>
</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">private function effectEndHandler():void
{
img.source = newImageSource;
}</code>
</div>
</div>
<a name="articlecontentAdobe_text_16" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<h4><b>Using AnimateTransitionShader</b></h4>
<p>The other way in which Flex effects use Pixel Bender shaders is in a new set of effects that are subclasses of the AnimateTransitionShader class. In Flex 4, there are currently just the Wipe and Crossfade effects. More effects may be added in the future, but it is also relatively easy for you to create your own effects using these classes and shaders that you define to create completely new, custom transitions.</p>
<p>The idea behind the AnimateTransitionShader effect, and its subclass effects, is that the effect captures a bitmap snapshot of the target object in its before and after states. The effect sets up a ShaderFilter with those two images as inputs and the shader defined by the effect (or passed in by you for a more custom effect), and runs an animation on the ShaderFilter to vary the look of the target object over time between the before and after images.</p>
<p>Because these effects perform very specific tasks, combining two input images over time, the structure of the Pixel Bender shader is required to conform to some simple constraints. In particular, shaders used with AnimateTransitionShader must have three input images, with the second and third named <code>from</code> and <code>to</code> and must have a floating point value named <code>progress</code>, which is the property that the effect will use to animate between 0 and 1 as the animation runs. The reason for the first image input is that Flash expects the first image input to be the object being filtered. In this case, however, we derive the output of these shaders just from the bitmap images, so we only need that first image input to satisfy the Flash Player requirement.</p>
<p>By default, the target object for this effect must be a UIComponent or GraphicElement subclass, because the effect calls a known function to take a bitmap snapshot on those classes. However, you can supply your own BitmapData objects if you want to animate between other types of objects that do not have that snapshot function—or if you just want to provide the bitmaps for other reasons.</p>
<p>As its name implies, AnimateTransitionShader is specifically intended to be used in transitions. While you can play it manually, it doesn't make much sense to do that because it's really intended for use in situations where it automatically determines the before/after images and runs the shader on those images. </p>
<p>The Wipe and Crossfade effects are particularly easy to use because they embed all of the logic of providing the appropriate shader internally. You only need to specify the target object to affect and, in the case of Wipe, the direction in which you want the effect to run.</p>
<p>To see the next example, run the ShaderTransitions application provided in the sample files folder.</p>
<p>The code below smoothly transitions between two different images. The images are displayed in a single Image control: </p>
</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">&lt;mx:Image id=&#034;img&#034; source=&#034;{GoldenGate}&#034; source.state2=&#034;{Harbor}&#034;
click=&#034;currentState=(currentState==&#039;state1&#039;)?&#039;state2&#039;:&#039;state1&#039;&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_17" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>When the user clicks the control, it changes the <code>currentState</code> variable, which causes the following transition to run:</p>
</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">&lt;s:Transition id=&#034;transition&#034; effect=&#034;{crossfader}&#034;/&gt; </code>
</div>
</div>
<a name="articlecontentAdobe_text_18" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p> By default, this transition will run a CrossFade effect, which is set up in the Declarations section along with a Wipe effect:</p>
</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">&lt;fx:Declarations&gt;
&lt;s:CrossFade id=&#034;crossfader&#034; target=&#034;{img}&#034;/&gt;
&lt;s:Wipe id=&#034;wiper&#034; target=&#034;{img}&#034;/&gt;
&lt;/fx:Declarations&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_19" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>The radio buttons at the top of the window allow users to toggle which effect will run. The code below sets up the Wipe Left button:</p>
</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">&lt;s:RadioButton id=&#034;wipeLBtn&#034; label=&#034;Wipe Left&#034;
groupName=&#034;EffectType&#034; change=&#034;changeHandler(event)&#034;/&gt;</code>
</div>
</div>
<a name="articlecontentAdobe_text_20" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>When the user selects one of these controls, the changeHandler() function is called. This function sets up the transition to point to the appropriate effect, based on which radio button is selected. It also sets up the Wipe effect direction property appropriately:</p>
</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">switch (event.target)
{
case wipeLBtn:
transition.effect = wiper;
wiper.direction = WipeDirection.LEFT;
break;
// other cases are similar
}</code>
</div>
</div>
<a name="articlecontentAdobe_text_21" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<p>As you can see in this simple example, the fact that these effects use Pixel Bender shaders is not immediately apparent to developers. You don't need to know how to use the Pixel Bender Toolkit in order to create these effects with Flex 4. However, this information is handy to know if you'd like to write shaders of your own to create unique custom transitions.</p>
<p>Using Pixel Bender filters in Flex applications is a powerful way to create interesting visual effects. And animating these filters over time using the effects in Flex 4, you can create very interesting animations and transitions. </p>
</div>
</div>
<a name="articlecontentAdobe_text_22" style="visibility:hidden"></a><div class="text parbase section"><div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak">
<h3>Where to go from here</h3>
<p>There are many other elements of effects in Flex 4 that you could investigate:</p>
<ul>
<li>Using easing to create more realistic or effective animations</li>
<li>Using interpolators to handle animating custom objects and non-numeric types</li>
<li>Using the new KeyFrame object to define animations between multiple points (instead of just between two endpoints)</li>
<li>Understanding how the underlying Animation class runs effects and animations and how it can be used directly for custom animations</li>
<li>Investigating how the new Action effects work for performing simple one-shot actions like calling functions or pausing until particular events occur</li>
</ul>
<p>I discuss all of these topics and more on my blog at <span class="asReserved"><a href="http://graphics-geek.blogspot.com" target="_blank">graphics-geek.blogspot.com</a></span>. If all of this talk about effects sounds intriguing and you can't stand the suspense, check my blog for more details and code examples. But hopefully the material covered in this article series has given you some idea of how effects work in Flex 4 and what new facilities are available to create compelling applications.</p>
<h4><b>Online resources</b></h4>
<p>The <a href="/devnet/flex.html">Flex Developer Center</a> contains a wealth of information, articles and sample projects to get you up to speed quickly on working with Flex. If you haven't done so already, be sure to check out <a href="/devnet/flex/articles/flex4_effects_pt1.html">Part 1</a> of this article series. And to research further and learn more about working with effects in Flex 4, check out the following information:</p>
<ul class="link-list">
<li><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html" target="_blank">ActionScript 3.0 Platform Reference</a></li>
<li><a href="/devnet/flex/articles/pixel_bender_basics_flex_air.html">Pixel Bender basics for Flex and AIR</a></li>
<li><a href="http://opensource.adobe.com/wiki/display/flexsdk/Shader+Based+Bitmap+Effects" target="_blank">Shader based bitmap effects in Flex 4 SDK</a></li>
<li><a href="http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS3E659D01-10C0-479d-8175-B40950BBC223.html" target="_blank">Working with Pixel Bender shaders</a> </li>
<li><a href="http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS1EB6EFAF-F917-4658-B719-82C20F259E31.html" target="_blank">Adobe ActionScript 3.0: Basics of Pixel Bender shaders</a></li>
<li><a href="http://labs.adobe.com/technologies/flashplayer10/" target="_blank">Adobe Labs: Flash Player 10</a></li>
<li><a href="http://graphics-geek.blogspot.com/" target="_blank">Chet's Flex Blog</a></li>
<li><a href="http://tv.adobe.com/show/codedependent" target="_blank">CodeDependent: Chet's videos on Flex graphics and animation</a></li>
</ul>
</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 rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank"><img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"></a><br>
This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license" target="_blank">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</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/articles/flex-localization-pt2.html" title="Localization in Flex – Part 2: Loading resources at runtime">Localization in Flex – Part 2: Loading resources at runtime</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/topdrawer_pt2.html" title="Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 2">Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 2</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/topdrawer_pt1.html" title="Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 1">Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 1</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/topdrawer_pt3.html" title="Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 3">Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 3</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/flex_localization_pt1.html" title="Localization in Flex &#8211; Part 1: Compiling resources into an application">Localization in Flex &#8211; Part 1: Compiling resources into an application</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/flex_effects.html" title="Using Flex effects to animate changes in application state">Using Flex effects to animate changes in application state</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/flex-mobile-development-tips-tricks-pt5.html" title="Flex mobile development tips and tricks – Part 5: Using mobile view and tab transitions">Flex mobile development tips and tricks – Part 5: Using mobile view and tab transitions</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/flex_popups.html" title="Flex 3 in Action book excerpt: Introduction to pop-ups">Flex 3 in Action book excerpt: Introduction to pop-ups</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/flex_styles.html" title="Using Flex styles">Using Flex styles</a></li>
<li class="LayoutSmallRowBottom">
<a href="/devnet/flex/articles/flex_photoshop_illustrator.html" title="Foundation Flex for Designers excerpt: Flex with Photoshop and Illustrator">Foundation Flex for Designers excerpt: Flex with Photoshop and Illustrator</a></li>
</ul>
</div>
</div>
</div>
<div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter">
<div class="LayoutRow">
<div class="parbase compbase inheritedpromo"></div>
</div>
</div>
</div>
<div class="LayoutBreakAfter TextSmall">
<div class="ArticleGrid-2 LayoutSlimGrid-1-2 ArticleWideGridColReset">
<div class="parsys inheritedresources inheritedResources"><div class="parsys"><div id="inheritedResources">
<div class="parbase xdheading compbase section"><div pathToMoreText="" class="LayoutRow LayoutBreakAfter TextH5" linkboxcolor="RouterMore">
<table class="LayoutMaxH">
<tbody>
<tr>
<td class="PanelFillDark">
<h2 class="TextH5 LayoutCellSides LayoutSmallCellVSides">
Tutorials &amp; Samples</h2>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="whatsnew section"><div>
<div class="LayoutCell">
<h3 class="HeadingSmaller">
Tutorials</h3>
<ul>
<li>
<a href="/devnet/flex/articles/flex-mobile-performance-checklist.html" title="Flex mobile performance checklist">Flex mobile performance checklist</a></li>
<li>
<a href="/devnet/flex/articles/flex-maven-flexmojos-pt3.html" title="Flex and Maven with Flexmojos – Part 3: Journeyman">Flex and Maven with Flexmojos – Part 3: Journeyman</a></li>
<li>
<a href="/devnet/flex/articles/migrating-flex-apps-part4.html" title="Migrating Flex 3 applications to Flex 4.5 – Part 4">Migrating Flex 3 applications to Flex 4.5 – Part 4</a></li>
</ul>
</div>
</div>
</div>
<div class="whatsnew section"><div>
<div class="LayoutCell">
<h3 class="HeadingSmaller">
Samples</h3>
<ul>
<li>
<a href="/devnet/flex/articles/twitter-trends.html" title="Twitter Trends">Twitter Trends</a></li>
<li>
<a href="/devnet/flex/samples.html" title="Flex 4.5 reference applications">Flex 4.5 reference applications</a></li>
<li>
<a href="http://coenraets.org/blog/2011/04/flex-based-ipad-trader-app-now-on-android-market/" title="Mobile Trader Flex app on Android Market">Mobile Trader Flex app on Android Market</a></li>
</ul>
</div>
</div>
</div>
</div></div>
</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 &amp; 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&ccedil;ais</a></li>
<li lang="es"><a onClick="changeRegion('la');">Latinoam&eacute;rica</a></li>
<li lang="es"><a onClick="changeRegion('mx');">M&eacute;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');">&Ouml;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&ccedil;ais</a></li>
<li lang="nl"><a onClick="changeRegion('be_nl');">Belgi&euml; - 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&aacute; 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&aacute;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');">&#1497;&#1513;&#1512;&#1488;&#1500; - &#1506;&#1489;&#1512;&#1497;&#1514;</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&ccedil;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');">&#1575;&#1604;&#1588;&#1585;&#1602; &#1575;&#1604;&#1571;&#1608;&#1587;&#1591; &#1608;&#1588;&#1605;&#1575;&#1604; &#1571;&#1601;&#1585;&#1610;&#1602;&#1610;&#1575; - &#1575;&#1604;&#1604;&#1594;&#1577; &#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</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&ccedil;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&acirc;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&ntilde;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&ccedil;ais</a></li>
<li lang="it"><a onClick="changeRegion('ch_it');">Svizzera - Italiano</a></li>
<li lang="tr"><a onClick="changeRegion('tr');">T&uuml;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 &copy; 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>