chasevida » Blog

Terminal echo $PATH issues

mark — Thu, 26 Apr 2012 01:20:26 +0000

I have recently modified my laptop to include duel drives and had a few unexpected issues. The first was that my terminal wouldn’t open, which left me pulling my hair out till it miraculously started again. I say miraculous cause it seems it was from nothing I did, which is frustrating as it means I don’t know what fixed this for the future.

Moving past this I was installing git, mamp and a few extensions for eclipse and getting ‘Unknown Command’ errors in the terminal. Back on google looking for a solution, it turns out I had added a created a new file ‘.bash_profile’ in order to resolve a path for git. This got git working but then all of a sudden created the ‘Unknown Command’ for all Terminal commands. I couldn’t even get ‘ls’ to work. Another search revealed that the path I’d created in .bash_profile was overriding previous and import path’s used for accessing terminal commands. The correct way to append a new path was to concatenate the path variable with the new path.

Below is an example of the incorrect and correct way to include a new path.

.bash_profile
export PATH=/usr/local/git/bin // overrides previous path inclusions
PATH=$PATH:/usr/local/git/bin // correctly concatenates the new path with the old

In the terminal you can see this by typing: echo $PATH
You can see all the paths delimited by colons.

Warning. I am no specialist in mac terminal commands and all the inner workings of the OSX operating system so I may have got some of the jargon and explanations wrong. All I know is that this worked in resolving my issues.

Schick Chick Facebook App

mark — Wed, 21 Mar 2012 02:40:50 +0000

Working with Y&R advertising New Zealand and Schick Women NZ I developed a fun little facebook app which simply allows users to shave a little chickens overgrow hair. The app is part of Schick Women NZ‘s facebook brand page and the concept and design was produced by Y&R who then had me develop the concept into a workable application.

Users who land on the facebook timeline brand page will be presented with a little chicken with an extreme case of overgrown hair. Users are prompted to use the Schick TrimStyle Razor to help shave a hair cut for our yellow little friend. As the user moves the cursor around the stage the TrimStyle Razor follows their cursor movement and when pressed begins shaving off excess hair (never cutting the chicken). Once the user has styled their chicken they are prompted to enter their details to submit their image and go in the draw for an Easter hamper pack. Once done the image and details are saved to a database and the user can then play again, preview and comment on other submitted entires.

As of right now it’s been up for only two days and already has had a huge number or submissions from followers and new facebook likes. It was my first app developed for the new facebook timeline layout and there where a few new things to get my head around but overall it was a much nicer experience developing with a little bit more canvas space.

This application was a second iteration of a previous Schick campaign again conceptualised by Y&R New Zealand. However, with this one I took the time to add a few extra features that give the user more interactivity. I developed a html display that allows users to preview and comment on selected entries. These entries and comments are first selected by the Schick Women NZ and Y&R NZ team before being made public. While this may at first seem limiting it is important as it allows the safeguarding of content while keeping the application interactive.

The application is to run on the lead up to Easter 2012 so if your reading this post after then I doubt you will have the chance to see it live in action. For those of you who see this before then you can check it out at http://www.facebook.com/SchickWomenNZ/app_344609015582389.

Mark

change mac folder icons

mark — Mon, 12 Mar 2012 20:44:26 +0000

A nice simple explanation of changing folder icons on your mac.

Javascript OOP

mark — Fri, 03 Feb 2012 01:23:52 +0000

Another way to go about some OOP for JavaScript. The bracket incased function initialises a self executing anonymous function that encases the class. In the example below are several ways of calling the class methods and properties.

Main Application or JS file.

var person = new Human("male", "28", "New Zealand", "brown");
console.log(person.nationality);
console.log(person.walking_speed);
person.startWalking();

A JS Class Example

/**
 * Create a self executing anonymous function
 * Use the '()' brackets at the end to initalise this method.
 * Pass in variables when executing.
 */
