interactive development & discussion
Go get the source files at Activeden
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2007/08/linklist.swf” width=”550″ height=”500″ targetclass=”flashmovie”]
[/kml_flashembed]
To find the distance of any two points on an axis is easy, just subtract them. But what about when you have to find the distance of something not on the axis (a diagonal)? Find the distance between any two points with the Pythagorean theorem. This is an old problem we can look to history and find the Pythagorean theorem and Pythagoras, the Greek we’ve named this after. His theorem states that ‘In any right triangle, the area of the square whose side is the hypotenuse (the side opposite the right angle) is equal to the sum of the areas of the squares whose sides are the two legs (the two sides that meet at a right angle).’
You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’
a^2 + b^2 = c^2
Okay, but how does that help in flash? You want to find the distance between point a and point b. Well c would be the distance between the two points. We know the formula, solving for c.
c = square root of (a^2 + b^2).
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
Math.sqrt()
is the square root function, so Math.sqrt(4)=2.
Math.sqrt(x) computes and returns the square root of x.
Math.pow() is the power function, so Math.pow(4, 2)=16 (4 squared). Math.pow(x, y) computes and returns x to the power of y.
You say I remember using this for triangles and stuff, I just want to know the distance between two points, there’s no triangles.
Well, there actually is a triangle we can draw. Go from your first, along an axis (this makes one side), and the other point, along the other axis (this is another side), and you’ll see that the distance you’re looking for is the third side of the triangle (the hypotenuse).
Here’s a quick interactive flash file to show the idea.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/distance.swf” width=”500″ height=”500″ targetclass=”flashmovie”]
[/kml_flashembed]
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
xmid = Stage.width/2;
ymid = Stage.height/2;
a = _root._ymouse-ymid;
b = _root._xmouse-xmid;
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
feedbacka.text = Math.round(a);
feedbackb.text = Math.round(b);
feedbackc.text = Math.round(c);
[/cc]
As usual, here’s the source flash file (flash 8 compatible) to take a look: distance.fla
Using what I learned with the Actionscript Javascript Communication Tutorial, and pushing it a little further I’ve set up this example of how flash renders html and css. This is basically a wysiwyg (What you see is what you get) html editor! Natively flash only handles some html and css. Many people have enhanced it’s capabilities with projects and Classes, but I made this to show what is accepted by default as far as html and css is concerned. I know there are specs and many lists about what will work, but to me the best way to know if my code will work is to try and see…
I’ve made this app so if I have a question, I just paste in my html/css and send it to the swf to see it rendered live. This saved me a few headaches, so I thought other might enjoy it as well… So here it is.
Render your own html and or css in flash. htmlToFlash.html
Here is the flash rendering of some dummy text as html with css applied
Here’s the html interface where I paste in the html and css.
Each supported css property has a corresponding actionscript property, but the naming convention is a little different for css in actionscript. Each actionscript property name is derived from the corresponding CSS property name; the hyphen is omitted and the subsequent character is capitalized. So for example: ‘font-weight’ becomes ‘fontWeight’.
Here’s the open source files if you want to get your hands dirty.
Let me know if you improve this or even have any questions about it!
Again, note there are only certain HTMl and CSS supported by flash, follow the links for more info.
HTML supported by Flash and CSS supported by Flash
Gives feel of perspective and depth by reacting to mouse movements. The effect is parallax, read more…
The city images are very choppy and ugly, I know, it’s just a test.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/city.swf” width=”550″ height=”350″ targetclass=”flashmovie”]
[/kml_flashembed]
Sample Actionscript. This in on one of the buildings which are separate movie clips. Adjust the equation for different effect.
The basic formula is as follows: this._x = _root._xmouse / (speed) + transform
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
onClipEvent (enterFrame) {
this._x = _root._xmouse/7 – 50;
}
[/cc]
Update: Here’s a similar effect achieved by just negating the relation between the mouse and the building movie clips.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/city2.swf” width=”550″ height=”350″ targetclass=”flashmovie”]
[/kml_flashembed]
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
onClipEvent (enterFrame) {
this._x = -_root._xmouse/7 – 50;
}
[/cc]
Download Source Fla File
Using ExternalInterface.addCallback() we can expose an actionscript function and make it available to javascript. This would be helpful to have your webpage with embedded flash communicate to your flash swf file and even control it with javascript! Say we wanted to have buttons in the html page that would control an object in the flash. Communication is a two-way road so wouldn’t it be great to be able to go the other way as well, you can! That is the main function of ExternalInterface! In this example/tutorial I will explain both directions of communication with flash and javascript! Communication between flash and javascript isn’t just a myth or mystery!
We will follow the text’s journey on our road of communication…
The One way: I type in ‘Johnny Appleseed’ in the html text box and press the Send Text To Flash button. The onclick javascript event finds the flash element and calls it’s function (sendTextFromHtml) and then clears the text in the html box. This function has been set up and is exposed to javascript (in actionscript lines 4-7) with the methodName ‘sendTextFromHtml’ while the method it calls is recieveTextFromHtml() in the actionscript. So ‘Johnny Appleseed’ is received as the parameter of the recieveTextFromHtml() function and is assigned to the text of the theText text box.
And back: Now I delete ‘Johnny Appleseed’ since he’s only a fable and enter ‘Paul Bunyan’ in the swf text box and press the Send From Flash to Javascript button. This calls the onRelease function associated with this button. ExternalInterface.call calls the ‘recieveTextFromFlash’ function in the javascript of the page and passes ‘Paul Bunyan’ as the parameter. The javascript function finds the html text box using getElementById() and assigns the parameter to the value of that text box!
This technique will even work if you’re not sending folklore character down the road.
View the live example here: ActionscriptJavascriptCommunication.html
NEW live example with swfobject2 works in IE! ActionscriptJavascriptCommunication2.html
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*;
//Set up Javascript to Actioscript
var methodName:String = “sendTextFromHtml”;
var instance:Object = null;
var method:Function = recieveTextFromHtml;
var wasSuccessful:Boolean = ExternalInterface.addCallback(methodName, instance, method);
//Actionscript to Javascript
//ExternalInterface.call(“recieveTextFromFlash”, _root.theText.text);
function recieveTextFromHtml(t) {
_root.theText.text = t;
}
_root.button.onRelease = function() {
ExternalInterface.call(“recieveTextFromFlash”, _root.theText.text);
_root.theText.text = “”;
}
[/cc]
Javascript:
[cc lang=”javascript” tab_size=”2″ lines=”40″]
function recieveTextFromFlash(Txt) {
document.getElementById(‘htmlText’).value = Txt;
}
[/cc]
HTML: view Source of sample page
Download all source files (.fla, .html, .swf): ActionscriptJavascriptCommunication.zip
The results are in and the requested topic is “Integrate Google Analytics into Flash.” The poll has been reset and is ready to recieve your post requests, so keep voting! It’s located in the side bar!
Tracking your visitors and attempting to better understand them is a large part of even having content on the web. Since the days of visitor counters displayed proudly on every site, along with dozens of animated gifs to the days when site were designed solely with efficiency and conversion in mind. There are many services that will do this for a fee and other that will do it for free. A popular free web analytics tool is provided by Google. Google Analytics is started by including JavaScript on each page the user wishes to track. This JavaScript loads larger files from the Google webserver and then sets variables with the user’s account number. This JavaScript is used to track and log page views and visitors interaction with the site. This post discusses what to do if your site includes a lot of interactive flash elements you wish to track as well. With the little Google has published related to this(New Code, Old Code), I’ve tried to fill in.
Note: This explains how to set up to track flash events as page views, which does have a drawback- it inflates your pageviews in the analytics and in turn may skew your data. Il’l beposting again soon about how to use then new event tracking, which would track flash events not as pageviews, but as events and thus not inflate the page view count.
I now have an Event Tracking Tutorial as well with actionscript updates!
Event Tracking With Google Analytics & Flash/Actionscript Integration Tutorial
Here’s a simple example, say you want to track how many times an object is clicked or dragged by a user or how many times it bounces (something that could be tracked but doesn’t necessarily have any required user interaction). In this example flash file I have a ball which bounces off the walls and users can click to drag and even throw it, press the spacebar to create more balls and toggle the gravity on and off with the arrow keys (up is weightlessness, and down is gravity). Each of these events has code to communicate with Google Analytics JavaScript and track the events. I made my own function to call the google analytics code. Do I hear “but sometimes I want to use the new version of Google analytics, and sometimes I want to use the old one…” Have no fear, this function works for either one, or even both. If you’re not using the newer code the calls to the functions in the new code (pageTracker._trackPageview()) will be ignored and vice versa, if you are using the new code, then the calls to the functions in the old code (urchinTracker()) will be ignored, since the functions are not defined. You can track virtually anything with this method. I’ve exaggerated greatly in this example- just to show the variety of different ways this can be used. You might want to make certain the things you track will be useful and relevant for you.
Here is the swf file, I’ve added a text box that will print all actions that are logged to Google Analytics
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/integrategoogleanalytics/integrategoogleanalytics.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
[/kml_flashembed]
track Google Analytics actionscript function
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
function trackGA(action:String) {
//Old Google Analytics Code
ExternalInterface.call(“urchinTracker(‘/urchin/IntegrateGoogleAnalytics/”+action+”‘)”);
//New Google Analytics Code
ExternalInterface.call(“pageTracker._trackPageview(‘/pageTracker/IntegrateGoogleAnalytics/”+action+”‘)”);
trace(“Google Analytics Tracking: ” + action);
}
[/cc]
Calls to Google Analytics actionscript function
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
trackGA(“swfLoaded”);
trackGA(“ball/”+_root.id+”/created/”);
trackGA(“ball/”+this.ballNum+”/released/”);
trackGA(“ball/”+this.ballNum+”/pressed/”);
trackGA(“ball/”+this.ballNum+”/bounced/top”);
trackGA(“ball/”+this.ballNum+”/bounced/left”);
trackGA(“ball/”+this.ballNum+”/bounced/right”);
trackGA(“ball/”+this.ballNum+”/bounced/bottom”);
trackGA(“gravity/on”);
trackGA(“gravity/off”);
[/cc]
Here is a screenshot of my Google Analytics Top Content after I search for “pageTracker/IntegrateGoogleAnalytics” (because I’m using the new code version, if I were using the old version I’d search for “urchin/IntegrateGoogleAnalytics”). This just shows that every event was logged to Google Analytics. This screenshot was taken mere hours after this post published.
New Event Tracking technique tutorial rather than posting each event you want to track in flash as a pageview it can be a specific event!
Flash give publishers the opportunity to customize the right-click menu which pops up in the swf file with a context menu item in actionscript.
ContextMenuItem
ContextMenuItem(caption:String, callbackFunction:Function, [separatorBefore:Boolean], [enabled:Boolean], [visible:Boolean])
Creates a new ContextMenuItem object that can be added to the ContextMenu.customItems array.
The menu item has a caption, which is displayed to the user in the right click menu. It also has a a callback function handler by naming the function in the code to be invoked once the menu item is selected. It then has three boolean values which specify whether the item has a separator before it, is enabled, and is visible.
To add a new context menu item to a context menu, you simply create the context menu items and then push them into the customItems array.
You can enable or disable specific menu items, make items visible or invisible, or change the caption or callback handler associated with a menu item at any time.
In the example here the menu items about clearing and rewriting the text are set to toggle each other, so you can’t rewrite the text if it hasn’t yet been cleared and vice versa.
To further customize the context menu flash allows us to hide the built in items in the menu with hideBuiltInItems(). This hides all the built in item from view (except ‘settings’) by setting their visibility to false.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/right-clickmenu.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
[/kml_flashembed]
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”60″]
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
var ccs:ContextMenuItem = new ContextMenuItem(“Visit Circle Cube Studio”, visitCCS, false, true, true);
var pog:ContextMenuItem = new ContextMenuItem(“Visit Interactive Flash Portfolio”, visitPOG, false, true, true);
var ct:ContextMenuItem = new ContextMenuItem(“Clear Text”, clearText, true, true, true);
var rw:ContextMenuItem = new ContextMenuItem(“Rewrite Text”, rwText, true, false, true);
var mt:ContextMenuItem = new ContextMenuItem(“Move Text”, moveText, false, true, true);
myMenu.customItems.push(ccs, pog, ct, mt, rw);
_root.menu = myMenu;
function visitCCS () {
getURL(“https://circlecube.com/circlecube”, “_blank”);
}
function visitPOG () {
getURL(“http://www.circlecube.com/test/”, “_blank”);
}
function clearText() {
myText = “”;
ct.enabled = false;
rw.enabled = true;
}
function rwText() {
myText = “Rewrite: \nRight-click to see the customized menu”;
ct.enabled = true;
rw.enabled = false;
}
function moveText() {
theText._y += 10;
}
[/cc]
The new video player from StomperNet!
Feature Set: This Video Player is built in Adobe flash. I was involved in the actionscripting and design of the player and implementing many of the functions. There is a playlist imported into the player and even an html ‘sales pages’ loaded into the player. The progress bar shows download progress, watched progress and even history. It shows you how far you’ve ever watched in each specific video in the playlist, the “high-water mark”, and it lets you jump back to that spot easily by clicking in the progress bar. A feature I’m proud of is the mute, it doesn’t just cut the audio, but has a fade to silent quality- which even remembers your preferred volume if you come back to the page later. The player incorporates google analytics. Full Screen mode allows use of the entire monitor. Another ‘tab’ is used to show info about the author.
There is a lot packed into this one player, and we have plans to pack in even more!
Stompernet is using this player to promote their new line of content: Going Natural 2
[kml_flashembed movie=”http://www.stompernet.net/squambido/pagetest/squambido.swf” height=”338″ width=”450″ fvars=” playlistURL = http://www.stompernet.net/GoingNatural20/files/GoingNatural20Public.dhtml.xml ; autoplay = false ; awiz = 1126 ” allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]
Many have struggled with the task of getting you swf to read or get the current url showing in the browser, the html page the browser is at which has the swf embedded. Not to be confused with the _root._url which returns the path of the swf file. This would be helpful to know if someone is embedding your swfs on their site, or even customize your swf depending on which page it resides on. There is a pretty simple, yet virtually undocumented way to do this. We have to use javascript by calling External Interface and get the url from the DOM. Window.location.href. Then we must call the toString() function only because ExternalInterface.call requires a function rather than only reading a static property.
Import external interface into your file: import flash.external.ExternalInterface;
Initialize a variable to store the url path: var urlPath;
Create a function to call external interface and assign the html page path to your variable: urlPath = ExternalInterface.call(“window.location.href.toString”);
Call the function when/if needed.
With javascript: window.location.href or window.location.href.toString();
With actionscript: ExternalInterface.call(“window.location.href.toString”);
External Interface html Example
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/externalinterface.swf” width=”550″ height=”200″ targetclass=”flashmovie”]
[/kml_flashembed]
Actionscript:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
import flash.external.*;
var urlPath;
function geturlhttp() {
urlPath = ExternalInterface.call(“window.location.href.toString”);
}
geturlhttp();
//Here I assign the url to a text box on the stage
_root.urlText.text = urlPath;
[/cc]
A website (sales letter site) to order an engraved tile to be placed on a wall at you choice of NASCAR race tracks. Proceeds benefit Speedway Childrens’ Charities. Get yours today…
Site design with Dreamweaver using html and css. Incorporated flash elements for multiple video and audio players. Graphic Design in Fireworks and Illustrator.
