We have been having a discussion on primitive shapes in Flex in our 615 Flex discussion group.  As of now, if you want shapes (e.g. circles, rectangles, etc) in Flex you have a few options:

1. Make a circle vector image or SWF in Flash, then load it using an <mx:Image /> loader or something similar
2. Draw the circle using ActionScript code in a function, optionally as a component
3. Use the primitive shape classes developed by Jason Hawryluck (see below)
4. Wait till Flex 4 when they introduce the new native shapes classes, which replace option 3 above (e.g. <mx:Circle />, <mx:Rectangle />, etc)

The primitives classes are just custom components that eventually use the drawing API internally, but allow you to instantiate them into your app as MXML tags.  If you want, they are focusable just like normal widgets.  Adobe is currently set to introduce their own version of these in Flex 4.  In the long meantime I use these primitives to easily get what I want.  There is even a Primitives Style Explorer that allows you customize a primitive, then copy/paste the MXML formatted tag into your app.  Check out this link for the original post about these classes.

Since these components are not part of the Flex SDK, you need to get the the com.Primitives package of source files and place them in to your project.  I am not sure if there is a SWC that contains the compiled classes, I just do what the author suggests and right-click the style explorer, then click View Source to get the source classes.

Now for a sample using the gear primitives.  My buddy and fellow 615 Flexer Byron will serve nicely as the demo.  We will make gears of his brain his and report on his status (which of course are the two things he claims keep him going).  Check it out here.   Right-click to view source.

Just got back from the MAX 2007 conference today.  Stepped off the plane and drove over to meet my co-workers at Opry Mills for the 4 hour Microsoft Event regarding Silverlight ... or so we thought.  I think the speaker spent 30-45 minutes on Silverlight.  The rest was on LINQ (which is actually pretty cool) and Windows Communication Framework (JMS anyone?).

Anyway, none of us came away overly impressed.  I do think Silverlight has potential, I am just not sure to what degree it will compete.  On the one hand, it is MS, a world class tool development shop.  You know eventually the tool will rock for developers (who knows, maybe even designers).  But after the session was over I spoke to the speaker and mentioned how far ahead I felt Adobe was with Flex, and he told me they only had like 3-5 guys on the tool team atm.  Huh?  I don't know, he made it sound like it was a couple of guys' pet project.  David (co-worker) made a good point...could they just be waiting to see what sort of interest level develops?

