Archive for Flex 4 Samples

Major Tour de Flex Updates for Flex 4!

Posted in Adobe Flex, Flex 4, Flex/AIR, Tour de Flex with tags , , , , , , , on March 22, 2010 by devgirl

If you didn’t know it already, Adobe Flex 4 and Flash Builder 4 became officially available today! As part of the launch we made some significant changes to Tour de Flex so be sure to make it a point to check it out. We released a whole new structure of samples and reworked the Flex 4 node of the tree to include all components recommended for use between the Spark and Halo namespaces to aid developers not only new to Flex 4 but in making the transition between Flex 3 and Flex 4. We’ve also included a new ‘Introduction’ tab that has some great pages from the newly updated containing some really useful information and resources. A bunch of the new samples are outlined below. Following the sample outline I have listed some other new links to check out for more great Flex resources. As always, if you have any samples you’ve built using Flex 4, please consider submitting them to either Greg Wilson or myself for Tour de Flex!

New Flex 4 Control Samples:
TextInput – Spark control that replaces the Halo TextInput and allows for a single line of rich text to be entered.
TextArea – Spark control that replaces the Halo TextArea and allows rich text to be entered, edited, selected and scrolled.
RichText – RichText is a step up from the Spark Label component in that you can display rich text with layout, but is non-interactive (not selectable or scrollable). Label is the most lightweight of the Spark text components, followed by RichText, followed by RichEditableText.
ComboBox – check out the differences between the ComboBox and the DropDownList, the ComboBox contains a TextInput so you can start typing into it to match an item whereas the DropDownList is just a Label.
RichEditableText – RichEditableText is built on the TextLayoutFramework and supports rich text and interactivity.

New Layout Samples:
TileGroup – shows the use of the Spark TileGroup which is the same as a Group with a TileLayout.
DataGroup – the DataGroup allows you to manage mixed content in a group.
HGroup/VGroup – these containers replace the HBox and VBox halo components from Flex 3 and allow you to arrange items in a group either horizontally or vertically.
SkinnableDataContainer – this sample shows how to use the skinnable version of the DataGroup.

New FXG Graphics Samples:
FXG is the Flex Graphics framework providing a declarative graphics syntax to draw in Flex and allows for interchangeability between other Adobe products such as Adobe Illustrator.
Rect – FXG primitive to draw a rectangle graphic.
Line – FXG primitive to draw a line graphic.
Ellipse – FXG primitive to draw an ellipse shape.
BitmapImage – fills a rectangular region with bitmap data drawn from a source.

New Effect Samples:
Animate Properties – shows how you can animate arbitrary properties to create some really cool animation effects using the SimpleMotionPath class. Built by my good friend and Attest cohort Dave Flatley.
AnimateShaderTransition – fun sample that shows how you can create a swap shader effect between two images.
Move3D – shows how the Move3D effect can be used to create a 3D movement of an object.
Wipe – replaces the Flex 3 Wipe effect.

New Style Samples:
DescendantSelector – shows how to use this advanced CSS to specify styles for a child in a container.
TypeClass Selector – advanced CSS to specify a type plus a class for selecting the item to style.

New Coding Techniques Samples
Using Text Layout Framework – TLF Text Editor Sample – allows you to play around with the various Text Layout Framework properties and see what capabilities are offered and programmable. My favorite thing about this editor is how you can click the ‘Export’ button and it will generate the MXML code you can use in your code, just be sure to add the namespace as needed (for instance prefix TextFlow with the s: for Spark). Oh and even better, the source code to this entire editor is included in the second tab!!

Custom Layout Samples:

  • FlowLayout – written by Evtim Georgiev from the Adobe Flex Engineering team.
  • WheelLayout (carousel effect) – another one supplied from Adobe and one to definitely check out for advanced custom layout building in Flex.
  • Animated Layout – written by Adobe’s own Christophe Coenraets showing how to create a custom layout that includes some animation.

Custom Item Renderer with Animation – a couple of fun samples written by Christophe that shows the use of custom item renderers that include animation. Perhaps we all know what Christophe’s favorite show on TV is now :). Note there are 2 samples here in tabs so don’t miss the second one!

That about sums it up. There are a few I did not list so be sure to go take a peek! Also note that some of the tree items show multiple ways to use that particular component and may contain multiple samples in tabs when you click on the item. There is a number in parentheses next to the sample in the tree as well to indicate that more than one is available.

As promised above, here are some new links to check out!


Flex 4 Resources – Samples and Links!

Posted in Adobe Flex, Flex 4 with tags , , , , on September 4, 2009 by devgirl

Today we are rolling out the first batch of new Flex 4 samples based on the recent **Flex 4 SDK (update: as of 10/1/2009, all have been updated to work with the latest version of the SDK beta 2 released at MAX). Tour de Flex had a Flex 4 Preview category previously, but the samples were based on a very early build of Flex 4 and much as changed since then so many were no longer valid.

We recently spent some time with members of the Flex 4 team in San Francisco to get an idea of what had changed, what’s coming, etc and I’ve been working on creating new samples to help show off some of the new features. Many more are in the works and will be rolled out weekly while Flex 4 is under continued development, so stay tuned for tons more!

The Flex 4 team is working hard at addressing concerns previously raised and I think people will find a lot of really cool stuff to come here. Be sure to check out the readme’s in the various categories with the samples as well as the one in the top Flex 4 Preview folder. I’ve included some very helpful links that can make the transition so much less painful if you take the time to check them out. I think it is key in overcoming the learning curve quickly. I would also highly recommend spending some time going through the source code in the Flex 4 SDK to understand the architecture better. It was a huge help to me in coming up to speed with it overall. To get the very latest SDK and docs, check here for nightly builds.

If you have specific requests for a certain sample let me know, or if you’d like to contribute a sample feel free to contact myself or Greg Wilson with the sample you’d like to add. Also, if you have any issues with any sample or questions while trying Flex 4, feel free to contact me here on my blog, twitter or email and I will see if I can help you out 🙂

Flex 4 – Useful Links

  • What’s new in Flex 4
  • Differences Between Flex 3 and Flex 4
  • Flex 4 Livedocs (may not be most current)
  • Flex Examples (Peter DeHaan)
  • What’s New and Cool in Flex 4?
  • Flex 4 Overview (InsideRIA)
  • Flex 4 Overview Slides
  • Introduction to Flex 4 Skinning
  • Skinning Components and Applications in Flex 4 – Video
  • Skinning and Components in Flex 4’s Spark Architecture
  • Flex 4 Spark Skinning Post
  • Various Skinning Examples
  • Flex 4 Effects Part 1
  • Flex 4 Effects Part 2
  • Effects in Flex 4 Video
  • Stretch and Squash Effects in Flex 4
  • Spark Layouts
  • Spark Horizontal and Vertical Layouts
  • Flex 4 and Custom Layouts
  • Flex 4 Layouts Video
  • Spark Virtualization
  • Flex 3 versus Flex 4 State Management
  • Flex 4 States Video Tutorial
  • Advanced CSS Video
  • Flex 4 CSS Namespaces
  • Flex 4 – CSS Advanced Selectors
  • FXG 1.0 Specification
  • Text Layout Framework (TLF)
  • Text Layout Framework Overview Slides
  • Linked Containers in Flex 4 using Text Layout Framework
  • I will continue to update this list. Please feel free to comment with your favorites!

    Also, please note, the Tour de Flex samples are best viewed in the AIR version of Tour de Flex. When using the web version, we recommend hitting the expand button in the top right corner to see the full sample better. Sizing issues are currently being worked on.