Using Tweener for Scripted Animations

Andrew Trice

Whenever adding effects to Flex applications, I usually user the built-in Flex effects. They work with most flex components, are consistent, and are reliable. However, in cases where you want your application to be very expressive, they don't always act like you want them to. In those cases, I use Tweener, an animation "tween" library for ActionScript. In this post, we'll walk through a basic example using Tweener.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2009/03/using-tweener-for-scripted-ani.html
• http://code.google.com/p/tweener/
• http://hosted.zeh.com.br/tweener/docs/en-us/
• http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

IMAGE:

Making Components Work Together

Andrew Trice:

In this example, we'll create a Flex application that uses the Google Maps API for Flash, which communicates with the Google Street View API to create a seamless experience.

The Google Street View components are available directly in the Google Maps javascript API, however they are not directly available through the Flash API. Even though they aren't available directly in the Flash API, that doesn't mean that you can't use them together. Through ExternalInterface, you can still make those the two work together seamlessly.

Take a look at this example. Any time you click on the Flash-based map, the street view below it will update to show the location that you clicked on. Go ahead and try it out... If you click on an area that doesn't support street view, then you'll get a message stating that the panorama is not available.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2008/12/making-separate-components-wor.html
• http://code.google.com/apis/maps/documentation/flash/
• http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay
• http://code.google.com/apis/maps/

IMAGE:

Efflex - Designer effects for Flex

Efflex is a set of designer effects for Adobe Flex created by Stephen Downs (aka "Tink"). Stephen presented Efflex at the recent Flash on the Beach conference and has a background in building applications for the Flash platform.

Example:

• View example in a new window
• View source code

Resources:

• http://www.insideria.com/2008/10/efflex-designer-effects-for-fl.html
• http://code.google.com/p/efflex/
• http://www.efflex.org/

IMAGE：

URLKit - Advanced Flex Deep Linking Library

UrlKit supports Adobe Flex applications that need to expose URLs and window titles in the browser to represent their state. These URLs can be bookmarked, accessed via the Back button, etc. Such states typically represents some notion of location within the app, but in general can be mapped to any aspect of the application.
Specifically, UrlKit provides:

• a Javascript library for deep linking in Flex 2 (in Flex 3, this is provided by the platform)

• a library of declarative rule objects that describes the lexical elements of the application's URL and bidirectionally binds them to variables

• a sample application

Joe Berkovitz developed UrlKit in collaboration with Todd Rein of Adobe. To find out why, read the Rationale.

The example:
Click change state button, and look at your browser back button. NOTE: IE 6 user, please View example in a new window

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2008/09/advanced-flex-deep-linking-wit-1.html http://code.google.com/p/urlkit/

IMAGE:

Making Things More Interactive

Andrew Trice

Notice that there are two things going on here... 1. Animate the opacity to semi-transparent 2. Animate the distance of the drop shadow Applying these two effects creates an illusion of depth within the application. It appears as though the object that you click on is lifted off of the plane of the application, and is dropped back onto the application when you release it. I hope this gives you a few ideas to help you make your own applications more interactive.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.insideria.com/2008/02/making-things-more-interactive.html

IMAGE:

Actionscript 3 Layout Organizers Examples and Source Code

www.somerandomdude.net Said:

A while back, I posted a basic example of layout organizers and layout organizers applied to video. I kept talking about how cool I considered this idea to be, yet I had yet to truly explain the idea and (more importantly) the source code for people to download. I wanted to make sure the code was at a good spot before releasing it; I believe that is now the case. You will find examples, the basic gist on how it works and some possible reasons why layout organizers may just make your life easier.

• View example in a new window
• Download source code
• View source code

Resources:

• http://www.somerandomdude.net/blog/flash/actionscript-3-layout-organizers-source-code/

IMAGE: