PhilterBlog

MAX Keynote Day 1 - Amazing!

2008-11-17T19:08:23Z

This year's day 1 keynote was chock full of amazing stuff. Here are some of the key points for developers along with links. If you want to follow MAX with up to the minute news, get MAXimizr, an AIR app we built for those who aren't able to be in SF.

Flash Platform - Umbrella terminology for all things Flash. Pretty sure this isn't a new term, but maybe to reiterate the centrality of Flash player in all of this. Flash Platform Home.
Flash Catalyst - The app formerly known as Thermo promised to vastly improve designer/developer workflow. We should be seeing a lot more of it before MAX is over. Unfortunately, it won't be available on labs until early 2009. Catalyst on Labs. Catalyst Blog.
Gumbo (Flex 4) - Not really breaking news as builds have been available on Labs for quite some time, but it is tightly connected with Catalyst so it deserves a mention. Gumbo on Adobe Open Source.
AIR 1.5 - Updates include support for FP10 features, encryption in local databases and updated WebKit for faster html based rendering. Intro Article. Download the runtime. Download the SDK.
Tour de Flex - a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR and data integration, as well as a variety of third-party components, effects, skins, and more. Download it.
Cocomo - a "platform as service" that allows Flex devs to easily add real-time social capatilities to their apps. Cocomo on Labs. Developer Portal.
Wave - a desktop notification service built in AIR allowing users to receive notifications from publishers that they specify. Wave on Labs.
Flash player 10 for mobile - hopefully I'm reading this correctly, but they're shooting for a fully functional FP10 for mobile devices. Fantasic news for developers. Obviously hardware may be a limitation, but demos were shown on Symbian, Win mobile and Android (sorry, no FP on iPhone yet...that's in Apple's hands)
Distributable Flash Lite player - another awesome piece of news! Apps can be deployed with the ability to install Flash Lite if required (over the air).

Also, not sure if this was directly touched on in the keynote, but Flash Media Server 3.5 was announced. Read about it here. Get it. Can't wait to see what the Day 2 Keynote brings.

MAXimizr - The Latest Adobe MAX News on Your Desktop

2008-11-14T09:40:06Z

This year's Adobe MAX conference is shaping up to be one of the most exciting in recent memory with CS4 just released and much hyped previews of new products such as Thermo to come as well as lots of other cool tools. So in order to follow all of the goings on, we've built an AIR app called MAXimizr. MAXimizr 0.1.0 aggregates all of the latest MAX related news as well as twitter entries. Also, it will directly link to videos and session files as they become available so you can stay on top of it all. Finally, it includes the entire MAX schedule so you can track what's going on. You can navigate through all of the content using the scrollwheel or the now familiar click/drag/throw as seen in the iPhone. We have plans to build a lot more functionality in future versions of MAXimizr including: 1. Inline playback of video 2. Customizeable settings 3. Ability to favorite the sessions you are attending 4. Inline browser If you're presenting at or attending MAX, feel free to email me once your session notes/files or recorded video are available and I'll link to it. Requires the Adobe AIR Runtime. Use the badge below to install MAXimizr:

iCandy - FREE Flex Skin

2008-10-20T17:23:03Z

