OneClickDog.com created Littlewheel which has won an MTV award for best browser game and it’s no wonder. They’ve taken the old point-and-click game and created some of the most beautiful animation, that tells an interactive story with a challenge of bringing you in-game friends back to life.

AUTHOR: Mark Shufflebottom | Web Designer Issue 180

ANNOTATIONS

Background
The background contains blurred imagery giving a sense of depth to the project and creates a rich environment that becomes very believable.

Point-and-click
The game is a familiar point-and-click that allows users to explore the interface and solve puzzles in order to progress. The white circles give you a clue as to clickable areas that are interactive.

Interactive
The scenery can be interacted with and usually some small detail is overlooked when trying to solve the puzzles.

Silhouette
The silhouette style of imagery gives a very striking look which uses Flash’s flat vector style to great strength instead of being perceived as a
weakness.

Avatar
Your character is a robot who is trying to restore power and life to a city and wake the powerless robot population.

inspiration http://fastgames.com/littlewheel.html

TECHNIQUE
1 Add symbols
Create the player Movie Clip you want to move. Add this to the stage and give it the instance name of ‘player’. Now create a button in the library and add two instances of the button on each side of the stage. Name one ‘walkHere’ and the other ‘walkThere’.

2 Setting up the code
On a new layer, select frame 1 and open the ActionScript editor. Copy in the code as shown into the editor. The irst three lines set up some variables that we will use. The irst is the most important as it will determine the speed at which your player moves. Then we set up listeners to listen for mouse clicks on either of the buttons.

var walkRate = 15;
var targetBuffer = 10;
var clicked:String;
walkHere.addEventListener
(MouseEvent.CLICK, goToPoint);
walkThere.addEventListener
(MouseEvent.CLICK, goToPoint);

3 Move when clicked
After the irst set of code copy in the next code as shown. This is the function that is called when either of the buttons are clicked on. Notice that the player is moved to the position of the mouse when the user clicks the button and this is stored in the targetx and targety variables. The player is then moved by adding the movePlayer listener which is called every frame.

function goToPoint(e:MouseEvent)
:void
{clicked=e.target.name
player.targetx = mouseX;
player.targety = mouseY;
player.addEventListener
(Event.ENTER_FRAME, movePlayer); }

4 Move the player
Add this code under the last. It is called every frame and moves the player towards the target position. You will notice a large if statement, this is checking to see if the player has reached the target and if so the listener is removed so that the player stops moving.

function movePlayer(e:Event):void
{
var pMove:Array = new Array();
pMove = getMovement(player.
targetx,player.targety);
var xinc = pMove[0];
var yinc = pMove[1];
player.x += xinc;
player.y += yinc;
if ((player.x > (player.targetxtargetBuffer)
&& player.x < (player.
targetx+targetBuffer)) &&
(player.y > (player.targetytargetBuffer)
&& player.y < (player.
targety+targetBuffer)))
{
player.removeEventListener(Event
.ENTER_FRAME, movePlayer);
}
}

05 Last code
The inal section of code works out the position increment to move the player to. Once done, hit Return and Enter on the keyboard to see the ile. Click on either of the buttons to see your player move to those points.

function getMovement(thisX, thisY)
:Array
{
var movement:Array = new Array();
var xdiff = (thisX – player.x);
var ydiff = (thisY – player.y);
var diff = Math.sqrt(Math.
pow(xdiff,2) + Math.pow(ydiff,2));
var fraction = walkRate / diff;
var xinc = fraction * xdiff;
var yinc = fraction * ydiff;
movement.push(xinc, yinc, diff);
return movement;
}

COMMENT | What the experts think of the site
Simple gameplay works best
“The beauty of Littlewheel is that it is a very simple game that anyone can play. The whole point of the game is to control a very limited selection of actions until you progress to the next screen. When you inally complete the game it is something that anyone can achieve but it gives you a massive sense of accomplishment because of all the beautiful animation.”
Mark Shufflebottom

As part of building a brand logo, it is important to give consideration to how it moves as much as the visual communication arrived at for a static logo. With more and more brands using screen-based media, motion literacy is becoming increasingly important as part of the web designer’s general knowledge. In this tutorial we will turn a regular logo into a motion sting. This could be used as part of a website, mobile app or location-based screen to give presence to the brand. The first part will focus on giving the logo weight, this in part is done by using a 3D shape for the logo, but using motion we can make this more real by adding bounce as it drops into shot. The ground will have a reaction by generating a splat that vines will grow out from. Using some particle effects we can create a reveal on the graphic logo to highlight the wording and bring this to the forefront of the visuals.

