The transition between images in a slideshow creates the nice pleasing dynamic effect. Maths lies at the heart of these effects. If you are as old as I am and have driven as much as I have, you will immediately notice the similarity between the transition effect in the slideshow we present below and the billboards you often see as you drive through the many highways. The rotating slices that retire the old advertisement on the billboard and herald the new ones create an urgency to ‘see’ what is coming next before the car goes too ahead and it is too late.
We present a preview here of the Flex slideshow with the Billboard effect where you do not need to worry about missing the next ‘scene’. It works with Flex 3 and Flash Builder 4. A full live preview of this nice Flex Component can be found here.
Dynamic and innovative UI components in Flex do not have to depend on a timeline (read Flash) for playing those effects. A pure Actionscript component that uses the effects and easing classes can produce the same lively and interactive look and feel that Flash components so ably provide.
Take for example this Flex Image Accordion component. Take an image, add it to the component, define an easing function and some alternate text, configure the slices and angle and you have a more dynamic image which when clicked rolls up in the shape of a window blind. The bounce easing function even adds a touch of realism to the component with a gravity-like bounce.
Since this is an Actionscript component, it will work with Flash Builder 4 as well as with Flex 3 (SDK 3.4 or better required) and Flash player 10. A more detailed live preview of this component can be found by clicking here.
For now, just click on the image of the rose in the embedded swf below to taste this effect.
When it comes to dynamic effects involving time and motion Flash leads Flex. The gap is however closing especially with the new Flashplayer 10 and the new Flex 4 release. For example, take a look at this Dynamic 3D Cylindrical Image Gallery that works from Flex 3 and Flex 4 (Flex 3 usage required Flashplayer 10). The gallery is extremely customizable with options like
Auto Rotate
Rotation speed
Mouse over captions
XML config for thumbs and full size images
And it is all pure Actionscript so it can be used from Flex or Flash. The power of Actionscript components is there extreme reuse in both worlds. Freeing these components from the Flash timeline opens the door to Flex usage.
There are many uses of such 3D Flex Galleries like creating mesmerizing portfolio displays, product visualization images, Slideshows and Galleries. The dynamic and interactive nature of these components and the pleasing effects also make them very popular as a fashion statement for your website.
This Photo Gallery component will work with Flex 4 and Flex 3.4+ versions. It requires Flashplayer 10. You can check out a live preview of the Flex 3D Cylindrical Photo Gallery component here.
Masking Images or any Display Objects in Flex can enhance the display in many different ways. Masks can bestow a thematic look-and-feel, add a touch or more of softness, accentuate displays and create a myriad of pleasing effects. Masks combined with filters make an ordinary image or display come to life. Take a look at some of the image masks below (or checkout the live preview here) that build on the round concept adding an increasing touch of softness.
The masks can be applied on any Flex Display Object like Images, DataGrids, Canvas, Panel, Charts etc to convert them to a soft circular or elliptical visual display. The masks can also be set in response to user events like Mouse RollOver events. You can swap masks on mouse rollover making the display very interactive.
The masks can take any shape or form. Some of the lesser know facts about masks are that the mask does not have to be an Image. It can be any Flex display object. Moreover, the Mask can have transparency to create that nice soft look and feel around the borders.
The Round and Elliptical masks illustrate a basic concept of what can be done with masks. If you want something more sophisticated, you can choose from the eclectic mask collection at FlexDownloads.com that contains an assortment of Star, Burst, Wedge, Left and Right Fade or just a simple rounded rectangle.
One of the neat and often underused capabilities of Flex Builder by developers is use of ASDOC tool to document Actionscript and MXML classes. This is because setting up ASDOC can be a bit of a struggle to start off with. But one you are done, generating documentation essentially reduces to annotating your code and a single button click does the rest. There are some pitfalls that can be frustrating so in this blog, we will take a step-by-step approach to setting up ASDOC in Flex Builder and the pictures will tell you the most of the story. Nothing beats a visual narrative right?
Step 1 – Get the Right ASDOC Version
Granted Flex 4 is still in Beta (as of writing this blog), but the Flex 3 ASDOC tool does not document MXML so it is in your best interest to download the latest Flex 4 Builder stable Adobe SDK release which can be found at the Adobe Open Source Download site. Fear not, you will continue using Flex Builder 3 for your project builds and Flex 4 will be used only for the ASDOC tool. Flex builder allows you to use multiple Flex SDK’s so use this to your advantage. To setup Flex 4 SDK, follow these steps
Download an unzip Flex 4 SDK
Right click on any openproject and select properties. Click Flex Compiler on the left hand navigation
Open Flex Compiler Dialog to Add a New SDK
Click Configure Flex SDKs.. and click on the Add button on the right hand side
Click Add Button and navigate to Unzipped Flex SDK
Browse to where you unzipped your SDK and you are done!
Step 2 – Open External Tools Dialog
Open External Tools Dialog
Step 3 – Launch New Configuration
The new launch configuration button is the White document icon with a + sign on the top left hand side. Launch it and setup the data as below
Name – Something evident like ASDoc.
Location – Click on Browse File System and browse to the ASDoc included in your installed SDK
Working Directory – As shown in the image below
Arguments – As shown in the image below
Note: Put your SWC’s in the libs folder. The configuration we are setting up has the external-library-path variable pointing to the libs folder. If your libraries are somwhere else, you might want to use the path to that folder
ASDOC External Tools Launch Configuration
Step 4- Setup the JDK/Java (Optional)
This is an optional step because you should do this only if you hit issues running ASDoc. Chances are high that it is because you do not have JDK5 or your JAVA_HOME environment variable is not pointing to JDK 5
Download JDK 5 from the Java download site – http://developers.sun.com/downloads/
Install JDK 5
In the external tools config click the Environment tab
Setup a new variable called JAVA_HOME as shown in the image below but pointing to your JDK install (note: Do not point to the JRE or the bin folder)
ASDOC Java SDK Configuration
Step 5 – Try it Out
Select any open project and run the ASDOC as shown below – You are done!
Run ASDOC
If you still hit any issues, please comment on the post and I will do my best to reply.
