Following my article on loading OpenX ads in Adobe AIR applications, I’ve written a very simple class to make it a little easier. This should be able to load in both image and HTML/text based banners with no problem.

This class will NOT run in the regular Flash Player. It requires Adobe AIR to function. Also, banner clicks from the Debug Launcher will NOT redirect properly (you’ll get a 404), but once the AIR app is compiled and installed links will work as they should and will be included in your OpenX stats.

Download OpenxLoader AS3 Class
Downloaded 265 times.

The Constructor Method

Extends the Sprite class.

OpenxLoader(w:Number, h:Number, url:String)

• w: width of the HTMLLoader
• h: height of the HTMLLoader
• url: URL to load in the HTMLLoader (the code of this page should have your OpenX invocation code with all applicable zones)

Public Properties

• html: Public reference to the HTMLLoader instance
• height: Height of the HTMLLoader instance
• width: Width of the HTMLLoader instance
• url: URL to load in the HTMLLoader instance (automatically loads the new URL when changed)

Public Methods

• refresh(): Reloads the content in the HTMLLoader instance

Basic Example

//Import the class
import us.studiochris.openx.OpenxLoader;

//Create a new instance of the class
var ads:OpenxLoader = new OpenxLoader(125, 125, "http://domain.com/open-x-ad-page.html");

//Add the OpenxLoader to the Stage
addChild(ads);

Auto-refreshing Example

//Import the class
import us.studiochris.openx.OpenxLoader;

//Create a new instance of the class
var ads:OpenxLoader = new OpenxLoader(125, 125, "http://domain.com/open-x-ad-page.html");

//Add the OpenxLoader to the Stage
addChild(ads);

//Create a new Timer to control the refresh rate
var t:Timer = new Timer(60000,1); // 1 minute refresh rate in milliseconds and we want to run it once

//Start the Timer
t.start();

//Add an Event Listener to the Timer and define the reloadAds function
t.addEventListener(TimerEvent.TIMER, reloadAds);

function reloadAds(e:TimerEvent):void
{
	//Call the refresh method of the OpenxLoader (has the effect of a rotating banner)
	ads.refresh();

	t.start(); //start the timer again so it'll call this function again in one minute
}

Flex 4 Framework Basic Example

The Syntax highlighter is wreaking havoc with the following code, but it should give you an idea on how to use the class. As an alternative, here’s the actual MXML file for the project.

		

				import us.studiochris.openx.OpenxLoader;

				private function init():void
				{
					var adloader:OpenxLoader = new OpenxLoader(600,600,"http://www.google.com");
					box.addChild(adloader);
				}

		
	

Here’s the Quick Fix

If you’re experiencing the same problem as me, the fix is to disable the menu strip at the top of the tablet’s work area.

• Open the Wacom Tablet Properties application from your start menu (or from the Control Panel).
• Select Functions from the Tool panel.
• Select Tablet Menu from the tabbed interface.
• For each of the 18 Tablet Menu Buttons, choose Disabled as the function.
• Enjoy using your tablet without the strange mouse cursor bug.

Wacom Tablet Properties application – aka – Wacom Driver Preferences

What about Intuos 3 and Intuos 4?

Other tablets in the Intuos line are apparently affected by this bug as well. Some in the Wacom forums have suggested that tablet buttons, touch strips and the new touch ring may cause the bug to appear as well. The updated driver released a few days ago may help solve the issue, but may not. I didn’t dig any further after fixing my own problem.

If you are affected and can’t find a fix, to change your mouse cursor back to the normal size, open the Mouse settings dialog from the Control Panel (simply called Mouse), select the Pointers tab and click the OK button to reset to your normal cursor theme.

Are there other solutions out there?

If any of you have any other solutions to the issue, or notice that the updated driver fixes the issue, add a comment to let everyone know.

The areas of focus in the release include:

• Copying & Pasting
• Transformations
• Color Management
• The Eraser Tool
• General Performance

For full details of what the update includes, check out the Release Notes from Corel.

Download the Update

