If you log into Facebook and travel to http://apps.facebook.com/wackywords/ you will see the game I’m currently developing. This is a funny word massive multiplayer role playing game built on Flash Builder and Google App Engine. Create funny combinations of words from random choices, then write out a description and try to sell your idea to investors. The more ridiculous the better. Gain cash as you get votes and investors, gain levels and buy skills. In the future you will be able to buy naughty words, upload videos and images to further illustrate your concept or start rivalries with other players or friends.
Here is an AS2 class that allows you to easily create and animate a slot machine style number scroller with two simple function calls. You can scroll numbers up or down by any increment, stopping and starting on any number. It contains many options using an optional greensock-style vars object. You can fine-tune animation speeds and heights individually for each character, or set a delay or onComplete function. Requires the GreenSock tweening engine.
Here’s an example. Note you can style or move the characters around on the stage virtually any way you’d like.
Download class file and FLA. Note: the SWF will work, but you will need to download greensock for the FLA to publish correctly.
And here is the class itself, comments and everything.
/**
* VERSION: 1.0
* DATE: 2011-01-18
* AS2
* AUTHOR: Kalin Ringkvist
**/
import com.greensock.TweenLite;
import com.greensock.easing.Sine;
import mx.utils.Delegate;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.BlurFilterPlugin;
/**
* NumberScroll is a class designed to conveniently scroll a series of numbers up and down, as in a slot machine or price countdown animation
*
*
* To use this class, first create several movieClips, one for each digit in the number you wish to animate, each containing a textField named 'txt'.
* If you want to scroll from 1 up to 999, or from 200 down to 10, you would place three movieClips on the stage. These movieClips can be identical or
* different from each other, and can contain other content, just as long as they contain a textField named 'txt'. Be sure the textFields also have the
* font properly embedded to show numbers.
*
* Next, create the NumberScroll object, passing in an array containing your movieClips, and an optional vars object to set options.
* Then, call startScroll(), along with the same optional vars object to begin the number scrolling
*
* <b>EXAMPLE:</b><br /><br /><code>
* import com.NumberScroll;
*
* //create the NumberScroll object, passing in an array of movieClips that each contain a textField named 'txt'. In this case, the movieClips are all inside a movieClip called 'numbers'.
* //the second paramater (1), sets the starting value
* var ns = new NumberScroll([numbers.txt1, numbers.txt2, numbers.txt3, numbers.txt4, numbers.txt5], 1);
*
* //start the scrolling. The object parameter is optional, but in this example, we use it to set the end value to 40, delay 2 seconds before beginning, set background textFields to %30 opacity,
* //set delay of .4 of a second between each iteration, call scroll99() upon animation completion, count by 1,
* //set animation height for each individual clip to 80, 80, 60, 40 and 20 pixels, and set the animation duration to 2 seconds, 1 second, 1 second, .8 of a second and .4 of a second
* ns.startScroll({endNum:40, delay:2, backgroundTextAlpha:30, incrementDelay:.4, onComplete:scroll99, increment:1, animHeight:[80, 80, 60, 40, 20], animDuration:[2, 1, 1, .8, .4]});
*
*
*
*</code>
**/
class com.NumberScroll{
private var textBGArray:Array;//the textFields that sit in the background
private var textArray:Array;//first set of moving textfields
private var text2Array:Array;//second set of moving texfields
private var parentMC:MovieClip;//the parent of the movieClips that are passed in
private var startNum:Number;
private var endNum:Number = 0;
private var curNum:Number;
private var curNumString:String;
private var numDigits:Number;//the number of digits in the current number
private var digitSpaces:String = "";//the string we add to the beginning of curNumString to insure it has the proper number of digits
private var delay:Number = 0;//delay before the main animation starts
private var incrementDelay:Number = 200;//delay between each increment, converted to milliseconds
private var increment:Number = -1;//the amount to count by, defaults to decrementing by one
private var backgroundTextAlpha:Number = 0;//the transparency of the background digits
private var animHeight:Array = new Array();//array of heights for the new number animation; must have one item for each textField movieClip
private var animDuration:Array = new Array();//array of animation duration values for each textField moviClip
private var onComplete:Function;//the function to call when the final number is done animating in
private var origYArr:Array;//the Y values for each of our passed in textField movieClips
private var readyToComplete:Boolean = false;//tells the tween complete listener whether we are ready to fire the onComplete function
private var countInt:Number;//the AS2 interval we use to call the animations
private var goingDown:Boolean = true;//whether or not we are incrementing or decrementing
private var arrLength:Number;//the number of textField movieClips in our animation
private var varList = new Array("endNum", "delay", "incrementDelay", "increment", "onComplete", "animHeight", "animDuration", "backgroundTextAlpha");
/**
* Constructor <br /><br />
*
* <b>SPECIAL PROPERTIES</b><br />
* The following special properties may be passed in via the constructor's or startScroll()'s vars parameter, like
* <code>new NumberScroll({endNum:100, onComplete:myFunction, increment:-5, animDuration:[2, 1, .5, .2, .1]})</code>
*
* <ul>
* <li><b> endNum : Number</b> The number you want the animation to end on</li>
*
* <li><b> delay : Number</b> The number of seconds to wait before beginning the animation</li>
*
* <li><b> incrementDelay : Number</b> The delay in seconds between each count iteration</li>
*
* <li><b> increment : Number</b> The amount to add on each increment (use negative numbers to count down)</li>
*
* <li><b> onComplete : Function</b> The function that will be called when the animation completes</li>
*
* <li><b> animHeight : Array</b> An array of numbers, one for each digit, to define the animation height for each individual character</li>
*
* <li><b> animDuration : Array</b> An array of numbers, one for each digit, to define the animation duration for each individual character</li>
*
* <li><b> backgroundTextAlpha : Number</b> Sets the alpha of the digit that sits in the background</li>
*
*
* </ul>
*
* @param vars optionally pass in special properties like
*/
public function NumberScroll(_textArray:Array, _startNum:Number, vars:Object){
TweenPlugin.activate([BlurFilterPlugin]);
textBGArray = _textArray;//setup our new variables
text2Array = new Array();
textArray = new Array();
origYArr = new Array();
parentMC = textBGArray[0]._parent;
startNum = _startNum;
curNum = _startNum;
curNumString = _startNum.toString();
numDigits = textBGArray.length;
var adjustLength:Number = numDigits - curNumString.length;//if we're counting up, see if the start value has fewer digits than the end value
for(var i=0; i < adjustLength; i++){//loop once for every digit difference and add a space each time
digitSpaces = digitSpaces + " ";
}
curNumString = digitSpaces + curNumString;
arrLength = textBGArray.length;
parseVars(vars);//convert any optional passed in vars to be saved till a startScroll() call
for(var i=0; i<arrLength; i++){
duplicateMovieClip(textBGArray[i], "scrollMC_" + i, parentMC.getNextHighestDepth());
textArray[i] = parentMC["scrollMC_" + i];//add the first animation copy to our list
duplicateMovieClip(textBGArray[i], "scrollMC2_" + i, parentMC.getNextHighestDepth());
text2Array[i] = parentMC["scrollMC2_" + i];//add the second animation copy to our list
text2Array[i]._alpha = 0;
textBGArray[i].txt.text = curNumString.substr(i, 1);//set the BG array to correct number
textBGArray[i]._alpha = 0;//we don't actually need this until the animation starts so we hide it in case we don't want it at all
textArray[i].txt.text = curNumString.substr(i, 1);//set the main array to correct number
textArray[i].isCurrent = true;//tells which copy is the one currently visible so we know which to animate out and which to animate in
text2Array[i].isCurrent = false;
origYArr[i] = textArray[i]._y;//record the original Y positions of the numbers
if(animHeight[i] == undefined){//set animation height and duration defaults if we didn't get a proper value passed through the vars object
animHeight[i] = 20;
}
if(animDuration[i] == undefined){
animDuration[i] = .2;
}
}
}
/**
* main function that starts the animation
*
* @param vars object containing any of the optional variables listed for constructor function
*/
public function startScroll(vars:Object){
if(vars.delay || delay){//if we have a delay, delay the beginning of the animation
delay = vars.delay;
TweenLite.delayedCall(delay, Delegate.create(this, startInterval), [vars]);
}else{
startInterval(vars);
}
}
private function parseVars(vars:Object){//loops through our list of allowed vars and sets the ones that have been passed in
for(var i=0; i<varList.length; i++){
if(vars[varList[i]] != undefined){
this[varList[i]] = vars[varList[i]];
}
}
}
/**
* @private
* begins the animation process after the initial delay
*
*/
private function startInterval(vars){
parseVars(vars);
if(endNum > curNum){//determine if we're going up or down
goingDown = false;
}
countInt = setInterval(this, "updateNumber", incrementDelay*1000);//begin the interval
}
/**
* @private
* function that runs once per number increment
*
*/
private function updateNumber(){
curNum += increment;//increment our number
if(curNum <= endNum == goingDown){//if curNum is equal to or moved beyond endNum
curNum = endNum;//make it match
readyToComplete = true;//tell the final tween we're ready to fire the onComplete func
clearInterval(countInt);//and delete the interval so this iteration is our last
}
curNumString = curNum.toString();
matchDigits();
for(var i=0; i<arrLength; i++){//loop once for every textField movieclip
var newMC:MovieClip = text2Array[i];
var curMC:MovieClip = textArray[i];
if(newMC.isCurrent){//figure out which clip is the current one and which is the new one, since they alternate roles
newMC = textArray[i];
curMC = text2Array[i];
}
if(curMC.txt.text != curNumString.substr(i, 1)){
newMC.txt.text = curNumString.substr(i, 1);//set the new clip to the correct text
textBGArray[i].txt.text = curNumString.substr(i, 1);//set background to correct text
textBGArray[i]._alpha = backgroundTextAlpha;
setupClipPair(curMC, newMC, i);//setup starting values and engage animation
}
}
}
/**
* @private
* adjusts curNumString to have the correct number of digits in case number drops a digit, e.g. when it goes from 100 to 99
*
*/
private function matchDigits(){
if(goingDown){
if(curNumString.length + digitSpaces.length < numDigits){
digitSpaces = digitSpaces + " ";
}
}else{//if we're moving up, we may need to strip a space instead of add one
if(curNumString.length + digitSpaces.length > numDigits){
digitSpaces = digitSpaces.substr(0, digitSpaces.length - 1);
}
}
curNumString = digitSpaces + curNumString;
}
/**
* @private
* sets up the pair of animation clips and engages the animation. runs after its been determined which is new and which is current
*
* @param curMC the movieClip that is currently sitting, displaying the current number that is about to be replaced
* @param newMC the movieClip that will be animated in to replace curMC
* @param index the index of these clips in their clip arrays so we can reference matching values for animHeigh, origY, etc
*/
private function setupClipPair(curMC:MovieClip, newMC:MovieClip, index:Number){//checks if it's necessary, then sets up the pair of animation clips and engages the animation. runs after its been determined which is new and which is current
newMC._y = origYArr[index] - animHeight[index];//return new clip to its top, invisible position
newMC._alpha = 0;
TweenLite.to(newMC, 0, {blurFilter:{blurX:10, blurY:50}});//instantly blur so its ready to fade in
//now we actually animate the new number in
TweenLite.to(newMC, animDuration[index], {_alpha:100, _y:origYArr[index], ease:Sine.easeInOut, blurFilter:{blurX:0, blurY:0}, onComplete:Delegate.create(this, tweenComplete)});
//animate the old one out
TweenLite.to(curMC, animDuration[index], {_alpha:0, _y:origYArr[index] + animHeight[index], ease:Sine.easeInOut, blurFilter:{blurX:10, blurY:50}});
curMC.isCurrent = false;
newMC.isCurrent = true;
}
private function tweenComplete(){
if(readyToComplete){
readyToComplete = false;
onComplete();
}
}
}
Here’s a link to a landing page I built with JQuery and CSS for Big Fish Games. Click on the large buttons to select a game to load over the video in the main Flash div. The list of related games at the bottom as well as the ‘try it’ link will update accordingly. I used JQuery’s animation function for the opening drawer, browser scrolling, and the animated glow.
Below is one of the many Flash banner ads I built using the AS2 GreenSock tweening engine that linked to this landing page.
This WordPress plugin allows you to build highly customizable PDF documents from any combination of pages and posts, or add a link to any post to download a PDF of that post. The UI is written in JQuery, the backend uses the open-source PHP library, TCPDF, for PDF generation. For source code, more info or screenshots, visit the PDF Creation Station download page at WordPress.org. You can also search for it in your WordPress admin’s plugin repository.
This image is of the settings page that allows you to customize the PDF and the link that is automatically displayed on every post.
Not pictured is the Tool page, with many similar options, that allows you to compile numerous different pages and posts into a single, highly customized PDF archive. Also not shown is the HTML insert fields and the list of 20 shortcodes you can use to insert headers or other post data.
This WordPress plugin creates a shortcode, PHP snippet, or widget for placing highly customizable lists of posts, pages, or attachments into your post content or theme, built in PHP and JQuery. To look at the source code or get more information, go to the download page on WordPress.org, or search for it in your WordPress admin’s plugin repository.
You can see this plugin in use in the right sidebar of KalinFlash.com. You may notice when rolling over the items in the “Recent Additions” widget, you’ll get the post excerpt as a tooltip, which can’t be done with the regular recent posts widget. The “All Portfolio Entries” is another example of this plugin’s widget feature. There are many options for which posts to show, and you can write your own HTML, CSS, and even JavaScript, totally customizing the display of the lists.
Here’s another example, using the shortcode feature instead of a widget. This is a dropdown list of every portfolio entry on this site, organized alphabetically by title instead of chronologically. You could even get crazy if you wanted to and show the post excerpt whenever an item is selected.
Another example of this plugin exists on every portfolio entry, at the top, where it displays “year”, “technologies” and “involvement”. These three items are custom fields applied to the posts. Technically this isn’t a list. This is an example of Post List set to “none” mode, where all the internal shortcodes refer to the current post instead of the items in the list.
And here’s a screenshot of the main shortcode creation page:
Here’s another example, a CSS based table that displays all posts from the “Flash” category in a random order.
This is the section created on the page/post edit screen
This is a simple WordPress Plugin written with PHP and JQuery that adds a convenient little box to your page/post edit screen that contains a list of all pages, posts, tags, categories and links, with edit buttons for each and a link to the actual live page for easy copying and pasting (Google Chrome and Safari users can even drag and drop). This plugin contains a self-caching feature so that the HTML code does not need to be recompiled every time the box is displayed, making it surprisingly light-weight.
For more information, or to get the source code, visit Kalin’s Easy Edit Links Download page at WordPress.org, or search for it in the plugin repository of your WordPress admin.
Here’s a screenshot of a portion of the settings page, giving you the ability to drag-and-drop to reorder items along with some other options regarding what to display.
This is a class I built in 2008 to animate any textfield, character by character. All you have to do is create a textfield, enter the text you wish to animate, then pass that into the class and it will make a nearly exact duplicate of the textfield, with each individual character in its own movieclip, then animate them in or out based on different parameters. It includes a dozen or so animation options. Go ahead and download the source and feel free to use this code wherever you like.
This is a tool that allows you to parse through folders and files and commit an action (move, delete, copy, rename) on any file and/or folder that matches certain criteria. You can even enter a regex to select items. This is written in JQuery and HTML, utilizing the Appcelerator Titanium engine to turn it into a desktop app that runs on Windows, Linux or Mac.
At this point the app is functional, but is still not tested enough to be reliable. I never got around to finalizing it or using it for my own purposes, though I would still like to someday. You can download the actual app and test it, but be certain not to let it near sensitive files. You can also download the source code, but you will need to have the Appcelerator development environment installed, and I can’t guarantee it will still work with newer versions of Appcelerator.
This is a little app to hold values that could be loaded when needed from Flash banner ads. I worked with one other developer, but wrote most of the code, using Python and JQuery, with Google App Engine for the backend.
The idea is to enter start and end dates for your campaigns, so that your banners can know what information to display, reducing the need for re-building every time you need to update a promotional period or something. Also included were the custom fields, where you could update any kind of information on the fly. I also built AS2 and AS3 Flash APIs that could be used to load the information. The video here is of the interface where you could enter all the values.
In 2009 I made this Walmart wishlist banner in AS3. The data comes from an XML file and a folder full of merchandise images. It had two versions, one calculated price, the other served as a wish list without prices.
