Add Google Analytics to multiple Vimeo videos

By Todd Flom May 2nd, 2014, under javascript/jquery, Uncategorized

I was working on a page earlier this week that had a number of Vimeo videos embedded within a scroller. Each video needed to have a unique identifier submitted with the analytics event tracking. The event was to be submitted only when any video started being played. Here is the small chunk of code I used for this. Don’t forget to include the Froogaloop library to access the vimeo player’s events.

1
2
3
4
5
6
7
8
9
10
11
12
var iframes = $('iframe.vimeovideo');
  iframes.each(function(i, obj) {
  $(obj).load(function(){
    var txt = $(obj).next().text(); // text from an h1 element
    var player=$f(this);
    player.addEvent('ready', function() {
      player.addEvent('play', function(data) {
        _gaq.push(['_trackEvent', 'Video', 'Start', txt,, false]);
      });
    });
  });
});

 

WP – Mobilizer

By Todd Flom September 11th, 2013, under Uncategorized

I was looking for a mobile custom theme solution for WordPress and ran across this great plug in here: http://www.wp-mobilizer.com or here at wordpress.org: http://wordpress.org/plugins/wp-mobilizer/

Follow these instructions for implementing a custom theme: http://www.wp-mobilizer.com/documentation/appearance-theme-options/

Remember this line in the header.php of your theme:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Remember OSX Spaces?

By Todd Flom September 10th, 2013, under Uncategorized

I was looking for a replacement for spaces, it’ no longer available through Lion. And I stumbled upon Mission Control’s multiple desktops feature. Read more here: http://support.apple.com/kb/PH11158?viewlocale=en_US&locale=en_US

iPad UIImageView image-based animation alternative

By Todd Flom February 13th, 2011, under iOS, iPad, iPhone, Objective C

I’ve been troubleshooting a project that animates 24 different sets of png images. Each set containing around 30 images. The App would eventually crash when run on an iPad after running through about half a dozen of the animations. Eventually running into a memory limit. In my search for solutions, I ran into Mo DeJong’s PNGAnimatorDemo, which completely solved the memory limit problem.

The example project he provides runs the animation full frame by default so I had to modify some things in order to add it as a subview to another view and to set it inside a CGRect.

The first thing to be done was to create a new property ‘viewCGRect’ with which I could set a CGRect for the ImageAnimatorViewController . I also took out the animationOrientation property and associated code since this is now being added as a subVIew to another view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- (void)loadView {
// UIView *myView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
UIView *myView = [[UIView alloc] initWithFrame:viewCGRect];
[myView autorelease];
self.view = myView;

// FIXME: Additional Supported Orientations
/*
if (animationOrientation == UIImageOrientationUp) {
// No-op
} else if (animationOrientation == UIImageOrientationLeft) {
// 90 deg CCW
[self rotateToLandscape];
} else if (animationOrientation == UIImageOrientationRight) {
// 90 deg CW
[self rotateToLandscapeRight];
} else {
NSAssert(FALSE,@"Unsupported animationOrientation");
}
*/

Then inside my superViewController I modified the startAnimator method in order to pass a different file name prefix for every animation. As well as a specific length (each animation had varying lengths) and a CGRect with which to draw the animation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
- (void) startAnimator:(NSString *) pref endingWith: (int) end andFrame:(CGRect) rect {
//[viewController.view removeFromSuperview];

self.animatorViewController = [ImageAnimatorViewController imageAnimatorViewController];

NSArray *names = [ImageAnimatorViewController arrayWithNumberedNames:pref
rangeStart:1
rangeEnd:end
suffixFormat:@"%02i.png"];

NSArray *URLs = [ImageAnimatorViewController arrayWithResourcePrefixedURLs:names];

// setting the public property for our custom CGRect:

animatorViewController.viewCGRect = rect;

// we no longer need to provide an orientation //animatorViewController.animationOrientation = UIImageOrientationUp; // Rotate 90 deg CCW
animatorViewController.animationFrameDuration = ImageAnimator15FPS;
animatorViewController.animationURLs = URLs;
animatorViewController.animationRepeatCount = 0;

// Show animator before starting animation

// add the animatorViewController.view as a subView:
[self.view addSubview:animatorViewController.view];

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(animationDidStartNotification:)
name:ImageAnimatorDidStartNotification
object:animatorViewController];

[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(animationDidStopNotification:)
name:ImageAnimatorDidStopNotification
object:animatorViewController];

[animatorViewController startAnimating];
}

Then lastly I commented out parts of the stopAnimator method so that the final frame of each animation would remain until I needed to dispose of it by using another method clearAnimation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- (void) stopAnimator {
[[NSNotificationCenter defaultCenter] removeObserver:self
name:ImageAnimatorDidStartNotification
object:animatorViewController];

[[NSNotificationCenter defaultCenter] removeObserver:self
name:ImageAnimatorDidStopNotification
object:animatorViewController];

[animatorViewController stopAnimating];

//    [animatorViewController.view removeFromSuperview];

//    self.animatorViewController = nil;

}