The most prominent examples in the visual design for regular readers are the drop and inset shadows in the comment sections and also some of the buttons throughout the site. Of the buttons, the most complex are the glass (in Firefox) or metallic (in WebKit-based browsers) buttons in the mini-editor used while posting a comment or over in the support forum.

These little beauties use progressive enhancement with CSS3 for rounded corners, gradient backgrounds and stacked shadows to create their background effects – no images! Well, almost no images, CSS isn’t magic and can’t draw icons easily.

Here’s the CSS

a.glassbutton, .glassbuttons a{
	padding: 4px 10px;
	position: relative;
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#fafafa), color-stop(0.5, #fff), color-stop(0.6, #ddd), color-stop(0.95, #FFF));
	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
	border: 1px solid #BBB;
	border-top-color: #CCC;
	border-bottom-color: #999;
	border-right-color: #AAA;
	color:#333;
	text-decoration:none !important;
	-moz-box-shadow: 0 4px 4px rgba(255,255,255,.6) inset, 0px -9px 10px -4px rgba(255, 255, 255,1) inset, 0 -20px 1px -6px rgba(0, 0, 0, 0.125) inset;
	outline: none !important;
	}

a.glassbutton:hover, a.glassbutton:focus, .glassbuttons a:hover, .glassbuttons a:focus{
	background: rgba(0,0,0,.05);
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fafafa), color-stop(0.5, #fff), color-stop(0.6, #eee), color-stop(0.95, #FFF));
	border: 1px solid #999;
	border-top-color: #AAA;
	border-bottom-color: #777;
	border-right-color: #999;
	color: #222;
	}

a.glassbutton:active, .glassbuttons a:active{
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.25) inset;
	background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#f0f0f0), color-stop(0.5, #eee), color-stop(0.6, #ddd), color-stop(0.95, #eee));
	border: 1px solid #BBB;
	border-top-color: #999;
	border-bottom-color: #EEE;
	border-right-color: #999;
	color: #111;
	}

… and the Explanation

Firefox 3.5

• Uses a combination of multiple inset box shadows [-moz-box-shadow] and RGBA color [rgba(r,g,b,a)] to create glossy transparent buttons.
• Multiple shadows are achieved by adding a comma and simply typing in a new shadow, simple (don’t forget the inset property).
• The offset property of –moz-box-shadow is used to position the shadow inside the button, allowing for the illusion gradient effect, but with the added benefit of the gradient following the contours of the box.
• The use of RGBA color for the shadows makes the shadows partially transparent, leading to a much richer rendering.
• Changing the main color in the background CSS property will change the color of the buttons without having to recolor the shadows.
• An RGBA color for the main background color will make true transparent glass, but won’t be supported in IE.
• The same technique may work with XUL and Firefox theming.

WebKit – Safari & Chrome

• Since WebKit doesn’t support the inset property for box shadows, yet, I opted to use -webkit-gradient for the background for WebKit browsers.
• The final look isn’t as rich as the Firefox rendering, which follows the shape of the buttons, but it is a reasonable substitute.
• I didn’t use RGBA color for the gradient, so the background color can’t be changed easily; however, the color stops in the gradient can be changed easily.
• I haven’t dug too far into the AIR-embedded WebKit, but this may also work for HTML AIR applications.

Internet Explorer

• Without CSS3 support for gradients, shadows or RGBA, IE renders plain gray buttons.

Final Thoughts

As the web continues to move forward and CSS3 support becomes more widely available these techniques will begin to show up in more places, and I’m really looking forward to it!

Of course, there is always the opportunity for the these properties to be misused, just like Photoshop filters. But I like to look to the brighter side, used thoughtfully and in the right places, they add just the right amount of decoration for a more beautiful web browsing experience for the end user and quicker development time for designers. I’ll certainly be using a lot more in client projects.

What are you looking forward to most in CSS3, and what are your favorite techniques that can be used now? Please, share in the comments.

