Robotlegs PDF for download

By Danilo Figueiredo | February 3, 2011

Recently I’ve been developing some pure AS3 projects with Robotlegs and AS3 Signals. So far I can say that is the best approach I have used, by far.

When learning Robotlegs apart from checking the Flow Diagram I found quite helpful the slides from Flash and the City Presentation, by Joel Hooks. In order to help myself to better visualize the whole framework I’ve created a PDF based on Joel’s slides, that I would like to share here. It’s simple and clean, in case you print out it won’t take much of your black ink.

Click below to download the PDF file if you are interested:

Robotlegs PDF

  • Twitter
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • email
Posted in Actionscript | Tagged , , , , , , , , , | 2 Comments

Snow Interactive Installation

By Danilo Figueiredo | December 11, 2010

Snow is an immersive and fun experience where snowclouds follow you around on screen and softly drop snowflakes onto your body.

Created and developed in five days using openFrameworks (c++) and the addons ofxOpenCV for image processing, ofxBox2d for the clouds behaviour, ofxKinect and the libfreenect driver for the body tracking.

Many thanks to Microsoft for bringing the Xbox Kinect to market, and thanks to the openframeworks and openkinect communities for their support, I could find pretty much everything I wanted in their forum, awesome.

  • Twitter
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • email
Posted in openframeworks | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

Bitmap Smoothing Tip

By Danilo Figueiredo | November 22, 2010

Whenever there is a bitmap moving around that just doesn’t look “smooth” enough try this trick out:

1

bitmap.scaleY = 1.001;

Or this, either way:

1

bitmap.scaleX = 0.999;

Check a comparison between a normal bitmap (left) and the hacked one (right), you can clearly see the difference:

This movie requires Flash Player 9


Although both bitmaps set the smoothing property to true only the one in the left-hand side is a bit shaky. It turns out that only when its scale properties (scaleX or scaleY) are different than 1 it actually applies the smoothing – weird.

Here’s code of this example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

package {
	import caurina.transitions.Tweener;
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.display.PixelSnapping;
 
	/**
	 * @author Grifo.tv / Danilo Figueiredo - www.grifo.tv
	 */
 
	[SWF(width="700", height="100", frameRate="50", backgroundColor="#ffffff")]
	public class BitmapSmoothingTip extends Sprite {
 
		// ------------------------------------
		// private, protected properties
		// ------------------------------------
 
		protected var _arrows : Vector.<Bitmap>;
		protected var _arrowsX : Vector.<Number>;
		protected var _arrowsY : Vector.<Number>;
 
		// ------------------------------------
		// public properties
		// ------------------------------------
 
		// ------------------------------------
		// constructor
		// ------------------------------------
 
		public function BitmapSmoothingTip() {
			addEventListener(Event.ADDED_TO_STAGE, added, false, 0, true);
		}
 
		// 
		// PRIVATE, PROTECTED
		// ______________________________________________________________
 
		protected function added(e : Event) : void {
			removeEventListener(Event.ADDED_TO_STAGE, added, false);
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			init();
		}
 
		protected function init() : void {
			// create vectors 
			_arrows = new Vector.<Bitmap>();
			_arrowsX = new Vector.<Number>();
			_arrowsY = new Vector.<Number>();
 
			// add normal bitmap
			addArrow(250.0, 25.0, false);
 
			// add smooth bitmap
			addArrow(380.0, 25.0, true);
		}
 
		protected function addArrow(posX : Number = 0.0,
					    posY : Number = 0.0,
					    hackSmoothing : Boolean = false) : void {
			// create bitmap
			var bitmap : Bitmap = new Bitmap(new Arrow(0.0, 0.0), PixelSnapping.NEVER);
			bitmap.x = posX;
			bitmap.y = posY;
			addChild(bitmap);
 
			// smoothing
			bitmap.smoothing = true;
			if (hackSmoothing) {
				bitmap.scaleY = 1.001;
			}
 
			// store bitmap properties
			_arrows.push(bitmap);
			_arrowsX.push(posX);
			_arrowsY.push(posY);
 
			// start animation
			animateArrow(_arrows.length - 1, Math.random());
		}
 
		protected function animateArrow(index : uint,
						delay : Number = 0.0) : void {
			var time : Number = 1.5;
 
			// move up/right
			Tweener.addTween(_arrows[index],
					{x: _arrowsX[index] + 15,
					y: _arrowsY[index] - 15,
					time: time,
					transition: "easeInOutCirc",
					delay: delay});
 
			// move down/left
			Tweener.addTween(_arrows[index], 
					{x: _arrowsX[index],
					y: _arrowsY[index],
					time: time,
					transition: "easeInOutCirc",
					delay: delay + time,
					// and loop
					onComplete: animateArrow,
					onCompleteParams: [index]});
		}
 
		// PUBLIC
		// ______________________________________________________________
 
	}
}

Download the source of this example from here bitmap-smoothing-tip.zip (98KB, Flash CS4, Actionscript 3). With FLA file ready to be compiled.

  • Twitter
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • email
Posted in Actionscript | Tagged , , , , , , , | 4 Comments

Using motion tracking data from After Effects in Actionscript

By Danilo Figueiredo | August 12, 2010

Motion tracking

Click above to check an example (the swf has no preloader, so you might have to wait a bit).

In this post I’ll explain how to motion track a footage in After Effects, collect this tracking data and reuse it in Actionscript by drawing a 3D plane over the video based on those tracked points.

It’s important to clarify that it does not have any runtime motion tracking such as augmented reality. It would work more like those projects: Puma L.I.F.T., The Hero, Nike Write Your Future, King of Cannes (Stella Artois), among others.

Footage

When tracking some of the problems come from improper preparation of footage. To make our lives easier the footage we’ll work with was shot with special marks for us to track.

Motion tracking footage

You can see myself holding a piece of paper with four corners drawn. Also I made sure it was a plain surface and that the marks had the same shape as the image that will be placed over, in this case a square.

Motion Track

Create a new project on After Effects (I’m using CS4), import the footage and make a new composition with it, the footage must be a layer in a composition otherwise it won’t work. Select the video layer to track and open the Tracker panel that can be found either by selecting Window > Tracker or setting the Workspace to Motion Tracking.

In the Tracker panel click on Track Motion, select the option Perspective corner pin in the Track Type, by now it should have a set of four track points in the layer panel. Then drag each track point over its respective mark.

Motion Tracking on AE

Make sure it is at the first frame, again in the Tracker panel click on the Analyze forward button. It should be fairly straightforward, but in case you get a broken track it is also possible to analyze frame by frame.

Get the tracking data

Luckly it is rather lot simpler the process of collecting tracking data. In the timeline panel select the footage and press the U key, all track points keyframes will show up. Here’s the magic, select the Feature Center property of each track point and copy it (Cmd+C for Mac or Ctrl+C for PC)

Now open any text editor such as TextMate or Notepad and paste the data (Cmd+V for Mac or Ctrl+V for PC), it should have something like this:

Adobe After Effects 8.0 Keyframe Data
 
	Units Per Second	25
	Source Width	640
	Source Height	360
	Source Pixel Aspect Ratio	1
	Comp Pixel Aspect Ratio	1
 
