Browsing articles tagged with " Flash"

Build an App for iPhone or iPad with FlashDevelop

Mar 17, 2012 // by Lorenzo Nuvoletta // AS3, Blog, iOS, Mobile // 6 Comments

This guide contains the essential steps to build an App for iOS using FlashDevelop and Windows, I will not stop trying to explain what I am doing or why I am doing it, sometimes it gets so obscure that I don’t even know, just do it and it will work…. hopefully. Of course before you even start reading this make sure to pay the $99 fee to the Apple bloodsuckers to become an iOS developer.

Let’s Start

Install OpenSSL for Windows.
Create a new project with FlashDevelop selecting AIR Mobile AS3 App
Open CMD (Start, serach program cmd) and execute the following commands:

cd C:\OpenSSL-Win32\bin (or wherever path you installed OpenSSL)

set OPENSSL_CONF=c:\OpenSSL-Win32\bin\openssl.cfg

set RANDFILE=.rnd

openssl genrsa -passout pass:fd -out mykey.key 2048

openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj “/emailAddress=yourAddress@example.com, CN=Your Name, C=US” (Don’t forget to change your name and email)

Creating the Certificate

Go to https://developer.apple.com/ios/manage/certificates/team/index.action - Certificates->Development Tab, Click on Request Certificate and upload the file CertificateSigningRequest.certSigningRequest that is in your OpenSSL bin. Submit and refresh the page a couple of times until it says DOWNLOAD. Download that file and put it in your OpenSSL bin.

Adding the Device

Go to https://developer.apple.com/ios/manage/devices/index.action - Devices, Click on Add Devices, you can find your Device ID in iTunes
Add a name you want and the UDID of your device.

Create App ID

Go to https://developer.apple.com/ios/manage/bundles/index.action and Click on New APP ID and add a name and an unique id. (Unique ID has to be the same you have in the application.xml in the FlashDevelop Project, that ID is set as default “air.MobileSomething” you should change it to something like “com.yourname.yourappname”, also remember to change the same APP_ID in SetupApplication.bat)

Create a Provisioning Profile

Go to https://developer.apple.com/ios/manage/provisioningprofiles/index.action and Click New Profile. Check everything, continue and refresh the page a couple of times until you see Download.
Download the file in the folder “cert” in your FlashDevelop Project.
Go to iTunes, File-Add File to Library… and import this file. (iTunes will not prompt you with any message, so to souble check you did it right try to reimport it).

Create the p12 file

Open CMD (Start, serach program cmd) and execute the following commands:

cd C:\OpenSSL-Win32\bin (or wherever path you installed OpenSSL)

set OPENSSL_CONF=c:\OpenSSL-Win32\bin\openssl.cfg

set RANDFILE=.rnd

openssl x509 -in ios_development.cer -inform DER -out developer_identity.pem -outform PEM

openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12 (When prompted to enter the password, write fd, or whatever password you used to create the key)

Copy the iphone_dev.p12 in your “cert” folder in the FlashDevelop Project

Setting the FlashDevelop Project

In the “bat” folder edit the file SetupApplication.bat

From line 18:

set IOS_DIST_CERT_FILE=cert\iphone_dev.p12
set IOS_DEV_CERT_FILE=cert\iphone_dev.p12
set IOS_DEV_CERT_PASS=fd
set IOS_PROVISION=cert\YourFileName.mobileprovision

Create the IPA

Execute the file PackageApp.bat in your FlashDevelop Project.
Select 8 “ad-hoc” and when prompted to enter password, enter: fd
Wait few minutes and you should see a IPA file in your “dist” folder
Import the IPA in iTunes and Sync.

At this point you should have your App running on your iPhone/iPod/iPad. This whole process is crazy, I don’t know why Apple doesn’t do anything to make it simpler. Try to do the same thing on Android it will take you not more than 5 seconds, but anyway, we all want to make the Apple gods happy.

For your reference I used this guides:

ConnorUllmann.com

Codeandvisual.com

Emanueleferonato.com

Stuff Flash artists should NOT do