iCandy was my entry into the ScaleNine Skin to Win competition. It took third place and a copy of CS4 Web Premium. There were some hiccups in the process of getting these graphical skins into a Flex app, which anyone doing graphical skinning should be aware of (I've documented here), but overall I was happy with the result. Thanks to Juan for putting this on, and to Adobe and EffectiveUI for sponsoring with some great prizes. The skins should be available for download on ScaleNine shortly, but you can preview the skins here. Congrats to the other winners, the team from Undefined for their Undefined skin, and Nahuel Faronda for his Brownie skin. [UPDATE: The iCandy project files as well as the source FLA are now available on ScaleNine. Enjoy!]

Useful Tips When Creating Graphical Skins for Flex 3

2008-10-02T15:55:12Z

Having done several CSS skins for various projects in the past, recently, I had the opportunity to create a set of almost entirely graphical skins. Having stepped through that process, I wanted to write down some tips when attempting to create graphical skins. All of these skins were created using Flash CS3 as opposed to Photoshop or Fireworks. This isn’t so much a step by step tutorial (a good tutorial by Narciso Jaramillo can be found on DevNet) as it is a list of pointers as there are a few issues you may run into when implementing graphical skins. I’ll start by saying that my experience in general was positive and in large part, the tutorial was a great resource. For a large number of the components, skinning was super simple and Adobe really did a good job (though skinning in Gumbo is that much better). However, there are some little things that needed massaging in order to work. I’ll touch on each of those below. As mentioned in the tutorial, install the Flex Component Kit for Flash CS3 as well as the Flex Design Extensions. These will make your life a whole lot easier as they include template files for most components (New > Templates > Flex Skins). Once you publish from the template file as a swc, you can import them easily into Flex Builder. When modifying graphics in Flash, here are a few tips:

Try to make the size of your graphics match the size of the default graphics in the template fla. If you change the size and position of graphics, you may get unexpected results.
Make sure the size of graphics in all states is the same. If sizes change across states, it will likely result in text labels or other parts of your component moving when the state changes. This includes things like keeping the “check” in your checkbox inside the bounds of your “box.”
When importing a slider skin into Flex from your template, you’ll need to add a CSS style definition for both HSlider and VSlider. By default, the swc imports a definition for Slider only which doesn’t change skins for either Slider component.
When customizing the shape of your skin, you can round or unround corners, but if you do, make sure you use the “focusRoundedCorners” style along with “cornerRadius” for that component to either round or unround the focus rectangle.
When customizing the indeterminate graphic for ProgressBar, be careful with the spacing of your barber pole or you’ll get skipping during the animation. Going with the same spacing in the template file of course is the easiest way to go.
An obvious one, but make sure that you don’t use MovieClip symbols inside of your skin clips that require 9-slice scaling as they won’t scale properly. I’ve also found that using Graphic symbols can also cause weirdness. In general, it’s best to just use shapes in your skin clips.
The skin for the MenuBar_itemSkin doesn’t work properly. By default, the template contains a single clip with separate states for up/over/down. However, in order to get it to work properly in Flex, I had to break it into separate clips (MenuBar_itemUpSkin, MenuBar_itemOverSkin, MenuBar_itemDownSkin), each representing a single state only.
When customizing background skins for List based components, keep in mind that by default, the ItemRenderer background extends to the edge of the component, so that it will obscure your border at the very least in over and selected states. In order to have your ItemRenderer background sit inside your component border, you need to create a custom renderer. The other options are to either have no border or to make your ItemRenderer backgroundColor style the same color as your border.
Remember that some component skins are used by other components either via inheritance or composition (i.e., NumericStepper uses the TextInput borderSkin, ComboBox uses List’s, TextArea uses ScrollBars, etc.). So if your TextInput skin graphic has rounded corners, take that into account when creating your stepper button skins.
Another obvious one, but remember that CSS styles don’t work with custom skin graphics. Unfortunately, this means that creating a set of graphical skins that can be styled using CSS isn’t possible by default (i.e., backgroundColor, borderColor, etc.). Not sure if anyone has implemented this ability with graphical skins, but I’ve started looking into it so stay tuned.
Unfortunately, there isn’t a simple way to graphically skin the DateChooser background as it’s baked into updateDisplayList of the DateChooser class, so your easiest bet is via CSS.
ComboBox’s editableSkin doesn’t work properly. The symbol actually needs to be broken down into 4 separate symbols (ComboBox_editableUpSkin, ComboBox_editableOverSkin, ComboBox_editableDownSkin, ComboBox_editableDisabledSkin) and imported into Flex that way in order to work properly. Also note that even though the template symbol is 21 pixels wide, the default width for the editable ComboBox's button is 22 pixels so you may want to resize the symbol so your arrow doesn't get stretched.
Unfortunately, using graphical skins for Panel can result in a bit of a mess as discussed here. Basically, the contents of the panel don't respect the padding values. One workaround is to set up the panel contents in a container and set the top/bottom/left/right values of that container to the same as the border in your panel graphic.

10 Reasons to Dig Skinning in Flex 4

2008-09-23T17:34:33Z

This is old news for some, but seriously, after reading the skinning architecture docs and building a couple of sample skins using the Flex 4 SDK, I have to say that it completely rocks! Up until Flex 4, the approach for architecting UI components (starting back with MX2004 all the way up to Flex 3) has been largely the same. The result has generally been robust components with an amazingly wide feature set but that could take quite a bit of work to customize, particularly in regards to skinning. Each generation of components has improved upon the previous one, but after looking at the Gumbo components, I absolutely love the new true MVC approach. The fact that the view (skin) is pretty much completely decoupled from the controller makes customization more flexible and easier than ever. Here is a simple button skin built entirely in MXML (Flash player 10 required). Not super complex, yet it shows how easy skinning really is. This example contains small customizations like animated transitions between states, lots of layered gradients, multiline label, label with glow, and others which could take quite a bit of work to implement in the existing framework. Here is the MXML for the skin. Here is the entire source package. Here are my top 10 things to love about skinning in Flex 4:

FXG - A lot of this just wouldn't be possible without graphics tags introduced in Flex 4.
hostComponent - The ability to bind anything in your skin to any property in the component allows the skin to pull the data it requires and display itself accordingly.
States and Selectors - The ability to define states that correspond to states in the controller is made hugely powerful by the introduction of "state-selectors." In MXML, you can now define values for any state your component implements (for example, in button, you can do alpha.over="0.5").
Integration with the Flex 3 framework - the Gumbo components extend the existing UIComponent class so things you are already familiar with like component lifecycle, events, and tabbing all still apply.
Skin parts - The ability to break up your skin into parts, each defined in your controller to have it's own behavior.
Layout Agnostic - You can quickly snap in different layout classes to display the component in different ways. No longer is the layout tied into the component.
Flexibility - Using all of the above techniques, Ely has already demonstrated that you can customize a list to act like an Accordion or a TabBar without much difficulty.
Building via composition - In this new architecture, it's super simple to just snap new pieces into a skin and wire them up to the hostComponent properties to create more complex components. For example, List doesn't contain a ScrollBar by default, but to add one and make it work is fairly trivial.
Lightweight - Since all of the non-essentials have been pulled out of these components, there is far less code which should mean improved performance. Can they do as much as the Flex 3 component set? No, but I don't think that's the intent initially, as these don't appear to be a replacement for those components, rather an alternative.
Thermo - ever since I was blown away by the initial Thermo demo video (particularly the parts on converting artwork to components), I was skeptical about how they would be able to support skinning in that way using the existing Flex component framework. However, after seeing how skinning works in Gumbo, it now makes tie in with a tool like Thermo much more obvious.

Flex 4 rocks!

FXG (Flex Graphics) - The Missing Link

2008-09-19T16:07:07Z

One of the biggest issues for me in the Flash/Flex workflow has been bringing graphics created in Flash into Flex. Don't get me wrong...I don't think the workflow is hugely painful. All you need to do is draw in Flash, compile, embed the swf in your Flex app and you're good to go. However, if you need to tweak your graphics, resize a few pixels here, tweak a gradient there, for some reason, it just felt uncomfortable to have to go back to the Flash IDE, tweak, recompile, etc. However, after reading the FXG spec, I'm excited about what this will add to our arsenal. A markup for graphics is something already implemented in Silverlight and was something we were sorely missing. Degrafa got the ball rolling in that arena, and it showed the capability to do some pretty amazing stuff. That team continues to work with Adobe in the implementation of FXG. This new feature brings to bear a few questions in my mind:

Will we get additional UI controls in the Flex 4 IDE that allow manipulation of the markup (changing shape properties, applying/editing filters, changing text)? Considering that the Flex IDE initially was created to make developers feel more at home by removing that "extraneous" stuff, it should be interesting to see what happens. Or is Thermo solely the tool that will allow this capability?
For more complex graphics that can be created in the Flash IDE (or even in Illustrator and imported into Flash), will there be an option to export to FXG? I know there are inherent problems with this since the IDE supports things that FXG does not (i.e., timeline animation), but even the ability to select one or more graphics on stage and have it output FXG would be a cool feature.
How will creating/manipulating the graphics via UI controls bloat the markup. In working with Blend and XAML, you could draw a rectangle to the stage and change a few settings and all of a sudden you get something that looks like this:
Then try changing some of that XAML manually and it blows up if you're not careful.

I'm excited about the potential this has for improving workflow.

AS3 Tutorial - Bitmap Based Preloader

2008-09-15T17:43:27Z

Our resident Senior Flash developer, Kingston, has written a detailed tutorial on how to create a preloader while also applying knowledge of BitmapData and Tween classes. Kingston has taught Flash at various technical institutes so he understands how to transfer his knowledge in a way that's easy to understand. View the final preloader Download the tutorial files

Silverlight VS Flash? Not Really.

2008-09-11T10:00:33Z

We previously approached this argument from 2 sides: .NET developer and Flash developer. However, maybe that's not the most appropriate perspective on this issue. I recently came across this discussion (started back in May 2007 but still active as of a week ago) at the Silverlight.net forums. What interested me right away was that the initial poster is a .NET developer. He was asking the Silverlight community for reasons to use Silverlight instead of Flex and specifically looking for "concrete value-add" after he was come up dry of reasons himself. Unfortunately, it largely turned into a flame war after Ted piped up and stated the facts about the Flex side. In the end, I'm not sure much was gained in terms of the initial question (feel free to read it as there are some interesting points made), but it did reinforce something in my mind. Ever since MS released Silverlight, most of the discussion around Silverlight and Flash has been related to which is the better technology and whether one will win out at the demise of the other. Unfortunately, the argument has revolved largely around programming languages and runtimes and development environments rather than the real issue at hand...ROI for the client. When we distill it down to the basics of why we do what we do, it all comes down to ROI. After all, that's the reason why we all have projects to work on isn't it? The client is willing to pay money for something that will benefit their company. Breaking that down further, I see 2 basic factors (related to developers like us) affecting ROI: 1. User experience & brand awareness Obviously, we're all trying to build things in such a way that the user will have a positive experience. The type of experience may vary depending on the goal of the project. For example, an online hotel booking system needs to allow a potential customer to quickly find rooms available for specific dates, with specific parameters, and then follow through with the booking and payment. A microsite for a car manufacturer needs to allow the customer to experience the car and entice them to become emotionally involved with it through the senses. All the while, UI controls need to be intuitive and work like the user expects them to. These are things we strive for as developers. To that end, if a technology supports a greater feature set, there may be more options to the client in terms of building that experience. For example, being able to adjust bitmap color would allow customizing a product's color. Support for 3D would allow the user to interact with the "virtual" product similar to the way they would the physical product. Integration of rich charting components allows interesting ways for users to visualize data. However, this has nothing to do with AS vs. C# or FlexBuilder vs. Visual Studio. Those distinctions mean nothing to the end user. Also, just because a technology supports more features doesn't necessarily mean they are the *right* features for the project. In the end, the goal is generally to make a sale or make the user more aware of a brand in a positive way, which may result in a sale (or something intangible like the influence over choices that a user makes) in the future . If the user has a good experience while using the app you've built, regardless of Flash or Silverlight, you've done your part. 2. Development process This is the piece where we get a lot of passionate discussion about how one technology is better than the other. MS developers are very passionate about their tools, languages and processes. I think Flash & Flex developers are as well, though maybe not to the same degree. But again, let's not lose our focus. For someone to hail their technology as king because it uses a specific language is meaningless. What's important is the ability for a developer to utilize that technology to build what they need to build quickly and intelligently (simplified yes, but that's the general goal). The key here is efficiency of the development process. In the end, that's what affects the client's bottom line. To make a blanket statement that Visual Studio and C# is better than FlexBuilder and AS doesn't make sense (nor does the opposite argument). However, if you have a team of developers who have honed their process in a given platform, then it would make sense to build using that platform. That's why it does make sense for .NET developers to jump into Silverlight. But to say that Silverlight is better than Flash just because it implements a subset of the .NET framework is again a misguided response. To reiterate, what is the value-add for the client in that statement? Conclusion So where does this leave us? Unfortunately, I think the question of whether one technology is better than the other will continue to live on despite the fact that it's not really the right question. Don't get me wrong...I'm a Flash developer at heart and probably will be for a long time, and am passionate about it as most of you are. However, instead of wasting our energies bickering with the "other side", let's use that passion to build better "stuff" and push Adobe and MS to continue developing the tools we need to do that.

Silverlight VS Flash - A Flash Developer's Perspective

2008-09-05T13:00:29Z

After asking Chris to post his thoughts on the topic of Silverlight VS Flash from a .NET developer's standpoint, I wanted to post my thoughts from a Flash developer's perspective. I have been heavily involved in SL development over the past 8 months working for some big clients on big projects. I realize that's a relatively short period of time considering I've been doing Flash development for nearly 10 years, but I've gained enough insight in that time to write down some informed thoughts. Keep in mind that these thoughts are based on the current incarnation of SL2 (beta 2) and I'm sure some of this will have been addressed by the time SL2 drops in completed form. Runtime penetration No one disputes that the Flash player's penetration rates dwarf those of SL at this point. So the key here is the ability for Microsoft to provide a seamless install experience. Adobe has years of experience in this realm and have become experts of both minimizing the size of the runtime (squeezing as much as they can into every single kB) as well as providing a really simple install. SL has a much larger runtime to download and install (anyone know the exact size of the beta2 player?) which sets them back right from the get go. Obviously it supports a subset of the .NET framework so there are a lot of features there, but at the same time, it still lacks a lot of functionality already built into the Flash player (discussed below) which if/when implemented will only increase the player size. This is key, as having a bad install experience may turn a user away from SL, but could also turn a user away from other install processes (i.e., Flash player). Workflow Visual Studio is no doubt a great tool for coding. The ability to just plug in the SL development bits and start coding (only C# currently) is a dream for .NET developers. As Chris mentioned, leveraging existing knowledge is key and MS have done a good job of that. I have to say that the intellisense really is outstanding. Integration with the backend is strong, as should be expected. As Chris mentioned in the previous post, there are also lots of add ons which provide cool functionality. The biggest area where improvement is needed is in the designer/developer workflow. Firstly, even though VS displays the visuals associated with your XAML, you can't select or modify elements visually. You have to edit the XAML directly. Also, often it wouldn't display the entire "stage" in the display area but didn't give you the ability to scroll it so you could get it where you wanted it. Expression Blend is a step in the right direction to address this. You can create your XAML in Blend and then open it in VS, and your graphics are ready to go. The problem comes when you need to tweak your graphics. What I generally ended up doing was copying and pasting XAML back into Blend and tweaking visually there, however, there are issues if you are using custom XAML tags and such. So it ended up being a really painful process. On the flip side, you have Adobe's Creative Suite. The designer/developer workflow there is far superior at this point and is promised to improve with the addition of Thermo (as well as other enhancement I'm sure we'll see in CS4). If Thermo lives up to the hype, MS is going to have a lot of catching up to do. Features Though I've worked on several SL based projects, most of them had one thing in common - video. It's no secret that a large part of the initial interest in SL has been building either standalone video players or players that integrate into a larger app. Support for WMV is a driving force behind that. And for the most part, I think that's a good application of the SL technology. But the nod in overall feature set no doubt has to go to Flash. Things like bitmap manipulation, advanced text rendering, printing, skinning, 3D engine, and sound generation, which are all things that put the "rich" into RIA, are currently largely unavailable in SL. Conclusion There are several compelling reasons why SL should be seriously considered for certain types of projects. The same can be said for Flash/Flex. Based on my experience, the most critical aspect of this whole debate is knowing the strengths and limitations of either technology and making decisions based on that information. It would be ignorant to say that Flash is always the best solution in every situation or vice versa. Part of our job is to advise and help clients make informed choices. There will come a time in the future where you will be asked whether you think Flash or SL is the more appropriate choice for a project, so be prepared to defend your position. In my next post, I'll discuss the heart of the issue...Silverlight VS Flash isn't necessarily the right way to approach this discussion of the 2 technologies.

Silverlight VS Flash - a .NET Developer's Perspective

2008-09-05T10:26:14Z

I wanted to take a look at Silverlight VS Flash, but this comparison has been done a million times ("Silverlight VS Flash" yields 205,000 results in google), so I wanted to look at it from the project manager side of things and why they should choose one over the other. Neither technology is monstrously better than the other so picking the technology really depends on your needs, your resources and what you want to accomplish. Hopefully this post will provide you with more perspective in making that decision. Silverlight & .NET Framework: The first and in my opinion the most appealing thing about Silverlight is its leverage of the .NET Framework. There's some hurdles to get over when first venturing into the world of Silverlight, but for any seasoned .NET developer it feels just like home. Any .NET Developer, whether windows or web based, can jump right into coding a Silverlight app with ease. What does this mean for your project? You can now take any .NET developer from your resource pool and expect results within a week or so of them first delving into Silverlight. IDE & Workflow: There's no question that Flex Builder is a huge improvement on the old Flash IDE, but I don't think any developer that's used both Flex and Visual Studio 2008 would deny that they are miles apart. Visual Studio is a full blown and rich development environment, coupled with addons like ReSharper, CodeSmith, NUnit and so so much more, VS is on a whole different level. Once you leverage common tools and practises within the .NET framework with your Silverlight app, you suddenly have the same core development structure as you can have for your windows apps. Unit testing, Continuous Integration and agile development are available to any Silverlight developer. So the workflow that you're used to in the .NET world is available to you with Silverlight, with the bonus of now being able to utilize WPF to add a rich UI. Market Exposure: The stats I can find suggest that about 85-95% of users on the web have some version of Flash Player installed on their machines. Silverlight has a lot of catching up to do on this, but lets not forget this is Microsoft we're talking about not just some startup company trying to get a piece of the pie. Microsoft have made huge ground on getting exposure to the Silverlight plugin. NBC moved to Silverlight right before their exclusive coverage of the Olympics, I've heard that's a big deal. Also the DNC (Democratic National Convention) provided, for the first time, video coverage of the Convention on their website, of course Silverlight based. Biggest of all though is the one that most people overlook ... according to Compete.com, Microsoft.com is the 8th most popular site on the Internet, with around 60 million unique visitors a month. With the homepage and also the download center now in Silverlight that's quite a bit of exposure. Conclusion: Flash has been around for a long time and in a lot of ways it's still better than Silverlight. You have to put it in perspective though, Flash is now moving into version 10, whereas Silverlight is in beta on version 2. Microsoft, however, has the benefit of leveraging years of work on the programming side whereas Actionscript is relatively new and has only recently started moving from a scripting language to more of a programming interface for Flash. So bottom line it depends on your needs and resources, if you have a bunch of .NET Developers and a client that wants a RIA then it's really a no brainer ... Silverlight is for you. If you have a client that needs a full scale business application on the web, Silverlight might also be for you as you have a full scale development framework to leverage. If, however, you have a client that wants a cutting edge UI with 3D integration, then Flash might be a better option. Either way RIA's are the future for business applications and if you want to pitch a solution to your client be sure to consider either Flash or Silverlight apps as a way to deliver that solution to your client. --- Living to Code != Coding to Live

The Evolution of Philter Design Studios

2008-05-27T11:15:47Z

Hard to believe it's been over a year since I last posted. Like most other developers (except for those rare super diligent ones) work gets in the way of finding time to post useful information to my blog. However, I thought I'd take this time to introduce the recently formed Philter Design Studios team. Going from only a single developer (me) to a team has been quite an adjustment, but a positive one. Between the 4 of us, maybe the frequency of posts will increase. So here we are: Me (Phil Chung) (CEO) - Not much changes for me aside from having to take more time to manage the team and clients and still find time to do the actual dev work. Hard to believe it's been almost 10 years since I first picked up Flash. Kingston Fung (Lead Flash Developer) - Kingston is an Adobe certified Flash developer with over 8 years of experience. He was also a part-time instructor for a recognizable technology institution sharing his Flash knowledge. Currently he is working with the latest Flash and Silverlight technology to develop robust rich internet applications. David Pasieka (Flash Developer) - David has been involved with the digital world since a very early age when he was given a Sinclaire ZX81 home computer, and learned to program in Basic on it. He then proceeded through an Apple IIE, and Amiga 2000, and is now at home on PC's and Mac's. As someone involved a great deal with the Arts, David became involved in freelance Graphic Design off and on for approximately 8 years, before applying to the Digital & Interactive Media Design program at NAIT. It was there that he discovered a penchant for working with code, and he graduated with a specialization in Flash Development. Chris Nicol (.NET/Silverlight Developer) - Having moved to Canada from Ireland in 1999, Chris' education includes a Computer Systems Technology program as well as, more recently, a .NET developer program. Prior to graduating, he was hired by the company running that program to work as a .NET Web Application Developer. Chris' experience includes development of several online pizza ordering sites and the highlight of his career was his trip to Hawaii for the successful launch of Pizza Hut's Hawaii's ordering application. Along with programming, he is also addicted to soccer and golf. Look forward to entries not only related to Flash/Flex/AIR, but also Silverlight. I've had a lot of exposure to Silverlight over the past few months and I hope to share some of those thoughts in the coming days and weeks. As well, each of the team members have valuable things to share from their own experiences and I think we have a really good mix of skillsets.

Flash sites and photography rock stars

2007-04-19T15:44:56Z

Hey you with the camera...yeah, you... If you're interested in learning from 3 of the best photographers in the world (yes, I said world), you may be interested in attending YinYang Workshop. I recently developed the site for Dave & Quin Cheung of DQ Studios and Huy Nguyen of F8 Studio, and not only are they photographic rock stars, they are amazing people who are truly gifted and passionate about what they do. They are putting on a 3 day workshop in San Francisco in September of this year, and the seating is limited, so if you're interested, contact them right away! If you need proof of the quality of their work, check out DQ Studios' and F8 Studio's websites. They truly do AMAZING work and have won tons of international awards! On a related note, I also built a site promoting DQ Studios' new DQ QuiKeys, a workflow empowerment tool for use with Photoshop. See examples of what you can do with QuiKeys as well as tutorial videos by Dave & Quin themselves.

Apollo Widget - mxnaQUBE

2007-04-12T15:53:51Z

As I mentioned in a previous post, it really is an exciting time to be a Flash (Flex/Apollo) developer. This was reiterated to me as I spent parts of the past 2 weeks building an Apollo widget I call mxnaQUBE currently in beta version 0.5. I have to say I haven't had this much fun developing something in quite some time. Even though the API isn't nearly complete being that this is an alpha, there was enough there to build a widget (maybe it's an 'app', I don't know...) and one that I think I'll be using regularly. Here is the rundown: What does it do? mxnaQUBE is a way to view posts aggregated by mxna (Macromedia XML News Aggregator). It currently provides access to the newest posts, most popular posts and the ability to search posts. On top of that, it auto-archives all posts that are consumed by the widget. The best way to explain is to show it to you, so here are some screenshots: New posts are displayed and updated every 3 minutes (version 1.0 will include a preferences panel that allows you to customize this, among other things). Also, it prevents display of duplicate posts that are often found on mxna. You can search mxna based on keywords You can view the most popular posts from the last day, week, month, year or of all time. The mxnaQUBE automatically archives all posts that are downloaded to it, so you'll have a history of posts grouped by category and feed that they are associated with. There is a "mini" view that displays and cycles through only unread new postings. This provides a concise way to view new posts. As the name suggests, the widget is essentially a cube which can be rotated to see any of the views mentioned above. You can rotate the cube by "nudging" the arrows in the bottom corners :) Globally, the mxnaQUBE also implements tooltips as well as a connection status monitor indicating when you are online or offline. What will version 1.0 do? Version 1.0 will add functionality such as the following:

Right click menu (Apollo 1.0 WILL implement full control over the right click menu - Woohoo!)
Preferences panel to provide the ability to control global settings as well as customize which feeds you want to auto-archive.
Possibly additional cube views with the ability to choose the 4 views that are most beneficial to you.
Possible auto update functionality to fix bugs, add features, etc.

Other things I discovered while building it.

Building an apollo app in Flex Builder is really as easy as people have said it is. Adobe has done a good job of integration. Doing things like transparencies, window dragging, minimizing, closing, and working with files are super simple.
Alex Uhlmann's distortion effects are super cool :)
Data binding is sooooo simple and works so well it's amazing.
For the most part, skinning is pretty straightforward, however, I did run into a couple of issues. The scrollbar skins in the AeonGraphical skin fla don't seem to match the width of the default scrollbars. Also, i ended up scrapping my scrollbar skins altogether because for some reason when you use a custom skin for the scroll track, the ability to click the track to scroll gets killed altogether. Anyone have a workaround for this?
I love mxml more and more every day. To be able to extend mxml components is awesome. However, there is an issue with adding children via mxml to both the superclass and the child class as you get a compilation error. A workaround is shown by Peter Ent, but to be honest, I couldn't get it to work properly.
The Flex Style Explorer is a God-send.
To manage all of my embedded assets, I wrote a simple AssetManager that pulls in all embedded assets and provides a static class through which to access your asset (handy if you are using your asset in multiple classes).
Does anybody have a simple way to swap out HTML number codes for proper characters? For example, ’ represents the right quotation mark.