Motion Trackers	Tracker #1	Track Point #1	Feature Center
	Frame	X pixels	Y pixels	
	0	114.781	97.0273	
	1	116.637	95.582	
	2	121.152	93.082	
	3	123.738	92.0508	
	4	125.625	90.6094	
	5	127.219	89.5625	
	6	128.48	89.3008	
	7	129.691	88.9141	
	8	129.75	88.875	
	9	129.445	88.375	
	10	129.07	87.2578	
	11	128.898	86.1328	
	12	129.703	84.6328	
	13	131.309	84.3672	
	14	132.227	83.6328	
	15	132.645	82.5117	
	16	133.07	81.457	
	17	134.195	79.7695	
	18	135.145	79.4805	
	19	136.102	79.0703	
	20	137.07	79.4648	
	21	137.672	80.1914	
	22	138.121	81.4961	
	23	137.82	81.6992	
	24	137.348	81.8828	
	25	137.051	82.1133	
	26	136.441	82.3945	
	27	136.781	82.1523	
	28	137.32	81.5586	
	29	138.668	80.6133	
	30	141.008	79.3086	
	31	144.18	78.0117	
	32	152.961	77.1484	
	33	157.73	77.5039	
	34	162.438	77.582	
	35	167.766	77.7148	
	36	172.941	77.5234	
	37	182.199	75.4375	
	38	185.457	73.6211	
	39	188.242	72.3984	
	40	190.426	71.1797	
	41	193.082	69.7734	
	42	194.68	68.207	
	43	195.438	67.6133	
	44	197.262	67.168	
	45	199.664	66.9453	
	46	202.375	66.6953	
	47	206.504	66.1094	
	48	207.875	65.6211	
	49	209.098	64.9805	
	50	209.785	64.4062	
	51	209.828	64.3594	
	52	209.359	63.7617	
	53	209.207	63.8047	
	54	208.469	63.6172	
	55	207.23	63.7148	
	56	207.477	63.8711	
	57	209.031	64.082	
	58	209.922	64.1406	
	59	210.738	64.0469	
	60	211.535	64.1289	
	61	212.75	64.1172	
	62	213.73	64.3047	
	63	213.262	64.7969	
	64	212.562	65	
	65	211.234	65.1758	
	66	209.914	65.3242	
	67	206.047	65.4492	
	68	204.645	65.4453	
	69	203.27	65.6641	
	70	201.316	65.7227	
	71	198.496	65.6172	
	72	191.953	65.6836	
	73	186.5	66.3164	
	74	179.926	66.7539	
	75	175.145	67.4258	
	76	169.578	68.0977	
	77	159	69.2578	
	78	153.852	69.6523	
	79	149.422	69.8438	
	80	146.258	70.5547	
	81	143.945	71.4766	
	82	142.582	75.082	
	83	143.367	76.6914	
	84	144.449	78.332	
	85	146.246	79.5469	
	86	149.32	79.4805	
	87	153.574	79.3828	
	88	154.723	79.7617	
	89	155.969	80.5703	
	90	157.469	81.3086	
	91	159.309	82.5547	
	92	164.309	85.5898	
	93	167.156	87.3672	
	94	167.902	88.9648	
	95	166.734	89.8047	
	96	166.609	90.4336	
	97	170.902	90.8711	
	98	172.066	90.7422	
	99	172.453	90.5664	
	100	173.852	90.6055	
	101	175.676	91.2344	
	102	180.312	93.5625	
	103	184.062	95.9922	
	104	187.719	98.7188	
	105	191.465	101.82	
	106	195.398	104.742	
 
Motion Trackers	Tracker #1	Track Point #2	Feature Center
	Frame	X pixels	Y pixels	
	0	392.895	81.832	
	1	392.883	82.1641	
	2	392.883	82.918	
	3	393.359	83.3516	
	4	393.574	83.8516	
	5	392.922	84.1016	
	6	392.215	84.3164	
	7	388.918	84.4609	
	8	386.645	84.4648	
	9	384.078	84.4883	
	10	381.18	84.3477	
	11	378.188	84.1992	
	12	373.688	83.3398	
	13	372.738	82.1602	
	14	371.473	80.6758	
	15	370.301	79.2266	
	16	369.277	78.1719	
	17	367.352	76.5977	
	18	366.883	76.2812	
	19	366.371	76.2812	
	20	366.105	76.7344	
	21	365.543	77.4922	
	22	364.145	78.6016	
	23	363.176	78.8906	
	24	362.523	79.1289	
	25	362.25	79.3867	
	26	361.848	79.7969	
	27	361.848	80.7422	
	28	362.301	81.7148	
	29	363.309	82.9336	
	30	365.25	84.5039	
	31	367.68	86.457	
	32	374.445	90.9805	
	33	377.93	93.25	
	34	381.488	95.2305	
	35	384.688	96.1445	
	36	387.688	96.3555	
	37	391.688	95.2539	
	38	392.707	94.1875	
	39	393.32	93.0977	
	40	393.539	92.2852	
	41	393.539	91.8711	
	42	393.039	92.2227	
	43	392.953	92.7383	
	44	393.027	93.1484	
	45	393.48	93.4141	
	46	393.797	93.6367	
	47	393.965	93.4492	
	48	393.465	92.8398	
	49	392.535	92.0195	
	50	391.352	91.1289	
	51	391.352	91.1602	
	52	388.711	89.8203	
	53	387.746	89.2461	
	54	387.051	88.8594	
	55	386.477	88.5508	
	56	385.992	88.582	
	57	385.281	89.1328	
	58	384.984	89.1719	
	59	384.645	89.1953	
	60	384.145	89.1758	
	61	383.785	89.1719	
	62	383.262	89.1406	
	63	383.137	89.1602	
	64	383.25	89.4414	
	65	383.328	89.6992	
	66	383.828	89.9375	
	67	385.469	90.2539	
	68	386.938	90.2461	
	69	388.473	90.2461	
	70	389.949	90.2461	
	71	391.102	90.2305	
	72	392.441	89.3594	
	73	392.828	89.0703	
	74	392.609	88.6445	
	75	392.074	88.1367	
	76	391.434	87.4609	
	77	388.59	86.0273	
	78	386.746	85.1523	
	79	384.555	84.5273	
	80	382.426	84.2539	
	81	380.648	84.2344	
	82	376.371	84.5391	
	83	374.242	84.3438	
	84	372.359	83.832	
	85	370.582	83.0625	
	86	368.57	81.8672	
	87	362.895	79.1914	
	88	359.277	78.3398	
	89	355.637	77.3398	
	90	352.32	76.3906	
	91	349.07	75.7539	
	92	344.57	75.3945	
	93	342.75	75.1992	
	94	341.344	74.8398	
	95	340.977	74.0898	
	96	341.723	72.668	
	97	345.559	70.1172	
	98	348.383	68.6055	
	99	352.207	67.4062	
	100	356.297	66.7617	
	101	360.191	66.8906	
	102	368.801	68.4141	
	103	372.898	70.1133	
	104	376.566	71.9336	
	105	380.09	73.4492	
	106	383.633	74.9805	
 
