http://www.davidortinau.com/blog/index/ en dave@davidortinau.com Copyright 2012 2012-05-01T01:03:06+00:00 http://www.davidortinau.com/site/monotouch_how_to_tell_if_the_user_is_selecting_text_or_tapping/ http://www.davidortinau.com/site/monotouch_how_to_tell_if_the_user_is_selecting_text_or_tapping/#When:01:03:06Z Goal Show and hide a toolbar at the bottom of the view when the user taps. Why Several apps, particularly those focus on reading the content in the view, offer a UIToolbar (or a custom component with buttons) at the bottom of the view that shows or hides according to the user’s taps. What we want to detect is a single tap. Not a swipe. Not drag. Not if the user is selecting text. How Using a UITapGestureRecognizer we can handle taps on the UIWebView. I setup a delegate for it and assign a Selector to handle the event. From there we need to determine if the user is selecting text or just tapping, and show/hide the toolbar. The Code Goal Show and hide a toolbar at the bottom of the view when the user taps. Why Several apps, particularly those focus on reading the content in the view, offer a UIToolbar (or a custom component with buttons) at the bottom of the view that shows or hides according to the user’s taps. What we want to detect is a single tap. Not a swipe. Not drag. Not if the user is selecting text. How Using a UITapGestureRecognizer we can handle taps on the UIWebView. I setup a delegate for it and assign a Selector to handle the event. From there we need to determine if the user is selecting text or just tapping, and show/hide the toolbar. The Code   iPhone, MonoTouch 2012-05-01T01:03:06+00:00 http://www.davidortinau.com/site/monotouch_handle_events_from_uiwebview/ http://www.davidortinau.com/site/monotouch_handle_events_from_uiwebview/#When:00:34:21Z Goal Handle taps on buttons and links within a UIWebView. Why I really like how Readability, Pinterest and other apps hide or altogether don’t use a visible UINavigationBar on appropriate views. Instead, the view is all about the content. I suspect many are using a UIWebView for the content. The question then becomes, how does the user navigate the view stack from within a UIWebView. Readability has a left to right swipe gesture that pulls he page away. I suspect this may be one UIViewController that shows a UIWebView over the top of the other content instead of pushing another view onto the stack. If you take a moment in Readability to pull the article away to partially reveal the list, you can scroll the list and see the article. I could be wrong…of anyone knows different do tell. I’m sure there’s more than one way to do this. In the meantime, I want to add a back image link at the top of my HTML content, and handle that action from the view code. How UIWebView provides ShouldStartLoad where we can see what the component is about to load. At that point we can intercept the request and take a different action. The Code: In the HTML I have a link to the anchor #back like this:  <a href="#back"><img src="Images/btn_back.png" /></a>  To load images into the UIWebView from the local resource bundle, I set the base URL of the request to NSBundle.MainBundle.BundleUrl. When the user touches that link the webViewShouldStartLoad handles it and pops the view controller as desired. Goal Handle taps on buttons and links within a UIWebView. Why I really like how Readability, Pinterest and other apps hide or altogether don’t use a visible UINavigationBar on appropriate views. Instead, the view is all about the content. I suspect many are using a UIWebView for the content. The question then becomes, how does the user navigate the view stack from within a UIWebView. Readability has a left to right swipe gesture that pulls he page away. I suspect this may be one UIViewController that shows a UIWebView over the top of the other content instead of pushing another view onto the stack. If you take a moment in Readability to pull the article away to partially reveal the list, you can scroll the list and see the article. I could be wrong…of anyone knows different do tell. I’m sure there’s more than one way to do this. In the meantime, I want to add a back image link at the top of my HTML content, and handle that action from the view code. How UIWebView provides ShouldStartLoad where we can see what the component is about to load. At that point we can intercept the request and take a different action. The Code: In the HTML I have a link to the anchor #back like this:  <a href="#back"><img src="Images/btn_back.png" /></a>  To load images into the UIWebView from the local resource bundle, I set the base URL of the request to NSBundle.MainBundle.BundleUrl. When the user touches that link the webViewShouldStartLoad handles it and pops the view controller as desired. iPhone, MonoTouch 2012-04-29T00:34:21+00:00 http://www.davidortinau.com/site/rage_against_the_framework_flash_camp_st._louis_slides_and_code/ http://www.davidortinau.com/site/rage_against_the_framework_flash_camp_st._louis_slides_and_code/#When:01:13:36Z We had a wonderful turnout at Flash Camp St. Louis. Most impressive were all of the new faces. JP Revel did a fantastic job putting on the event. In my session, “Rage Against the Framework”, I basically dumped all the tips and tricks and learning I’ve been doing over the past year of Flex 4 work. It’s been, at times, frustrating and slow. But there have also been moments of “Wow, I didn’t realize you could to THAT with Flex!” We discussed the typical promises the Flex Framework makes to draw us in, such as data binding, components, and skins. While this gets us the majority of the way to where we want to be, we often encounter frustrating hurdles when trying to implement engaging user experiences. Flex also provides States, State Transitions, and Layouts that, when properly understood and implemented, can help alleviate that frustration and do some really cool things. Rage Against the Framework View more presentations from David Ortinau References Data Binding http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cc8 Binding Utils http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html State Transitions http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fab.html http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/states/Transition.html Effects http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/package-detail.html Layouts http://tv.adobe.com/watch/max-2010-develop/having-fun-with-layouts-in-flex-4/ http://www.rialvalue.com/blog/2010/11/04/slides-for-having-fun-with-layouts-in-flex-4/ http://evtimmy.com/2010/04/two-examples-of-layout-animations/ http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4- http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ http://www.tink.ws/blog/carousellayout/   Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip We had a wonderful turnout at Flash Camp St. Louis. Most impressive were all of the new faces. JP Revel did a fantastic job putting on the event. In my session, “Rage Against the Framework”, I basically dumped all the tips and tricks and learning I’ve been doing over the past year of Flex 4 work. It’s been, at times, frustrating and slow. But there have also been moments of “Wow, I didn’t realize you could to THAT with Flex!” We discussed the typical promises the Flex Framework makes to draw us in, such as data binding, components, and skins. While this gets us the majority of the way to where we want to be, we often encounter frustrating hurdles when trying to implement engaging user experiences. Flex also provides States, State Transitions, and Layouts that, when properly understood and implemented, can help alleviate that frustration and do some really cool things. Rage Against the Framework View more presentations from David Ortinau References Data Binding http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cc8 Binding Utils http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html State Transitions http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fab.html http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/states/Transition.html Effects http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/package-detail.html Layouts http://tv.adobe.com/watch/max-2010-develop/having-fun-with-layouts-in-flex-4/ http://www.rialvalue.com/blog/2010/11/04/slides-for-having-fun-with-layouts-in-flex-4/ http://evtimmy.com/2010/04/two-examples-of-layout-animations/ http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4- http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ http://www.tink.ws/blog/carousellayout/   Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip General 2011-09-17T01:13:36+00:00 http://www.davidortinau.com/site/practical_interaction_design_for_developers_slides_and_code/ http://www.davidortinau.com/site/practical_interaction_design_for_developers_slides_and_code/#When:19:53:33Z This summer we had a fantastic Designer/Developer Workflow Conference (D2WC) run by Dee Sadler. I love the mix of visual creatives and code slingers all putting their minds together to learn from each other and discover better ways to work together towards amazing results. It’s great to dive deep into our own core disciplines, but we cannot neglect our teammates and understanding what it takes to work together. Anyone who’s played an organized sport knows on some level that you need to know something about all of the positions in order to play your position well. Here are the slides from my presentation, “Practical IxD for Developers”. It’s full of great quotes and references to books that I highly recommend. They are also listed on my bookshelf. Practical IxD for Developers View more presentations from David Ortinau And the code demo from the end of the presentation is below showing basic data binding and how to manage transitions via custom Layouts: Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip This summer we had a fantastic Designer/Developer Workflow Conference (D2WC) run by Dee Sadler. I love the mix of visual creatives and code slingers all putting their minds together to learn from each other and discover better ways to work together towards amazing results. It’s great to dive deep into our own core disciplines, but we cannot neglect our teammates and understanding what it takes to work together. Anyone who’s played an organized sport knows on some level that you need to know something about all of the positions in order to play your position well. Here are the slides from my presentation, “Practical IxD for Developers”. It’s full of great quotes and references to books that I highly recommend. They are also listed on my bookshelf. Practical IxD for Developers View more presentations from David Ortinau And the code demo from the end of the presentation is below showing basic data binding and how to manage transitions via custom Layouts. Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html Source: DataBindingTransitions.zip Flex, Interaction Design 2011-09-10T19:53:33+00:00 http://www.davidortinau.com/site/upcoming_speaking_engagements/ http://www.davidortinau.com/site/upcoming_speaking_engagements/#When:22:33:36Z This past May I had the opportunity to present at XPLANE on a topic I’m very passionate about, Interaction Design. This was a fun joint event with Gateway Chi, the St. Louis usability professionals group, and Flex and Fuse the Arch, my home Flex and Cold Fusion group.  July looks to be another busy month of speaking for me. If you happen to be near Kansas City or Chicago, and have any interest in Interaction Design and the designer/developer workflow, please come out and join us. As much as I enjoy presenting, I derive much greater pleasure from the ensuing discussions and exchange of knowledge. July 14-16, 2011 D2W - Designer To Developer Workflow Conference Crowne Plaza Kansas City, MO http://d2wc.com/ (I can give you a speaker discount, just contact me) July 20, 2011 Chicago Flex Chicago, IL http://chicagoflex.org/ “The big difference that’s arisen in this new agile world is how integrated the team is. No longer is UX design owned by the UX designers: everyone on the team now has design responsibilities. That means that everyone needs to be informed about what the design is trying to do.” - Jarod Spool This past May I had the opportunity to present at XPLANE on a topic I’m very passionate about, Interaction Design. This was a fun joint event with Gateway Chi, the St. Louis usability professionals group, and Flex and Fuse the Arch, my home Flex and Cold Fusion group.  July looks to be another busy month of speaking for me. If you happen to be near Kansas City or Chicago, and have any interest in Interaction Design and the designer/developer workflow, please come out and join us. As much as I enjoy presenting, I derive much greater pleasure from the ensuing discussions and exchange of knowledge. July 14-16, 2011 D2W - Designer To Developer Workflow Conference Crowne Plaza Kansas City, MO http://d2wc.com/ (I can give you a speaker discount, just contact me) July 20, 2011 Chicago Flex Chicago, IL http://chicagoflex.org/ “The big difference that’s arisen in this new agile world is how integrated the team is. No longer is UX design owned by the UX designers: everyone on the team now has design responsibilities. That means that everyone needs to be informed about what the design is trying to do.” - Jarod Spool General 2011-06-26T22:33:36+00:00 http://www.davidortinau.com/site/create_a_twitter_oauth_application_with_tweetr_using_single_access_token/ http://www.davidortinau.com/site/create_a_twitter_oauth_application_with_tweetr_using_single_access_token/#When:21:25:01Z What do you do when you want to use the Twitter API with your own account, and don’t need or want users to login via the PIN OAuth dance? You can use a single access token/secret in place of the authenticated token/secret and get all the access you need. Note: the authenticated user in this scenario is you, the owner of the application. For this example I’m using Tweetr, an AS3 library for accessing Twitter from your Flash or Flex application. Tweetr requires as3crypto. Details and downloads here: http://wiki.swfjunkie.com/tweetr:downloads Make sure you grab the proxy php and load that up on your server so you can have a service host. Run the install.php so it’s ready to go. This is a nice script providing caching so you get a little speed boost and don’t run over your Twitter API limit. Ok, let’s get to it. Create your… What do you do when you want to use the Twitter API with your own account, and don’t need or want users to login via the PIN OAuth dance? You can use a single access token/secret in place of the authenticated token/secret and get all the access you need. Note: the authenticated user in this scenario is you, the owner of the application. For this example I’m using Tweetr, an AS3 library for accessing Twitter from your Flash or Flex application. Tweetr requires as3crypto. Details and downloads here: http://wiki.swfjunkie.com/tweetr:downloads Make sure you grab the proxy php and load that up on your server so you can have a service host. Run the install.php so it’s ready to go. This is a nice script providing caching so you get a little speed boost and don’t run over your Twitter API limit. Ok, let’s get to it. Create a Twitter Application, and make note of the Consumer key and secret on the settings page. Then on the right side of the profile click the button labeled “My Access Token”. Grab that Access Token and Access Token Secret. This is referred to as a “single access token”, “one access token”, or “single user access token”. Docs: http://dev.twitter.com/pages/oauth_single_token In your Flash application, implement Tweetr with OAuth. Import and other implementation details are omitted below.  var serviceHost : String = "http://your_twittr_proxy_php_setup"; var tweetr:Tweetr = new Tweetr();tweetr.serviceHost = serviceHost;  oauth = new OAuth();oauth.serviceHost = serviceHost; oauth.consumerKey = "CONSUMER_KEY";oauth.consumerSecret = "CONSUMER_SECRET";oauth.oauthToken = "MY_ACCESS_TOKEN";oauth.oauthTokenSecret = "MY_ACCESS_TOKEN_SECRET";tweetr.oAuth = oauth;   And then you need to…wait, sorry, that’s all there is. Start making calls to the API and listening for results.  tweetr.addEventListener(TweetEvent.COMPLETE, handleLoad);tweetr.addEventListener(TweetEvent.FAILED, handleFail);tweetr.getUserTimeLine(null, null, null, 0, 0);   var tweets:Array = [];private function handleLoad(event:TweetEvent):void{ for(var i:int = 0; i < event.responseArray.length; i++) { var statusData:StatusData = event.responseArray[i]; tweets.push(statusData); } // ... do something magical with the tweets} private function handleFail(event:TweetEvent):void{ trace("Failed to get data"); // ... handle the disappointing failure...maybe a whale...just a thought}  There are plenty of good tutorials out for using Tweetr, though beware of any too old. Twitter phased out basic authentication August 2010. A couple I checked out: Mark Doherty: Tweetr App Video Walkthrough swfjunkie: PINless OAuth with Tweetr I also want to note that it’s difficult to secure anything in a Flash application, and the key, token, and secrets are no exception. In this example they are right there in the code, unencrypted. SWFs are easily decompiled. If you dream up a solid security solution that doesn’t require a mountain of effort, please let me know. Flash, Flex, AIR 2011-01-20T21:25:01+00:00 http://www.davidortinau.com/site/draw_lines_under_text_in_spark_richeditabletext/ http://www.davidortinau.com/site/draw_lines_under_text_in_spark_richeditabletext/#When:19:26:36Z On my current project, the design calls for displaying editable text with underlines that scroll with the text. It’s a nice design, and I had no good solution. I talked to a couple people, ideas were tossed around, and after a lot of reading and a couple runs at it I had nothing to show for the effort. You can already see a working demo below. So how did I get there? I had a nagging feeling I’d talked to someone about a workable solution, but I couldn’t remember who. Paul Taylor (@guyinthechair) had shown me some of his excellent work with text during 360|Flex in DC last year, and I figured if anyone was going to be able to help it’d be Paul. I put out a Twitter call for help, and, sure enough, he had an idea. And it’s so simple! Paul extends RichEditableText and adds a handler for Event.ADDED which is triggered for each new line (or specifically for each time anything is added to the display list). Thanks Paul!  package{ import flash.display.DisplayObject; import flash.display.Shape; import flash.events.Event; import flash.events.EventPhase; import flash.text.engine.TextLine;  import spark.components.RichEditableText;  public class LineyRET extends RichEditableText { public function LineyRET() { super(); addEventListener(Event.ADDED, onChildLineAdded); }  private function onChildLineAdded(event:Event):void { var line:TextLine = event.target as TextLine; if(!line) return;  if(line.getChildByName('baseline')) return;  var s:Shape = new Shape(); s.name = 'baseline'; s.graphics.lineStyle(1, 0xCCCCCC, 0.5); s.graphics.moveTo(0, line.descent + 5); s.graphics.lineTo(line.specifiedWidth, line.descent + 5); s.graphics.endFill(); line.addChild(s); } }}                                          Either scripts and active content are not permitted to run or Adobe Flash Player version           0.0.0 or greater is not installed.                                                                                                         Melville text courtesy of Fillerati. View and Download demo source hereOn my current project, the design calls for displaying editable text with underlines that scroll with the text. It’s a nice design, and I had no good solution. I talked to a couple people, ideas were tossed around, and after a lot of reading and a couple runs at it I had nothing to show for the effort. You can already see a working demo below. So how did I get there? I had a nagging feeling I’d talked to someone about a workable solution, but I couldn’t remember who. Paul Taylor (@guyinthechair) had shown me some of his excellent work with text during 360|Flex in DC last year, and I figured if anyone was going to be able to help it’d be Paul. I put out a Twitter call for help, and, sure enough, he had an idea. And it’s so simple! Paul extends RichEditableText and adds a handler for Event.ADDED which is triggered for each new line (or specifically for each time anything is added to the display list). Thanks Paul!  package{ import flash.display.DisplayObject; import flash.display.Shape; import flash.events.Event; import flash.events.EventPhase; import flash.text.engine.TextLine;  import spark.components.RichEditableText;  public class LineyRET extends RichEditableText { public function LineyRET() { super(); addEventListener(Event.ADDED, onChildLineAdded); }  private function onChildLineAdded(event:Event):void { var line:TextLine = event.target as TextLine; if(!line) return;  if(line.getChildByName('baseline')) return;  var s:Shape = new Shape(); s.name = 'baseline'; s.graphics.lineStyle(1, 0xCCCCCC, 0.5); s.graphics.moveTo(0, line.descent + 5); s.graphics.lineTo(line.specifiedWidth, line.descent + 5); s.graphics.endFill(); line.addChild(s); } }}                                          Either scripts and active content are not permitted to run or Adobe Flash Player version           0.0.0 or greater is not installed.                                                                                                         Melville text courtesy of Fillerati. View and Download demo source here Flex 2011-01-15T19:26:36+00:00 http://www.davidortinau.com/site/flex_4_states_the_default_state/ http://www.davidortinau.com/site/flex_4_states_the_default_state/#When:16:26:44Z You can call the first state in your list of states the default as Adobe’s Kevin Hoyt does in his article about States, and as Stephen Gilson does in his Flex Doc article, but don’t expect it to always have your back. I found this out the usual way, I assumed and failed. The Actionscript 3.0 reference docs for mx.states.State don’t clarify this issue, though it does make one reference to a “default view state”. Let’s say you have a component with 3 states:  <s:states> <s:State name="welcome"/> <s:State name="top_products"/> <s:State name="all_products"/></s:states>  And you have two ArrayCollections of Products, allProducts and topProducts, that will be bound to a DataGroup depending on the currentState of the view.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.top_products="{topProducts}" ... />  As you can see above I’ve declared the “main” dataProvider and a dataProvider for the state “top_products”. What data do you expect to get bound when I change currentState to “all_products” or even “welcome”? It will go back to allProducts. Great, that’s what I want. BUT… If the allProducts ArrayCollection has been changed in the meantime, the DataGroup will not rebind the allProducts collection, so I’ll be looking at old data. The way to make sure the binding occurs as expected, and updates are reflected, is to get in the habit of being explicit.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.welcome="{allProducts}" dataProvider.top_products="{topProducts}" dataProvider.all_products="{allProducts}" ... />  Setting currentState in the component tag declaration is a good practice to make sure you start off in the right view. The consensus yesterday from conversations on Twitter is that the initial currentState will be the first state listed in the declaration. But this is not a default you can rely on once things start changing. When it comes to setting data providers, you are best off being explicit if you’re going to assign different sources based on state. Thanks to @jamespolanco, @pollensoft, @derrickgrigg, @benjamminSTL, and @flexmonkeypatch for your contributions to the discussion.You can call the first state in your list of states the default as Adobe’s Kevin Hoyt does in his article about States, and as Stephen Gilson does in his Flex Doc article, but don’t expect it to always have your back. I found this out the usual way, I assumed and failed. The Actionscript 3.0 reference docs for mx.states.State don’t clarify this issue, though it does make one reference to a “default view state”. Let’s say you have a component with 3 states:  <s:states> <s:State name="welcome"/> <s:State name="top_products"/> <s:State name="all_products"/></s:states>  And you have two ArrayCollections of Products, allProducts and topProducts, that will be bound to a DataGroup depending on the currentState of the view.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.top_products="{topProducts}" ... />  As you can see above I’ve declared the “main” dataProvider and a dataProvider for the state “top_products”. What data do you expect to get bound when I change currentState to “all_products” or even “welcome”? It will go back to allProducts. Great, that’s what I want. BUT… If the allProducts ArrayCollection has been changed in the meantime, the DataGroup will not rebind the allProducts collection, so I’ll be looking at old data. The way to make sure the binding occurs as expected, and updates are reflected, is to get in the habit of being explicit.  <s:DataGroup id="productsDataGroup" dataProvider="{allProducts}" dataProvider.welcome="{allProducts}" dataProvider.top_products="{topProducts}" dataProvider.all_products="{allProducts}" ... />  Setting currentState in the component tag declaration is a good practice to make sure you start off in the right view. The consensus yesterday from conversations on Twitter is that the initial currentState will be the first state listed in the declaration. But this is not a default you can rely on once things start changing. When it comes to setting data providers, you are best off being explicit if you’re going to assign different sources based on state. Thanks to @jamespolanco, @pollensoft, @derrickgrigg, @benjamminSTL, and @flexmonkeypatch for your contributions to the discussion. Flex 2010-12-16T16:26:44+00:00 http://www.davidortinau.com/site/spark_states_and_transitions_working_in_concert/ http://www.davidortinau.com/site/spark_states_and_transitions_working_in_concert/#When:21:16:07Z I commonly have in and out transitions for almost every view, sub view, and even component in my project. I often write my projects in pure AS3, so each class gets a transitionIn() and transitionOut() method dispatching completion events so I can synchronize transitions across views. All my mojo happens with TweenMax and clients love it. I’ve been doing a lot more Spark skinning in Flex projects, so I was curious how I could accomplish the same using States, Transitions, and the newer Spark animation stuff. All the examples I’ve found are flat….the component manages it’s own states and directly transitions the children on its stage. Maybe I’m a dork, but my stuff isn’t so simple. When state changes in a component, it often needs to initiate in/out transitions on many children before just removing them from the stage. Dig? A component will receive addedToStage or removedFromStage events when its parent changes state and the component is included or excluded from that state. Scenario Main view has 2 states, state1 and state2. When the button is clicked, it will toggle between states and change its label. There’s a logo on the screen that is included only in state2, has its own 2 states (hidden and visible), and includes transitions between each. Problem If I let the main transition from state2 to state1 run by itself, it will remove the logo from the stage before logo has completed its own transition. I want the main transition to wait until the logo is done transitioning out before removing it from the stage. Solution It’s actually quite simple to do this. The key is using s:Pause in the main transition to listen for an event before proceeding… I commonly have in and out transitions for almost every view, sub view, and even component in my project. I often write my projects in pure AS3, so each class gets a transitionIn() and transitionOut() method dispatching completion events so I can synchronize transitions across views. All my mojo happens with TweenMax and clients love it. I’ve been doing a lot more Spark skinning in Flex projects, so I was curious how I could accomplish the same using States, Transitions, and the newer Spark animation stuff. All the examples I’ve found are flat….the component manages it’s own states and directly transitions the children on its stage. Maybe I’m a dork, but my stuff isn’t so simple. When state changes in a component, it often needs to initiate in/out transitions on many children before just removing them from the stage. Dig? Note: A component will receive addedToStage or removedFromStage events when its parent changes state and the component is included or excluded from that state. Scenario Main view has 2 states, state1 and state2. When the button is clicked, it will toggle between states and change its label. There’s a logo on the screen that is included only in state2, has its own 2 states (hidden and visible), and includes transitions between each. Problem If I let the main transition from state2 to state1 run by itself, it will remove the logo from the stage before logo has completed its own transition. I want the main transition to wait until the logo is done transitioning out before removing it from the stage. Solution It’s actually quite simple to do this. The key is using s:Pause in the main transition to listen for an event before proceeding…  <s:states><s:State name="state1" /><s:State name="state2" /></s:states><s:transitions><s:Transition fromState="state2" toState="*"]]><s:Sequence><s:SetAction target="{logo}" property="currentState" value="hidden"/><s:Pause target="{logo}" eventName="{Logo.TRANSITIONED_OUT}" /> <s:RemoveAction target="{logo}" /></s:Sequence></s:Transition></s:transitions>  ... and then when the logo is done transitioning out, use s:CallAction to dispatch the completion event thus unpausing and completing the other transition which will finish with s:RemoveAction.  <s:Transition fromState="visible" toState="*" autoReverse="true"]]><s:Sequence><s:Parallel id="outTransition" duration="500"]]><s:Fade target="{simplyProfoundLogo}" alphaFrom="1" alphaTo="0" /><s:Move target="{simplyProfoundLogo}" xTo="600" /></s:Parallel><s:CallAction target="{this}" functionName="dispatchEvent" args="{[new Event(TRANSITIONED_OUT)]}" /></s:Sequence></s:Transition>  Download Source: SparkStateTransitions.fxp Big thanks to @_leonardsouza_, @s9tpepper, @john__olson, @polygeek, @jesterxl, and @terencecarroll for helping me out. On the flipside, what the heck is wrong with the Flex 4 reference documentation regarding states, transitions and effects? What a mess. Maybe it’s just me, but I find it pretty unhelpful and even downright confusing at times. Examples and Resources Leonard Souza: Flexerific Visual Effects (highly recommend his video from 360|Flex DC) Chet Haase on Spark Effects. SVFUG recording: http://goo.gl/7EWhA Chet Haase Flex 4 Fun book: http://goo.gl/ooC5W Discount code: FUG1 Jacob Surber on Flex Skins/FXG. SVFUG recording: http://goo.gl/nFdst Custom Components in Flex 4 presentation by @mrinal: http://weblog.mrinalwadhwa.com/2009/12/01/custom-components-in-flex-4/ Dan Florio‘s posts on Flex 4 State transitions: http://polygeek.com/2304_flex_simple-flex-4-component-checkedunchecked and http://polygeek.com/2506_flex_using-wildcards-in-flex-4-state-transitions Flex 2010-12-12T21:16:07+00:00 http://www.davidortinau.com/site/flex_hero_gotcha_application_freeze/ http://www.davidortinau.com/site/flex_hero_gotcha_application_freeze/#When:15:02:14Z I’ve been spending a lot of time in Flex “Hero” preview release since it was released Sunday evening. Overall it’s quite good, I’m very happy to have it, and I’ve been able to do what I need to with my pretty basic app. I ran into a pretty disconcerting gotcha and I wanted to post it here in case anyone else happens upon this. Symptom You navigate back to a previous view via navigator.popView() or navigator.popToFirstView() and the application stalls without an error How to Reproduce It If you are using the Employee Directory from the sample apps as your jumping off point, the EmployeeDirectoryHome.mxml has a search box and button in the navigation area. That’s fine and the app runs.  <s:actionContent> <s:TextInput id="searchKey" width="{width - searchBtn.width - 16}" text="{SEARCH_TEXT}" focusIn="searchKey.text=''" enter="search()"/> <s:Button id="searchBtn" icon="@Embed('assets/search.png')" click="search()"/> </s:actionContent>  Move the search box and button into an HGroup and positioned it below the navigation. Suddenly any call to navigator.popView() will go into la la land and the entire app will freeze. No error is thrown. Eventually, if you’re running on a device, you’ll be prompted to kill the app or wait. Don’t bother waiting.  <s:HGroup paddingLeft="8" paddingTop="0" gap="8" verticalAlign="middle" width="100%" height="80"]] > <s:TextInput id="searchKey" width="{width - searchBtn.width - 16}" text="{SEARCH_TEXT}" focusIn="searchKey.text=''" enter="search()"/> <s:Button id="searchBtn" icon="@Embed('assets/search.png')" click="search()"/></s:HGroup>  Workaround With the keen eye and assistance of Jason Hanson, we determined that the measuring and drawing of content in the actionContent and navigationContent must happen at a different stage than the rest of the visual children. The width of the TextInput was being calculated instead being set as a percentage, and it was removing that calculation that fixed the issue. So, changing the width to 100% causes the TextInput to “greedily”, as Jason would say, take up all available space left by the button and the app once again works just fine.  <s:HGroup paddingLeft="8" paddingTop="0" gap="8" verticalAlign="middle" width="100%" height="80"]] > <s:TextInput id="searchKey" width="100%" text="{SEARCH_TEXT}" focusIn="searchKey.text=''" enter="search()" /><s:Button id="searchBtn" icon="@Embed('assets/search.png')" click="search()"/></s:HGroup>  I’ve logged a JIRA bug for this issue. Hero is definitely prerelease and this is one example of where that shows up. I highly recommend you check out the Shopping Cart Application for Web and Mobile to see more advanced solutions. Thanks Jason! I’ve been spending a lot of time in Flex “Hero” preview release since it was released Sunday evening. Overall it’s quite good, I’m very happy to have it, and I’ve been able to do what I need to with my pretty basic app. I ran into a pretty disconcerting gotcha and I wanted to post it here in case anyone else happens upon this. Symptom You navigate back to a previous view via navigator.popView() or navigator.popToFirstView() and the application stalls without an error How to Reproduce It If you are using the Employee Directory from the sample apps as your jumping off point, the EmployeeDirectoryHome.mxml has a search box and button in the navigation area. That’s fine and the app runs.  <s:actionContent> <s:TextInput id="searchKey" width="{width - searchBtn.width - 16}" text="{SEARCH_TEXT}" focusIn="searchKey.text=''" enter="search()"/> <s:Button id="searchBtn" icon="@Embed('assets/search.png')" click="search()"/> </s:actionContent>  Move the search box and button into an HGroup and positioned it below the navigation. Suddenly any call to navigator.popView() will go into la la land and the entire app will freeze. No error is thrown. Eventually, if you’re running on a device, you’ll be prompted to kill the app or wait. Don’t bother waiting.  <s:HGroup paddingLeft="8" paddingTop="0" gap="8" verticalAlign="middle" width="100%" height="80"]] > <s:TextInput id="searchKey" width="{width - searchBtn.width - 16}" text="{SEARCH_TEXT}" focusIn="searchKey.text=''" enter="search()"/> <s:Button id="searchBtn" icon="@Embed('assets/search.png')" click="search()"/></s:HGroup>  Workaround With the keen eye and assistance of Jason Hanson, we determined that the measuring and drawing of content in the actionContent and navigationContent must happen at a different stage than the rest of the visual children. The width of the TextInput was being calculated instead being set as a percentage, and it was removing that calculation that fixed the issue. So, changing the width to 100% causes the TextInput to “greedily”, as Jason would say, take up all available space left by the button and the app once again works just fine.  <s:HGroup paddingLeft="8" paddingTop="0" gap="8" verticalAlign="middle" width="100%" height="80"]] > <s:TextInput id="searchKey" width="100%" text="{SEARCH_TEXT}" focusIn="searchKey.text=''" enter="search()" /><s:Button id="searchBtn" icon="@Embed('assets/search.png')" click="search()"/></s:HGroup>  I’ve logged a JIRA bug for this issue. Hero is definitely prerelease and this is one example of where that shows up. I highly recommend you check out the Shopping Cart Application for Web and Mobile to see more advanced solutions. Thanks Jason! Flex, AIR 2010-10-28T15:02:14+00:00