Jan 31, 2012 // by Lorenzo Nuvoletta // Art, Blog // 7 Comments

People that worked with me knows that I kinda freak out when I notice that an artist is doing any of the below-listed things.

Following this small little rules can help your relationship with the engineering department and can also make you look cool!

The list

Do not use Groups

Actually remove the letter G from your keyboard otherwise that easy appealing CTRL+G will always tempt you. Using groups always leads to uncontrolled agglomerates of drawings all over the place, instead symbolize them, that way you have them in the library, and you can also reuse them. Done that you are already far ahead of the rest of your crew that didn’t read this.

Don’t draw twice the same stuff

This is where rule number 1 comes handy, instead use a movie clip sitting on the stage and copy/paste it.

Don’t create unnecessary layers

For example, imagine you have a popup with a bunch of buttons, text fields and some other art, you could potentially have a layer “Text”, one “Buttons and another one “Movieclips”. This is not really that important but it’s a nice to have.

Remove unused Guide layers

Ok, guide layers can be really helpful, BUT, if you don’t need them anymore just delete the layer.

Do NOT use masks

This is kinda tricky, setting a mask in Flash can really hurt performance if people abuses it, anybody trying to squeeze as much optimization as possible would try to find different solutions, leave the programmers the option to do that using code, and if they have no clue what to do tell them to RTFM or to use scrollRect for example.

Delete hidden art

If an element hides part of another element, delete that part of the second hidden element, even if you don’t see it doesn’t mean that Flash is not processing it, for example if I have 2 circles overlapping each other, you will see it as one circle, but flash will process it as 2 circles. It also helps the size of the final SWF.

Use lines instead of brush tool for outlines

And remember to set the outline hinting. A line is waaaaay faster to be drawn than a pseudo line drawn with a brush. Although if you really need to use the brush becouse you want to give it some special effect that you can’t with a simple line then this tip can be voided.

Do NOT scale Text Fields

This is very bad, and can waste hours of debugging trying to figure out why the heck that textfield is rendering all the character out of whack, especially in those cases where localization and translations are being used, so always make sure that your textfields are set to 100% scale.

Control your Fonts

A font library can occupy far more than what you expect, use them with moderation.

Don’t use Simple Buttons

They are obsolete and unmanageable, I think Adobe still keeps them in only so that amateurs can make stuff that looks like buttons.

9 sliced is your friend

The 9 sliced is a weird named option under the properties of a movie clip, but it is pretty cool, you can decide what portion gets scaled and omit the borders, perfect for reusing a background with different sizes!

Filters super suck performance

But they are super cool too, I know, especially the glowing, I love the glowing, but anyway IF possible do not use them, some times you can achieve the same effect with less sucking techniques.

Don’t code in the Timeline

Every time an artist writes code in the timeline an angel dies.

Clean the library

The FLA library is like your bedroom, it says everything about you, and you are about to share all your secrets with the entire engineering department. You want to, at least, hide the socks!

Simple Inverse Kinematics

Jan 29, 2012 // by Lorenzo Nuvoletta // AS3, Blog // No Comments

I have been looking for a while with interest at how inverse kinematics works, on Wikipedia I found this page regarding the Law of cosines which sounds interesting, although looks overly complicated.

Other methods to take in consideration are the Cyclic-Coordinate Descent (CCD) solution and a Jacobian matrix iterative solution.

I have been able to determine the exact position of multiple joints using a mix of those, but the resulting algorithm looks ugly at least.