Motion Trackers	Tracker #1	Track Point #3	Feature Center
	Frame	X pixels	Y pixels	
	0	134.938	341.32	
	1	135.438	337.074	
	2	137.641	330.176	
	3	138.625	327.039	
	4	138.984	324.148	
	5	139.746	322.148	
	6	140.609	320.398	
	7	141.367	316.258	
	8	141.117	314.109	
	9	140.281	311.332	
	10	139.094	307.879	
	11	138.309	304.512	
	12	138.449	297.863	
	13	139.703	294.652	
	14	141	291.48	
	15	141.836	288.754	
	16	142.816	286.277	
	17	143.949	281.617	
	18	144.773	280.035	
	19	145.613	278.875	
	20	146.5	277.945	
	21	147.277	277.992	
	22	147.359	277.953	
	23	147.004	277.902	
	24	146.504	277.777	
	25	146.176	277.844	
	26	145.527	277.836	
	27	144.391	276.613	
	28	143.574	275.363	
	29	143.016	273.863	
	30	142.559	271.801	
	31	143.156	269.742	
	32	146.617	266.195	
	33	149.332	264.832	
	34	153.543	262.801	
	35	157.262	261.062	
	36	161.125	258.801	
	37	167.727	253.562	
	38	170.367	251.195	
	39	171.836	248.66	
	40	173.426	246.711	
	41	174.27	244.738	
	42	175.555	242.738	
	43	176.637	242.02	
	44	178.207	241.09	
	45	180.16	240.098	
	46	182.367	239.551	
	47	185.855	237.863	
	48	187.109	236.816	
	49	188.34	236.027	
	50	189.516	235.355	
	51	189.516	235.355	
	52	191.648	234.457	
	53	192.801	234.203	
	54	195.371	233.793	
	55	196.27	233.824	
	56	197.449	233.797	
	57	199.949	233.402	
	58	201.453	233.18	
	59	202.664	232.828	
	60	204.066	232.508	
	61	205.699	232.457	
	62	206.922	232.379	
	63	206.828	233.109	
	64	205.609	233.676	
	65	203.918	234.34	
	66	202.203	235.031	
	67	197.273	236.496	
	68	194.969	237.488	
	69	192.445	238.383	
	70	189.668	239.652	
	71	186.453	240.848	
	72	178.844	244.344	
	73	174.172	246.844	
	74	169.367	249.5	
	75	164.547	252.879	
	76	159.367	256.32	
	77	150.672	262.816	
	78	146.543	266.188	
	79	143.414	269.359	
	80	141.133	273.074	
	81	140.852	276.898	
	82	143.633	286.398	
	83	146.215	290.219	
	84	149.457	293.695	
	85	152.906	296.344	
	86	156.078	298.211	
	87	162.172	302.797	
	88	165.219	305.656	
	89	168.598	308.297	
	90	172.332	311.422	
	91	176.484	314.543	
	92	183.777	320.727	
	93	186.898	325.355	
	94	188.746	327.656	
	95	189.398	329.246	
	96	189.734	330.547	
	97	190.855	332.684	
	98	190.316	333.191	
	99	189.777	333.848	
	100	189.414	334.441	
	101	189.082	335.551	
	102	189.773	338.219	
	103	190.859	340.324	
	104	192.617	342.945	
	105	194.742	345.469	
	106	197.168	348.152	
 
Motion Trackers	Tracker #1	Track Point #4	Feature Center
	Frame	X pixels	Y pixels	
	0	404.441	312.77	
	1	402.992	311.895	
	2	400.367	308.895	
	3	399.238	307.645	
	4	397.883	306.531	
	5	396.988	305.398	
	6	396.223	304.07	
	7	393.039	300.723	
	8	390.645	299.062	
	9	387.723	296.891	
	10	384.258	294.891	
	11	381.18	292.59	
	12	377.879	288.488	
	13	377.551	286.207	
	14	376.887	283.66	
	15	375.918	281.098	
	16	374.98	278.539	
	17	372.863	275.039	
	18	372.289	273.539	
	19	371.551	272.258	
	20	371.145	271.332	
	21	370.809	270.949	
	22	369.262	270.387	
	23	368.449	270.379	
	24	367.727	270.238	
	25	366.957	270.68	
	26	366.039	271.117	
	27	364.711	272.402	
	28	363.578	273.348	
	29	362.574	274.633	
	30	361.793	276.438	
	31	361.465	278.516	
	32	361.812	283.695	
	33	362.68	285.887	
	34	364.012	287.738	
	35	365.102	288.812	
	36	366.031	288.91	
	37	366.852	288.312	
	38	366.32	287.777	
	39	365.422	287.184	
	40	363.949	287.148	
	41	362.406	287.414	
	42	360.234	288.887	
	43	359.395	289.871	
	44	358.625	290.617	
	45	358.359	291.117	
	46	358.277	291.781	
	47	357.23	291.891	
	48	356.484	291.695	
	49	355.652	291.195	
	50	354.867	290.938	
	51	354.867	290.938	
	52	353.949	290.34	
	53	353.93	290.238	
	54	353.949	290.207	
	55	354.148	290.309	
	56	354.332	290.535	
	57	354.031	290.898	
	58	353.906	290.918	
	59	353.383	291.016	
	60	352.898	291.066	
	61	352.992	291.121	
	62	352.945	291.516	
	63	353.109	291.812	
	64	353.293	292.199	
	65	353.422	292.699	
	66	353.84	292.996	
	67	355.504	293.672	
	68	356.664	293.816	
	69	358.156	293.816	
	70	359.582	293.93	
	71	360.426	293.883	
	72	363	293.535	
	73	364.453	293.297	
	74	365.395	293.125	
	75	366.766	292.379	
	76	367.824	291.656	
	77	369.473	289.148	
	78	369.973	287.801	
	79	370.344	286.703	
	80	370.727	285.551	
	81	371.191	283.93	
	82	372.359	281.594	
	83	372.984	279.848	
	84	373.324	277.828	
	85	372.965	275.641	
	86	371.559	272.984	
	87	367.742	268.738	
	88	365.617	267.172	
	89	364.219	265.672	
	90	362.613	264.742	
	91	361.461	264.141	
	92	358.641	262.93	
	93	357.996	262.633	
	94	358.254	262.191	
	95	359.359	261.727	
	96	360.098	261.43	
	97	361.5	260.273	
	98	363.293	260.074	
	99	365.969	260.27	
	100	368.355	260.77	
	101	370.652	261.957	
	102	375.348	265.582	
	103	377.148	267.848	
	104	379.258	270.035	
	105	381.406	271.445	
	106	383.492	272.945
 
 
End of Keyframe Data

Sweet, uh? Special thanks to Romuald for finding it out in our daily learning exchange at Less Rain. Next step would be converting this data into a Vector.<Number> or XML, it should be fairly simple to make it.

Draw over the video

To draw the 3D plane over of the video I used the best drawPlane/distortImage method, ever by Zeh Fernando, that uses the new drawTriangle() method in Flash 10’s ActionScript 3 native APIs.

From here one there is no much secret, on every change of frame it draws the plane based on those tracked points data stored in Vectors.

Don’t be afraid of the 1080 lines of code below, I just left the tracking data as a Vector instead of a XML to keep it simpler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080

