This Adobe AIR Application allows users to easily create magazine covers as entertainment where they can put pictures of themselves or their friends and modify the title of the magazine and headlines shown in the cover without the difficulty of using Design-Drawing Software. Users can also print their results in order to share them and keep them physically.
Suggested use of this product
The Magazine Cover Creator is recommended for companies such as magazines, newspapers, and other printing materials to be used as an entertainment tool that people can download from the company’s site and install it in their desktop giving the company the opportunity to remain in the user’s machine whenever connected or not to the Web, and give presence and popularity to the company’s website and products trough this interactive feature.
How to make Separate HTML Windows in Air
In order to create this application, I used Adobe Flash CS3 Professional and Adobe Air Beta 3 (Just a couple of days before the release of Adobe Air 1.0).
After creating the assets (Some shapes to work as tool boxes and work areas) we dragged in from the library a couple of simple buttons, radio buttons and text fields.
With all the assets set up, the code started using the different components to modify the magazine cover preview, having to modify text, color pickers and draggable objects, everything to let the user set his own names and positions of the texts as you can find in the code and application.
Aside of that we used the specific classes provided by Adobe Air to be able to drag certain kinds of files to the work area directly from the desktop in order to personalize the magazine cover main picture. This has been done using: flash.desktop.NativeDragManager;
import flash.events.NativeDragEvent;
A couple of different classes that hadn’t been used in the examples given in class are the:
flash.display.NativeWindow;
flash.display.NativeWindowInitOptions;
…both were used in the Magazine Cover Creator to generate Pop-Up Windows while trying to print a document without dragging an image to the application first, or while clicking the “about the magazine cover creator” button.
The process to create the separate windows in Adobe Air, in this case used to display HTML documents, is the following:
private function popNewWindowHTML(e:MouseEvent) {
(Create a new Native Window variable and set its characteristics as needed)
var options:NativeWindowInitOptions = new NativeWindowInitOptions();
options.maximizable = true;
options.minimizable = true;
options.resizable = true;
(Create a HTML Loader with its “Root Window” set up as follows using a rectangle to set the needed dimensions)
var html:HTMLLoader = HTMLLoader.createRootWindow(false,options,true,
new Rectangle(100,100,600,400));
var newWindow:NativeWindow = html.stage.nativeWindow;
newWindow.alwaysInFront = false;
(Indicate the URL and add a complete handler to launch the window with the specified title)
html.load(new URLRequest("app:/html/about.html"));
html.addEventListener(Event.COMPLETE,function (event:Event):void{
html.window.document.title = "About the Magazine Cover Creator";
(Finally, activate the new window)
newWindow.activate();
});
Finally, don't forget to include the .html files (unless you are loading pages from the Web) in the Installer Settings so that the program can find them in the user's computer even when he is not connected to the Web.
I hope this feature of Air helps you to develop better desktop applications.
Carlos Ruano.