Analytical power and respecting visitors’ privacy

Almost all websites use some sort of Traffic Analytics, Google Analytics is used by 54.7% of all websites, according to w3techs.
Using an external analytics service to collect and parse website’s visitors data is the simplest and fastest way, however, it comes with a price since the website owner has no control of the scope of data collected, and how it is processed.

Is the price too high?

The direct price on the website is:
Performance: Loading the Google Analytics script directly impacts the website performance.
Legal: Google Analytics is using tracking cookies and requires consent popups, affecting the website’s first impression and natural navigational flow.
Ethical: Compromising my website’s visitors privacy in order to maintain analytical power is plain wrong.

Bablab is a great example: the traffic analytics solution is non-intrusive, not using cookies. https://www.bablab.com/blog/analytical-power-and-privacy

Read more in the Bablog: https://www.bablab.com/blog

Creating a Gallery page in a minute and a half – Bablab

Creating a gallery page in a minute and a half :

Try now – 14 days trial is free: https://www.bablab.com

Bablab is a centralized platform for Photographers and Artists to manage their online presence.
Public Portfolio Website – Presenting your work to prospect clients.
Customize your portfolio to showcase your work in a beautiful and unique way. It’s also fully responsive, so it looks great on all the latest devices.

Private Client Galleries – Communicating your work with existing clients.
Get clients selections, allow clients to share & invite guests to view the gallery.

Each has it’s own requirements and functionality, but both represent you.
Our focus is keeping it all simple and efficient, so you can focus on your work.

Create a slick portfolio website – see how!

Portfolio Website at bablab.com

bablab.com A new service for professional photographers, create your own portfolio website, super slick and elegant.

Another super cool feature are the private client galleries, upload low-res photos, send your client a secured link to proof, select or share with their friends and family.

Take a look!

Flash MouseWheel event on ALL browsers

Cut a long story short – took me a long time to find a solution to support Flash MouseWheel on all browsers, Windows AND Mac.

You can see this live here: http://www.pairhaps.com

This solution is a combination of two technics, and as of today (March 2013) supports ALL browsers on Windows and Mac:
First, loading an AS2 SWF from internal byteArray (that version still supports mouseWheel), this works for IE. download the class here: http://etcs.ru/blog/as3/mousewheel_v11_update/
Second, adding JS function that listens to mouseWheel event and passes it to Flash via ExternalInterface (DOM).Each browser needs its own function because of the differences in the event object.

For efficiency my implementation is testing the browser user agent on the server (PHP) and writing the correct JS function to support the mouseWheel event on that browser.

The JS functions are as follows:

Windows:Firefox:

window.addEventListener("DOMMouseScroll", handleWheel, false);
function handleWheel(event)
{
var app = swfobject.getObjectById("FLASH_OBJECT_ID");
var _x = event.clientX;
var _y = event.clientY;
var _delta = event.detail;

if (app) {
var o = {x: _x, y: _y, delta: _delta, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey};
app.handleWheel(o);
}
event.preventDefault();

}

Windows:Chrome:

window.addEventListener ("mousewheel", handleWheel, false);
function handleWheel(event)
{
var app = window.document["${application}"];
var _x = event.screenX;
var _y = event.screenY;
var _delta = event.wheelDelta * 4;
if (app) {
var o = {x: _x, y: _y, delta: _delta, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey};
app.handleWheel(o);
}
}

Mac:Safari:

window.onmousewheel = deltaDispatcher;
function deltaDispatcher(event)
{
var app = swfobject.getObjectById("FLASH_OBJECT_ID");
var _delta = event.wheelDelta/60;
var _x = event.screenX;
var _y = event.screenY;
if (app) {
var o = {x: _x, y: _y, delta: _delta, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey};
app.handleWheel(o);
}
if(event.preventDefault)event.preventDefault();
}

And in Flash AS main class:

import utils.MouseWheel;

After added to stage add these:

