Today I came across to a post by Manfred Weber, which points to a discussion at Adobes Alchemy forum. There you will find a great solution published by metalbot for encoding JPEGs using Alchemy. It’s based on a C library for JPEG image compression by IJG and it’s pretty fast (2,7 sec. for 2000 px x 1500px ) !!! Check out the example:

Example

Click the image to see the live example. Feel free to post a comment about your your results!

Download Full Source

I have changed the original C code a little bit for manipulating the quality of an encoded image as well. It’s just one line added to “as3_jpeg_wrapper.gg” (line 78) jpeg_set_quality(&cinfo, quality, TRUE /* limit to baseline-JPEG values */); Therefore the “as3_jpeg_wrapper.swc” located within the *.zip is recompiled for using this feature in your Flex project via as3_jpeg_wrapper.write_jpeg_file(baSource, WIDTH, HEIGHT, 3, 2, quality);

Full source of the Flex based example above: AlchemyJPEGEncoderFlexExample.zip (Downloads: 4207)

BTW: You will find the original source of all C based classes published by metalbot here.

Tips

I struggled around to set up Alchemy and to recompile the IJG library and the “as3_jpeg_wrapper.swc”. To avoid this, here are some tips:

• Instruction for set up Alchemy by Lee Felarca (zeropointnine). Best instruction I’ve found so far for set up Alchemy.
• Recompiling the SWC of metalbot’s source following its “README.txt” and using its “Makefile” failed: To avoid this issue, after compiling the C library of jpegsrc you have to move the following files to $ALCHEMY_HOME/jpeg/ as well: “jconfig.h”, “jmorecfg.h” and “jpeglib.h”. Check out the comment by notnick here

[UPDATE 06/22/09] There is another great test for encoding images using Alchemy by Mateusz Malczak, which includes an asynchrounous example as well: Alchemy – asynchronous jpeg encoding Thanks to xoestudio for pointing to this via twitter! [UPDATE]

Have fun

-Jens

ThunderBolt AS3, which is a lightweight logger extension for Flex 3-4, AIR and Flash 9-10 applications, has been updated to version 2.2.

Check out the new features:

New features

1. Logging of package names + class names + code line numbers (Flash Debug Player required).

   

2. ThunderBoltTarget for using Flex Logging API improved.
3. SWC updated for using Flex 4 (Gumbo)
4. ThunderBolt AS3 Console uses a certificate of Thawte sponsored by Adobe.

   

5. ThunderBolt AS3 Console is updated using latest version of Adobe AIR v.1.5.1
6. Issue 10 fixed: “Command + Q not working in OS X“
7. All examples and documentation has been updated as well.

Happy Logging

-Jens

It’s never to late to learn a new (programming) language So I’ve been starting to learn Cocoa, Apple’s Objective-C based programming environment for Mac OS X.

My “Cocoa”-trip started with building a little application called “WSPluginSwitcher“, which is a Cocoa based tool for switching Flash plug-ins on OS X (Leopard).

Check it out – it’s open source, including its source code: WSPluginSwitcher on Google Code

Screen shots

Download WSPluginSwitcher including full source

You can download WSPluginSwitcher at its Google Code project.

To get the full source checkout the latest code using WSPluginSwitchers repository at Google Code.

It’s open source!

BTW: I’m very new to Cocoa, so I’m very happy about any feedback

Helpful links for learning Cocoa as an ActionScript Developer

About 10 days of programming a new language is not enough to make a real statement… However, what I’ve have learned so far is: To learn Cocoa as quick as possible you will need a good book! Apple delivers tons of Cocoa guides, but it takes me (too) much time to find basic solutions. I know why I love Adobes Flex and AIR docs

So I highly recommend the book called “Cocoa Programming for Max OS X” by Aaron Hillegass, which helps me a lot!

Further helpful links (not only for ActionScript Developers) are:

• Cocoa Dev Central: Learn Cocoa
• Theocacao: A Quick Objective-C 2.0 Tutorial
• Andy Jacobs: “Cocoa touch for actionscript developers (basics)“, “AS3 to Cocoa Touch: Array’s“, “AS3 to Cocoa touch: XML“, “AS3 to Cocoa touch: JSON (Part 1)”
• Keith Peters: Gravity Tutorials for iPhone Part 1, Part 2, Part 3, Part 4, Part 5

P.S.: Happy Flash plug-in switching using WSPluginSwitcher!

For all those who not familiar with it: ThunderBolt AS3 is a lightweight logger extension for any ActionScript 3 applications based on Flash CS3, Flex or Adobe AIR using Firebug or its own ThunderBolt AS3 Console.