package {
	import net.hires.debug.Stats;
 
	import com.zehfernando.display.drawPlane;
 
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	[SWF(width="960", height="540", frameRate="25", backgroundColor="#ffffff")]
 
	/**
	 * @author Grifo.tv / Danilo Figueiredo - www.grifo.tv
	 */
 
	public class Main extends Sprite {
 
		//------------------------------------
		// private, protected properties
		//------------------------------------
 
		// Footage, MovieClip with video
		protected var footage : Footage;
 
		// BitmapData
		protected var sourceBitmapOriginal : BitmapData;
		protected var sourceBitmap : BitmapData;
 
		// Container where the picture will be placed
		protected var container : Sprite;
 
		// Pictures
		protected var pictureIdNum : int = 3;
		protected var pictureId : int = int(Math.random()*pictureIdNum);
 
		// Frames
		protected var frameNum : int = 107;
		protected var frame : int;
 
		// Triangles
		protected var pt1 : Point;
		protected var pt2 : Point;
		protected var pt3 : Point;
		protected var pt4 : Point;
		protected var g : Graphics;
 
		// Motion tracking data
		protected var p1X : Vector.<Number>;
		protected var p1Y : Vector.<Number>;
		protected var p2X : Vector.<Number>;
		protected var p2Y : Vector.<Number>;
		protected var p3X : Vector.<Number>;
		protected var p3Y : Vector.<Number>;
		protected var p4X : Vector.<Number>;
		protected var p4Y : Vector.<Number>;
 
		// Scale
		protected var scale : Number = 1.5;
 
		//------------------------------------
		// public properties
		//------------------------------------
 
		//------------------------------------
		// constructor
		//------------------------------------
 
		public function Main() {
			addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
		}
 
		//
		// PRIVATE, PROTECTED
		//______________________________________________________________________
 
		protected function addedToStageHandler(e : Event) : void {
			removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			init();
		}
 
		protected function init() : void {
			addContainers();
			setProperties();
			setMotionTrackingData();
 
			// Render on change of frame
			addEventListener(Event.EXIT_FRAME, exitFrameHandler);
 
			// Change source image on click
			addEventListener(MouseEvent.CLICK, clickHandler);
			buttonMode = true;
		}
 
		protected function addContainers() : void {
			footage = new Footage();
			addChild(footage);
 
			container = new Sprite();
			addChild(container);
 
			// Multiply, because the paper in the footage is not 100% white
			container.blendMode = BlendMode.MULTIPLY;
 
			// Set scale
			footage.scaleX = footage.scaleY = scale;
			container.scaleX = container.scaleY = scale;
 
			// Instructions
			var tt : TextField = new TextField();
			tt.text = "Click to change the\nBitmapData source";
			tt.embedFonts = false;
			tt.autoSize = TextFieldAutoSize.LEFT;
			tt.selectable = false;
			tt.x = 840;
			tt.y = 25;
			addChild(tt);
 
			// Debug
			var stats : Stats = new Stats();
			addChild(stats);
		}
 
		protected function setProperties() : void {
			// BitmapData reference
			changeSourceBitmap();
 
			// Points reference
			pt1 = new Point(0.0, 0.0);
			pt2 = new Point(0.0, 0.0);
			pt3 = new Point(0.0, 0.0);
			pt4 = new Point(0.0, 0.0);
 
			// Graphic reference
			g = container.graphics;
		}
 
		protected function setMotionTrackingData() : void {
			// Create vector with limited length
			p1X = new Vector.<Number>(frameNum + 1, true);
			p1Y = new Vector.<Number>(frameNum + 1, true);
			p2X = new Vector.<Number>(frameNum + 1, true);
			p2Y = new Vector.<Number>(frameNum + 1, true);
			p3X = new Vector.<Number>(frameNum + 1, true);
			p3Y = new Vector.<Number>(frameNum + 1, true);
			p4X = new Vector.<Number>(frameNum + 1, true);
			p4Y = new Vector.<Number>(frameNum + 1, true);
 
			// Data for frame 0 won't be used
			p1X[0] = p1Y[0] = 0.0;
			p2X[0] = p2Y[0] = 0.0;
			p3X[0] = p3Y[0] = 0.0;
			p4X[0] = p4Y[0] = 0.0;
 
			// Point 1 (X and Y)
			p1X[1] = 115.887;
			p1Y[1] = 94.5898;
			p1X[2] = 120.473;
			p1Y[2] = 92.0898;
			p1X[3] = 123.027;
			p1Y[3] = 91.207;
			p1X[4] = 124.914;
			p1Y[4] = 89.7812;
			p1X[5] = 126.492;
			p1Y[5] = 88.75;
			p1X[6] = 127.871;
			p1Y[6] = 88.4492;
			p1X[7] = 128.969;
			p1Y[7] = 88.1914;
			p1X[8] = 129.047;
			p1Y[8] = 88.1914;
			p1X[9] = 128.703;
			p1Y[9] = 87.8477;
			p1X[10] = 128.348;
			p1Y[10] = 86.7969;
			p1X[11] = 128.254;
			p1Y[11] = 85.6914;
			p1X[12] = 129.039;
			p1Y[12] = 84.2734;
			p1X[13] = 130.715;
			p1Y[13] = 84.0117;
			p1X[14] = 131.586;
			p1Y[14] = 83.2461;
			p1X[15] = 131.918;
			p1Y[15] = 82.1484;
			p1X[16] = 132.406;
			p1Y[16] = 81.1016;
			p1X[17] = 133.59;
			p1Y[17] = 79.4922;
			p1X[18] = 134.586;
			p1Y[18] = 79.1211;
			p1X[19] = 135.59;
			p1Y[19] = 78.6914;
			p1X[20] = 136.605;
			p1Y[20] = 79.1094;
			p1X[21] = 137.176;
			p1Y[21] = 79.7539;
			p1X[22] = 137.66;
			p1Y[22] = 81.1914;
			p1X[23] = 137.387;
			p1Y[23] = 81.3398;
			p1X[24] = 136.883;
			p1Y[24] = 81.6016;
			p1X[25] = 136.637;
			p1Y[25] = 81.6914;
			p1X[26] = 136.023;
			p1Y[26] = 82.082;
			p1X[27] = 136.344;
			p1Y[27] = 81.6914;
			p1X[28] = 136.844;
			p1Y[28] = 81.1602;
			p1X[29] = 138.188;
			p1Y[29] = 80.1641;
			p1X[30] = 140.531;
			p1Y[30] = 78.8086;
			p1X[31] = 143.672;
			p1Y[31] = 77.5703;
			p1X[32] = 152.398;
			p1Y[32] = 76.6914;
			p1X[33] = 157.398;
			p1Y[33] = 77.0938;
			p1X[34] = 162.688;
			p1Y[34] = 77.3711;
			p1X[35] = 167.887;
			p1Y[35] = 77.5742;
			p1X[36] = 173.035;
			p1Y[36] = 77.293;
			p1X[37] = 182.156;
			p1Y[37] = 75.4922;
			p1X[38] = 185.805;
			p1Y[38] = 73.9492;
			p1X[39] = 188.586;
			p1Y[39] = 72.582;
			p1X[40] = 190.781;
			p1Y[40] = 71.3164;
			p1X[41] = 193.402;
			p1Y[41] = 69.8164;
			p1X[42] = 195.082;
			p1Y[42] = 68.457;
			p1X[43] = 195.836;
			p1Y[43] = 67.8828;
			p1X[44] = 197.594;
			p1Y[44] = 67.5273;
			p1X[45] = 200.238;
			p1Y[45] = 67.2227;
			p1X[46] = 202.934;
			p1Y[46] = 67.1055;
			p1X[47] = 207.051;
			p1Y[47] = 66.5352;
			p1X[48] = 208.434;
			p1Y[48] = 65.9609;
			p1X[49] = 209.566;
			p1Y[49] = 65.3867;
			p1X[50] = 210.32;
			p1Y[50] = 64.875;
			p1X[51] = 210.312;
			p1Y[51] = 64.875;
			p1X[52] = 209.676;
			p1Y[52] = 64.2617;
			p1X[53] = 209.621;
			p1Y[53] = 64.2773;
			p1X[54] = 208.691;
			p1Y[54] = 64.0508;
			p1X[55] = 207.684;
			p1Y[55] = 63.9805;
			p1X[56] = 207.914;
			p1Y[56] = 64.1992;
			p1X[57] = 209.508;
			p1Y[57] = 64.3633;
			p1X[58] = 210.387;
			p1Y[58] = 64.4336;
			p1X[59] = 211.191;
			p1Y[59] = 64.4766;
			p1X[60] = 211.969;
			p1Y[60] = 64.3203;
			p1X[61] = 213.184;
			p1Y[61] = 64.3633;
			p1X[62] = 214.121;
			p1Y[62] = 64.543;
			p1X[63] = 213.605;
			p1Y[63] = 65.0703;
			p1X[64] = 212.73;
			p1Y[64] = 65.2852;
			p1X[65] = 211.57;
			p1Y[65] = 65.3633;
			p1X[66] = 210.316;
			p1Y[66] = 65.4453;
			p1X[67] = 206.32;
			p1Y[67] = 65.5312;
			p1X[68] = 204.805;
			p1Y[68] = 65.6172;
			p1X[69] = 203.426;
			p1Y[69] = 65.793;
			p1X[70] = 201.828;
			p1Y[70] = 65.7812;
			p1X[71] = 198.984;
			p1Y[71] = 65.7891;
			p1X[72] = 192.141;
			p1Y[72] = 65.6289;
			p1X[73] = 186.641;
			p1Y[73] = 66.1562;
			p1X[74] = 180.227;
			p1Y[74] = 66.5352;
			p1X[75] = 174.945;
			p1Y[75] = 67.25;
			p1X[76] = 169.738;
			p1Y[76] = 67.9648;
			p1X[77] = 159.125;
			p1Y[77] = 68.8086;
			p1X[78] = 153.906;
			p1Y[78] = 69.1562;
			p1X[79] = 149.633;
			p1Y[79] = 69.2734;
			p1X[80] = 146.645;
			p1Y[80] = 70.0742;
			p1X[81] = 144.531;
			p1Y[81] = 70.6758;
			p1X[82] = 142.707;
			p1Y[82] = 74.2891;
			p1X[83] = 143.52;
			p1Y[83] = 76.0312;
			p1X[84] = 144.605;
			p1Y[84] = 77.625;
			p1X[85] = 146.5;
			p1Y[85] = 78.6719;
			p1X[86] = 149.43;
			p1Y[86] = 78.6992;
			p1X[87] = 153.684;
			p1Y[87] = 78.6445;
			p1X[88] = 154.863;
			p1Y[88] = 79.1211;
			p1X[89] = 156.066;
			p1Y[89] = 79.8281;
			p1X[90] = 157.613;
			p1Y[90] = 80.5156;
			p1X[91] = 159.336;
			p1Y[91] = 81.8594;
			p1X[92] = 164.336;
			p1Y[92] = 84.957;
			p1X[93] = 167.336;
			p1Y[93] = 86.582;
			p1X[94] = 167.926;
			p1Y[94] = 87.9414;
			p1X[95] = 166.746;
			p1Y[95] = 88.8281;
			p1X[96] = 166.578;
			p1Y[96] = 89.4453;
			p1X[97] = 170.961;
			p1Y[97] = 89.9414;
			p1X[98] = 172.004;
			p1Y[98] = 89.8008;
			p1X[99] = 172.426;
			p1Y[99] = 89.7461;
			p1X[100] = 173.832;
			p1Y[100] = 89.7461;
			p1X[101] = 175.715;
			p1Y[101] = 90.2227;
			p1X[102] = 180.336;
			p1Y[102] = 92.7109;
			p1X[103] = 184.129;
			p1Y[103] = 95.0742;
			p1X[104] = 187.754;
			p1Y[104] = 97.875;
			p1X[105] = 191.484;
			p1Y[105] = 100.863;
			p1X[106] = 195.445;
			p1Y[106] = 103.883;
			p1X[107] = 201.051;
			p1Y[107] = 108.574;
 
			// Point 2 (X and Y)
			p2X[1] = 392.93;
			p2Y[1] = 82.2031;
			p2X[2] = 393.012;
			p2Y[2] = 82.9531;
			p2X[3] = 393.484;
			p2Y[3] = 83.4219;
			p2X[4] = 393.562;
			p2Y[4] = 83.9375;
			p2X[5] = 392.973;
			p2Y[5] = 84.1406;
			p2X[6] = 392.102;
			p2Y[6] = 84.2461;
			p2X[7] = 388.973;
			p2Y[7] = 84.3711;
			p2X[8] = 386.695;
			p2Y[8] = 84.3555;
			p2X[9] = 384.117;
			p2Y[9] = 84.3555;
			p2X[10] = 381.148;
			p2Y[10] = 84.2031;
			p2X[11] = 378.281;
			p2Y[11] = 84.043;
			p2X[12] = 373.645;
			p2Y[12] = 83.0781;
			p2X[13] = 372.793;
			p2Y[13] = 81.9766;
			p2X[14] = 371.531;
			p2Y[14] = 80.5273;
			p2X[15] = 370.488;
			p2Y[15] = 78.9961;
			p2X[16] = 369.418;
			p2Y[16] = 77.9375;
			p2X[17] = 367.398;
			p2Y[17] = 76.2148;
			p2X[18] = 366.805;
			p2Y[18] = 75.8711;
			p2X[19] = 366.359;
			p2Y[19] = 75.918;
			p2X[20] = 365.922;
			p2Y[20] = 76.2344;
			p2X[21] = 365.391;
			p2Y[21] = 77.0508;
			p2X[22] = 363.898;
			p2Y[22] = 78.1211;
			p2X[23] = 362.98;
			p2Y[23] = 78.4375;
			p2X[24] = 362.414;
			p2Y[24] = 78.7695;
			p2X[25] = 361.871;
			p2Y[25] = 78.9688;
			p2X[26] = 361.398;
			p2Y[26] = 79.3203;
			p2X[27] = 361.473;
			p2Y[27] = 80.3164;
			p2X[28] = 361.898;
			p2Y[28] = 81.207;
			p2X[29] = 362.926;
			p2Y[29] = 82.2969;
			p2X[30] = 364.879;
			p2Y[30] = 83.9531;
			p2X[31] = 367.281;
			p2Y[31] = 85.8828;
			p2X[32] = 374.109;
			p2Y[32] = 90.582;
			p2X[33] = 377.609;
			p2Y[33] = 93.0039;
			p2X[34] = 381.266;
			p2Y[34] = 94.6641;
			p2X[35] = 384.586;
			p2Y[35] = 95.7852;
			p2X[36] = 387.496;
			p2Y[36] = 96.1523;
			p2X[37] = 391.707;
			p2Y[37] = 95.0625;
			p2X[38] = 392.82;
			p2Y[38] = 94.0586;
			p2X[39] = 393.277;
			p2Y[39] = 93.0156;
			p2X[40] = 393.438;
			p2Y[40] = 92.0977;
			p2X[41] = 393.426;
			p2Y[41] = 91.707;
			p2X[42] = 393.02;
			p2Y[42] = 92.0977;
			p2X[43] = 392.949;
			p2Y[43] = 92.6016;
			p2X[44] = 393.062;
			p2Y[44] = 93.0039;
			p2X[45] = 393.535;
			p2Y[45] = 93.2461;
			p2X[46] = 393.938;
			p2Y[46] = 93.4805;
			p2X[47] = 394.156;
			p2Y[47] = 93.3047;
			p2X[48] = 393.691;
			p2Y[48] = 92.6836;
			p2X[49] = 392.855;
			p2Y[49] = 91.9062;
			p2X[50] = 391.625;
			p2Y[50] = 91.0625;
			p2X[51] = 391.633;
			p2Y[51] = 91.0781;
			p2X[52] = 388.988;
			p2Y[52] = 89.6328;
			p2X[53] = 388.059;
			p2Y[53] = 89.0977;
			p2X[54] = 387.336;
			p2Y[54] = 88.5469;
			p2X[55] = 386.895;
			p2Y[55] = 88.3086;
			p2X[56] = 386.406;
			p2Y[56] = 88.332;
			p2X[57] = 385.801;
			p2Y[57] = 88.9062;
			p2X[58] = 385.473;
			p2Y[58] = 89.0586;
			p2X[59] = 385.035;
			p2Y[59] = 89.1445;
			p2X[60] = 384.555;
			p2Y[60] = 89.0703;
			p2X[61] = 384.172;
			p2Y[61] = 89.0508;
			p2X[62] = 383.781;
			p2Y[62] = 89.0156;
			p2X[63] = 383.57;
			p2Y[63] = 89.1055;
			p2X[64] = 383.637;
			p2Y[64] = 89.3086;
			p2X[65] = 383.797;
			p2Y[65] = 89.5547;
			p2X[66] = 384.258;
			p2Y[66] = 89.8555;
			p2X[67] = 385.984;
			p2Y[67] = 90.125;
			p2X[68] = 387.527;
			p2Y[68] = 90.1367;
			p2X[69] = 388.973;
			p2Y[69] = 90.1641;
			p2X[70] = 390.5;
			p2Y[70] = 90.2031;
			p2X[71] = 391.664;
			p2Y[71] = 90.1602;
			p2X[72] = 392.984;
			p2Y[72] = 89.3047;
			p2X[73] = 393.43;
			p2Y[73] = 89.0586;
			p2X[74] = 393.227;
			p2Y[74] = 88.6445;
			p2X[75] = 392.664;
			p2Y[75] = 88.125;
			p2X[76] = 392.145;
			p2Y[76] = 87.4258;
			p2X[77] = 389.367;
			p2Y[77] = 86.0234;
			p2X[78] = 387.5;
			p2Y[78] = 85.2773;
			p2X[79] = 385.367;
			p2Y[79] = 84.6367;
			p2X[80] = 383.359;
			p2Y[80] = 84.4414;
			p2X[81] = 381.391;
			p2Y[81] = 84.4102;
			p2X[82] = 377.152;
			p2Y[82] = 84.7031;
			p2X[83] = 375.148;
			p2Y[83] = 84.5234;
			p2X[84] = 373.367;
			p2Y[84] = 83.9453;
			p2X[85] = 371.391;
			p2Y[85] = 83.1797;
			p2X[86] = 369.367;
			p2Y[86] = 81.9609;
			p2X[87] = 363.773;
			p2Y[87] = 79.2812;
			p2X[88] = 360.246;
			p2Y[88] = 78.3438;
			p2X[89] = 356.367;
			p2Y[89] = 77.3047;
			p2X[90] = 353.359;
			p2Y[90] = 76.3633;
			p2X[91] = 349.969;
			p2Y[91] = 75.75;
			p2X[92] = 345.523;
			p2Y[92] = 75.418;
			p2X[93] = 343.582;
			p2Y[93] = 75.25;
			p2X[94] = 342.148;
			p2Y[94] = 74.8242;
			p2X[95] = 341.562;
			p2Y[95] = 73.8438;
			p2X[96] = 342.375;
			p2Y[96] = 72.5469;
			p2X[97] = 346.195;
			p2Y[97] = 70.0703;
			p2X[98] = 349.004;
			p2Y[98] = 68.293;
			p2X[99] = 352.969;
			p2Y[99] = 67.1484;
			p2X[100] = 357.133;
			p2Y[100] = 66.2695;
			p2X[101] = 361.035;
			p2Y[101] = 66.3359;
			p2X[102] = 369.969;
			p2Y[102] = 68.0625;
			p2X[103] = 373.887;
			p2Y[103] = 69.7891;
			p2X[104] = 377.633;
			p2Y[104] = 71.8125;
			p2X[105] = 381.262;
			p2Y[105] = 73.3008;
			p2X[106] = 384.555;
			p2Y[106] = 74.9023;
			p2X[107] = 389.516;
			p2Y[107] = 76.3438;
 
			// Point 3 (X and Y)
			p3X[1] = 136.5;
			p3Y[1] = 337.805;
			p3X[2] = 138.727;
			p3Y[2] = 330.988;
			p3X[3] = 139.598;
			p3Y[3] = 327.793;
			p3X[4] = 139.922;
			p3Y[4] = 324.734;
			p3X[5] = 140.648;
			p3Y[5] = 322.551;
			p3X[6] = 141.504;
			p3Y[6] = 320.703;
			p3X[7] = 142.312;
			p3Y[7] = 316.555;
			p3X[8] = 142.117;
			p3Y[8] = 314.555;
			p3X[9] = 141.293;
			p3Y[9] = 311.555;
			p3X[10] = 140.191;
			p3Y[10] = 308.152;
			p3X[11] = 139.465;
			p3Y[11] = 304.809;
			p3X[12] = 139.625;
			p3Y[12] = 298.234;
			p3X[13] = 140.945;
			p3Y[13] = 295.133;
			p3X[14] = 142.363;
			p3Y[14] = 292.152;
			p3X[15] = 143.238;
			p3Y[15] = 289.309;
			p3X[16] = 144.27;
			p3Y[16] = 287.047;
			p3X[17] = 145.285;
			p3Y[17] = 282.219;
			p3X[18] = 145.965;
			p3Y[18] = 280.383;
			p3X[19] = 146.805;
			p3Y[19] = 279.309;
			p3X[20] = 147.723;
			p3Y[20] = 278.438;
			p3X[21] = 148.562;
			p3Y[21] = 278.477;
			p3X[22] = 148.625;
			p3Y[22] = 278.461;
			p3X[23] = 148.301;
			p3Y[23] = 278.453;
			p3X[24] = 147.82;
			p3Y[24] = 278.309;
			p3X[25] = 147.531;
			p3Y[25] = 278.367;
			p3X[26] = 146.793;
			p3Y[26] = 278.367;
			p3X[27] = 145.676;
			p3Y[27] = 277.309;
			p3X[28] = 144.805;
			p3Y[28] = 276.215;
			p3X[29] = 144.176;
			p3Y[29] = 274.531;
			p3X[30] = 143.742;
			p3Y[30] = 272.457;
			p3X[31] = 144.301;
			p3Y[31] = 270.473;
			p3X[32] = 147.848;
			p3Y[32] = 267.137;
			p3X[33] = 150.664;
			p3Y[33] = 265.77;
			p3X[34] = 154.211;
			p3Y[34] = 264.324;
			p3X[35] = 157.848;
			p3Y[35] = 262.383;
			p3X[36] = 161.652;
			p3Y[36] = 260.18;
			p3X[37] = 168.246;
			p3Y[37] = 255.051;
			p3X[38] = 170.93;
			p3Y[38] = 252.566;
			p3X[39] = 172.527;
			p3Y[39] = 250.012;
			p3X[40] = 173.969;
			p3Y[40] = 247.961;
			p3X[41] = 174.84;
			p3Y[41] = 246.16;
			p3X[42] = 176.195;
			p3Y[42] = 244.184;
			p3X[43] = 177.223;
			p3Y[43] = 243.328;
			p3X[44] = 178.824;
			p3Y[44] = 242.461;
			p3X[45] = 180.848;
			p3Y[45] = 241.5;
			p3X[46] = 183.012;
			p3Y[46] = 240.918;
			p3X[47] = 186.414;
			p3Y[47] = 239.227;
			p3X[48] = 187.648;
			p3Y[48] = 238.078;
			p3X[49] = 188.941;
			p3Y[49] = 237.336;
			p3X[50] = 190.125;
			p3Y[50] = 236.602;
			p3X[51] = 190.125;
			p3Y[51] = 236.602;
			p3X[52] = 192.289;
			p3Y[52] = 235.754;
			p3X[53] = 193.59;
			p3Y[53] = 235.516;
			p3X[54] = 196.109;
			p3Y[54] = 235.211;
			p3X[55] = 197.00;
			p3Y[55] = 235.262;
			p3X[56] = 198.176;
			p3Y[56] = 235.234;
			p3X[57] = 200.715;
			p3Y[57] = 234.789;
			p3X[58] = 202.066;
			p3Y[58] = 234.559;
			p3X[59] = 203.328;
			p3Y[59] = 234.176;
			p3X[60] = 204.727;
			p3Y[60] = 233.762;
			p3X[61] = 206.34;
			p3Y[61] = 233.586;
			p3X[62] = 207.582;
			p3Y[62] = 233.762;
			p3X[63] = 207.445;
			p3Y[63] = 234.262;
			p3X[64] = 206.367;
			p3Y[64] = 234.762;
			p3X[65] = 204.707;
			p3Y[65] = 235.262;
			p3X[66] = 202.891;
			p3Y[66] = 236.262;
			p3X[67] = 197.887;
			p3Y[67] = 237.902;
			p3X[68] = 195.57;
			p3Y[68] = 238.945;
			p3X[69] = 193.055;
			p3Y[69] = 239.762;
			p3X[70] = 190.168;
			p3Y[70] = 241.09;
			p3X[71] = 187.039;
			p3Y[71] = 241.945;
			p3X[72] = 179.539;
			p3Y[72] = 245.617;
			p3X[73] = 174.816;
			p3Y[73] = 248.027;
			p3X[74] = 169.586;
			p3Y[74] = 250.602;
			p3X[75] = 164.773;
			p3Y[75] = 254.023;
			p3X[76] = 159.336;
			p3Y[76] = 257.258;
			p3X[77] = 150.594;
			p3Y[77] = 263.742;
			p3X[78] = 146.41;
			p3Y[78] = 267.129;
			p3X[79] = 143.379;
			p3Y[79] = 270.258;
			p3X[80] = 141.25;
			p3Y[80] = 274.242;
			p3X[81] = 141.00;
			p3Y[81] = 278.047;
			p3X[82] = 143.875;
			p3Y[82] = 287.379;
			p3X[83] = 146.238;
			p3Y[83] = 291.242;
			p3X[84] = 149.816;
			p3Y[84] = 295.00;
			p3X[85] = 153.031;
			p3Y[85] = 297.371;
			p3X[86] = 156.203;
			p3Y[86] = 299.203;
			p3X[87] = 162.137;
			p3Y[87] = 303.621;
			p3X[88] = 165.27;
			p3Y[88] = 306.375;
			p3X[89] = 168.68;
			p3Y[89] = 309.203;
			p3X[90] = 172.359;
			p3Y[90] = 312.203;
			p3X[91] = 176.527;
			p3Y[91] = 315.203;
			p3X[92] = 183.809;
			p3Y[92] = 321.242;
			p3X[93] = 186.93;
			p3Y[93] = 323.961;
			p3X[94] = 188.773;
			p3Y[94] = 326.004;
			p3X[95] = 189.27;
			p3Y[95] = 327.715;
			p3X[96] = 189.824;
			p3Y[96] = 328.887;
			p3X[97] = 190.93;
			p3Y[97] = 331.516;
			p3X[98] = 190.207;
			p3Y[98] = 331.758;
			p3X[99] = 189.914;
			p3Y[99] = 332.625;
			p3X[100] = 189.348;
			p3Y[100] = 332.887;
			p3X[101] = 189.121;
			p3Y[101] = 333.938;
			p3X[102] = 189.938;
			p3Y[102] = 336.777;
			p3X[103] = 191.066;
			p3Y[103] = 338.98;
			p3X[104] = 192.938;
			p3Y[104] = 341.699;
			p3X[105] = 195.07;
			p3Y[105] = 344.094;
			p3X[106] = 197.449;
			p3Y[106] = 346.777;
			p3X[107] = 200.086;
			p3Y[107] = 350.098;
 
			// Point 4 (X and Y)
			p4X[1] = 403.535;
			p4Y[1] = 312.004;
			p4X[2] = 400.781;
			p4Y[2] = 309.047;
			p4X[3] = 399.539;
			p4Y[3] = 307.871;
			p4X[4] = 398.078;
			p4Y[4] = 306.777;
			p4X[5] = 397.262;
			p4Y[5] = 305.66;
			p4X[6] = 396.516;
			p4Y[6] = 304.34;
			p4X[7] = 393.266;
			p4Y[7] = 300.988;
			p4X[8] = 391.082;
			p4Y[8] = 299.102;
			p4X[9] = 388.051;
			p4Y[9] = 297.062;
			p4X[10] = 384.625;
			p4Y[10] = 295.039;
			p4X[11] = 381.605;
			p4Y[11] = 292.711;
			p4X[12] = 378.352;
			p4Y[12] = 288.598;
			p4X[13] = 378.223;
			p4Y[13] = 286.316;
			p4X[14] = 377.441;
			p4Y[14] = 283.867;
			p4X[15] = 376.762;
			p4Y[15] = 281.117;
			p4X[16] = 375.754;
			p4Y[16] = 278.586;
			p4X[17] = 373.441;
			p4Y[17] = 275.203;
			p4X[18] = 373.035;
			p4Y[18] = 273.527;
			p4X[19] = 372.199;
			p4Y[19] = 272.312;
			p4X[20] = 371.969;
			p4Y[20] = 271.355;
			p4X[21] = 371.445;
			p4Y[21] = 271.129;
			p4X[22] = 370.066;
			p4Y[22] = 270.461;
			p4X[23] = 369.172;
			p4Y[23] = 270.289;
			p4X[24] = 368.41;
			p4Y[24] = 270.258;
			p4X[25] = 367.98;
			p4Y[25] = 270.332;
			p4X[26] = 367.141;
			p4Y[26] = 271.027;
			p4X[27] = 365.844;
			p4Y[27] = 272.211;
			p4X[28] = 364.75;
			p4Y[28] = 273.188;
			p4X[29] = 363.762;
			p4Y[29] = 274.457;
			p4X[30] = 362.844;
			p4Y[30] = 276.254;
			p4X[31] = 362.219;
			p4Y[31] = 278.305;
			p4X[32] = 362.852;
			p4Y[32] = 283.414;
			p4X[33] = 363.691;
			p4Y[33] = 285.676;
			p4X[34] = 364.848;
			p4Y[34] = 287.586;
			p4X[35] = 366.004;
			p4Y[35] = 288.77;
			p4X[36] = 366.91;
			p4Y[36] = 288.934;
			p4X[37] = 367.719;
			p4Y[37] = 288.27;
			p4X[38] = 367.141;
			p4Y[38] = 287.785;
			p4X[39] = 366.273;
			p4Y[39] = 287.105;
			p4X[40] = 364.762;
			p4Y[40] = 287.066;
			p4X[41] = 363.168;
			p4Y[41] = 287.332;
			p4X[42] = 361.059;
			p4Y[42] = 288.91;
			p4X[43] = 360.168;
			p4Y[43] = 289.75;
			p4X[44] = 359.473;
			p4Y[44] = 290.199;
			p4X[45] = 359.234;
			p4Y[45] = 290.953;
			p4X[46] = 359.074;
			p4Y[46] = 291.711;
			p4X[47] = 358.066;
			p4Y[47] = 291.922;
			p4X[48] = 357.289;
			p4Y[48] = 291.562;
			p4X[49] = 356.508;
			p4Y[49] = 290.898;
			p4X[50] = 355.836;
			p4Y[50] = 290.457;
			p4X[51] = 355.836;
			p4Y[51] = 290.457;
			p4X[52] = 354.969;
			p4Y[52] = 289.859;
			p4X[53] = 354.926;
			p4Y[53] = 289.617;
			p4X[54] = 354.961;
			p4Y[54] = 289.609;
			p4X[55] = 355.18;
			p4Y[55] = 289.867;
			p4X[56] = 355.344;
			p4Y[56] = 290.141;
			p4X[57] = 355.105;
			p4Y[57] = 290.535;
			p4X[58] = 354.984;
			p4Y[58] = 290.676;
			p4X[59] = 354.449;
			p4Y[59] = 290.812;
			p4X[60] = 354.00;
			p4Y[60] = 290.73;
			p4X[61] = 354.094;
			p4Y[61] = 290.785;
			p4X[62] = 354.02;
			p4Y[62] = 291.227;
			p4X[63] = 354.23;
			p4Y[63] = 291.578;
			p4X[64] = 354.434;
			p4Y[64] = 291.93;
			p4X[65] = 354.586;
			p4Y[65] = 292.371;
			p4X[66] = 355.234;
			p4Y[66] = 292.648;
			p4X[67] = 356.758;
			p4Y[67] = 293.293;
			p4X[68] = 357.996;
			p4Y[68] = 293.469;
			p4X[69] = 359.41;
			p4Y[69] = 293.531;
			p4X[70] = 360.977;
			p4Y[70] = 293.574;
			p4X[71] = 361.777;
			p4Y[71] = 293.551;
			p4X[72] = 364.277;
			p4Y[72] = 293.148;
			p4X[73] = 365.762;
			p4Y[73] = 292.871;
			p4X[74] = 366.781;
			p4Y[74] = 292.703;
			p4X[75] = 368.094;
			p4Y[75] = 291.957;
			p4X[76] = 369.203;
			p4Y[76] = 291.281;
			p4X[77] = 370.859;
			p4Y[77] = 288.906;
			p4X[78] = 371.359;
			p4Y[78] = 287.527;
			p4X[79] = 371.723;
			p4Y[79] = 286.445;
			p4X[80] = 372.082;
			p4Y[80] = 285.289;
			p4X[81] = 372.598;
			p4Y[81] = 283.598;
			p4X[82] = 373.922;
			p4Y[82] = 281.363;
			p4X[83] = 374.512;
			p4Y[83] = 279.602;
			p4X[84] = 374.73;
			p4Y[84] = 277.773;
			p4X[85] = 374.301;
			p4Y[85] = 275.531;
			p4X[86] = 372.797;
			p4Y[86] = 272.973;
			p4X[87] = 369.00;
			p4Y[87] = 268.695;
			p4X[88] = 367.023;
			p4Y[88] = 267.246;
			p4X[89] = 365.555;
			p4Y[89] = 265.633;
			p4X[90] = 363.941;
			p4Y[90] = 264.613;
			p4X[91] = 362.734;
			p4Y[91] = 264.078;
			p4X[92] = 359.922;
			p4Y[92] = 262.973;
			p4X[93] = 358.668;
			p4Y[93] = 262.723;
			p4X[94] = 359.027;
			p4Y[94] = 262.242;
			p4X[95] = 360.09;
			p4Y[95] = 261.805;
			p4X[96] = 360.852;
			p4Y[96] = 261.492;
			p4X[97] = 362.234;
			p4Y[97] = 260.316;
			p4X[98] = 364.008;
			p4Y[98] = 260.293;
			p4X[99] = 366.633;
			p4Y[99] = 260.43;
			p4X[100] = 369.074;
			p4Y[100] = 260.965;
			p4X[101] = 371.387;
			p4Y[101] = 262.078;
			p4X[102] = 376.125;
			p4Y[102] = 265.73;
			p4X[103] = 377.922;
			p4Y[103] = 268.012;
			p4X[104] = 380.039;
			p4Y[104] = 270.121;
			p4X[105] = 382.152;
			p4Y[105] = 271.609;
			p4X[106] = 384.27;
			p4Y[106] = 273.164;
			p4X[107] = 387.863;
			p4Y[107] = 274.598;
		}
 
		protected function exitFrameHandler(event : Event) : void {
			frame = footage.currentFrame - 1;
			render();
		}
 
		protected function render() : void {
			// Update bitmap
			if (Boolean(sourceBitmap)) sourceBitmap.dispose();
			sourceBitmap = sourceBitmapOriginal.clone();
 
			// Update triangles
			pt1.x = p1X[frame];
			pt1.y = p1Y[frame];
			pt2.x = p2X[frame];
			pt2.y = p2Y[frame];
			pt3.x = p3X[frame];
			pt3.y = p3Y[frame];
			pt4.x = p4X[frame];
			pt4.y = p4Y[frame];
 
			drawPlane(g, sourceBitmap, pt1, pt2, pt3, pt4);
		}
 
		protected function clickHandler(e : MouseEvent) : void {
			changeSourceBitmap();
		}
 
		protected function changeSourceBitmap() : void {
			switch(pictureId) {
				case 0:
					sourceBitmapOriginal = new Picture1(0.0, 0.0);
					break;
				case 1:
					sourceBitmapOriginal = new Picture2(0.0, 0.0);
					break;
				case 2:
					sourceBitmapOriginal = new Picture3(0.0, 0.0);
					break;
			}
 
			pictureId++;
			if(pictureId == pictureIdNum) {
				pictureId = 0;
			}
		}
 
		// PUBLIC
		//______________________________________________________________________
	}
}

