Mac style popups – its the new LightBox

Filed under: Flex — Wrote by Campbell on Monday, July 16th, 2007 @ 10:54 pm

UPDATE: New example with source HERE

I was pointed to a web based SVN interface written in Ruby on Rails today. Warehouseapp.com has more grain than an 8mm film from your dads era, and still looks sweet. The work by Rick Olsen and Justin Palmer is pretty well know in the rails community but some how these guys manage to improve each time. Thier latest app brings you what I have started seeing more and more on the web. What might just be the next LightBox effect. I can only really describe it as the mac style alert which I have seen only on occasions in the wild (I dont own a mac……yet).

Hit THIS url and click the login (at the top left hand side of the page). Looks sweet huh? Well I had a play and implemented it in Flex using the PopUpManager. You can parent Popups to components or the application itself with diferent modal effects.

 

I have put a live version up HERE to play with for now and I will release the source in a couple of days after I have finished preparing my FXUG meeting presentation :) And yes the file is huge, as I put big graphics in :)

Flex – dynamic icons part 2 the answer

Filed under: Flex — Wrote by Campbell on Sunday, July 15th, 2007 @ 2:33 am

The answer that I came up with to allow drawing to icons isnt pretty, but it works. And without re-writing your own component it allows you to do what you want.

Events can be used to carry more than just the event string and where the event originated from. It can even carry bitmapdata ;)

The proper alternative to this would be to create your own button class that had a drawToIcon method, which rolled through each of the buttons states icons and drew the bitmapdata to them, but this sort of thing wouldn't be nessesary if a lot of the variables held in the components weren't private instead of protected.

The example can be found HERE and right click to view source.

If you were to use this for a tree component I would actually think about creating your own TreeItemRenderer and drawing to the stored reference of the icon instead.

 

Flex – dynamic icons on buttons and trees etc

Filed under: Flex — Wrote by Campbell on Sunday, July 15th, 2007 @ 1:48 am

I have had this question asked of me 3 times in as many weeks so I thought it were time to share the answer. The question? In flex when you specify an Icon for a tree or a button etc you are asked to provide type "Class".  So you embed your image:

[Embed(source="calendar.gif")]
private var someImage:Class

and then you specify the icon to be:

<mx:Button x="478" y="216"
label="Icon button" icon="{someImage}"/>

you can also specifiy the icons through the style sheet, say referencing an embedded image, but well get to that later.

What the icon property is on most flex controls is of type "Class". This property is a reference the physical class ie "com.xsive.assets.SomeDynamicIconClass".
When the control instanciates itself (creates itself) it checks if the icon property is set, or not null, then creates a new instance of this class, ie:

var icon:Class = new Class();

So after setting my icon="{com.xsive.assets.SomeDynamicIconClass}" the control will actually be calling:

var icon:SomeDynamicIconClass = new SomeDynamicIconClass(); 

Ok your still with me so lets continue. When you embed an image using:

[Embed(source="calendar.gif")]
private var someImage:Class

the compiler actually turns this into a totally new class which extends the "BitmapAsset" class. This new class on creation has the bitmapdata of the image you embedded. In my test the class name is:

"someImage = ButtonTest_someImage$ (@7ae99c1)"

so when I set icon="{someImage}", I am actually asking the component to create a new ButtonTest_someImage

var icon:ButtonTest_someImage = new ButtonTest_someImage();

and use that the bitmapdata from that as the icon. I hope your still with me and this still reads as english to you.

The big point to get here is that you cant create an instance of a say canvas

var canvas:Canvas = new Canvas();

and convert that instance to a "Class" and give it to a component to use as an Icon, icon=canvas;

This can be very limiting. and to top it off the icon reffence is a private variable on most controls so accessing the reference cannot be done by either extending the control or from the outside of the control. Grrrrrrr this is one of my pet peves sometimes with controls as if this were a protected variable we could extend the control and do what we wanted with it. Bring on Flex 3 and the public input to the code.

Remember I mentioned embedding images in the style sheet to set the icons for button. Well this does the same thing. It creates a new class of type "BitmapAsset" and when the component asks getStyle('buttonOver');
the function actually returns a class reference to "ButtonTest_someImage" or whatever the compiler turned your image into.