(function(window) {
 
	// Public variables
	Human.prototype.walking_speed = 10;
 
	// Static variables
	Human.running_speed = 20;
 
	function Human(sex, age, nationality, eyeColor) {
		// public variables
		this.sex 			= sex;
		this.age 			= age;
		this.nationality 	= nationality;
 
		// private variables
		var _eyeColor = eyeColor;
 
		this.getEyeColor = function(){ return _eyeColor; };
	}
 
	Human.prototype.startWalking = function() {
		console.log(getDemographic(this) + " is walking");
	};
 
	// Private function
	function getDemographic(context) {
		return context.nationality + " " + context.sex + " " + context.getEyeColor();
	}
 
	window.Human = Human;
 
}(window));

If you want to create a singleton you can do it as follows.

/**
 * Create and instantiate a JS Singleton
 */
var Nationality = new function() {
    this.name = "New Zealand";
    this.location = "Australasia";
    this.getInfo = function () {
        return this.name + ' is located in ' + this.location;
    };
}
 
Nationality.name = "Australian";
alert(Nationality.getInfo());

Robotlegs – Simple Anatomy

mark — Mon, 28 Nov 2011 03:19:10 +0000

I’ve been using various design patterns for a while but haven’t really had time to get into leveraging a framework like robotlegs. So in the midst of moving countries again I took some time out to really get an understanding of the framework and how my future applications might benefit from it.

As I had 24 hours of flying ahead of me I downloaded the new ActionScript Developers Guide to robotlegs by Joel Hooks, Stray (Lindsey Fallow). I found the reading helpful in getting the core concepts behind robotlegs and as soon as I had a chance at home to play with it, it all came together.

Anyways, I’ve created a quick-start shell project using robotlegs and sourced it on Github. It’s pretty simple and uses bootstrapping to break apart segments of the MainContext.

Source Code available here on Github.

I hear Robotlegs 2 is on the way shortly two. Look forward to seeing the changes.

check user is facebook page fan

mark — Tue, 04 Oct 2011 23:33:00 +0000

A nice simple solution as posted by Ibrahim Faour on his blog masteringapi.com.

I’ve posted his solution here as well.

$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true); 
 
if (empty($data["page"]["liked"])) {
     echo "You are not a fan!";
} else {
     echo "Welcome back fan!";
}

Check URL for SSL

mark — Tue, 04 Oct 2011 23:30:24 +0000

Sometimes I just need to run a quick php test to see what url has been used, specifically to see if it is using SSL.

1
2
3

if ($_SERVER['HTTPS'] == "on") {
    echo "SSL Active";
}

Flash exporting to .mov

mark — Tue, 21 Jun 2011 23:25:19 +0000

So I’ve been asked several times to come in and freelance on jobs that require the final output to be in video format and honestly the process of getting flash to video is not that straight forward.

Exporting flash files to .mov is not as straight forward and clean as you’d hope. There are the hurdles when exporting flash files containing ActionScript, then you have MovieClips in MovieClips which do not animate out in the final export, dropped frames, dropped pixels, and gradient display issues are but a few you will encounter before you then have to convert that .mov file to something else where you’ll have even more issues.

I’ve searched high and low on the web to find answers and workarounds to some of these issues and have often come up empty handed. I thought it was simply my machine until I tried numerous others. I also thought I was doing it wrong until I found many other flash designers/developers complaining about the same issues. I am still sure there is someone out there who knows the exact sweet spot for exporting flash files to .mov’s but I haven’t heard it yet. So here is a list of tips and tricks on how I get around some of these common flash mov exporting problems.

Frame Rate 20 – resolves dropped frames and dropped pixels.

This is an odd quirk, but another freelancer once told me to set the frame rate to 20 and it instantly got rid of my dropped frames and pixels. The draw back to this is that now obviously you’ve got a mov clip that has a frame rate that will be different from any standard tv or film model. A bit of experimentation is required with speed and timings if your planning on dropping the mov in video editing software which will alter the frame rate to its own.
ActionScript export to mov

Contrary to what some say you can export a MovieClip with ActionScript inside it to a mov. To do this goto your Export Movie settings and you will see a ‘stop exporting’ section, from this select the option ‘after time elapsed’. Enter the duration of your flash movie here in the format suggested (add 30 seconds to this if your going to edit this later in video editing software, also you might want to add a few seconds extra at the beginning if you want a cross fade).
Image Quality.