They guy did say something like, "Ignore the marketing speak, Silverlight IS here to compete with Flash."  He showed several features that were similar to where Flex is/may be going (see Flex Roadmap Part I and Flex Roadmap Part II).  Specifically, the fact the there are separate design and developments tools that can work off of the same project, and that the design tool generates the components using shapes and other graphical elements.  He also showed of the HD video capabilities that were "superior" to Flash (he was not aware of the  announcements at MAX

Several people asked about components in Silverlight.  He indicated the Silverlight component toolkit was going to take care of this.  This is sort of like how it is with Flex components.  The language and installable runtime itself only defines the building blocks for components.  No component library comes down with the runtime.  It is up to the designer/developer to include what he/she wants.  Also, after the session I asked him more about components.  He indicated that when the release version of Silverlight 1.1 comes out (the C#/full CLR runtime version that is in alpha mode right now) the component toolkit should be pretty rich.  I think at this stage we just have to sort of wait and see.

After the Flex Roadmap session I overheard some personal Q&A time between a developer and the speaker.  The developer indicated (and I made the association just as he said it) that this new style they were expirementing with is essentially what Microsoft is doing in WPF and Silverlight (WPF/E) is.  The speaker said it was definately similar.

The last time I looked at the Silverlight stuff I kept wondering where all the controls were.  The thing is, they already have the simple shapes that Flex is talking about.  You just draw in MS Expression and it generates XAML Graphics (part of what Thermo will do).

The developer brings up an interesting point, however, that the speaker seems to take to heart (they even exchange business cards over the discussion).  Basically, you can come at this component design from two angles. 

Angle 1 is designing several rolled up components and chosing to expose certain properties.
Angle 2 is the new design, making the view completely configurable/editable in a large hierarchical grouping of Graphics, marked up and editable in XML.

The drawback of Angle 1 is exactly what they were saying in the session, that they have to guess what the developers will want to mess with in order to expose them.  However, there is positive side to this approach, which is of course the weakness of Angle 2.  The weakness, as stated by this developer, is that often times people just want to do something simple, like change the rollover color of  a row in a list.  The XML markup of the view for a list is now so freakining huge and has XML attributes for color everywhere that it becomes a massive undertaking to find and tweak one or two little things.

In fact, this developer stated they actually come full circle and write some code in WPF to expose a few of the most commonly changed properties on the now super configurable view.

Interesting stuff.  Hopefully the Flex team comes up with a good solution.

This was an interesting session from a few different points.  First the notes:

- advisory note: everything shown is in expiremental phase

- short recap for those that missed Thermo sneak
- they indicate the Flex team is excited about Thermo
- splitting into two teams, one focused solely on development features (Flex), others focused on design features (Thermo)

- recap of where Flex is atm -
- designers need freedom (drawing rounded rectangles, setting alphas on everything, etc)
- Flex SDK focuses on components
- therefore we have a high level and very low level (programmatic drawing), but nothing in between
- enter MXML Graphics

- MXML Graphics -
- simple shapes,  complex paths, masking, filters, blend modes, etc all with scale 9 support
- should be run-time editable, making it easy to animate
- focused on performance
- need ability to trade off runtime editablity against memory and speed

- Re-evaluation of Framework component design -
- currently a problem with components, that goes like this:
- they expose certain styleable props of a button
- folks request that the button's label have the alpha settable
- they expose, build, test, deploy
- works great, then folks request that the button's corners not be rounded (or something)
- problem predicting what folks want to do with the views of components

- further, current code is complex
- e.g. Button is 2200 lines of code

- enter true MVC (Model View Controller) separation
- model - at its core, what does this component need to expose prop wise (e.g. the label for Button, that is it)
- controller - event handling for mouse/key input, but just with/respect to setting current states and events
- view - should be completely definable just using MXML

- big advantages
- can complete alter the look of a component, more so than is possible today
- no changes to any controller code, it is still a button
- becomes VERY easy (demo was cool) to alter component's look

- demo -
- again shows old button code, 2200 LOC
- shows new button code 
   - 20 lines in model
   - controller code maybe a 2-300 LOC
   - view is all MXML Graphics and states
- alters the MXML view of the component and immediately can make very cool looking buttons

- repeats the demo process with scroll bars and lists
- with scrollbar, some things are defined as optional
- for instance tweaks view of a scrollbar to have no buttons (thumb and track only)
- with list, makes very different animated looking lists, accordians, etc with minimal and frankly easy to understand and implement changes to MXML

- near the end of the session folks starting commenting how cool this whole thing is
- a few begin to wonder why they should even consider Flex Builder 3 at this point
- the speaker notes
a) this is still expiremental
b) they are committed to backward compatibility, so components will work in this new design

There was a hands on session earlier today, but nothing much to report from that.  Here are some notes from this session:


- recap on CSS styling Flex
- recap on skinning in Flex
   - short discussion on Scale 9 skinning
      - scalenine.com - on CCA license (use at will with credit to authors)
      - flex exchange (beta) - licenses vary
   - short discussion on programmatic skinning:
      - most Flex default L&F is currently using programmatic skinning
      - can define new style props on skins (allows single skin to take on different appearance)

- standard skinning steps
   - create art
   - export art in Flex friendly format (Flash, SVG, PNG, etc)
   - create Flex CSS to attach skins

- Flex Skin Design extensions
   - make skinning easier
   - new for Flash CS3, Photoshop CS3, Fireworks CS3, Illustrator CS3

- Flex Builder 3 makes importing artwork and CSS setup much easier
   - new import artwork wizard
   - imports and generates CSS code
   - can be viewed immediately in CSS design mode and have styles tweaked
   - Scale 9 grid can be edited in CSS design mode (needed for raster images)