Download the source from here motion-tracking.zip (3.1MB, Flash CS4, Actionscript 3). All assets included plus FLA file ready to be compiled.

PS. All images used in this example were done by the brilliant illustration studio Clema & Pedro.

  • Twitter
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • email
Posted in Actionscript, After Effects | Tagged , , , | 7 Comments

SleekTween

By Danilo Figueiredo | August 11, 2010

I would like to share one of my classes I use in (almost) every project, the SleekTween. It is nothing more than an extension of Tweener, although in this case the transition parameter can not be setted.

By now you must be asking yourself, so what is the point? The 20% rule, mentioned in the Flash Animation Tips by Fi, pretty much sums it up:

    The 20% rule. When an animation feels excessive, you can apply what we call the 20% rule. This means that you show only the last portion of an animation flow to the user. For instance, imagine a drop down… instead of animating it expanding all the way down – animate only the last bit where it falls into place. This leads to a shorter animation which focuses on where the dropdown lands and still feels smooth.

With SleekTween it is more precisely a 21.053% rule, and the first bit of the animation is not skipped, it’s only shortened. I have a feeling that many of the Group94 projects have a similar logic of animation.

Click below to check a comparison between SleekTween and Tweener:

This movie requires Flash Player 9


Download the source of this example from here sleektween-example.zip (64KB, Flash CS4, Actionscript 3). With FLA file ready to be compiled.