- (void) clearAnimation {
[animatorViewController.view removeFromSuperview];

self.animatorViewController = nil;

}

Flash Builder/Flex 4 and ZendAMF alternative connection example

By Todd Flom May 18th, 2010, under ActionScript, Flash, Flex

I was attempting to try out a simple test of ZendAMF and Flash Builder. I had begun by building the test using WAMP on my local machine. I began by using the built in Connect to Data/Service Wizard built into Flash Builder.  The example I was following was from an article over at the Zend Developer Zone called: Data-centric Adobe Flash Builder development with the Zend Framework. Everything worked slick as can be running locally on WAMP but when I tried using the same data connection with my site on my hosting company, I was ending up with errors due to the age of mySQL and PHP that my host is currently using. I am still working on resolving those problems. But in the meantime I was needing to get it to work.  I decided to incorporate the simple example Lee Brimelow used with his Flash and Zend AMF tutorial.

The example here is a simple voting screen to pick from a set of actors for best actor and worst actor. It holds a simple SharedObject variable to determine if you have already voted and keeps you from voting twice.

Here is the MXML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="600"  creationComplete="application_creationCompleteHandler(event)" width="500" height="600" backgroundColor="#000000">
    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            import flash.events.NetStatusEvent;
            import flash.events.SecurityErrorEvent;
            import flash.net.NetConnection;
            import flash.net.NetStream;
            import flash.net.Responder;
            import flash.net.SharedObject;
            import flash.system.Security;
           
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            import mx.events.FlexEvent;

           
            private var so:SharedObject = SharedObject.getLocal("awardVoting");
            private var radioEnabled:Boolean = false;
            private var nc:NetConnection;
           
            protected function voteBtn_clickHandler(event:MouseEvent):void
            {
               
                var record:Object = new Object;
                record.bestActor = radiogroup1.selectedValue;
                record.worstActor = radiogroup2.selectedValue;
               
                /* had to use the old Zend connection scripts from Flash because of the age of PHP and mySQL on my server */
                nc = new NetConnection();
                nc.connect("/*path to my file*/bootstrapper.php");
               
                var responder:Responder = new Responder(onResResult, onResFault);
               
                nc.call("awards.add", responder, record.bestActor, record.worstActor);
               
                Alert.show("Thank you for voting!", "Acting Award voting", 0 , this, doSomethingElse);
               
            }
           
            private function onResResult(result:Object):void {
                //Alert.show("it works!!!");
               
            }
            public function onResFault(fault:Object):void {
                Alert.show(String(fault.description));
            }

           
            protected function doSomethingElse(event:CloseEvent):void {
                radioEnabled = false;
                this.doEnable(radioEnabled);
                so.data.voted = "true";
                so.flush();
            }
                       
           
            protected function application_creationCompleteHandler(event:FlexEvent):void
            {
                Security.allowDomain("/*my domain*/");
                Security.loadPolicyFile("/*path to my file*/crossdomain.xml");

                /*so.clear();*/
                if (so.data.voted) {
                    Alert.show("You have already voted!", "Acting Award voting");
                    radioEnabled = false;
                    this.doEnable(radioEnabled);
                } else {
                    Alert.show("Welcome to the Acting Awards poll.\n\nPlease select an actor from each category", "Acting Award voting");
                    radioEnabled = true;
                    this.doEnable(radioEnabled);
                }
               
            }
           
            protected function doEnable(n:Boolean):void {
                radiogroup1.enabled = n;
                radiogroup2.enabled = n;
                voteBtn.enabled = n;
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:RadioButtonGroup id="radiogroup1" />
        <s:RadioButtonGroup id="radiogroup2" />
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Image x="0" y="0" source="images/awardsMockup.jpg"/>
    <s:BorderContainer x="30" y="209" width="203" height="319" backgroundColor="#000000" backgroundAlpha="0.5"> </s:BorderContainer>
    <s:BorderContainer x="267" y="209" width="203" height="319" backgroundColor="#000000" backgroundAlpha="0.5">    </s:BorderContainer>
    <s:VGroup x="30" y="209" width="203" height="319" id="vGroup" color="#FFFFFF" contentBackgroundColor="#000000" contentBackgroundAlpha="0.5" gap="6" paddingLeft="8" paddingRight="8" paddingTop="8" paddingBottom="8">
        <s:Label text="Best Actor:" fontWeight="bold" fontSize="13"/>
        <s:RadioButton label="Viggo Mortensen - The Road" groupName="radiogroup1" value="Mortensen"/>
        <s:RadioButton label="Sharlto Copley - District 9" groupName="radiogroup1" value="Copley"/>
        <s:RadioButton label="George Clooney - Up in the Air" groupName="radiogroup1" value="Clooney"/>
        <s:RadioButton label="Matt Damon - The Informant!" groupName="radiogroup1" value="Damon"/>
        <s:RadioButton label="Ben Foster - The Messenger" groupName="radiogroup1" value="Foster"/>
        <s:RadioButton label="Jeremy Renner - The Hurt Locker" groupName="radiogroup1" value="Renner "/>
        <s:RadioButton label="Brad Pitt - Inglourious Basterds" groupName="radiogroup1" value="Pitt"/>
        <s:RadioButton label="Colin Firth - A Single Man" groupName="radiogroup1" value="Firth"/>
        <s:RadioButton label="Tobey Maguire - Brothers" groupName="radiogroup1" value="Maguire"/>
        <s:RadioButton label="Jeff Bridges - Crazy Heart" groupName="radiogroup1" value="Bridges"/>
    </s:VGroup>
    <s:VGroup x="267" y="209" width="202" height="319" color="#FFFFFF" contentBackgroundColor="#000000" contentBackgroundAlpha="1.0" paddingLeft="8" paddingRight="8" paddingTop="8" paddingBottom="8">
        <s:Label text="Don't Quit Your Day Job:" fontWeight="bold" fontSize="13"/>
        <s:RadioButton label="Jack Black  - Year One" groupName="radiogroup2" value="Black"/>
        <s:RadioButton label="Jim Carrey - A Christmas Carol" groupName="radiogroup2" value="Carrey"/>
        <s:RadioButton label="Nicholas Cage - Knowing" groupName="radiogroup2" value="Cage"/>
        <s:RadioButton label="Robert Pattinson - New Moon" groupName="radiogroup2" value="Pattinson"/>
        <s:RadioButton label="Vince Vaughn - Couples Retreat" groupName="radiogroup2" value="Vaughn"/>
        <s:RadioButton label="John Cusack - 2012" groupName="radiogroup2" value="Cusack"/>
        <s:RadioButton label="Kevin James - Paul Blart Mall Cop" groupName="radiogroup2" value="James"/>
        <s:RadioButton label="Johnny Depp - Public Enemies" groupName="radiogroup2" value="Depp"/>
        <s:RadioButton label="Taylor Lautner - New Moon" groupName="radiogroup2" value="Lautner"/>
        <s:RadioButton label="Ashton Kutcher - Personal Effects" groupName="radiogroup2" value="Kutcher"/>
    </s:VGroup>
    <s:Button x="215" y="551" label="Vote" id="voteBtn" click="voteBtn_clickHandler(event)" />
    <s:TextArea x="66" y="152" width="361" height="31" text="Acting Award Voting" fontFamily="Arial" fontWeight="bold" fontSize="20" borderVisible="false" textAlign="center" contentBackgroundAlpha="0.0" color="#FFFFFF"/>
</s:Application>

Here is the awards.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
class awards {
    public function __construct()
    {
        require("/*path to file outside of public web directory*/configConn.inc.php");
        mysql_connect($server,$username,$password);
        mysql_select_db("/*my database*/" );
    }
    public function getPeople()
    {
        $result = mysql_query("SELECT * FROM awards");
        $t = array();

        while($row = mysql_fetch_assoc($result))
        {
            array_push($t, $row);
        }

        return $t;

    }

      public function add( $bestActor, $worstActor ) {

        $insert = sprintf( "INSERT INTO awards VALUES (NULL, '%s', '%s')",
        mysql_real_escape_string($bestActor),
        mysql_real_escape_string($worstActor));

        mysql_query($insert);

        return 'You addded: ' . $bestActor . $worstActor . '. The Query string is: ' . $insert;
    }
}

Here is the configConn.inc.php:

1
2
3
4
5
<?php
$server = "/*my mySQL server*/";
$username= "/*my username*/";
$password = "/*my password*/";
?>

And finally here is the bootstrapper.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
?php

error_reporting(E_ALL | E_STRICT);
ini_set("display_errors", "on");

ini_set("include_path", ini_get("include_path") . ":'/*my path to Zend*/");

require_once Zend/Amf/Server.php';
require_once '
awards.php';

$server = new Zend_Amf_Server();

$server->setClass("awards");
// You can keep adding all the classes you need here

echo($server->handle());

?>

P.S. I apologize in advance for any typos due to attempting to make the code more generic.

GreenSock Tweening Platform

By Todd Flom November 4th, 2009, under ActionScript, Flash, Flex

My friend Chuck Stein just sent me a link to the GreenSock tweening libraries:

They have downloads for AS3 and AS2. They are looking pretty cool at first glance.

Paceart System software simulation

By Todd Flom October 30th, 2009, under Flash

Back in May of ’09, I completed the Paceart System Scheduling interactive tutorial for Medtronic it is an interactive software simulation with over one hour of narration. It was built in Flash CS3 using AS3. The entire simulator builds itself with an XML sheet. The callout text, the MP3′s and the seperate SWF’s are all called by the XML file. Here are some screen shots: