How-To

Using pics2mov.py

To use the python script you will need to know three things.

Those are the three things pics2mov.py expects when run.
pics2mov.py targetDirectory secondBetweenFrames outputFileName

example;

python pics2mov.py targetDir/ 3 myMovie.mov

Download

pics2mov.py

ColorPicker is a powerful and easy to use tool that I created for Flash projects. It allows people to easy select colors using provided palettes or custom one of your own design.

ColorPicker is a powerful and easy to use tool that I created for Flash projects. It allows people to easy select colors using provided palettes or custom one of your own design.

ColorPicker is a powerful and easy to use tool that I created for Flash projects. It allows people to easy select colors using provided palettes or custom one of your own design.

Introduction

Do you remember those paper snowflakes we made in school as kids? You’d fold up a sheet of paper, make some random cuts with plastic scissors and unfold it to reveal your hidden artistic genius?

A few years back while teaching a Flash course I developed an exercise a lot like that. It was intended to illustrate how MovieClips can be placed inside other MovieClips. The exercise turned out to be a lot more fun then expected. My students and I got lost in the endless art and design possibilities of this simple technique.

This video tutorial doesn’t focus on the technical details of embedded MovieClips but it does show you the simple steps needed to create some beautiful and emergent design patterns in Flash.

Create the Base Layer

The first step when making this type of button is creating the base layer. This layer defines the shape of your button and will eventually hold it’s background colour and stripe effect.

Creating the base.

SciFi Pattern

First we will create a SciFi pattern.

Using Letters

Next I use a simple letter ‘S’ to create some unexpected designs.

Icy Snowflake

Using short straight lines I will create a traditional style snowflake. If there is such a thing as a traditional snowflake!

Crea la Capa Base

Para crear este tipo de botones, el primer paso es crear una capa base. Esta capa define la forma del botón y contendrá su color de fondo y el efecto rayado.

Crea la Sombra Interior

La sombra interior da al botón profundidad y viveza. El tamaño de la sombra dependerá de tus preferencias. Te recomiendo que crees una sombra lo más parecida posible a la del ejemplo y luego juegues con ella hasta que obtengas la apariencia que más te guste.

Creando la Capa del Efecto de Resaltado

Aquí es donde la magia tiene lugar. Un simple botón se convierte en algo fantástico delante de tus ojos. Es fácil de hacer y los resultados son increíbles.

Creando las Rayas

He añadido unas rayas a este botón porque ayudan a llamar la atención (algo importante en un botón de “compra ahora”). Una vez te sientas cómodo con las rayas, puedes intentar crear otros efectos o añadir otros patrones al fondo.

Creando el Texto del Botón

Utilizo un texto de gran tamaño por la misma razón que utilizo rayas – para llamar la atención.

Utilizando estas mismas técnicas, intenta crear botones como los que aparecen aquí abajo.

¡buena suerte!

Create the Base Layer

The first step when making this type of button is creating the base layer. This layer defines the shape of your button and will eventually hold it’s background colour and stripe effect.

Create the Bottom Shadow

The bottom shadow helps give the button depth and richness. The exact size and placement of the shadow is a personally choice. I recommend creating one as close to the example as possible and then play with it until you are happy.

Creating the Highlight Layer

This is where the magic happens. A simple button turns into candy right before your eyes. It is simple to do and looks amazing.

Creating the Stripes

I put stripes on this button because it draws attention (an important feature for a buy now button). Once you become comfortable with stripes try creating other effects or added different patterns in the background.

Creating the Button Text

I went with very large text for the same reason I used stripes – to draw as much attention as possible.

Using the same techniques above try and create buttons like the ones pictured below. Good luck.

If you have any questions and comments please let me know!

Project Definition
Blender to flash via Flashpunk

Step One
Create the legs and torso.

Step Two
Create the arms, hands, neck and a head.

Step Three
Colouring the model.

Step Four
Adding an armature to the model.

Step Five
Link the mesh of the model to the bone of the armature.

Step Six
Animating a walk cycle in Blender.

Step Seven
Lighting and camera position and output the animation.

Step Eight
Use Imagemagick montage command to combine output animation into a single spritemap.

Step Nine
Actionscript 3 and Flashpunk to create the final swf.

The Final Flash Movie
Click on the man and use your left and right keyboard arrows to move.

Part A

Part B

Here are the steps I followed in the video.

SETUP

1. Create new project in FlexBuilder
2. Copy over the FlashPunk library inside the src directory
3. Create an assets directory in the src directory
4. Copy montage.png to assets.
5. Rename the file walkCycleLeftRight.png

EDIT MAIN CLASS

1. Extend the main class to Engine
2. Remove import of sprite
3. Set the stage size, framerate, and time management
4. Set the stage colour

super(800, 360, 60, false);
FP.screen.color = 0x00BFF3;

CREATE & SETUP WORLD

1. Create a new class called WalkingGround that extends World and place it in the world package
2. Remove the super()

ADD WORLD TO MAIN CLASS

1. Go back into the main game file add world


FP.world = new WalkingGround();


CREATE THE MAN ENTITY

1. Create a new entity class called WalkingMan
2. Embed the asset
3. Define the embed as a class
4. Define a spritemap using the above class
5. Define the different walk cycles
6. define this entities graphic as the man
7. position the main

[Embed(source = '../assets/aniSeq.png')]
private const COWBOY_DRAW:Class;
private var man:Spritemap = new Spritemap(MAN_WALKING, 228, 128);
man.add("walk-right", [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19], 24, true);
man.add("walk-left", [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39], 24, true);
graphic = man;
x = 100;
y = 100;

ADD THE ENTITY TO THE WORLD

1. add the man to the world

add(new WalkingMan());

ADD KEYBOARD CONTROL (Part B)

override public function update():void {
if (Input.check(Key.LEFT)) {
if (man.currentAnim != "walk-left") {
man.play("walk-left", false);
}
man.x -= 1.8;
}
if (Input.check(Key.RIGHT)) {
if (man.currentAnim != "walk-right") {
man.play("walk-right", false);
}
man.x += 1.8;
}
if (!Input.check(Key.LEFT) && !Input.check(Key.RIGHT)) {
man.frame = man.frame;
}
if (man.x > 450) {
man.x = 450;
}
if (man.x < 0) {
man.x = 0;
}
}