Getting Started with Smirk

To get started using Smirk, all you need to know is your UUID. Your UUID is always listed at the bottom of your Smirk page, it's that long string of letters and numbers after where it says, "Smirk UUID is:"

When working with the Smirk API, as long as you include a UUID, you will always get back the "Current Smirk" for a given user. You can usually also include an IID variable when you want to get to a specific smirk, but we'll talk more about that later.

Using Smirk: the basics

Embedding a Smirk with Flash

The simplest way to get a smirk to display is to copy and paste the embed code on your Smirk page directly into HTML or into a web interface that accepts HTML input (such as your MySpace profile). You can play with the width and height parameters as well to change the way it displays. The embed code on your Smirk page already includes your Smirk UUID so you don't have to do anything special to get it to work. Give it a try!

Embedding a Smirk with HTML and JavaScript

You can also use HTML and JavaScript to display your Smirks. This is slightly more complicated but a lot more flexible in different environments. This method uses a web standards based approach to display a smirk animation and doesn't require a browser plugin allowing smirks to display on devices without Flash support such as the iPhone. To use the JavaScript version of Smirk:

Include this JavaScript on your page:

<script src="/js/smirk_animator.js" type="text/javascript"></script>

Add a couple of classes to the HTML object you wish to become a smirk (this will usually be an image tag, but it doesn't have to be, it can be any HTML block element such as a DIV)
```
<img src="/images/no-smirk.jpg" class="smirktacular uuid-is-1627a31f573d57b55d5085a4179f1e4141a2392f loop-is-true" />
```

If you add these classes to a DIV or other HTML block element, that element's background CSS properties will be dynamically animated with your Smirk. This can have some interesting effects as in the example below where the background animation is able to tile. If you omit the loop-is-true class or set it to loop-is-false, your smirk will only animate on mouse-over. Have a look at the full API docs for more.

You can also source a specific Smirk for a user by adding the "iid-is" class as in the following example. Look for a user's IID at the bottom of their Smirk page next to their Smirk UUID.

<div class="smirktacular uuid-is-1627a31f573d57b55d5085a4179f1e4141a2392f iid-is-2840 loop-is-true" style="width: 500px; height: 170px;"></div>

URL Utilities

There are a couple of URL-based utilities for smirk as well:

Creating the JPG

/jpg.php?u=1627a31f573d57b55d5085a4179f1e4141a2392f

will always re-direct to a user's current smirk as a static jpeg image. You can use it as the source of an image tag like so:

<img src="/jpg.php?u=1627a31f573d57b55d5085a4179f1e4141a2392f">

Creating the GIF

/create_gif.php?u=1627a31f573d57b55d5085a4179f1e4141a2392f

will create an animated GIF image from a user's current Smirk. You can save this image and use it anywhere animated GIFs are supported, or use it as the source of an image tag to make the animation always reflect the user's current Smirk like so:

<img src="/create_gif.php?u=1627a31f573d57b55d5085a4179f1e4141a2392f">

We hope that you will find all kinds of interesting uses and mis-uses for smirk. Please email us with examples at hacks[at]mysmirks.com. Thanks for using Smirk!

Embed-able Icon - smirk.swf

At 19Kb, this is the light-weight way to display video icons to their fullest extent, without excess functionality, and without using the animated gif. This is what you'll use in place of the user's current static icon in your application, and it's what we use when a users embeds an icon on their blog, profile, or website.

FlashVars

uuid : String

Use this alone to get the current icon, and with an iid to play a specific icon.

iid : Integer

The ID of the Icon you want to load.

iurl : String

If you know the URL of the .flv file, you can use this without a uuid & iid. You must however, define blerb if you want there to be a mood.

domId : String

The DOM id of the object - used for load order and verification.

smirkObject : String

Defines the namespace of your custom JS class. All calls originating from flash will call "Customname." Default is "Smirk."

blerb : String

Enforce that mood! Used to display a certain mood.

showBlerb : Boolean

Use this to hide the blerb. Default value is true.

loop : Integer

Set loop equal to 1 to make the icon loop endlessly.

mirror : Boolean

Flips the video horizontally. Default value is true.

href : String

Pass in any link and the Icon will link accordingly

target : String

Works just like HTML. Default target is "_self" if a target is not defined.

External Interface

smirkIsLoaded (domId)

Called when smirk.swf loads, use to attach anything you need to kick off when a smirk loads

getIcon (iid:Int)

Call getIcon with an iid to load and edit any of the user's icon.

getCurrentIcon ()

Load the users current icon. A "current" icon is always set.

Maker - maker-v4.swf

Maker records new icons and works directly with Icon.swf to display the new icons in a grid.

FlashVars

uuid : String

Use this alone to get the current icon, and with an iid to play a specific icon.

iid : Integer

The ID of the Icon you want to load.

domId : String

The DOM id of the object - used for load order and verification.

pid : String

Your partner ID. If defined, it drops the user into a special start mode, where they can login if they're already a smirk user, or can start making video icons.

blerb : String

Enforce that mood! Used to display a certain mood.

startMode : String

There are various modes the Maker has built in to handle the icon creation process. You can define which state the maker starts in.

new: Create a new icon for a known user (requires a uuid)
edit: Plays an icon and shows edit controls (requires a uuid & iid)
play: Plays an icon and hides all controls (requires a uuid & iid)

mirror : Boolean

Flips the video horizontally. Default value is true.

newbie : Boolean

Is the user new to making video icons? If so, we'll generate a new uuid in the backend.

External Interface

switchMode (mode:String)

You can define which mode the maker should be in.

new: Create a new icon for a known user (uuid must be known)
edit: Plays an icon and shows edit controls (uuid & iid must be known)
play: Plays an icon and hides all controls (uuid & iid must be known)

getIcon (iid:Int)

Call getIcon with an iid to load and edit any of the user's icon.

setBlerb (blerb:String)

Forces a blerb in creating a new icon, or in play and edit modes. Even if the icon already has a blerb, this call will display the custom blerb. The old blerb only gets overwritten when the users re-records the icon.

Icon - icon-v3.swf

These little guys buddy up with Maker to complete the circle in making, editing, and deleting video icons. They have the added functionality of setting the current icon, and deleting icons. As a user, they're what show up in the icon grid when you're logged in on your icons page.

FlashVars

uuid : String

Use this alone to get the current icon, and with an iid to play a specific icon.

iid : Integer

The ID of the Icon you want to load.

domId : String

The DOM id of the object - used for load order and verification.

smirkObject : String

Defines the namespace of your custom JS class. All calls originating from flash will call "Customname." Default is "Smirk."

blerb : String

Enforce that mood! Used to display a certain mood.

mirror : Boolean

Flips the video horizontally. Default value is true.

External Interface

getIcon (iid:Int)

Call getIcon with an iid to load any of the user's icon.

showAsCurrent (bool:Boolean)

Shows the icon as current if true, not if false. A user's "current" icon is what they choose to get displayed everywhere. Pretty straight forward, huh? Again, we handle this for you, but it's documented in case you wanna get all hacky.

processingIcon ()

This gets indirectly called by Maker to show the "Toasting" state when the icon is being saved to the server.

unselect ()

Call this to hide the selection highlight. (We handle this for you already)