kuwamoto.org

One thing I wanted to do was to create nice effects between pages. This turned out to be harder than I thought.

As you recall, I’d settled on separating my app into “pages” which were implemented as components inside of a ViewStack. To go to a new page, you flip to different index of the ViewStack.

As it turns out, this makes it hard to do smooth effects. For example, the effect that I wanted between the welcome panel and the new user panel was that the the welcome panel contents would fade out, and then the panel would smoothly change size to be the same size as the new user panel, after which the ViewStack would flip to the new user panel. The page flip was triggered off of the effectEnd event.

Some issues:

1. I couldn’t figure out the size of the new user panel because it hadn’t been created yet.
2. The panel contents didn’t fade nicely because of device fonts.
3. The last frame of the resize effect ended up not being played, which meant that the transition felt “glitchy”.
4. There is sometimes a flash of gray when the page is flipped

~

I tried various ways of lazily instantiating the new user panel in order to resolve issue 1. I even went as far as to read the Flex source code to try to mimic what ViewStack does. In the end, I gave up and used creationPolicy=”all”. This was fine for my app, but there is obviously a direct tradeoff between startup performance and responsiveness later on in the app.

Issue 2 was easy to resolve, once I learned about the dissolve effect. It’s a shame that these have to be different, but I suppose that’s the price you pay for relying on the OS to do your fonts for you. Another option would have been to embed the fonts as outlines, but that would have meant that the download size would be bigger, and that the OS font smoothing technology wouldn’t be used.

Issue 3 was frustrating, and I tried to solve it in several ways. It’s only really noticeable when there is a big delay between the last frame of the animation and the page flip, which can happen when loading big pages.

First, I tried putting the page flip into a doLater() call in order to allow the system more time to show the last frame of the animation. The good news was that the last frame of the animation was properly displayed. The bad news is that immediately after the last frame of the animation, the page flip cased the gray background to appear, and what had once been a momentary glitch (issue 4) became a blank gray screen that stayed up while my data was loading! Ack! Talk about out of the frying pan, into the fire!

For now, I am punting on issues 3 and 4 and going back to the initial, straightforward implementation. You can see the results here. Click on the “new user” link to go to the new user page, and click on the “cancel” button to go back.

I am still trying to think of ways to get rid of the flicker of gray as the page is swapped. One possibility is to change my containment to ensure a smoother transition like so:

<Application>
	<Panel>
		<ViewStack id="vs">
			<local:WelcomePage>
			<local:NewUserPage>
			<local:AlbumInfoPage>
		</ViewStack>
	</Panel>
</Application>

The problem (for me) with this approach is that in reality, the album info page has two panels, not one. And even if they were all one panel pages, there would be no way to swap out the control bar on the panel (AFAIK). The upside, of course, is that there is one and only one panel, so that if you use effects to resize it, you don’t have to worry about “swapping it out” when you are finished. Not sure what I’m going to do about that, but I have to get rid of that gray flicker!! Grr….

Now that I’ve complained about effects, let me cap all of this off with some perspective. Yes, effects are harder than I thought, but they’re easier (for me) than in traditional Flash, or in HTML. :-) As I learn Flex, I’m finding myself doing things that I was never able to do before, which is pretty cool.