So how do I set the icon on a button and allow drawing to it as a function on the button? The answer is what we refer to as a hack. I warn you my answer may not be the best or that pretty but it does work. I will split it into a new post and link to it in 20mins. 

UPDATE: HERE IS THE LINK 

Actionscript UML and code generation – SEX-C AIR app!!

Filed under: AIR, Flash, Flex — Wrote by Campbell on Saturday, July 7th, 2007 @ 12:44 pm

Probably the sexiest AIR app I have seen so far has to be Safron, and I just had to share it before I started licking my screen. It seems it was developed and designed by Samuel Agesilas Pastel, dude well done. Let me know when I can stop licking my screen and have a play.

 

Saffron was entirely built in Flash CS3 using Actionscript 3.0 and the Elemental SDK and basically shows a good use of flash the AIR platform. I still remember generating .Net class diagrams in Visual studio 2004 and they never really looked like this. I cant tell you how well it works as there is no public release. But some features are (great for an AIR app):

 

  • Wireframe editor allows both developers and/or designers to create wireframes for their projects
  • Allows for Actionscript 2, Actionscript 3, PHP4 and Java Code generation directly from the app.
  • Sports an entirely customizable UI which contains several dock-able panels that can be placed anywhere by the user.
  • Enterprise level capability having the ability to support models with hundreds of classes without performance degradation
  • Beautiful UI
  • Integrated Version Control
  • Sophisticated printing options give you complete control over how your diagram is printed
  • Cross Platform on both OS X and Windows
  • Full round trip support for both AS2 and AS3 (Java will soon follow), always keeping your model and code in synch every step of the way.

The neat thing to note in the features is that it has version support (might be svn who knows). One feature I would like to see is database intergration to create tables (very handy for Ruby on Rails)

Live Streaming event video, a revolution in waiting?

Filed under: Flash, Flex, General — Wrote by Campbell on Sunday, July 1st, 2007 @ 2:20 am

I had an interesting experience this weekend. Not being able to join in and try/buy a iPhone I decided to tune into some of the live streaming video of the lines outside the apple stores. Apart from seeing Bill Atkinson's home made iPhone made from maple wood, and waiting for him to cry out "Marty you have to reach 88mph" (he kinda looks like doc Brown from back to the future) it was interesting.

I watched Zooomr's coverage on Ustream.tv which used a java client. It was pretty nasty, burping still frames and dropping connections all over the place. I am sure they learn't some good lesson's and will be improving their service. But it was a great way to get some media coverage that wasnt of some half naked fat guy that is a profession queue camper.

Techcrunch covered the idea that it might be the seed of a revolution HERE. Its nothing new but maybe the world is ready for it. I remember my first Job out of Uni (well in the profession I studied), was at New Zealands main broadcasters Online wing. We made live shows specifically for the web and streamed live events. I learnt alot!

What alot of people are missing is the basic things that even startup TV stations have to do:

  • Good lighting
  • Good sound
  • Good picture
  • Good service
  • GOOD CONTENT

Master those and your well on your way to smashing Justin.tv. The problem I guess comes from the lack of hardware suited to the task. We used to nick off with a news van from the "real tv" people (no more than a mini van), strap 2 office desks in and strap in all the monitors, mixers, encoders etc, then cable tie a wireless antena to the roof racks. Then run out long cables to decent DV camera's and go nuts (this was waaaaay back in 2000).

Through this setup we covered fashion shows, rugby events, strange competitions, and real news. We even had interactive links in the video (ahhh windows media 2000 oh how I hate thee) 

Being a film student I filmed and edited the stuff and published it online. But the most depressing thing was that the previews of the local soaps always got higher rankings than this custom made content. Maybe the world is ready to watch live events from a non bias, non conglomerate, media sources.

If anyone is planning one of these things feel free to ping me as I have learnt a lot through the mistakes we made, and would love to see this sort of stuff start to take off again. Props to Zooomr for taking the initiative and doing what they did, I also understand the guys at gizmodo did the same thing. </2centsworth>

© Flex developer, Campbell Anderson, from New Zealand – xsive blog -