Ensure all bitmaps (png, gif, jpg) are set to top quality. You want these to look good after all. If they are animating a lot you might want to considerer setting the smoothing property. Experiment to see which output looks best on which bitmaps.
Gradients.

Don’t use the Flash authoring environment for creating gradients if you can avoid it. It is far better to create these in photoshop using the proper gradient tool (see tizag.com tutorial), export them as a png and bring them into flash. The quality difference is incredible. However, there can be issues with large bitmaps that are animating, so you will have to test and see what works best for you.

Extra Tips:

For ActionScripting I recommend experimenting with code snippets you plan on using first before you get to far down the track. Try out an effect on a basic object and export it, work on it till it starts looking right in the mov, then implement it with the rest. For me I’ve found sometimes it’s good to drop code on the relevant frame rather than loading it in via classes or on frame 1. I don’t know why but this has helped output on several occasions. Again experiment yourself, each projects different.
Avoid using filters on large objects (probably already a given) but they will cause errors if say you’re exporting in full HD dimensions.

JS Class Refresher

mark — Tue, 12 Apr 2011 23:28:22 +0000

Just a little refresher on setting up a JS class.

To simply create a new JavaScript class create a constructor function and include any properties inside of this. To add methods to the class use the prototype protocol ie. className.prototype.MethodName.

function Human(name, age) {
	this.name = name;
	this.age = age;
}
 
Human.prototype.logInfo = function() {
	console.log("I am: " , this.name);
}
 
Human.prototype.promote = function() {
	this.age ++;
	console.log("My new age is: " , this.age);
}
 
Human.prototype.setAge = function(age) {
	this.age = age;
}
 
Human.prototype.getAge = function() {
	return this.age;
}

The Class can then be instantiated and used as follows:

var bill = new Human('Bill', 1984);
bill.logInfo();
bill.promote();
 
var murray = new Human('Murray', 2003);
murray.logInfo();
murray.promote();
murray.setAge(61);

Flash Banners: Part 2Designer/DeveloperWorkflow Tips n Tricks

mark — Sun, 06 Mar 2011 23:05:14 +0000

In my last post I talked about how freelancing in London’s advertising industry promted me to write a blog post on some good flash build principles and practices specifically for flash banner ads. Below I hope are some useful tips that will help streamline production for yourself and those in a team environment. My primary focus is on 3 aspects in building flash banner ads. The first is ensuring the first build is flexible enough to be transformed into multiple dimensions and multiple creatives. The second is creating the banner to be cross ad platform friendly (meaning that you don’t have to make extensive changes to deliver this on another ad provider) and thirdly building the ad in a manner that is understandable to both flash designers and developers.

Some of the methods I suggest here are pretty obvious but as I mentioned in my previous post are often not implemented. Most of these techniques I’ve refined over the years working on flash banners with other flash designers and developers. In no way am I putting myself forward as an authority on the subject, I’m sure you will have your own view on many of the ways I’ve gone about implementing these design stratergies and for those of you who’ve worked on resolving similar issues in workflow I’m quite keen to hear your solutions and add/change/update my own.

I’ve also created a flash file template that implements the discussed techniques. Feel free to download and use it as you will. If I feel anyone has any good recommendations I’ll update this page and implement those to the file also.

Download Example Flash File Here (zip)

1. The Flexible Build

File Set Up
Create around 5 frames for your ad and 4 layers. Label the top one ‘actions’ and on frame 2 place a ‘stop();’ call. Label the second layer ‘clicktag’ and the layer beneath this ‘mask’ and finally the bottom layer ‘timeline’.
Leave frame 1 blank on all of these layers, I’ll explain later.
Then on frame 2 create a MovieClip that will contain the whole ad. I usually call this something like ‘timelineMain’. In this clip you will do all your animating.
Create a mask and place it on frame 2 of the ‘mask’ layer and use this to mask the timeline. This is not always necessary but it has helped on several occasions where in showing ads to clients the elements from the timeline have displayed outside the ad dimensions because of the way they are previewing the file. Adding the mask simply cleared this up.
On frame 2 of the ‘clicktag’ layer place your button appropriately named ‘clicktag’ or ‘button’ if it’s generic. If you’ve got an add with rollover states then this may not apply and you will have to place it in the appropriate places of your ad, but 9 times out 10 this has been the best place to put it and get quick access to it.
Library

