Archive for the Tour de Flex Category

Tour de Flex – New Mobile Development Additions

Posted in Adobe Flex, Flash Builder Burrito, Flex 4.5 Hero, Flex/AIR, Tour de Flex with tags , , , , , on January 27, 2011 by devgirl

Tour de Flex (desktop and web version) were updated today to include a new mobile section showing samples using the Flex 4.5 SDK (Hero), so be sure to check it out! There are also links to download Flash Builder Burrito (Preview), Adobe AIR Launchpad, Tour de Mobile Flex and other resources to help you get up to speed with Flex and mobile development quickly.

Each mobile sample includes tabs showing the main MXML file, the home view code (new in Flex 4.5 SDK) and a tab showing any required application descriptor updates, including required permissions for the android manifest. You can copy and paste the code directly into your Flash Builder Burrito project and run or debug it either in the emulator included with Flash Builder Burrito or on your own personal device immediately. Each of these samples can also be generated from the Adobe AIR Launchpad (free AIR application) directly into one project as well, so keep that option in mind if you would like to use multiple samples quickly!

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 flex.org 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 YouTube API and Player Samples

Posted in ActionScript, Adobe Flex, Flex/AIR, Tour de Flex with tags , , , , , on January 25, 2010 by devgirl

Over the weekend I worked on some samples for Tour de Flex to show how you can interface with the YouTube APIs using Flex and ActionScript. I created four samples showing different ways to do this that you can see in tabs across the top of the YouTube sample in Tour de Flex. The details for these samples are listed below:

  1. Simple Service – this is a basic sample that shows how you can use to query the YouTube API available on Google Code. The results are returned in JSON format and deserialized using the as3corelib.swc available here. The as3corelib.swc is also included in the downloaded code from Tour de Flex. Feel free to play around with changing the HTTPService URL to another type of query with other parameters based on what is listed in the Google Code API reference to get back various types of data including user profile data, categories of videos, comments etc.

    Note: The next 3 samples used an ActionScript API to wrap the YouTube requests/responses and make them easier to work with. That API was written by Martin Legris and includes iterators for all of the different objects that might be returned (categories, authors, comments, links, etc…). I recommend checking out his blog as well, there’s a lot of useful information and resources there.

  2. Video Comments – this sample shows how you can interface with YouTube and get the comments for a selected video. Simply click an item in the grid and hit Show Comments to view the comments for that particular video. Double clicking the video will bring it up in the YouTube website.
  3. Search Favorites – this sample allows you to search the favorites of a given userid. Once the favorites are shown, you can then also view the comments for that particular video in the same way as above. Note: certain userid’s may have privacy settings that will block the call and not return any results.
  4. Embed Player – this sample shows how you can not only search YouTube, but also embed their video player in you code and interact with it to do things like set the quality of the video, cue a video, play, pause, stop etc. Once you search for a video, click it to see the player show within the sample. For more information about this player API, go here.

These samples are now available in Tour de Flex under the Cloud APIs folder so definitely check them out! It was quite fun to play around with these :). If you have any questions or issues let me know and I’ll see what I can do to help!