Where can I get it? Download it here NOTE A: This is a beta version and so I make no promises that it won't self destruct at some point. I have left it running for extended periods of time and it seems to function properly, however, if you do notice any bugs, please email me at phil@philterdesign.com. NOTE B: The data coming back from the mxna webservice can be slow at times (particularly the data for new posts) so be patient :). Please email me your feedback as it is appreciated. If you have any suggestions on things you would like to see, please feel free to email me those as well (not saying they'll get implemented, but it never hurts to ask). [Update] Apparently the fonts on the ComboBox and "GO" Button are not embedded properly. Not sure why since they work properly in all other components. Anyone run into these font embedding issues before? Also, it appears that the bitmap font appears to be blurred. Not really sure why. Any comments would be welcome. [/Update] [Update 2]Fixed the font embedding issue with ComboBox and Button. It was due to the fact that those components use bold versions of the fonts (which doesn't work with pixel fonts). Thanks to Kyle for pointing out that they weren't embedded properly. Just updated the fontWeight to "normal" and all is good. Also, the fonts are now sharp (they weren't previously because for some reason I set fontAntiAliasType to "advanced". The download link above has been updated with the new .air file.[/Update 2]

[Flexcerpts 201] - Other Relevant UIComponent Bits

2007-03-27T22:10:23Z

Previously, i discussed observations on UIComponent drawing. Before I follow with a simple example of how to apply that knowledge into extending a component, let's look at some of the other bits in UIComponent that might help you as you extend or build your own components (and that are used in the example I'll give):

If your component contains other components or displayable classes that only need to get added once, you should set them up in the createChildren() method. This method gets run once, when the component is initializing.
One of the things I love about Flex 2 is that it allows the creation of custom component styles with minimal effort. Basically, all you need to know is this: To create a new style, you use the "Style" metadata tag as follows in your component:
[Style(name="myCustomStyle", type="uint", format="Color", inherit="no")]
I won't go into details regarding all of the values for each of these tag attributes, but essentially, inserting this tag into your component automatically generates the style for you as well as events associated with style changes. The only thing left for you to do is capture the event and draw your component based on the value of the style. In order to do that, you use the styleChanged() method which looks as follows:
UIComponent.styleChanged(styleProp:String):void
When a style changes, this method is fired and gets passed the name of the style that has been changed (as you set in your metadata tag). Within this method you can use the new style value to draw the component. To access the value of your style, use:
UIComponent.getStyle(styleProp:String):*
This returns the value for your style.
Unlike AS2, AS3 allows you to override internal player methods and getter/setters. UIComponent does this on many occasions (for example, x, y, width, height, addChild, removeChild, ...) so that it can capture changes in value and dispatch events or add additional functionality where needed. This is cool, but there are times when extending UIComponent or any Flex component that you want to directly access those overridden methods/properties. The Flex framework exposes those within UIComponent in the mx_internal namespace using the "$" prefix. If you extend a component, you can access those by doing something like:
mx_internal::$height = value;
For example, your component might draw a simple box that you just want to size using width and height rather than redrawing the graphics every time. In that case you can use $width and $height. Not often used, but still handy to know.

Now that we're equipped with these additional bits, we're prepared to tackle a simple example...

Adobe myFeedz Tag Viewer

2007-03-26T18:11:31Z

After seeing myFeedz and looking through the API, I figured I'd build something visual out of it, and this Tag Viewer is what came out of it. Some of the features include:

Tag cloud and related post visualization
Favorite tag list
Tag search function that continually updates with tags
Drag scroll UI

For me, the most interesting aspect was the drag scrolling and experimenting with different ways to scroll things horizontally and vertically. I've started to port it over to Flex, however, the one big obstacle I ran across was trying to get drag scrolling to work with existing containers (unfortunately, when you turn off the scrollbars, you also lose the ability to set V and H scrollPosition). I noticed that the api urls tend to be quite slow in returning data (not sure exactly of the reason), so it's not as zippy as it could be. Also, the api really is currently limited to fetching tag clouds and posts, so it doesn't do everything that you can do through the myFeedz site. Give it a try!