Here’s SleekTween code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

package tv.grifo.transitions {
	import caurina.transitions.Tweener;
 
	/**
	 * @author Grifo.tv / Danilo Figueiredo - www.grifo.tv
	 */
 
	public class SleekTween {
 
		//------------------------------------
		// private, protected properties
		//------------------------------------
 
		private static const DIVISOR : Number = 0.5714285714285714; // Number up to 1
		private static const FIRST_HALF : Number = 0.21053; // Number up to 1 (FIRST_HALF plus SECOND_HALF should equal 1)
		private static const SECOND_HALF : Number = 0.78947; // Number up to 1 (FIRST_HALF plus SECOND_HALF should equal 1)
 
		//------------------------------------
		// public properties
		//------------------------------------
 
		//------------------------------------
		// constructor
		//------------------------------------
 
		public function SleekTween() {
			throw new Error("SleekTween is a static class and should not be instantiated.");
		}
 
		//
		// PRIVATE, PROTECTED
		//______________________________________________________________________
 
		private static function start(target : Object, parameters : Object) : void {
			// init tweens
			var firstTween : Object = {};
			var secondTween : Object = {};
 
			// filter properties from parameters
			var properties : Object = {};
			for (var param:String in parameters) {
				if(target.hasOwnProperty(param)) {
					properties[param] = parameters[param];
				}else if(param != "time" && param != "delay") {
					trace("Target has no property such as:", param);
				}
			}
 
			// set tweens properties
			for (var prop:String in properties) {
				firstTween[prop] = (properties[prop] - target[prop]) * DIVISOR + target[prop];
				secondTween[prop] = properties[prop];
			}
			// set tweens time
			if (!Boolean(parameters["time"])) parameters["time"] = 2; // set default time to 2 if undefined
			firstTween["time"] = parameters["time"] * FIRST_HALF;
			secondTween["time"] = parameters["time"] * SECOND_HALF;
 
			// set tweens transition
			firstTween["transition"] = "easeInExpo";
			secondTween["transition"] = "easeOutExpo";
 
			// set tweens delay
			if (Boolean(parameters["delay"])) {
				firstTween["delay"] = parameters["delay"];
			} else {
				firstTween["delay"] = 0;
			}
			secondTween["delay"] = firstTween["time"] + firstTween["delay"];
			secondTween["onComplete"] = parameters["onComplete"];
			secondTween["onCompleteParams"] = parameters["onCompleteParams"];
 
			// do tween
			Tweener.addTween(target, firstTween);
			Tweener.addTween(target, secondTween);
		}
 
		//
		// PUBLIC
		//______________________________________________________________________
 
		public static function addTween(target : Object = null, parameters : Object = null) : void {
			if (!Boolean(target) || !Boolean(parameters)) return;
			start(target, parameters);
		}
	}
}

Use it like you would use Tweener:

1

SleekTween.addTween(target, {scaleX:tweenScaleX, time:2});

Finally, make sure to apply it whenever it feels right rather than in every single tween animation.

  • Twitter
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • email
Posted in Actionscript | Tagged , , , | 6 Comments

Kicking off

By Danilo Figueiredo | August 10, 2010

Hello and welcome to blog.grifo.tv. I’ve created this blog as an extension to my portfolio website.

Here I hope to describe the process of making things, share thoughts and techniques through experiments and write about what I’m into at the moment. I believe by sharing I’ll get feedback from other professionals and improve myself professionally.

In few words, this blog aims to spread some love about animation and interactivity.

Thanks for visiting and feel free to leave a comment.

  • Twitter
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Digg
  • del.icio.us
  • email
Posted in Thoughts | 2 Comments