Apple makes a splash with their innovative rich media advertising network, surprisingly named iAd. I’ll be exploring the iAd Framework to learn more about how to creatively apply this technology in new and existing software experiences.
iAd Framework Overview
The iAd Framework provides a foundational library for developing rich media ads that bring Sight, Sound, Motion and Emotion to the user experience around advertising. The idea is that the more interactive and compelling the ad experience itself is, the stronger the impression is on the end-user yielding a more profitable campaign.
iAd JavaScript Library
This JavaScript library is new for iPhone OS 4 and is the enabler for creating an iAd experience. It’s available as a complementary download to the Xcode and iPhone SDK and contains the core iAd JS files and other samples, tests and assets.
iAd JS basically separates an iAd into four basic elements; the Banner Ad, the Ad Unit Transition, the Splash Page and the Core Ad Unit.
The Banner Ad
This is the space the application developer designates as advertising real estate. Banner Ads are constrained to either a portrait dimension of 320 x 50 pixels or to a landscape dimension of 480 x 32 pixels. Both sizes need to be supported in iAds due to the fact that the ad could be presented in both portrail or landscape-mode applications.
Banner Ads can be implemented either as a static image or as a webpage using HTML5, JavaScript, CSS and/or WebKit. When using WebKit, note that ad arrival animation is limited to the 3D Fold Out, 3D Boxes, Plane Flip, Drop, Fade In and Wipe effects. Content change animation is limited to 3D Box Rotation, 3D Switch, Drop, Fade, Wipe, and Panel Flip effects. Additionally, all content can be fetched dynamically.
All Banner Ads are displayed in a subclass of UIView call ADBannerView and communicate with the application through the ADBannerViewDelegate protocol. Both ADBannerView and ADBannerViewDelegate are classes in the AdLib framework.
HTML5, JavaScript and CSS Implementation
I start my implementation by creating a super simple HTML5 document named index.html with a 320x50px canvas and JavaScript that draws a background image on the canvas’ context when the document loads.
<!doctype html>
<head>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('iadcanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var myImage = new Image();
myImage.onload = function()
ctx.drawImage(myImage, 0, 0);
myImage.src = "radarbg.png";
}
}
</script>
</head>
<body onload="draw();">
<canvas id="iadcanvas" width="320" height="50"></canvas>
</body>
</html>
This code renders a page that looks like this;
We can add some animation to our iAd by implementing an animation loop with the setInterval function. Check out the code below;
<!doctype html>
<head>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById('iadcanvas').getContext('2d');
var myImage = new Image();
myImage.onload = function(){
var centerX = 160;
var centerY = 40;
var radius = 200;
var x, y, ar, angle = 0;
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = "rgba(0, 255, 0, 0.65)";
var radianConversion = Math.PI/180;
var intervalId = setInterval(function(){
ctx.drawImage(myImage, 0, 0);
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ar = angle++ * radianConversion;
ctx.lineTo(centerX + radius * Math.sin(ar), centerY + radius * -Math.cos(ar));
ctx.stroke();
}, 20);
}
myImage.src = "radarbg.jpg";
}
</script>
</head>
<body onload="draw();"><canvas id="iadcanvas" width="320" height="50"></canvas></body>
</html>
This code animates a radar bar in the iAd (see screenshot below). Notice in the code above that we do as little as possible inside the actual animation loop.
Testing your Banner Ad with the iPhone Simulator
Now that we’ve reached a good milestone with our HTML5, JavaScript and CSS banner ad implementation, it’s a good time to test the ad on a device. After installing the iAdJSDeveloper package in your development environment, you’ll have a nifty app call iAdTester you can use to easily test your iAds in the iPhone simulator.
iAds are delivered to the device in an iAd Bundle. To create the .ad bundle, we start with creating the following folder structure in our iAd workspace;
innercircle.ad (top-level folder)
AdUnit (contains the static HTML file for the main content of our ad…more on this coming soon)
Creatives (contains the banners)
basicHTML (our single HTML banner)
HTMLBanner (contains the static HTML file and associated images for our HTML banner)
<…we can add more HTML/Image banner folders as appropriate…>
Once you’ve created the folder structure above, we create a new iAd Property List file name iAd.plist in the top-level folder. We edit this file to include the appropriate keys and values for our iAd. The supported keys and values are;
| Key | Description | Possible Value(s) |
|---|---|---|
| action | what to do when a user touches your banner | landing-page web call |
| initial-orientation | the orientation the iAd should be viewed in when it first launches | portrait |
| supported-orientation | which orientations the iAd supports | portrait landscape all |
| scrolling | is scrolling allowed in the iAd | FALSE |
| background-color | the background color to use for the banner | 7BA9C4 (in hex format) |
| accessibility-description | value read to the user when accessibility is enabled | Hello You, this a description of this ad |
| external-url | the url to the ad if it is hosted externally rather than in an iAd bundle | http://www.512apps.com/external |
| webarchive-url | the url to an externally hosted web archive | http://www.512apps.com/webarchive |
| name | this value is read to the user when accessibility is enabled, typically used in user prompts | Hi, this is the name of my ad |
Our iAd.plist file contains the following property keys and values;
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>background-color</key> <string>#000000</string> <key>action</key> <string>landing-page</string> <key>initial-orientation</key> <string>portrait</string> <key>supported-orientations</key> <string>portrait</string> <key>scrolling</key> <false/> <key>accessibility-description</key> <string>InnerCircle Ad</string> </dict> </plist>
Then, we copy our HTML5, JavaScript and CSS resources for the banner we implemented above into the basicHTML folder. Lastly, we create a placeholder static HTML file named index.html (more on bringing this to life is coming soon) in the AdUnit folder.
We now have a folder and file hierarchy that looks like this;
To test an iAd, we simply drop the .ad bundle on the iPhone simulator to launch iAdTester and display our ad.
Here’s what our iAd looks like running in iAdTester on the simulator;
Next, we’ll design the Ad Unit Transition that the user experiences when touching our banner.
The Ad Unit Transition
This is the transition that occurs when a user chooses to experience an iAd. iAd currently supports two transition flavors, the slide and the reveal. Both transition animations are designed to visually engage the user prior to presenting either the iAd Splash Page or Core Ad Unit.
…more coming soon on the Ad Unit Transition…come back…
The Splash Page
This is a visually engaging yet high-performance animation or interaction that essentially entertains the user while the Core Ad Unit assets load in the background. Although performance and bandwidth need to be carefully managed, animations and interactions can use a variety of visual effects from image effects using gradients, masks, reflections, to complex 2D and 3D effects.
The Core Ad Unit
This is the main advertisement. It follows the Splash Page and can present a fully customized, brand-focused experience. A variety of standard iAd JS menu components are available to use out-of-box or to completely customize using CSS, HTML, JavaScript and other features and technologies of the iPhone OS (i.e. Video, Audio, iTunes Store, Geolocation, Mapping, Accelerometer, etc.) Next up…..Creating an iAd with the four basic elements above…come back…
Creative Software Technology 