Google Search has an Ajax API that can be used to execute search directly from the browser to the Google servers without the need for intermediate server side code on your website. Executing a search from Flex or Flash reduces to invoking the Google Search api with the apikey, specifying the type of resultset size you want (full or compact) and parsing the JSON reply.
Sounds simple? We are not quite yet done though. You also need to build a display page for the results, provide navigation capabilities to go to the previous or next page or jump to any page. Invocating the Google Search API, building the clickable search results and the related navigation to more results can be componentized as in this Google Search Flex Component. Some of the nice features of this component are
No server side code
Supports 2 styles – “Compact” space saver and the “Full” style
Customizable Item renderers
AIR capable
It comes with full API documentation and examples so putting a Google Search on your Flex or Flash application is as easy as drag-drop. Since this is a pure Actionscript search with some minor MXML changes, you can make it work from Flex 4 as well. You can get the full specification sheet for this component and jump to the live demo page by clicking here.
Want to use this component just from HTML and not inside Flex or Flash? That works too! just try out the live demo below on this WordPress page…
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.
Continuing on the theme of Flex components that have tween and 3D display effects like Flash components, here is another interesting component that “Flips” on mouseOver. The Flex Flip Card component is a pure actionscript component that uses two images – one for the front of the card and the other for the back of the card.
On mouse over event, it flips with a nice 3D effect. The component can of course be customized to flip on mouse click instead of mouse over. Since this is an Actionscript component, it will work from FlashBuilder 4 as well. Try out the live demo of the component by clicking here.
Flex Flip Card Component Flips Vertical or Horizontal on Mouse Events
Ever wondered how to create nice dynamic motion effects in Flex? When it comes to natural effects like Rain, Snow, Fountains etc modeling the “Particle” behavior for random natural events like Wind, Trubulence etc form the basis of the implementation. An astute programmer will immediately smell “inheritance” here. Add a bit of Math to the base particle to react to these natural events, give it a look and feel and combine the math and positoning on stage with tween effects. Add group behavior and you have dynamic realistic effects!
Sounds simple? Probably not! Enter the power of a components and it really is easy to add these dynamic effects by treating the component as a black-box and configuring its many properties to create the dynamic effect with just a single line of code that instantiates the lifecycle of the component.
Since seeing is believing, take a look at this Flex Snow effect. It can be attached to any Flex display object including images and photos. It supports many configuration options like wind, turbulence, snow flake size, intensity etc. With this component, you can make it snow anywhere, even in a tropical paradise where you took your last vacation.
Since this is a pure Actionscript component, it supports both Flex 3 and Flex 4. A detailed overview of this component can be found here.
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.
The difference between “Basic” and “Premium” is often just the visual display and the added benefits of user user interaction. Flex provides a basic Video Player. At times, basic is good enough. However, if you want to display the same component many times in many different places, the incremental benefits of premium components have a distinct advantage. Consider this premium Flex Video Player component. It comes with the following features that you will not find in the basic Flex Video Player
Full Screen Capability
Support for unlimited number of Playlists
Support for unlimited Videos in each Playlist
Customizable skins
Additional Video Controls
Clearly far better than the basic Flex Video Player! You can get this component from 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.