- discussion on difference between skin parts and skin states
- each skin part can have a skin state (e.g. scrollBar's thumb up state, down state, etc)
- transitions can be defined between each state

- in Flash, additional keyframes can be added that are transitions
- the names defines the transition (e.g. up-over:start, up-over:end)
- wildcards are support
- an example of using this would be to fade a color into a new color when going to over state
- can define to not define the reverse transition and Flash will just play reverse

- in CSS design view, under global, can set a Font to a non-standard Font and now check embed
- note to be sure of legal issues of embedding a font

After the Sneaks session was a "back in time" party.  We walked down a tunnel into retro-land.  There were 70s, 80s, and 90s zones.  Depending on the zone there was:

- an arcade with coin-ops machines (galaga, pac-man, etc), pool tables, and air hockey
- a stage with costumes were you could film a 70s style music video
- stuntmen doing tricks with BMX bikes and skateboards
- the car from Back to the Future
- many screens set up with Super Mario Brothers, Donkey Kong, Halo 3, Guitar hero, many more
- remote control car racing
- jumbo screens with 80/90s videos playing
- food everywhere, all different kinds
- 80s breakdancers
- tables with a dealer and a supply of chips for Texas Holdem
- a Segway obstacle course (i tried this, it was fun finally riding one)
- an Oxygen bar
- a live lounge band in tuxes singing Brass Monkey, Shake that Ass, Closer, Smells Like Teen Spirit, etc in a lounge/crooner style .. this was just wrong
- a sit down photo booth
- i am probably missing some stuff

Notes from the Sneak Peak General Session for all:

Visual Communicator
- new product, very cool demo
- an app that integrates with a webcam
- the speakers stand on stage in front of a green screen
- imagine three columns:
  - on the left of the app is the web cam image of them, taking into account the green screen
  - in the middle is a scrolling vertical "teleprompter" they can edit in place
  - on the right is a scrolling vertical timeline that shows effects/transitions
- they click play and the two sort of timelines on the right scroll slowly
- they read from the "teleprompter" as graphics pop up on the green screen behind them and transitions occur
- they demonstrate how quickly they can throw in images over top of themselves, like a news broadcast
- they claim they have 3rd graders using it to make fun little productions that television crews had whole trucks for
- now I know what this CD is they gave us on day 1, sweet


VoIP in Flash Player
- this is the CoCaMo thing again from this morning's session
- they talk about it more and indicate Adobe wants you to build products around it, without requiring them
- it will be p2p and through your server, so does not require a subscription to an Adobe service for your custromers (no double authentication issues, Adobe does not have your client list, etc)


Flash Home for Mobile
- product that provides the ability to replace your "home" screen on your cell phone
- boot the phone directly into Flash
- leverages a server called FlashCast
- unlike a WAP browser where you click and wait for a refresh, it is like Flash in that it can do web requests without refresh (in-place)
- shows example code, simple function that checks for incoming area code and swaps out background image
- has someone in audience call him, code detects person is coming from New York and display statue of liberty image


Photoshop Express
- online version meant for the average consumer
- built in Flex
- quickly correct and see previews
- each change generates an image in a timeline and new result is rendered in real-time
- can remove any edit in the timeline and see the end result, not just linear undo
- your images are hosted online and you can package them up into a slide show and share them
- full end to end solution

Flex and AIR authoring in Fireworks (Future)
- skinning Flex/AIR apps


Creating Offline/Online Apps w/ AIR and ColdFusion
- no idea


Web 2 Print
- using in-design, indesign CS3 server to design and see immediate real time PDF mass printable documents


Flash (Future)
- move viewing on stage in design
- no more need for keyframes, this was cool:
  - they drop an image on stage
  - they just drag out the image in the timeline the desired number of frames
  - they pick a frame and just move the object and the tweens are generated, no keyframes required
  - they pick a different frame and increase the size of the object, tweens are generates, no keyframes required
  - they stick a bezier curve over the frame and define the path automtically
  - they go to any frame and see where the object will be on the curve and can adjust the location of the curve at that frame, changing all tweens effortlessly
- the coolest thing though, was an example of using the new bone support:
  - they draw a few peach colored circles with the edges on top of each other
  - they use a tool to place connections (bones) between each circle
  - they then move the last circle and watch as the just created arms with joints move around like an arm
  - they show off a cool robo-bug animation where they have done the bone stuff and move different pieces at different frames
  - they then reveal that it is interactable at runtime, that is if you choose, the user can interact with the bones
- lots of applause and geek squeels on this one


PDF Packaging UI
- integration of Flash in Acrobat
- clickable links in a PDF that open SWFs inline and in context (locations that open google map points)


Flex Apps on Linux
- Flex Builder on Linux Alpha launched as of this evening
- not yet full support of Flex Builder 3 features (no design view), but does have debugger


C/C++ and Flash
- C/C++ to AS3 compiler
- example conversion of libxslt
- even converts synchronous C code to asynchronous AS3 code to keep UI from blocking
- coolest part was when he showed Quake, initially written in C and completly ported to AS3, with some Flash status overlays zooming in and out (he added this after compiling/converting the code to AS3)


Seam Carving
- they announce some guy had been getting tons of youtube views for a little app he wrote that was 20 lines of code
- they immediately hired him when they found out about it
- his process is called seam carving
- it looks at transitions in any bitmap image and finds what he calls "seams"
- it then removes the seams, for instance, when shrinking the image
- the effect is great, instead of shrinking out the image evenly, it keeps the content more
- it is too difficult to describe how well it works, but they have an image of guy on a bike and the old scaling method in the X direction shows the whole image thinner, with the biker skinnier, while the new image shows the biker almost the same size even though the image has been shrunk
- he also can grow the image
- the best part is where he opens up a picture and with just dragging brush over top of an area can make objects dissappear (a boat out of the water, a shoe out of a shoe rack) .. the end results look like the image was never there!

Notes:

- Flash Player 9 internal lifecycle: rendering, excute actionscript code, networking, repeat
- writing crappy AS code can starve rendering

- deferred creation
- several container components support a creation  policy which should be used if possible, such as Accordian, TabNavigator, ViewStack, etc
- this allows items that are not yet viewablle to defer creation
- you can implement deferred creation in your own custom containers, but better to just extend ViewStack

- constraint layouts can be slow with lots of nested containers
- reduce container nesting when possible

- if you are loading lots of images, do it smartly
- each one's load complete will cause a re-layout process
- better to load them all off the display list, then, when all loaded, add them to display list

- use cacheAsBitmap for effects that don't change size
- this renders the component to an offscreen buffer and fast draws the buffer to the display
- MoveEffect - good use for cacheAsBitmap
- Resize - bad use for cacheAsBitmap

- use Resize.hideChildren to hide children during state transitions when possible (e.g. resize a grid you could hide the item renderers with this, but that would leave a blank grid in meantime)

- setStyle is expensive, except during object creation time

- using performance profile in Flex Builder 3:
- start app via profiler
- uncheck memory profiling if not using it
- once you get to the point in your app you want to profile, clear the results
- do the action you are profiling
- take a snapshot
- you can now drill down each method, and each method it called to see performance breakdowns

Case Study
- List itemRenderers that were doing lots of changes to the list
- initially wrote renderer as a VBox with other containers inside to positon label
- rewriting as a simple AS class that andled the layout very simply drastically improved performance of all the dynamic updates going on to the list

Notes:

- Flex is now open source, and the SDK is on a nightly build that can be pulled down anytime
- Using that in conjunction with he new open bug database, you can actually test out fixes prior to official release to see if they solve your problem

- Flex Builder 3 supports multiple SDKs now
- SDK can be assigned on a per project basis
- Compiler/Design/Code intelligence pull from the assigned SDK

- Discussion on how to set up a pulled down SDK for building the SDK when you want to update framework code to test fixes you make, and then run your project against our modified framework
- Requires a little bit of setup

- Flex Builder 3 code behind has been enhanced to support code jumping (CTRL+click) through all include code
- It has also been fixed to support code jumping through all levels of the code tree, backwards and forwards

- There is a faster SWC parsing implementation that has been placed in Flex Builder 3 but was disabled for the beta 2 as it did not get sufficient testing for the release
- Can be enabled by putting down a file called “use.newABC”
- This update cuts project load time in half and will be in the next release officially

Goals:
Centralized
Automated
Self-Testing

- Continuous Integration is a software development process where members of a team integrate their work frequently
- Each integration is verified by an automated build and test that detects integration errors as quickly as possible

Allurent Buildwatch
- Build failure notifications via email with the build failures
- Dashboard of projects with their current build status, last time built, etc
- Distribution page of binary builds and docs

Automated Build Process
- build file for the project
- src directory
- bin directory

- Goes over using Ant with the flexTasks.tasks (we are already doing this in our app) and <mxmlc>

- Build best practices
- keep source and output separated
- don't work work you've done already
- provide reasonable defaults
- centralize behavior
- predictability

- FlexUnit - supports Flex and ActionScript, asynchronous testing, and graphic test results (through Ant)

- Antennae - 
- Build templates, encapsulates best practives, handles  flex apps/libs/docs, cross project dependencies, multiple projects
- automated test suite generation
- ability to fileter down the tests ro run
- ActionScript to Java result reporting