For AIR applications that have access to an internet connections, delivering ads via OpenX is very easy with just a little code. For this basic implementation, we’ll use AIR’s built-in WebKit browser, which accepts JavaScript delivery perfectly, by using an instance of the HTMLLoader class. This is the same approach I’ve taken with my own AIR application, Brush Manager, which is authored in Flash CS4 Professional. Being completely ActionScript based, the same code should be able to be used in the Flex environment (maybe with very few modifications for public and private identifiers). HTML/JavaScript based applications should be able to use a similar approach, if the ads aren’t already integrated completely into the code base for the app.

As a follow up to this post, I’ve turned this into an ActionScript 3 class for easy use in both Flash and Flex. Here’s the new post and download link.

Just a note that this WILL NOT work for Flash applications targeted to the Flash Player plugin – ONLY AIR applications.

//Import the HTMLLoader and related classes
import flash.html.*;
import flash.net.*;

//Create a new HTMLLoader instance to hold the ad(s)
var html:HTMLLoader = new HTMLLoader();

//URL of the OpenX delivery page
//this is a regular HTML document on your server with the OpenX invocation code
var urlReq:URLRequest = new URLRequest('http://domain.com/ad_page.html');

//Set parameters for the HTML component before adding it to the display list

//Width & Height of the HTML component
html.width = 125;
html.height = 125;

//X & Y positioning coordinates (relative to the parent movie clip/sprite/object)
html.x = 0;
html.y = 0;

//We want links in this component to open in the default system web browser
// If you don't do this, the link will open in the HTML component instead.
html.navigateInSystemBrowser = true;

//Give the HTML component a transparent background so it blends into the application background
html.paintsDefaultBackground = false;

//Add the HTML component to the display list
parentMovieClip.addChild(html);

//Load the OpenX delivery page
html.load(urlReq);

Additional Tips & Tricks

• CSS in the head of the delivery page can be used to style and position ad blocks.
• CSS should be used to clear any margin or padding of the default browser window. This makes positioning easier.
• Overflow may need to be hidden as well to hide scrollbars.
• JavaScript is always enabled in AIR (it is one of the base components), so normal JavaScript invocation methods work perfectly.
• Ad clicks may not work properly in the AIR debug player, but work perfectly in published and installed AIR files. Both impressions and clicks are tracked as they should be.
• For banner/ad rotation, either use JavaScript in the head of the delivery page or write a refresh script using a timer in ActionScript in your Flash document. Use the html.relaod(); method to refresh the HTML Loader instance in ActionScript.
• If there is any chance your application may not have access to an internet connection, use the air.net library to create a URLMonitor to test for connectivity and only attempt to load your ads if a connection is available. If your application is offline, trying to load the URLRequest will throw an ActionScript error.
• This method, extended a little, could be used to create an ad loader much like the one seen in YouTube’s video player with text-based ads.

Have anything to add?

Have any of you used any other or similar methods to integrate ads into an AIR app? What discoveries have you made?

Brush Package icon draft.

The full specification for the file format is still being written, but the in-progress draft is available for review and open for discussion here in this post (feedback, questions, and suggestions are welcomed in the comments!). The new Brush Package format solves every single problem discussed in the previous post amongst others.

Brush Package support will begin with the next version of the Brush Manager.

A Note to Brush Publishers & Painter Instructors

For those of you who switched to creating only Brush Manager compatible ZIP files – thank you! We all have to work together to make installing our shared brushes as easy as possible for users of all skill levels. This new format is intended to continue along the path to simplifying for those that use the Brush Manager, but also for those who do not. As the format shapes up, I’ll need your help once again to switch over to the new format instead of normal ZIP files. I’ll gladly offer help to make the switch if you need it, but with the automated process to be built into the Brush Manager, you shouldn’t – just click a “Package to Share” button, fill in some important details and be ready to rock.

Of course, there are more features that come into play with the new format, but I can’t go into that just yet – but it is going to be great!

The Beloved ZIP Format

In the beginning, ZIP was chosen as the format to use for sharing and installing brushes for a few good reasons:

• Painter “brushes” are really collections of individual files and folders. ZIP allows you to package all those loose files into a single file for sharing. Can you imagine downloading 27 files one at a time for brushes? I can’t.
• ZIP files are common and easy to make with built-in support in modern operating systems or with commercial or open source software.
• Many brush sets were already created and shared in the ZIP format, meaning those sets were already ready for the installer.

The honeymoon with ZIP is over though. While simple and easy, the ZIP format has introduced some problems in the installer and caused a lot of confusion for some users.

Here’s where it goes sour:

• ZIP is common. Anything can go in ZIP files, and anything does go in ZIP files. Is the ZIP on your desktop Painter brushes, Photoshop brushes, software, a bunch of Word documents or all those old files you couldn’t stand to look at anymore but didn’t want to delete? Yeah, mine too.
• Following the above, if you’re sure your ZIP file contains Painter brushes, are they organized in a library, a category or loose brush files? (I’ll wait while you check – no, don’t really go look.) The Brush Manager expects categories out of the box, and I believe you shouldn’t have to know that – it should just work.

  Random Fact: The Brush Manager will work with the others (libraries and loose files) as well, but maybe not the way you’d expect (Remember the goal, simple and easy, so I’m not going to publish how it works [it is all in the settings] with non-categories, but if you’ve figured it out – awesome!).

• For the Mac users, OS X is sometimes set to automatically unzip ZIP files for you after download. Then it tosses the ZIP file in the Trash – hey, we need that – just move it back to the desktop and continue with the installing.
• OS X also doesn’t follow all the rules with making ZIP files from scratch. These files cause the Brush Manager to choke and not install your brushes.
• Painter Brushes are cross-platform. There is no such thing as a “Mac Painter Brush” or “Windows Painter Brush.” Shared brush ZIPs usually have extra files in them that aren’t needed though. OS X doesn’t care about “thumbs.db,” and Windows will never use “DS_STORE.” These files are usually hidden on their respective platform, but the ZIP makes them visible and when they’re installed on the opposite platform, they’re not hidden anymore.
• Even worse, from recent updates, OS X adds yet another invisible “icon” file to some folders – and its name contains an illegal character for the Brush Manager. This one little file makes the entire brush ZIP useless (for the Brush Manager) on both platforms.
• This doesn’t relate to ZIP, specifically, but instead to the illegal character mentioned above. Some shared brush ZIPs contain illegal characters either in their filenames or in the category names inside to make them fancy and stand out. Let’s stop that – design a pretty icon instead! These characters/letters aren’t usually cross-platform and can make for some really ugly results with Painter and the Brush Manager.

There’s more, not relating to ZIP alone, but let’s just leave it at that. ZIP by itself just doesn’t make the cut  anymore.

Making the Bad Go Away

A change is on the horizon, and a new standardized file format that sticks to the goal will emerge that defines “Painter Brushes.” Your brush files won’t be mixed in with “that file of stuff I don’t want to look at anymore.” Before I post the in-progress plans, what would you like to see in a universal, easy to make and easy to share Painter brush package? What problems have you had with installing brushes?

From the outside, not much has changed between this version and the last, but there were a couple of very minor bugs fixed:

• Update install ran twice during the update process in earlier versions (this caused updates to take twice as long). During the next update cycle, the update will install only one time.
• The RSS panel at the bottom of the window loaded with a lot of filler text while waiting on to see if you had an active internet connection. That clutter has been removed. As a result, it takes the RSS panel a little while longer to populate, but at least you don’t see overlapping text while waiting.

You’ll also notice the large banner for painterLab.com (which is still in the works, but you may subscribe and know exactly when it launches!) has been removed and replaced with sponsor banners. Please visit and support the sponsors as they are helping to keep the Installer portion of the Brush Manager free for everyone and also supporting future developments. If you’d like to support development directly, you may also donate to the project with PayPal.

Also, I’d like to give a quick thanks to everyone for the kind words about the Brush Manager, here, in the forums and privately. Hope you all continue to enjoy it – things will only get better!