2. Cross Ad Platform Delivery

Blank Frame 1

Quite a few ad serving platforms require you to leave the first frame blank. So even if you don’t have to for a particular sever you might as well leave it blank incase you later have to then provide it somewhere else.
Dropping the main timeline animation of the clip in a MovieClip container can help when you have to set up the banner in a completely different format,

3. Communication. Creating an understandable workflow.

Probably the most painful pitful. Even if things are a mess if someone’s explained where things are or how their production system works you can work with it. If not more often than not it gets to a point where it seems it would be easier to simply re-build the banner. Below are some of the ways people have communicated their build stratergies to me and some of my own.

Frame 2, Actions Pannel – instruct me with your notes.

This is a great place, if not the most obvious place for designers and developers to read your instructions on how the banner has been put together, what variables/paramaters are important and how they should be set or adjusted. The good thing about putting them on frame 2 is that they are easy to find and they are with every version of the banner. It’s also important to place these on frame 2 so as to keep frame 1 empty for reasons mentioned in section 2.
Go into detail on how things are set up, why you did it a certain way, where things are located and how things are labelled. If you have MovieClips with actions on them, list them here and where they are located.
If you notice that your banner is over file size and your notes are quite extensive you may have to remove these notes. In this case save a production version with the notes and label this as the Master Production Version, so others know to check this out.
trace() – trace statements are our friends.

It is so helpful to run a banner from within a flash authoring environment and the first thing to be output is a brief explanation of any variables/properties and how they are presently set. These should then be updated appropriately say when a user interacts with an object, you might want to list the object that is being interacted with and any values that are being updated.
Loop Count.

Because not everyone is a programmer I set the loop count variable to 1. I also trace the loop count every time the ad loops. This lets me know as I’m watching it what loop I’m watching and enables me to catch it if it goes over the specified maximum loop count. A good way of doing this is to trace out the following:
trace(“Current Loop: ” + _loopCount);
Click Initiated.

I add a trace statement to the clicktag code. It is important to see while developing that the whole area of the ad is listening for the users click. Running the ad in flash and clicking randomly across it should then output a successful click message to let you know it’s doing what it should. I use the following: trace(“User Click Initiated”);
Labeling. Tell me what you are and what you do.

Call an apple an apple an orange an orange and put them in a folder called fruit! It’s really that simple. Call the button you use as a clicktag… ‘clicktag’. If a movie is a container for the whole timeline, call it something like ‘timelineContainer’. If you have a MovieClip you reuse for several instances give it a name that lets someone know it’s purpose, if it’s simply empty call it ‘blank’. This way when someone else, or yourself is browsing your Flash File Library they will get a good idea of what library items do what.
Naming Conventions.

Maybe not so important but nice none the less is how you name things. I personally use Camel Case but I don’t use Hungarian notation (maybe I should?) but rather put it in plain english in the name. So for those who are not programmers Camel case is simply naming clips without spaces or underscores and instead putting all the words together with each new word capitalised. eg. ‘elephant dancing container’ would become ‘elephantDancingContainer’. Do the same thing with your variables, it will keep the developers happy. For developers writing code that might need to be modified by a flash designer without much coding experience, write the variables with easy to understand names. eg. loopCount, loopMax & starsArray, starsArrayLength. Avoiding Hungarian notation here helps those who are not coders see what is what, what they can touch and what they probably shouldn’t.
Coding Notation.

I don’t really feel I need to get into that here as I’ve talked a bit about this in a previous post, but it is extremely important for those writing code in banner ads to document that code. There are many blog posts out there that deal with how to go about writing good documentation and I recommend you check these out. It helps the next developer and designer to see it’s importance and to work out what might need to be modified without having to read through the scripting itself. Write it cleanly and in plain english.