Here are some tips and tricks using ThunderBolt AS3:

1. Using different log levels

   ThunderBolt AS3 supports different log levels, which based on the supported levels by Firebug, such as “info”, “warn”, “error” or “debug”. It’s pretty simple to use it:

   log level example ( Download code )

   1. import org.osflash.thunderbolt.Logger;
   2.  
   3. //
   4. // some log objects
   5. var myNumber: int = 5;
   6. var myString: String = "Lorem ipsum";
   7.  
   8. // INFO log level
   9. Logger.info ("Just an info message");
   10. //
   11. // DEBUG log level
   12. Logger.debug ("A debug log ", myString);
   13. //
   14. // WARN log level
   15. Logger.warn ("A warn message", myNumber);
   16. //
   17. // ERROR log level
   18. Logger.error ("An error log ", myString);

   Screen shot using Firebug:
   

   Screen shot using ThunderBolt AS3 Console:
   

2. Logging one or more objects at once

   ThunderBolt AS3 logs more than one objects at once. It could be primitive types (int, uint, Number, Boolean, …) or more complex data such as an instance of any classes or nested objects. Here an example:

   Example for logging few objects at once ( Download code )

   1. import org.osflash.thunderbolt.Logger;
   2.  
   3. //
   4. // some log objects
   5. var myNumber: int = 5;
   6. var myString: String = "Lorem ipsum";
   7.  
   8. var myObject: Object = {    exampleArray: ["firstValue", "secondValue"],
   9.                             y: 10,
   10.                             exampleString: "Hello",
   11.                             nestedObject: { x: 100,
   12.                                             y: 200}
   13.                         };
   14.                                                
   15. // Logging an object with nested items
   16. Logger.info ("Logging an object with nested items ", myObject);
   17. //
   18. // Logging more objects at once
   19. Logger.info ("Logging more objects at once ", myString, myNumber, myObject);

   Screen shot using Firebug:
   

   Screen shot using ThunderBolt AS3 Console:
   

3. Using the Flex Logging API

   ThunderBolt AS3 supports the Flex Logging API using its own log target called ThunderBoltTarget. To use it you will need to use and import the ThunderBoltTarget.as as well:

   Example for using Flex logging API ( Download code )

   1. import mx.logging.Log;
   2. import org.osflash.thunderbolt.ThunderBoltTarget;
   3.  
   4. // init ThunderBoltTarget
   5. _target = new ThunderBoltTarget();
   6.  
   7. /*                             
   8. You can disable the time, level or category as well                           
   9. _target.includeTime = false;
   10. _target.includeLevel = false;
   11. _target.includeCategory = false;                   
   12. */     
   13.            
   14. _target.filters = ["de.websector.playground.ThunderBoltTargetExample"];
   15. Log.addTarget(_target);
   16.  
   17. // start logging
   18. Log.getLogger("de.websector.playground.ThunderBoltTargetExample").info("Just an info message.");

   Screen shot using Firebug:
   

   Screen shot using ThunderBolt AS3 Console:
   

4. Stop and hide logging

   To release your project you might to disable all logging data. Then put the following line into your code.

   1. Logger.hide = true;
   2.  

5. Show a memory snapshot

   Make a memory snapshot whenever you want:

   1. Logger.memorySnapshot();
   2.  

6. Show or hide a time stamp

   Lets make a time stamp. The default value is “true”. To hide the time stamp use this:

   1. Logger.includeTime = false;
   2.  

7. Using the new ThunderBolt AS3 v.2.1beta v.2.0 and its Console

   The new version of ThunderBolt AS3 (v.2.1beta v.2.0) detects either Firebug is installed or not. If not, then it uses the well known trace() method to log all data into “flashlog.txt”. You can enforce this process using:

   1. Logger.console = true;
   2.  

   To show all information in a well defined structure I’d recommend to use the new ThunderBolt AS3 Console. It’s a handy tool to log any AIR application as well

8. Using the ThunderBolt AS3 Console for logging ActionScript 1 or 2 projects

   As described above ThunderBolt AS3 Console follows a simple principle: It reads just all information logged by the ThunderBolt AS3 Logger (v.2.1beta v.2.0) into “flashlog.txt” and shows it in a hierarchal order based on different log levels.

   That means you can use ThunderBolt AS3 Console for logging any AS 1 or 2 projects too . Just call a trace() method as follows. Note the prefixes named “info”, “error”, “warn” or “debug” followed by a whitespace at the beginning:

   trace() example for using ThunderBolt AS3 Console ( Download code )

   1. //
   2. // tracing an info log level
   3. trace ("info Here is an info message to display using ThunderBolt AS3 Console");
   4. //
   5. // tracing an error log level
   6. var myString: String = "hello console";
   7. trace ("error Here is an error message" + myString);
   8. //
   9. // tracing an debug log level
   10. trace ("debug Here is a debug message" + myString);
   11. //
   12. // tracing a warn log level
   13. trace ("warn Here is a warn message");

   Screen shot using ThunderBolt AS3 Console:
   

9. Any issues with the Flash Player security sandbox using Firebug?

   If you have any security issues with the Flash Player security sandbox using ThunderBolt AS3 and Firebug set within your HTML template the value of the parameter named “allowScriptAccess” to “always”. For more information check Adobes Flex 3 Help: “About ExternalInterface API security in Flex”

10. Issues using ThunderBolt AS3 Console on Windows?

    What a pretty sh…y thing: The ThunderBolt AS3 Console is currently available for OS X only. There are some issues using an opened AIR app and “flashlog.txt” at the same time on Windows. Check out this entry at Adobes AIR forum for more information. Hoping that Adobe will fix this issue in the future. So long, sorry for all the Windows user out there .

    BTW: Feel free to post here your request to Adobes AIR team as well

Open source!

ThunderBolt AS3 and its console is open source! Grab the source, change and adapt it. Or do whatever you want

Happy logging!

Study this document published in English, France and now in German, and you will have the perfect knowledge about building well structured applications based on Flash, Flex or AIR using PureMVC. Believe me, you don’t have to dig tons of resources, blog entries or forums, just study this document!

Grab the the “Best Practices” at the official PureMVC site! The German version will be there available within the next few days as well.

Cover of PureMVC’s “Best Practices Document” in German

At the first episode we’ve talked about some PureMVC demos I’ve created as well as about the experiences using PureMVC in my professional work. It was a lot of fun!

Check it out !

P.S. Cliff, thanks for the great interview! I’m very proud to be a voice of PureMVC

For a current project called “WS-Slideshow” I’ve started to develop a tool, which allows the user to customize its own “WS-Slideshow” pretty easy. It based on Adobes AIR Beta 3 Adobes AIR 1.0.

The current prototype implements the drag-and-drop and file system API’s using Adobes JPEGEncoder to create image thumbnails quick and easy. Therefore the prototype is called “WS-ThumbsGenerator” .

The code behind based on Tom Bray’s easyMVC concept, which is the first choice for such prototypes like “WS-ThumbsGenerator”. Fore more information about easyMVC check out the excellent tutorial of Jon Baker as well.

Anyway, I’ve decided to share the full source of the prototype for the community, it may be helpful for anyone.

BTW: The “WS-Slideshow” is a free Flash based slide show developed in AS3 using PureMVC. A desktop version based on Adobes AIR is in process. Check it out!

Screen shots

Install now!

Downloads

AIR file: WS-ThumbsGenerator.air (Downloads: 1161)
Full source: WS-ThumbsGenerator.zip (Downloads: 984)

Files are open source and licensed under the Mozilla Public License 1.1.

Have fun!

-Jens

Jesse Wardens great article called “10 Tips For Working With Cairngorm” has given me the idea to share 10 tips using PureMVC as well. I’ve been using PureMVC intensively for about six months now and – that’s not a secret – I’m loving it. Anyway, all my following opinions are based on my personal experiences only.

1. Think in (Pure)MVC

   How do I start using PureMVC? Short answer: Just think in (Pure)MVC! As its named says, PureMVC based on the classic Model-View-Controller design meta-pattern. Using the Facade-pattern you don’t instantiate the core actors directly, but every member of PureMVC has its own and clear defined role:
   - Proxies = Model

   - Mediator and its ViewComponents = View
   - Commands = Controller

2. Create an API for View Components

   A View Component might be a standard UI component (e.g. DataGrid) or a custom component (e.g. a world within a game) or whatever. Don’t use its public methods directly. In order to change its state or behavior create an API.

   One of the advantage of PureMVC is to be neutral to the technologies being used. An example: I’ve built a “pure” Flash application based on PureMVC without using the Flex Framework. The same app will be ported to an AIR application for using AIR’s great File system API. The View Components have to be changed using the Flex Framework, but not the Mediators or any other actors of PureMVC.

3. Use one Mediator for multiple View Components

   To coordinate more than one View Component closely, use one Mediator only. In other words: Not all Views need a Mediator. For example: Assume a ApplicationControlBar containing a TextInput , and a Button or something else. Then create just one Mediator for the ApplicationControlBar called ApplicationControlBarMediator and refer to the missing components casted as a second, third, etc. View Component.

4. Let’s Events bubble up

   What happens if you don’t want to use multiple View Components within a Mediator? In order to handle user interactions with multiple View Components let’s bubble Events from the nested children of a View Component up.

   For example: Clicking any Button within a View Component will fired up a custom Event which the Mediator is listen to. So the Mediator don’t have to know about the existing Button or about any other child of its View Component, just about the custom Event bubbled up.

5. Communicate using Notifications as often as possible

   Notifications are the “Events” of PureMVC. For communicating between the three tiers Model, View and Controller use Notifications for the following scenarios as often as possible:

   (communication from -> to)
   - Mediator -> Proxy (via mapped Commands)
   - Proxy -> Mediator
   - Proxy -> Command
   - Commands -> Mediator

   Even if it’s possible to retrieve a Proxy from a Mediator, don’t change the Proxy from a Mediator directly rather than sending a Notification using a mapped Command. It’s a bad practice to change a Proxy (Model) from a Mediator (View) directly without using a Command (Controller).

6. Use Commands / MacroCommands as often as possible

   Commands are doing the job at the Controller side: Retrieving and interacting Proxies, communicating with Mediators or executing other Commands. Even if a Command used only once or it has only two lines of code, use it as often as possible. To execute a Command once again anywhere or anytime within your application, you have to send just a Notification. In the future it’s easy to enlarge the Command with more complex actions. And – that’s very important – you always know, who the actor for changing the Proxy (Model) is.

   Question: Have you had to execute more than one Command in a particular order? Use MacroCommands to execute multiple SubCommands (which means “simple” Commands) sequentially.

7. Use Remote Proxy to send and receive server-side data

   To send and receive data between the application tier use Proxies called Remote Proxies. That’s not a special kind of a PureMVC Proxy, just a location based on a Proxy to organize the server calls such as HTTPServices, RemoteObjects or whatever.

   For example: To call a server-side RemoteObject to login a user create Proxy called LoginProxy. The LoginProxy does all the job to communicate with the server-side, which means sending and receiving data. Whenever you’ll change the server-side implementation for the LoginProcess, you’ll have to change one location within your application only – the LoginProxy.

8. Remove unused Mediators

   In some cases you don’t use a Mediator and its View Components anymore. Then remove the Mediator using facade.removeMediator(MyMediator.NAME); in conjunction with a self created destroy() method to remove the ViewComponent including all listeners, timer, references, etc. for a successful garbage collection.

9. The Power of VO’s (Value Objects)

   The place to store data within the Model are the Proxies – that’s right. The View Components have no need to know the Facade and the rest of the PureMVC application – that’s right, too. This means that the View Component has no access to the Model data directly.

   To avoid this issue store within the View Component a reference to the data using Value Objects (VO’s). The VO’s are not a core actor of PureMVC and in conjunction with the Data Binding feature of Flex are a powerful way to react changes in the Model data without breaking rules.

10. Courseware available

Cliff Hall has done an awesome job: You’ll find not only excellent documentations about the “Framework Overview“, “Best Practices” and a “Conceptual Diagram“, also a very, very, very helpful Courseware. Check it out!

Enjoy PureMVC and Happy Holidays !

AsUnit is the first choice for Test-Driven Development using pure Flash applications. However, currently you find only one test case for asynchronous data using an instance of the flash.net.URLLoader class, but it seems neither for calling methods based on Flash Remoting using the flash.net.NetConnection class. So I decided to add a new test case called asunit.framework.RemotingTestCase” to the AsUnit Framework and hope it would be helpful for the community – check it out

Examples

Successfully asynchronous tests

Unsuccessfully asynchronous tests

Source

For more information check out the comments within the code, too

The following test example based on my Flash Remoting example using OpenAMF described at the previous article called “Best practices: Custom class mapping using OpenAMF and AS3 (Flash CS3 – not Flex)”

Download

Source including test example files:
RemotingTestCaseExample.zip (Downloads: 937)

Happy (asynchronous) testing!

Acknowledge

• [AS3] Jonathan Marston: asunit testing with flash cs3 and actionscript 3
• [AS2] Tim Beynart – FlashCodersNY: ASUnit Step-By-Step: Part One
• [AS2] Tim Beynart – FlashCodersNY: Unit testing for ActionScript 2.0, Part 2