I’ve recently switched from using SVN to using Git as my source control management tool of choice. It took a little while to get to grips with, but it rocks!

Git is not an evolution of SVN. It is entirely different. Git is a distributed revision control system – everybody working on a project has their own full copy of the repository and its entire history.

Git does not require the presence of a network connection: most commands in Git operate locally, allowing you to review your project history, make branches and tags, merge changes, but most importantly, allowing you to commit while offline.

If you’ve used SVN you’ve probably noticed the littering of .svn folders across your entire project tree, requiring the need for an export tool to retrieve clean copies of your code, and introducing problems when you delete, rename or move files or folders in your project. Git takes a slightly more sensible approach: it creates one folder (named .git) in the root folder of your project.

Git Concepts

With Git there are 3 important things to be aware of: the Git object database, the “index”, and your working area.

The Git object database contains a bunch of stuff that you typically don’t need to worry about. Essentially it’s the repository.

Your working area is the collection of files currently sitting in your project folder. You should treat these files as if they are temporary – because they are! Things you want to keep should be committed to the repository.

The Index is sometimes referred to as the Staging Area. It’s a list of what will get stored on your next commit. Conceptually it sits between your working files and the Git object database. Files that haven’t been staged to the index will be ignored when doing a commit. This gives you great control over what gets committed when.

A branch is a cheap copy of a particular state of the Git object database. Branches are easy to create and switch between, giving you a safe way to try out ideas quickly and easily. Switching to another branch updates your working area to reflect the state of that branch – this is why you should consider your working area temporary.

Installing Git on Mac OS X

Grab and install the latest OS-X Installer from:

http://code.google.com/p/git-osx-installer/

Configuring Git

You need to tell Git who you are – it uses this information for your commits etc.

Fire up your terminal, and type:

git config --global user.name "Your Name"
git config --global user.email your@email.com

Using Git

Once Git is installed on your system, creating a Git repository is easy: open your terminal, cd into the root folder of your project, and type: git init

That’s pretty much it!

After initialising your Git repository, it will most likely be empty. In order to commit files to the repository you first need to “stage” them by adding them to the index. To add all the files in your current project to the index type:

git add .

To commit these files type:

git commit -m "your commit message"

To view the status of your repository type:

git status

To Summarise

[Download and install Git]
[cd into the root of your project]

git init
ls -la
git status
git add .
git status
git commit -m "a useful commit message"
git status

[change some files in your working area]

git status
git diff
git commit -a -m "commit message. -a adds all files from your working area to the index"
git status

[delete some files from your local working area]

git status
git add -u
git commit -m "commit message. -u adds deleted files to the index"
git status

Ignoring Files

You will probably want to ensure than certain files don’t ever get committed to the repo:

http://www.kernel.org/pub/software/scm/git/docs/gitignore.html

Extra Configuration

You can enabled colorful output:

git config --global color.diff auto
git config --global color.status auto
git config --global color.branch auto

Some Bundled Visual Tools

gitk
git gui

Git Screencasts

http://gitcasts.com/

Installing Git on Windows

http://gitcasts.com/posts/git-on-windows

Some Other Git Links

• http://git-scm.com/
• http://www.eecs.harvard.edu/~cduan/technical/git/
• http://git.or.cz/index.html
• http://git.or.cz/course/svn.html
• http://git.or.cz/gitwiki/GitFaq
• http://learn.github.com/
• http://code.google.com/p/git-osx-installer/
• http://www.kernel.org/pub/software/scm/git/docs/user-manual.html
• http://tomayko.com/writings/the-thing-about-git
• http://video.google.com/videoplay?docid=-3999952944619245780

Eclipse Integration

Point your eclipse update manager to: http://www.jgit.org/update-site

More info: http://www.jgit.org/

Some Commands

Add all working files to the index:

git add .

Add deleted files to the index:

git add -u

Create and switch to a new branch:

git checkout -b newbranchname

Review last commit:

git show
git show --stat
git show --name -status
git show HEAD

Review commit history:

git log
git log tag..branch
git log -10
git log --since="May 1" --until="June 1"
git log --author=fred
git log -- some/file

Creating branches:

git branch name
git branch name commit

Switching branches:

git checkout name
git checkout -f name

Firstly, FlashDevelop 3 only runs on Windows XP/Vista, and requires the .NET 2 runtime. Additionally, to compile AS3 code you will need the Java 1.6 runtime and the Adobe Flex SDK. Ok, let’s go!

Part 1 – Downloading, Installing, and Compiling a SWF

Let’s begin by setting things up and compiling our first SWF.

