Adobe AIR + WebView + AdMob Integration



Hi Guys, who came across from this thread "Adobe AIR : HTML5 AdMob Integration for Android", or this Video it's outdated since Adobe send AIR to HARMAN but thanks for who watching that video clip asking about it. So, i decided to rewrite a new thread for them or who still interested in Adobe AIR + AdMob in 2025 with Zero Cost.
        I hope everyone already know in ActionScript 3.0 and Adobe AIR, i'm not write all every step because of it too long, and i already prepared full source code, you can take a look everything inside project also tests file.apk on your device. So, just see what I've done for. Grab it copy/paste and see it. I don't mind; time is the most value in your life.

Step 0 - Pre-required 
*If you already build AIR for Mobile with ANE integrated without any problem or you already have your own tools, just skip this step.

- FlashDevelop 5 (Windows only), install and follow their instruction.


- OpenJDK 17, install and follow their instruction.


- Adobe AIR SDK (51.1.3.6), you can try newer version but hopefully my version is minimum version compared to your side.


- AdMob ANE, by Pozirk Igor, it's required minimum AIR version 33, if you already have favorite own AdMob ANE don't need to change. Keep that version work for you is better.

- Flex SDK, i've use adobe flex sdk rather than apache flex sdk but you can try if needed. I've prepared link to both of them. It's required for CreateCertificate.bat 
Adobe flex sdk (others version)
Apache flex sdk

Step 1 - Download and open sample. *Skip this step if you have your own complete buildable project.
extract zip and/or open AIRHTML5.as3proj and let see on important part first

[HTML in _index.html]
It's required JavaScript trigger "window.location" on your own url, when press any button from html will calling JavaScript function and passing id and cmd. You can design your own parameter as you wish. The example full path is pattern like "https://yourwebsite.com/_index.html?banner=show" 

<script type="text/javascript">
        function sendToActionScript(id, cmd) {
            var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + "?"+id+"="+cmd;
            window.location = refresh;
        }
    </script>
    <div class="inside">
        <div class="pinTopLeft">
            <input id="button" type="button" value="Banner Show" onclick="sendToActionScript('banner','show');" />
        </div>
        <div class="pinTopRight">
            <input id="button" type="button" value="Banner Hide" onclick="sendToActionScript('banner','hide');" />
        </div>
        <div class="pinBottomLeft">
            <input id="button" type="button" value="Inters Show" onclick="sendToActionScript('inters','show');" />
        </div>
    </div>

[ActionScript 3.0 in Main.as]
As a part of WebView mainly working on LocationChangeEvent to listening once user press any button in html it's trigger full path of url included id and cmd we need to handle in handleAds function.
              
                webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, onLocationChangeEvent);

                private function handleAds(id:String, cmd:String):void {
if (id == "banner") {
if (cmd == "show") {
_admob.show("ca-app-pub-3940256099942544/6300978111", AdParams.SIZE_SMART_BANNER, AdParams.HALIGN_CENTER, AdParams.VALIGN_TOP);
} else {
//expected hide
_admob.hide();
}
} else {
//expected show interstitial require cache first then show when it ready
_admob.cacheInterstitial("ca-app-pub-3940256099942544/1033173712")
}
}
                
                public function onLocationChangeEvent(e:LocationChangeEvent):void
{
if (e.location) {
var results:Array = e.location.split("?");
if (results.length > 1) {
var fromJsWebView:String = results[results.length - 1];
var command:Array = fromJsWebView.split("=");
if (command.length > 1) {
handleAds(command[0], command[1]);
}
}
}
webView.historyBack();
e.preventDefault();
}

Step 2 - from my sample i already add ANE library from pozirk but you need to create certificate, use CreateCertificate.bat to generate your own one. At least flex sdk need to custom path on your own.

Verify ane is setup and library is correctly here.

Step 3 - connect your device with developer mode due to allow install unknow app purpose for testing only. Click gear icon to "Build Project" then click play icon "Test Project" wait a while till your app launch on your device.


The result is show as below images.


Hope you guys will get it work, i'm not testing HTMLLoader but i expected it work like StageWebView due to LocationChangeEvent to handle message from JavaScript. :)

PS. don't forget to change my url to your url because i use it for testing only and someday it maybe be gone forever.

Credits - Icons
It's part of the icon set "Faenza Icon Library", which has 4,208 icons in it.

No comments:

Post a Comment