Start with SWFMILL

Part 1

This tutorial will show you how to create assets library with SWFMILL and how to manage MovieClips created with it.

We're going to make three experiments on three MovieClips, which represent each one an arrow, and get some different states on each frame.

  • In the first experiment, we're going to let the MovieClip playing itself frame by frame, without any stop.
  • In the second one, on each mouse's click event, the MovieClip's state will change.
  • And in the last one, on each keyboard direction keys, the MovieClip's state will be updated.

( click on the animation to get the focus on it )

output

Alternative content

Get Adobe Flash player


Let's start with the SWFMILL part.


<movie version="9">
	<!--We import 6 arrows from our directory /Arrows .-->
	<clip id="arrowL1" import="Arrows/greenLeftArrow.png"/>
	<clip id="arrowL2" import="Arrows/orangeLeftArrow.png"/>
	<clip id="arrowL3" import="Arrows/redLeftArrow.png"/>
	<clip id="arrowR1" import="Arrows/greenRightArrow.png"/>
	<clip id="arrowR2" import="Arrows/orangeRightArrow.png"/>
	<clip id="arrowR3" import="Arrows/redRightArrow.png"/>
	<frame>
		<library>
			<!-- Let's create a MovieClip. ID represents  MC's class name .-->
			<clip id="Arrow">
				<!-- We create for each image a frame. The "name" attribute is the frame name, and the id attribute represents the clip id wich we want to insert here. (see above).-->
				<frame name="left1">
					<place id="arrowL1" depth="1"/>
				</frame>
				<frame name="left2">
					<place id="arrowL2" depth="1"/>
				</frame>
				<frame name="left3">
					<place id="arrowL3" depth="1"/>
				</frame>
				<frame name="right1">
					<place id="arrowR1" depth="1"/>
				</frame>
				<frame name="right2">
					<place id="arrowR2" depth="1"/>
				</frame>
				<frame name="right3">
					<place id="arrowR3" depth="1"/>
				</frame>
			</clip>
		</library>
	</frame>
</movie>

Now, let's compile all of that with SWFMILL.

In the downloadable sources (below) you can find SWFMILL's executable + .bat file (batch file if you're on windows) that you can edit in any text editor.

You can double click on it to compile the sources.

If you're on Linux, you've the source code you can compile here

library.swf will be generated by SWFMILL after compilation. Then, later when we're going to entirely compile our haXe project, we're going to have to specify that we need to import library.swf : "-swf-lib library.swf"

Now we can import in our project any MovieClips in our assets library. We just have to create a CLASS with the same name than the name we specified in the XML. (and it extends MovieClip)

 
class Arrow extends MovieClip
{
	public function new()
	{
		super();
	}
}

Let's manage our MovieClip now. 
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.Lib;

class Main 
{ 
	private var _arrow1 : Arrow;
	private var _arrow2 : Arrow;
	private var _arrow3 : Arrow;
	
	// We use this variable in order to memorize the last direction 
	private var _directionArrrow3 : String;

	static function main() 
	{
		new Main();
	}

	private function new()
	{ 
		_arrow1 = new Arrow();
		_arrow1.x = 0;
		_arrow1.y = 0;
		
		// Here is our first experiment. We add it directly on the scene without any stop or gotoAndStop, so it will loop.
		Lib.current.addChild(_arrow1);

		// Here is our second experiment, we use gotoAndStop(..) to stop it at the first frame
		//then we add a Mouse Event Listener. The event handler is "goToTheNextFrame".
		_arrow2 = new Arrow();
		_arrow2.x = 25;
		_arrow2.y = 0;
		
		_arrow2.gotoAndStop(1);

		_arrow2.addEventListener(MouseEvent.MOUSE_DOWN, goToTheNextFrame);
		
		Lib.current.addChild(_arrow2);

		// Here is our last experiment, we stop the animation with gotoAndStop(..) by using a "flag name"
		_arrow3 = new Arrow();
		_arrow3.x = 50;
		_arrow3.y = 0;
		
		_arrow3.gotoAndStop("left1");

		//the first state of the arrow is "Left" so we save it 
		_directionArrrow3 = "Left";
		
		// we add a keyboard event listener on it, in order to update our MC
		Lib.current.stage.addEventListener(KeyboardEvent.KEY_DOWN, actionKeyDown);
		
		Lib.current.addChild(_arrow3);
	}

	/*we call this function each time that we click on the second arrow.*/
	private function goToTheNextFrame(event : MouseEvent)
	{
		// Here is a bug with SWFMILL. We need to match the arrow's current frame and the arrow's total frames in order to check that we're on the last frame. 
		if (_arrow2.currentFrame == _arrow2.totalFrames)
		{
			_arrow2.gotoAndStop(1);
		} 
		else
		{ 
			_arrow2.nextFrame();
		}
	}

	/*This function will update the third MC.*/
	private function actionKeyDown(event : KeyboardEvent)
	{ 
		// If left key
		if (event.keyCode == 37)
		{ 
			if (_directionArrrow3 != "Left")
			{
				_arrow3.gotoAndStop("left1");
				_directionArrrow3 = "Left";
			} 
			else if (_arrow3.currentFrame == 3)
			{
				_arrow3.gotoAndStop("left1");
			} 
			else
			{
				_arrow3.nextFrame();
			}
		}
		// if right key
		else if (event.keyCode == 39)
		{
			if (_directionArrrow3 != "Right")
			{
				_arrow3.gotoAndStop("right1");
				_directionArrrow3 = "Right";
			}
			else if (_arrow3.currentFrame == 6)
			{
				_arrow3.gotoAndStop("right1");
			}
			else
			{
				_arrow3.nextFrame();
			}
		}
	}
}
sources.zip
(102 times)