1. Download the Adobe Flex SDK (just the Flex 3 SDK, not Flex Builder), and unpack it somewhere easy to find (C:FlexSDKFlex3).
2. Download the latest version of FlashDevelop, install it and run it.
3. Create a New Project, under ActionScript 3 choose Default Project, and give it a name (“hello”).
4. In the Project Panel expand the “src” folder and open up “Main.as”
5. In the constructor add the code: trace(“hello world!”);
6. Hit Ctrl-Enter (or F5). A dialog should pop up asking if you’d like to open the AS3 context settings. Click “OK”.
7. In the “Flex SDK Location” input field enter the path from step 1 (or browse to it).
8. Hit Ctrl-Enter again. This should compile your code into a SWF and launch it in a tab. The Flex 3 compiler does incremental compiling, so the first compile might take a while, but subsequent compiles should be much faster.
9. Make a “whooping” noise! “hello world!” should be displayed in the Output panel. You’ll find the SWF sitting in the “bin” folder. Notice that the project panel let’s you look into the guts of your SWF.. pretty damn sweet!

Part 2 – Some Adjustments

By default, FlashDevelop launches SWFs in it’s own version of the Flash Player. At the time of this writing, the player doesn’t perform quite as well as the official debug version of the Adobe Flash Player (besides, we want all the goodness of the very latest Flash Player!). Also, I find the tabbed view weird. So let’s change our setup a bit.

1. Head on over to Adobe downloads, “Download the Windows Flash Player 9 Projector content debugger” and put it somewhere easy to find (C:FlexSDKFlashPlayer)
2. Back in FlashDevelop, go to the main menu, click “Tools” and select “Program Settings” (or hit F10)
3. In the left panel, under “Plugins” select FlashViewer, and point the “External Play Path” to the debug player executable from step 1.
4. While you’re there, change the “Movie Display Style” to “External”. Click “Close”.
5. At the top of the Project Panel click the “Project Properties” button (third from the left).
6. Under “Test Movie” change the selection to “Play in external player”, and click “OK”.
7. Hit Ctrl-Enter. Make the universal “Whazzamm” sound!

Part 3 – Attaching Assets to the Stage

Perhaps “hello world!” is not that thrilling for you. Fine.

1. Create a folder called “lib” inside your project folder (alongside “bin” and “src”).
2. Fire up Adobe Flash CS3 and create a new Flash File (Action Script 3.0).
3. Save it inside the “lib” folder from step 1 and call it “assets.fla”.
4. In the Flash IDE grab the Oval tool and draw a circle.
5. Select the circle and convert it to a symbol by hitting F8 (or right-click and select “Convert to Symbol…”).
6. Give it the name “Circle” and expand the Linkage panel by clicking “Advanced”.
7. Under “Linkage” tick “Export for ActionScript” and click “OK”.
8. Open up your Publish Settings (Ctrl-Shift-F12), deselect “HTML”, and flip to the “Flash” tab
9. Tick “Export SWC”, click “Publish” and click “OK”.
10. Save the file and close the Flash IDE.
11. Flip back to FlashDevelop, and expand the “lib” folder in the Project Panel.
12. Right-click “assets.swc” and select “Add To Library”.
13. Replace our “trace” statement with the following code:
    var circle:Circle = new Circle();
    addChild( circle );
14. Hit Ctrl-Enter. Loudly exclaim “Golly, this is the biznis!”.

Part 4 – Extending Assets, Adding Interactivity

Perhaps a plain old circle on the stage doesn’t really do it for you. You want some motion. You want some interactivity. Some filters. Fine then. Let’s do it..

1. In the Project Panel, right click the “src” folder, select “New” “Class”, name it “ReactiveCircle” and click “OK”.
2. Head to the end of the line “public class ReactiveCircle”, type “extends”, hit Space and select “Circle”.
3. In the constructor type “filters = [new DropShadowFilter()];”
4. On the next line type “addEventListener(” and press Ctrl-Alt-Space (this enables autocompletion for all available classes, not just the imported ones). Start typing “MouseEvent” but hit Enter as soon as you see it selected. Complete the statement with “.CLICK, onClick);”
5. Move your cursor back onto the word “onClick”, press Ctrl-Shift-1 and hit Enter.
6. Inside the generated event handler add the code: x += 10;
7. Flip back to the Main class and change:
   var circle:Circle = new Circle();
   to
   var circle:ReactiveCircle = new ReactiveCircle();
8. Hit Ctrl-Enter. Click the circle. Shout “Kapoww!”

Ok, it’s not a fully fledged RIA, but it should be enough to get you started.

Happy Flashing!

FlashDevelop hello project

So, my plan is to throw up some tutorials here. The kind that would have helped me a bunch when I started on my journey into OO flash development.

I want to cover FlashDevelop, Tweener, Papervision3D and PureMVC amongst other flash/web related things.

I’m also going to use this site as a portfolio of sorts. When I get the time I’m going to look into building a flash portfolio that uses this site as it’s CMS.