tools | tech | trends: Flash

This tutorial originally appeared in Web Designer issue 176, authored by Mark Shufflebottom. The tutorial files may be downloaded here

1) Getting started

Drag the project folder from the CD to your desktop, inside the folder open ‘start.fla’ in Flash. The project contains many of the assets needed for the project in the library. On the stage you’ll see the background in place. Add a new layer and name it ‘drop’.

2) Add the logo

From the library drag the ‘logo-center’ to the stage and position just off the top. Right-click the timeline and choose ‘Add motion tween’ from the menu. Move to frame 12 and drag the logo down to the middle of the screen. Switch to the Motion Editor tab and scroll down to the ‘Eases’ section.

3) Add a bounce

Click the plus icon and choose ‘Bounce In’ then increase the value to 15. Scroll up and under Basic Motion Y change the Ease drop menu to ‘2-Bounce In’. Switch back to the timeline and Ctrl/Cmd-click frame 13, then right-click and choose Split Motion. If you preview the animation you will see the logo drop and bounce.

Download the full code to accompany this tutorial

A CUSTOMSKINNED YouTube player isn’t possible, right? Well, it is now. Using YouTube’s JavaScript API combined with a chromeless version of its embedded Flash player allows you to control a video window with custom JavaScript/CSS controls. Throw jQuery (http://jquery.com) into the mix and you can create a really nice custom-skinned player with all of the functionality of a basic Flash player.

YouTube’s extensive API also makes it possible to load and play several videos with one player, allowing you to take your player a step further and create a video gallery. A demo player showcasing just about everything you can do with the API is available at http://tinyurl.com/324h6aq. We’ll cover the basic setup of a custom player, as well as how to integrate an optional video gallery. The good folks over at Airwalk (http://airwalk.com) have recently launched a new website showcasing this functionality and have generously allowed us to feature their player, imagery and videos for the purposes of illustration.

01 API reference

When using an API, a good place to start is always the reference. Take a look at the YouTube JavaScript Player API Reference (http://code.google.com/apis/youtube/js_api_reference.html) to get an idea of what’s possible for your player. It’s nice to know this stuff up front so you don’t have to make changes later!

02 Project setup

The code presented in this tutorial is all XHTML 1.0 Transitional. So really, the only requirement here is that you use that for your doctype. Beyond that you could keep things organised by storing assets (css, images, JavaScript) in a data folder, separated in subfolders by type.

03 Some simple CSS
The XHTML/CSS setup on the CD is pretty easy. The CSS contains two sections, one for some generic reset declarations to strip the browser defaults off of most items and another section for the player layout.
@charset “utf-8”;
/******************************
* Reset *
* *
******************************
/ */
* {
padding:0;
margin:0;
border:none;
}
html {
height:100%; width:100%;
}
body {
font:16px/24px Arial, Helvetica, sans-serif;
height:100%; width:100%; background:#fff
url(../images/body-bg.gif) top left repeat;
}
/******************************
* Layout *
* *
******************************
/ */
/* … */

04 Play/pause button setup

The play/pause button should be set up with a sprite background image containing both the ‘playing’ and ‘paused’ states. This way, when the state changes you can simply move the background image and there is no need to load a new image into the button. We’ll cover how the switch works later in the tutorial.

05 Seekbar setup

The seekbar should be set up with a sprite background. The functionality will be different as the background will be positioned to reflect the percentage of the video that’s played. Set the background colour of the seekbar to any colour, then add a background image of a different colour that’s large enough to fill the seekbar.

06 Mute button setup

The mute/unmute button should be set up exactly like the play/pause button. We’ll cover how to switch the position later in the tutorial.

07 JavaScript framework

For JavaScript, include a couple frameworks and your own player.js file. The first framework, jQuery (http://jquery.com), will be used to reference the controls, bind event listeners to them and update their display as the player state changes. Next, SWFObject (http://code. google.com/p/swfobject/) will be used to embed the chromeless Flash player on the page. Finally, your own player.js file will tie it all together unobtrusively (no in line JavaScript will be used). Let’s look closer at player.js…

08 Document ready
The first thing you need to do in player.js is set a few global variables for the player and listen for the DOM to be ready. As you can see, jQuery makes this really easy by simply attaching a ready listener to the document object. Inside this listener, now that items are ready, attach the listeners to the player controls.

var player = null;
var ready = false;
var seekReady = false;
var playheadInterval = 0;
var tooltip = null;
$(document).ready(function() {
// embed chromless player
var id = ‘flash’;
var src = ‘pgfLv6-Qv0w’;
var params = {allowScriptAccess:”always”};

09 YouTube player ready
The function “onYouTubePlayerReady” is required to be a global object by the YouTube Chromeless Flash Player,
and will be called when the player is ready to accept commands. In this function, get a reference to the player, add a state change event listener and flip the ready flag.

/************************************************
* onYouTubePlayerReady:void *
* *
* Called from the YouTube player API. *
* This player is ready for action! *
************************************************
/ */
onYouTubePlayerReady = function() {
player = document.getElementById(‘myplayer’);
player.addEventListener(“onStateChange”,
“onPlayerStateChange”);
ready = true;
}

10 YouTube player state
Each time the YouTube player’s state changes, it’ll dispatch a state change event and call this function. The new player state code will be passed into this function. You can see which state is mapped to which code by looking at the comments in the code below.

/************************************************
* onPlayerStateChange:void *
* *
* Handle player state change. *
************************************************
/ */
onPlayerStateChange = function(s) {
switch(s) {
case -1: // unstarted
return;
case 0: // ended
resetPlayer();
return;
case 1: // playing

11 Update the playhead
While the player is playing, the “updatePlayhead” function should be called on an interval every ten milliseconds. This function takes the player’s playhead time divided by the player’s total time to determine the percentage of the video that has been played, and sets the position of the background sprite of the seekbar respectively. A portion of the code for this step is shown here for reference.

/************************************************
* updatePlayhead:void *
* *
* Update the seekbar. *
************************************************
/ */
updatePlayhead = function() {
if(typeof(player.getCurrentTime) ==
‘undefined’) {
clearInterval(playheadInterval);
return;

12 Play/pause
The “playPause” function should check the player’s state, play the video if it is unstarted, ended, or paused and pause the video if it is playing. This function also manages the display of the play/pause button by setting the position of the background image depending on the player state.
/************************************************
* playPause:void *
* *
* Toggle play/pause. *
************************************************
/ */
playPause = function() {
switch(player.getPlayerState()) {
case -1: // unstarted
case 0: // ended
case 2: // paused
player.playVideo();

13 Seek percentage
The seekbar should also handle clicks to seek the video.  This is done by determining the x position where the user clicked on the seekbar and dividing that by the total width of the seekbar. This gives us a percentage to seek the video to.

/************************************************
* seekToPercent:void *
* *
* Seek to the passed percentage. *
* *
* percent:Number – percent to seek to. *
************************************************
/ */
seekToPercent = function(percent) {
var time = percent * player.getDuration();
player.seekTo(time, true);
}

14 Toggle sound
The “toggleSound” function should check if the player is currently muted and unmute it, and vice versa. This function also manages the display of the mute/unmute button by setting the position of the background image depending on the player’s sound state.

/************************************************
* toggleSound:void *
* *
* Toggle mute/unmute. *
************************************************
/ */
toggleSound = function() {
if(player.isMuted()) {
player.unMute();
$(‘#mute-btn’).css(‘backgroundposition’,
‘0px 0px’);
} else {
player.mute();
$(‘#mute-btn’).css(‘background

15 Final steps to finish

That’s it! You should have a functioning custom player with play/pause, seek and mute functionality. If you have any problems, reference the files included on the CD. If you would like to take your player a step further, check out the ‘In Detail’ section in this article which covers turning your player into a gallery.

FURTHER TECHNIQUE

Turn your custom player into a gallery

In the example code there are several pieces of code denoted with the comment “Video Gallery
(Optional).” These optional blocks are what is required to add the video gallery.

Step 1: Thumbnail list XHTML/CSS
The first step is to create an unordered list (or any other element that you prefer) to contain the links to each video in
your gallery. The example on the CD shows a list floated next to the player with square thumbnails floated in three  columns. Each list item contains a link with a call to the “loadVideo” function and passes the video id. This is really the only requirement, everything else can be styled as you choose.

Step 2: Adding a preview tooltip
Next, add a preview tooltip to give the user a preview of each video before they click to load it. In the example on the CD you will find a section commented “tooltip” in the document ready handler (player.js line 44). In this section, a new tooltip div is created and styled. Then listeners are added to each thumbnail in our unordered list to fill, position and show the tooltip on mouseenter and hide the tooltip on mouseleave.

Step 3: The “loadVideo” function
In the “loadVideo” function flip the ready flag back false and use the YouTube JavaScript API’s “cueVideoById” function to load a new video. Note that the “cueVideoById” function also takes parameters for start time and quality which have been set to “0” and “default” for the purposes of this example. When the new video is loaded, the player will dispatch the “stateChange” event with a “cued” status. Simply handle this event in the “onPlayerStateChanged” listener and reset the
player/controls for the new video.

Don’t just emulate your HTML pages, use Flash in your designs to add flare and dynamism to your static, lifeless imagery

The biggest mistake any Flash designer can make is to merely emulate what you can do in HTML with Flash. Flash designers should play to the strengths of Flash using its rich palette of animation tools and special effects to add value to what could normally be displayed using HTML. One of the largest uses of Flash on the internet is for marketing purposes.
In this tutorial we will explore taking a static image and adding interest to this using a variety of special effects, such as blurring the background and letting it fade into focus slowly so that the user’s attention is focused on the foreground. We will place a product in the foreground and add flashes of light to draw attention to it. Rather than just displaying static text, we will dynamically script the text onto the design using a typewriter effect with ActionScript 3.0. Once you have completed the tutorial you may want to use the same techniques to fade the content out again.

This article was originally authored by Mark Shufflebottom and appeared in Web Designer issue 167. You may download the project files here

01 Setting up the document

From the cover CD browse to the tutorial folder and open ‘start.fla’ in Flash CS4. Once open, look in the Properties panel and change the background to black, the frame rate to 25fps and the document size to 1024×618 pixels. In the library click on the ‘bg.jpg’ image and drag it to the stage.

02 Convert to Symbol

Position the image at 0 pixels on the x and y axis in the Properties panel, then go to the Modify menu and select Convert to Symbol. Name the symbol ‘bg’ and make it a Movie Clip then click OK. Right-click on the frame and choose Create Motion Tween from the menu. Drag the timeline out to frame 111 and move the first frame to five.

03 Add the tweens

Move the playhead to frame five and then click on the image on the stage so it is selected. In the Properties panel add a colour effect of Alpha and set this to 0%. Further down in the properties is the Filters. Add a Blur filter to the image and set it at 25 pixel blur on both the x and y axis.

Comics have far reaching influence these days, following Hollywood’s pillage of the best and most successful comic book tales as they try to cash in on ready-made audiences. DC Comics has recently attempted to turn its comics into digital adventures by releasing titles such as The Watchmen and Batman as digital comics on DVD and Blu-ray. These comics are paced to audio to enhance the stories so that they can be watched on the home TV.
In this tutorial we are going to up the ante as we create a more immersive interactive experience. Instead of simply playing the comic, we will create a 3D scene by placing content on different z depths in CS4 and allowing the user to move the mouse round to actually look into the scene. To advance the story the user will click the mouse button to move from frame to frame. You can change the content in the tutorial for your own comic images.

This article was originally authored by Mark Shufflebottom and appeared in Web Designer issue 168. You may download the companion project assets by clicking here

01 Setting up the project

From the project files open the ‘start.fla’ file in Flash. In the properties panel change the size of the document to 800×440 pixels then look in the library to see the assets that have been split into folders so that they are easy to use. Press Ctrl/Cmnd+F8 to create a new symbol, name it ‘perspective’ and make it a Movie Clip.

02 The first scene

Open the scenery folder in the library and drag the ‘corridor’ symbol onto the stage. In the Transform palette increase the size of the corridor to 200%. Position this at -1102 pixels on the x axis, -580 pixels on the y axis and 300 on the z axis. Now position the corridor in the background of the perspective frame.

03 Add your hero

In the hero folder of the library drag the ‘hero_move’ symbol onto the stage positioning this at -382 pixels on the x axis, -314 pixels from the y axis and 246 pixels on the z axis. Add the ‘sadus1’ symbol from the enemy library onto the stage and position at -658, -382, -50 pixels on the respective x, y and z axis.

04 Add the glow

From the props folder in the library drag the ‘glow’ symbol onto the stage, use the Modify>Arrange menu to send the glow back behind the ‘enemy’. Position on the z axis at -50 pixels and in the Properties panel add a 15 pixel blur filter. Click on frame 30 and press F5 to extend the timeline, then add a new layer.

Create a Flash header scene which animates according to your system clock

Tired of the looped animations or static design of your site headers? Here is your chance to create something which will be different at every visit!

When you design something, you are usually happy with it for some time. After a while though, you start thinking about changing things so people don’t always see the very same thing and inevitably get bored. To avoid such a scenario, let’s have a look at creating a scene where you can guarantee it will be different every single time users will visit it. To make it happen in a dynamic manner, we will be counting on one variable which is constantly different upon users’ every visit and that is time factor. Together, we will create a scene which animates according to different times of a day, ie into night at night, into day during the day and of course into states in-between noon and midnight. Once you go through the tutorial, it will be only up to you whether you recreate the scene in the same, illustrated fashion or you go for something rather more realistic such as photograph cutouts or so on – the techniques and principles remain exactly the same.

Project files for this tutorial can be downloaded here.
This article was originally authored by Lubos Buracinsky, and featured within Web Designer issue 164

01 Getting started

Open start.fla from the project files. Inside the library
from the MCs folder, drag the Movie Clip ‘sky day’ onto the stage and name the layer ‘sky day’. Create a new layer, name it ‘sky night’ and from the library drag the Movie Clip ‘sky night’ to it. Next, give it an instance name of ‘nightSky’.

02 Add depth

Create a new layer, name it ‘hillsDay’ and from the library drag MC ‘hillsDay’ to the stage. Give it an instance name of ‘hills’. Create a new layer called ‘farm’. Drag the MC farm  to the stage and give it an instance name of ‘house’. Also give an instance name of ‘windows’ to MC ‘windows’ and ‘building’ to the Movie Clip ‘building’ inside the farm MC.

03 The Sun and the Moon

In the main timeline, under the hillsDay layer, create a new layer and call it ‘Sun&Moon’. From the library, place Movie Clips of ‘Sun’ and ‘Moon’ on the timeline, align them to the middle, the order should not matter. Give both instances names of ‘Sun’ and ‘Moon’ accordingly. Add a little glow filter to each.

Flash CS4 already has some new powerful animation features. get to grips with the Bone tool to create an animated interface

The now previous version of Flash has some handy tools for animating, with one of the newest additions being the Bone tool. This may sound like a pretty strange tool but this has been the mainstay of character animation in 3D packages for years. Even rival packages to Flash such as Toon Boom Studio use a Bone tool. So you may be wondering what’s so special about this new tool? Well, if you draw any shape on the stage and add bones to it, you can move those bones around to animate the shape. This can add life to any object you can draw. As bones can be added to Movie Clips, stage drawings or graphic symbols, animating movement becomes much simpler.
It also introduces a new animation concept to Flash users, known as inverse kinematics. This is when you take the end of a bone chain, such as an arm or a leg, and move it. What it actually does is move all the other joints as well, giving you the ability to create realistic movement in a snap. This tutorial will create an animated arm that will bring content onto the stage by pressing a button.

(This tutorial originally appeared in Web Designer issue 158, authored by Mark Shufflebottom)

01 Getting started

From the cover CD, drag the file ‘start.FLA’ onto the desktop and then double-click this file to open Flash CS4. Once open you will see a background image on the stage and two symbols in the library. Press Ctrl+F8 to create a new symbol, make this a graphic symbol and then name it ‘animation 1’.

02 Add the symbols

Click OK to create the new symbol then drag the ‘arm’ symbol from the library onto the stage. Using the Free Transform tool, rotate the ‘arm’ symbol 90º counter-clockwise. Drag two more ‘arm’ symbols to the stage and using the transform palette reduce the sizes to 80% and 40% respectively. Position as shown above.

03 Add the screen

From the Library drag the ‘screen’ symbol onto the stage and position it on the end of the arm as shown above. In the Properties panel, under Color effect, change the style to Alpha and then set this at around 60%. This is to help us see the arm so that we can set the bones up properly and effectively.

Add a bit more to your website’s first impression by creating a unique 3D preloader utilising Flash CS4’s 3D Rotation capability and ActionScript 3

A website’s preloader is the very first impression people get when they visit it so you should really endeavour to make it look the best you can in order to captivate their attention right away. There is nothing worse than waiting for a highly anticipated website to load up and be staring at something really boring. Well, we will be doing the exact opposite of this!
Together we will create an impressive 3D flip clock loader which will also react to your mouse movements. By offering a compelling experience right from the beginning, not only will you be more likely to engage your visitors before the site loads up but you will also show you care about attention to detail. There is a little bit of work to do but we will be going over some useful techniques from which everyone should benefit.

This tutorial originally appeared in Web Designer issue 162, authored by Lubos Buracinsky. Project files may be downloaded here

01 Getting started

Open start.fla from the cover CD. From the library, drag Movie Clips “number9” – “number0” onto the stage on top of one another into one layer. Give each of them an instance name of “n0”, “n1”, “n2” etc according to the number it represents. Next, align them all to the centre. With all selected, press F8, convert them into a Movie Clip called “NumberSet” with registration point in the middle.

02 Duplicate

Select the “NumberSet” Movie Clip and duplicate it twice. Place them in a row one next to another with approximately 5px space between each. Next, name the instances from right to left “ones”, “tens”, “hundreds”. Again, select all three instances, press F8, select Movie Clip, name it “counter” with registration point in the middle and give it an instance name of “counter”.

Adding animation with the Motion Editor & Motion Presets in Flash CS4

THE NEW MOTION EDITOR IN FLASH CS4 ALLOWS YOU TO CREATE COMPELLING ANIMATIONS FASTER THAN EVER. HERE WE’LL USE TWEENING TRICKS TO BUILD A SIMPLE PHOTO GALLERY

TAKING SOME CUES from After Effects, Adobe has completely overhauled the way tweening works in Flash CS4. These new features are designed to allow you to create animations quicker and easier than previously possible. The new Motion Editor takes everything required to create a tween and rolls it up into one panel, making it much easier. From here you can tween Basic Properties (in 2D or 3D), transform properties, colour effects, and filters while also allowing custom or preset eases to be added to your tweens.

In addition, after you’ve created a tween you can save it as a reusable Motion Preset. This allows you to easily reuse animations in future projects by simply applying them to new objects from the Motion Presets panel. This  short step-by-step guide will specifically highlight  some of these new tweening capabilities in Flash CS4, using a simple photo gallery component as an example. The Motion Presets and assets for this tutorial have been included on the CD and can also be downloaded from www.webdesignermag.co.uk.

01 File setup

Create a new ActionScript 3.0 file with Flash CS4. Make sure the frame rate is 30fps and resize the stage to 600×600. Add a background colour or pattern and a title/description of your choice as shown in the example provided. You can also add any other elements you choose at this stage.

02 Import photos

Next, you’ll need to import each photo that you would like to use to the library. When you are finished, create a new folder on the timeline and place each photo onto a separate layer. Make sure each photo is at the same x and y position and that they all measure exactly the same size.

03 Photo setup

When all of the photos have been added, it’s time to set them up. For each photo, select it and create a Movie Clip symbol (press F8 or select Modify>Convert to Symbol). Make sure you select centre registration for each photo. This will be important for the animations we will create later.

Add a Twitter feed to your blog with Flash

MASH THOSE TWEETS INTO YOUR SITE WITH SOME SWXFORMAT ACTION

Twitter seems to be the big buzz word at the moment. Just over a year ago the number of users was still only in the thousands, but now it is in the millions and everyone is using the micro-blogging tool, from designers to celebrities such as Stephen Fry and William Shatner. A rather nifty idea is to create a little badge to go on your blog so visitors could see what you’re staying via Twitter as well as your blog. There are a few free twitter badges, but they don’t give you the freedom to really put your own design into the badge. They limit you to background and text colour, so why not to create your own?
You may find you have a problem with your badge working fine on the desktop but when you place it online you may have a cross-domain issue. So how do you get around this problem you ask? Well, it’s SWXformat.org to the rescue. SWXformat acts as the proxy to get your data and then sends it to your Flash file online. So let’s get cracking and make a Twitter badge!

Download the project assets by clicking here

01 Installing SWXformat

It’s best to set up your development environment, so first of all you need to download the latest version of SWXformat. You can go to the site swxformat.org or straight to the source code here: http://tinyurl.com/decewk, For AS3 support, copy the “org” folder from Library/v2/AS3 next to your Flash document.

02 New Flash file

Open up Flash CS4 and create a new Flash File (ActionScript 3.0) and make the stage 211px x 428px, Call the first layer ‘BG’. On the cover disc you’ll have an fla file called Twitter, inside that we have created a background, but please let your design skills loose here. Add the background and then create a new layer called ‘panels’.

03 Panels

So the Twitter posts stand out we need to create five panels, again these are supplied in the source fla on the cover disc, but we urge you to be creative. Place the panels at 7px on the X axis and then place them at equal distances apart on the Y axis. You can do this by selecting all the panels and then using the Align properties panel.

04 Data 1

Add a new layer called ‘data’. Place two dynamic text fields over the top panel you just created. Open the Properties Inspector and in the Instance field name call the first item ‘one’, this should be approximately three lines high because it will store the tweet. Next call the second item ‘created0’.