{"id":195,"date":"2014-03-10T15:46:18","date_gmt":"2014-03-10T15:46:18","guid":{"rendered":"http:\/\/www.confidant.ca\/blog\/?p=195"},"modified":"2017-04-21T17:12:02","modified_gmt":"2017-04-21T17:12:02","slug":"solved-using-externalinterface-with-swiffy-and-as2","status":"publish","type":"post","link":"https:\/\/www.confidant.ca\/blog\/2014\/solved-using-externalinterface-with-swiffy-and-as2\/","title":{"rendered":"Solved: Using ExternalInterface With Swiffy and AS2"},"content":{"rendered":"

I\u2019ve been thankful for Swiffy<\/a> as a tool for migrating Flash content to HTML5\/SVG. It really does an amazing job and its drawbacks are few, but recently I discovered that it does not support using ExternalInterface with ActionScript 2 projects. In layman’s terms this means that the converted application cannot communicate with JavaScript on the page it resides on.<\/p>\n

The problem:<\/strong><\/h2>\n

Our application needed to support keyboard input on touch-screen devices, and the keyboard is only summoned when a real text input box receives focus. Swiffy uses SVG, which has no form text fields. Therefore we needed to use a JavaScript prompt for entering text, which then returned its data back to the Swiffy application. Remember, we can’t use ExternalInterface.<\/p>\n

The solution: NOT using ExternalInterface<\/h2>\n

Fortunately LoadVars is supported with Swiffy’s AS2, so I came up with the idea of tricking the application into thinking it was communicating with a server. Fortunately I found EWSJS<\/a>, which is a JavaScript for doing just that. It intercepts AJAX calls and returns whatever data you like.<\/p>\n

I have posted my code in case anybody wants it, but seriously\u2014if you don’t need this problem solved save yourself and stop reading now.<\/p>\n

The Actionscript needed to have these functions:

\ngrabTextLabelFromJavascript();\nvar result_thing:LoadVars = new LoadVars();\nvar t:Number;\nresult_thing.onLoad = function(success:Boolean) {\nif (success) {\ntrace ("got it:"+result_thing.newTextValue);\nif(result_thing.newTextValue==""){\n\/\/keep going\ntrace("keep going");\n} else {\nif( result_thing.newTextValue=="CANCEL"){\ntrace("cancel");\n} else {\ntrace("making a new label:"+result_thing.newTextValue);\nmakeTextLabel(result_thing.newTextValue);\n}\nclearInterval(t);\ngetURL("javascript:enableServer(false);"); \/\/disables the fake server\n}\n} else {\ntrace("nothing");\n}\n};\nfunction grabTextLabelFromJavascript(){\nt=setInterval(this,"loadIt",500);\ngetURL("javascript:summonPrompt();");\n}\nfunction loadIt():Void{\nvar send_lv:LoadVars = new LoadVars();\nsend_lv.sendAndLoad("\/labelValue", result_thing, "GET");\n}\n<\/code><\/pre>
\n<\/code>
\nThe Swiffy resides in an iframe on another page so there is code on both HTML documents. First the iframe code:
\n
\/\/ remember you will need to embed ewsjs.js and JQuery on this page\n<script type="text\/javascript">\/\/ <!&#91;CDATA&#91; var newLabel=""; var theResponse=""; (function($&;) { var route, router; router = { "\/labelValue": { "GET": function(config) { \/\/ return the new text label if (newLabel!="") { console.log("newLabel ok:"+newLabel); theResponse="newTextValue="+newLabel; newLabel=""; }else{ console.log("nope"); theResponse="newTextValue="; } return({status: 200, response: theResponse, headers: {"Content-Type":"text\/plain"}}); } } }; \/\/ simple to wrap around the actual handler, makes it easier to handle GET\/PUT\/POST\/DELETE var handlerFn = function(r) { return function(config){ if (r&#91;config.method&#93;) { return(r&#91;config.method&#93;(config)); } }; }; for (route in router) { if (router.hasOwnProperty(route)) { EWS.registerHandler(route,handlerFn(router&#91;route&#93;)); } } }(jQuery)); function saveLabel(l){ console.log("saving label:"+l); newLabel=l; } \/\/ &#93;&#93;><\/script><\/code><\/pre><\/code><\/p>\n
Now the iframe’s containing page:
\n
<script type="text\/javascript">\/\/ <!&#91;CDATA&#91; var newText=""; function summonPrompt(){ enableServer(true); \/\/newText=""; var lt = prompt("Please enter text for the label:","Label text"); if (lt!=null) { document.getElementById("swiffyFrame").contentWindow.saveLabel(lt); \/\/newText=lt; } else { document.getElementById("swiffyFrame").contentWindow.saveLabel("CANCEL"); } } function enableServer(bool){ console.log("enabling server:"+bool); document.getElementById('swiffyFrame').contentWindow.EWS.enable(bool); } \/\/ &#93;&#93;><\/script><\/code><\/pre><\/code>
\nI hope this helps someone out there in cyberspace.<\/p>\n","protected":false},"excerpt":{"rendered":"
I\u2019ve been thankful for Swiffy as a tool for migrating Flash content to HTML5\/SVG. It really does an amazing job and its drawbacks are few, but recently I discovered that it does not support using ExternalInterface with ActionScript 2 projects. In layman’s terms this means that the converted application cannot communicate with JavaScript on the … Continue reading Solved: Using ExternalInterface With Swiffy and AS2<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3],"tags":[37,31,36],"class_list":["post-195","post","type-post","status-publish","format-standard","hentry","category-development","tag-as2","tag-flash","tag-swiffy"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p28GE6-39","_links":{"self":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":13,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions\/296"}],"wp:attachment":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/categories?post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/tags?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}