ExternalInterface.addCallback("handleWheel", handleWheel);
stage.addEventListener(Event.ACTIVATE, flashActive);
stage.addEventListener(Event.DEACTIVATE, flashDeactive);

And finally, add these fundtions:

private function handleWheel(event:Object) : void
{
var obj : InteractiveObject = null;
var mousePoint : Point = new Point(stage.mouseX, stage.mouseY);
var objects : Array = stage.getObjectsUnderPoint(mousePoint);

for (var i : int = objects.length - 1; i >= 0; i--) {
if (objects[i] is InteractiveObject) {
obj = objects[i] as InteractiveObject;
break;
}
else {
if (objects[i] is Shape && (objects[i] as Shape).parent) {
obj = (objects[i] as Shape).parent;
break;
}
}
}

if (obj) {
var mEvent : MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL, true, false,
mousePoint.x, mousePoint.y, obj,
event.ctrlKey, event.altKey, event.shiftKey,
false, Number(event.delta));
obj.dispatchEvent(mEvent);
}
}
private function flashActive(event:Event):void
{
MouseWheel.capture();
}
private function flashDeactive(event:Event):void
{
MouseWheel.release();
}

ooVoo

Client ooVoo
Medium Desktop, Mac
Date June 2012
Description Worked with ooVoo team to define the user experience for Mac users and to design the Mac client. such a sweet project.
Categories UX + Design
URL oovoo.com

Amdocs

Client Amdocs
Medium Web
Date Apr 2011
Description Slick online presentation, the navigation is based on sliding, similar to the iPhone behavior.
Categories Flash programing, design
URL

Injecting and calling JS functions from within flash using external

JS injection

I recently encountered a unique requirement in one of my projects, triggering the loading of a page in the background (outside of flash, using Ajax) from within flash.
Often you cannot rely on JS functions to be available, you could load public libraries (Jquery or equivalent) or inject your own functions to the DOM, I chose to inject my own.

This is how you do it:

1) import the external class.

import flash.external.ExternalInterface;

2) declare a constant variable with all the JS functions:

private const script_js :XML =
<script>
<![CDATA[
function() {
AJXFNC = {
ajaxFunction:function(_url){

var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari, Chrome
ajaxRequest = new XMLHttpRequest();
ajaxRequest.open("GET", _url, true);
ajaxRequest.send(null);

} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
ajaxRequest.open("GET", _url, true);
ajaxRequest.send();

} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
ajaxRequest.open("GET", _url, true);
ajaxRequest.send();

} catch (e){
// Something went wrong
return false;
}
}
}
}

}
}
]]>
</script>;

3) inject the JS to DOM:

try {
if( ExternalInterface.available )ExternalInterface.call( script_js );
} catch( error:Error ) {
trace("ExternalInterface is not available");
}

4) call a function:

ExternalInterface.call( "AJXFNC.ajaxFunction", "http://www.google.com" );

Sweet isn’t it?

Random number without repeat as3

We’re using the random object for many things, by its nature it may repeat a number, but sometimes we don’t want to get the same number more than once, for example when showing a random image out of an array of images, or jumping to a random frame in a MovieClip. Currently there is no ‘unique’ function in Actionscript, you have to write your own solution.

Here is my class for generating random numbers:

randomPlus



Download: RandomPlus.as.

Usage:
Create an instance of RandomPlus, defining the numbers scope (start & end numbers), including negative values. in case only one parameter is passed the RandomPlus object will assume it is the end number and that the start number is zero:
var rp:RandomPlus = new RandomPlus( end:Number, start:Number = 0 );

After that you can use ‘getNum’ public function that will return a random number within the scope:
rp.getNum(); // returns a Number

You can use public var ‘len’ to retrieve the length of the scope in case you want to use it for your function:
rp.len; // returns a Number

*The object will return unlimited amount of numbers, each time the entire scope was returned it will reshuffle the items so it will continue to return random numbers within the scope, in an ever-changing order.

Let me know if you liked it (or if you have suggestions), enjoy :)