So while I am looking to find a cute one enjoy this piece of code to calculate IK on 2 joints.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;

	/**
	 * ...
	 * @author Lorenzo Nuvoletta
	 */
	public class Main extends Sprite
	{

		private var _points:Vector. = new Vector.();
		private var _distance:Number = 100;
		private var _lastPoint:int = 2;

		private var _theta1:Number = 0;
		private var _theta2:Number = 0;		

		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			_points.push(new Point(100, 100));
			_points.push(new Point(200, 100));
			_points.push(new Point(300, 100));
			draw();
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
		}		

		private function onMouseMove(e:MouseEvent):void
		{
			solve();
			draw();
		}

		private function solve():void {
			// Compute difference between start and end points
			var dx:Number = mouseX - _points[0].x;
			var dy:Number = mouseY - _points[0].y;
			// Compute distance between start and end points
			var dist:Number = Math.sqrt(dx*dx + dy*dy);
			// Compute angle between start and end points
			var theta:Number = Math.atan2(dy,dx);
			// Clamp the distance
			var totalLength:Number = _distance * 2;
			if( dist &lt; totalLength ) {
				// Calculate first angle: http://en.wikipedia.org/wiki/Dot_product#Geometric_interpretation
				_theta1 = Math.acos( dist / totalLength ) + theta;
				dx = dx - _distance * Math.cos( _theta1 );
				dy = dy - _distance * Math.sin( _theta1 );
				// Calculate second angle from first angle and segment
				_theta2 = Math.atan2(dy, dx);
			} else {
				// If the distance is greater than arm length, arm is straight
				_theta1 = _theta2 = theta;
			}
			// Compute positions from angles
			_points[1].x = _points[0].x + Math.cos( _theta1 ) * _distance;
			_points[1].y = _points[0].y + Math.sin( _theta1 ) * _distance;
			_points[2].x = _points[1].x + Math.cos( _theta2 ) * _distance;
			_points[2].y = _points[1].y + Math.sin( _theta2 ) * _distance;
		}

		private function draw():void {
			this.graphics.clear();
			this.graphics.lineStyle(4, 0);
			this.graphics.moveTo(_points[0].x, _points[0].y);
			for (var i:int = 1; i &lt; _points.length; i++) {
				this.graphics.lineTo(_points[i].x, _points[i].y);
			}
		}

	}

}

package

{

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.geom.Point;

/**

* ...

* @author Lorenzo Nuvoletta

public class Main extends Sprite

{

private var _points:Vector. = new Vector.();

private var _distance:Number = 100;

private var _lastPoint:int = 2;

private var _theta1:Number = 0;

private var _theta2:Number = 0;

public function Main():void

{

if (stage) init();

else addEventListener(Event.ADDED_TO_STAGE, init);

}

private function init(e:Event = null):void

{

removeEventListener(Event.ADDED_TO_STAGE, init);

// entry point

_points.push(new Point(100, 100));

_points.push(new Point(200, 100));

_points.push(new Point(300, 100));

draw();

stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

}

private function onMouseMove(e:MouseEvent):void

{

solve();

draw();

}

private function solve():void {

// Compute difference between start and end points

var dx:Number = mouseX - _points[0].x;

var dy:Number = mouseY - _points[0].y;

// Compute distance between start and end points

var dist:Number = Math.sqrt(dx*dx + dy*dy);

// Compute angle between start and end points

var theta:Number = Math.atan2(dy,dx);

// Clamp the distance

var totalLength:Number = _distance * 2;

if( dist < totalLength ) {

// Calculate first angle: http://en.wikipedia.org/wiki/Dot_product#Geometric_interpretation

_theta1 = Math.acos( dist / totalLength ) + theta;

dx = dx - _distance * Math.cos( _theta1 );

dy = dy - _distance * Math.sin( _theta1 );

// Calculate second angle from first angle and segment

_theta2 = Math.atan2(dy, dx);

} else {

// If the distance is greater than arm length, arm is straight

_theta1 = _theta2 = theta;

}

// Compute positions from angles

_points[1].x = _points[0].x + Math.cos( _theta1 ) * _distance;

_points[1].y = _points[0].y + Math.sin( _theta1 ) * _distance;

_points[2].x = _points[1].x + Math.cos( _theta2 ) * _distance;

_points[2].y = _points[1].y + Math.sin( _theta2 ) * _distance;

}

private function draw():void {

this.graphics.clear();

this.graphics.lineStyle(4, 0);

this.graphics.moveTo(_points[0].x, _points[0].y);

for (var i:int = 1; i < _points.length; i++) {

this.graphics.lineTo(_points[i].x, _points[i].y);

}

Pages:12 »

M	T	W	T	F	S	S
« Feb
		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