Twitter Bootstrap for beginners

When producing web designs, you are often set for a specific grid to get some structure on the content. Sometimes it is because of restrictions in the brief and a relation to an underlying CMS. Other times it is just because it helps to get some rules to obey.

The nature of HTML has previously been table based. Beside, all the bad things said about tables  in design they was somehow well suited for a grid based thought.  Thinking in tables (and nested tables) made a natural hierarchy in the way to organize content.

Twitter Bootstrap is a way to get into the grid thoughts again. It is a system based on a number of columns that you can span over. You start by creating a row (just like a table row) and inside them you define a set of elements with a span (just like table cells and col-span).

The system is very flexible, and you get a vast amount of styling for free when using it, so whether it’s for prototyping or layout purpose: If you develop websites, you ow yourself to at least try making a site or two with Bootstrap or similar grid based framework.

I have written a starter tutorial to get you going. It covers the basics of presenting the framework. How to set it up, and how to convert a relative simple layout into a fully working HTML document.

Go to http://www.hjaelpmignu.dk/content/getting-twitter-bootstrap-and-running and give it your best shot :-)

Remember to ask questions in the forum under HTML and CSS (http://www.hjaelpmignu.dk/forum/16), in case of problems.


Gradient mesh with a hole in Adobe Illustrator (tutorial)

Just a quick note, that I posted a new short tutorial on how to make a gradient mesh with a hole in.

Nothing fancy, but nice to know. See http://www.hjaelpmignu.dk/content/punching-holes-gradient-mesh for more info


Testing Starling performance

Get the work files and final example here

This post is just a quick solution to test the performance of Starling. It build upon the previous one called Getting hooked up with Starling, and just adds a lot of the mice and make them react to the mouse.

The process here is simply:

  1. Initialize Starling
  2. Wait for the stage to be ready
  3. Insert a whole lot of images
  4. Make each image react to their position in relation to the mouse.
  5. See, how it goes

Initializing starling and waiting for the stage, was explained in the other tutorial, so I will discuss the other topics here. This is an example of what you will be doing.

Insert more than one image

When dealing with images, it is generally a good idea to define a custom class for them. This way it is easier to manipulate and retain individual information in the individual images. In this example you should go ahead and add a custom class. You can use the Start project to follow along or even better, complete the previous tutorial and use those files :-)

Right click on the default package and select New > ActionScript Class

 

Call the Class CustomImage and make the Image class (starling.display.Image). Declare two public variables called destX and destY as numbers, so the code should look like this:

package
{
  import starling.display.Image;
  import starling.textures.Texture;

  public class CustomImage extends Image
  {
 public var destX:Number;
 public var destY:Number;
    public function CustomImage(texture:Texture)
    {
      super(texture);
    }
  }
}

These variables are used to store the destination coordinates for each image. They are supposed to move to a random new location from time to time, and these variables are taking care of the values.

Open the StarlStage.as file and declare the following variables:

[Embed(source="assets/mouse.png")]
private var mouseBMP:Class;

private const NUM_MICE:uint = 500;
private var miceVector:Vector.<Image> = new Vector.<Image>(NUM_MICE, true);

private var mouseCoord:Point = new Point(); 
private var maxDist:Number;

First, you create a constant that holds the number of mice you want in the test. Change that to suit your need. Then a vector object is created. The first argument is the number of elements in the vector, and the second argument (set to true) is creating a fixed vector, so it isn’t allowed to change size during runtime. These arguments are optional, and only set for performance reasons.

After that a Point object is created to hold the position of the mouse, and a value to hold the maximum distance there can be between two points on the stage (a diagonal line).

Change the onAdded() method, so it looks like this:

private function onAdded(event:Event):void
  {
    q = new Quad(800, 600, 0x880000);
    addChild(q);
    maxDist = Math.sqrt((stage.stageWidth * stage.stageWidth) + (stage.stageHeight * stage.stageHeight));

    var texture:Texture = Texture.fromBitmap(new mouseBMP());

    for(var i:int = 0; i < NUM_MICE; i++)
    {
      var image:CustomImage = new CustomImage(texture);
      image.pivotX = image.width >> 1;
      image.pivotY = image.height >> 1;
      image.alpha = Math.random();
      image.destX = Math.random()*stage.stageWidth;
      image.destY = Math.random()*stage.stageHeight;
      image.x = Math.random()*stage.stageWidth;
      image.y = Math.random()*stage.stageHeight;
      image.rotation = deg2rad(Math.random()*360);

      addChild(image);
      miceVector[i] = image;
    }
}

The first two lines is the colored background, made from the Quad. Next line uses the Pythagorean Theorem to calculate the diagonal based on the width and height of the stage. The value is stored in maxDist for later use.

Then the texture is created, exactly like in the previous tutorial, and a loop is set up to generate the amount of mice, that is declared in NUM_MICE.

Fir you declare a variable called image as the type CustomImage, which is the class you made earlier. pivotX and pivotY is a nice set of properties that Starlings display objects have. They move the origin point inside the object to a new position. In Flash, you are normally moving the object in a negative direction in order to be able to rotate or scale around the middle of the object; With Starling you can just set the pivot point to be any coordinate in the image. The bit shift to the right (>>) is just a fancy way of divide by 2. I could have entered something like image.height/2 but I am told that the performance of this bit shift is a bit faster, so I-ll stick with that :-)

The rest sets a lot of random numbers in the objects properties (alpha, x, y and rotation). It also sets the public variables inside the CustomImage class, with new random coordinates.

degrees to radian conversion

Pay attention to the rotation property. Starling uses radians, when working with rotation. Fortunately, you can use the little helper deg2rad() in Starling. Just remember to import starling.utils.deg2rad 

Finally the image is added to the stage, and places inside the vector, so it can be referenced later on.

Test the project to see a lot of mice with different position, rotation and transparency on a dark red background.

Getting the coordinates from the mouse

The Starling framework do not work with mouse events, but it has (like Flash) an event called TouchEvent, that takes care of most of your needs. Add a listener called onTouch() and update the constructor so it looks like this:

public function StarlStage()
{
  addEventListener(Event.ADDED_TO_STAGE, onAdded);
  addEventListener(TouchEvent.TOUCH, onTouch);
}

private function onTouch(event:TouchEvent):void
{
  var touch:Touch = event.getTouch(stage);
  mouseCoord = touch.getLocation(stage);
}

In the constructor you listen for the TouchEvent (remember to import the Starling version), and set it to call the onTouch method. A touch event can contain multiple touch, so there is a method called getTouch() and one called getTouches(). Here we just take one single touch from stage, and keep it in the object called called touch. These Touch objects holds all relevant information regarding the specific place it points to. Here you use the method getLocation to retrieve a Point objects, that is store in your own mouseCoord variable for later use.

Make the mice move

Not it’s time to move the mice. Start by registering a listener last in the onAdded() method, so the last line should look like this:

private function onAdded(event:Event):void
{
  ...
  //previous code here
  ...
  stage.addEventListener(Event.ENTER_FRAME, draw);
}

Again, remeber to import Starlings own Event class (starling.events.event), instead of the one you are used to in Flash. Create a method called draw, and enter the following:

private function draw(event:Event):void
{
  var distance:Number;
  var tmpImg:CustomImage;
  var ratio:Number;

  for (var i:int = 0; i < NUM_MICE; i++)
  {
    tmpImg = miceVector[i] as CustomImage;
    tmpImg.x -= (tmpImg.x - tmpImg.destX) * .01;
    tmpImg.y -= (tmpImg.y - tmpImg.destY) * .01;
    if(Math.abs(tmpImg.x - tmpImg.destX) < 1 && Math.abs(tmpImg.y - tmpImg.destY) < 1)
    {
      tmpImg.destX = Math.random()*stage.stageWidth;
      tmpImg.destY = Math.random()*stage.stageHeight;
    }

    distance = Point.distance(mouseCoord, new Point(tmpImg.x, tmpImg.y));

    ratio = distance/maxDist
    tmpImg.rotation += 0.2 * ratio;
    tmpImg.scaleX = tmpImg.scaleY = 1 - ratio;
  }
}

That’s a lot, so let’s take it in small chunks. First you create two variables, one to hold the distance between the mouse and the current image. The other is just a temporary instance of the image made outside the loop, so you don’t fill up the memory with hundreds of local instances. This way, you are using the same object over and over again.

Then a loop is set up, that iterates through your pool of images, contained in the vector called miceVector. Inside the loop you first transfer a reference to the current objects to tmpImg. From now on, you can avoid the time consuming process it is for Flash to look up an object in arrays and vectors – it is also a bit easier to read.

tmpImg.x -= (tmpImg.x - tmpImg.destX) * .01;
tmpImg.y -= (tmpImg.y - tmpImg.destY) * .01;

Then each image is moved a bit closer to it’s destination. This is done, by taking the distance between the two points (current and destination) and multiply it with a low number – in this case .01. If you enter a higher value, they will travel faster, but since it is redrawn 60 times per second (if it can), you are working with very low numbers here. In more complex solutions, I would introduce dedicated tween classes, but this should do it, for a quick test.

if(Math.abs(tmpImg.x - tmpImg.destX) < 1 && Math.abs(tmpImg.y - tmpImg.destY) < 1)
{
  tmpImg.destX = Math.random()*stage.stageWidth;
  tmpImg.destY = Math.random()*stage.stageHeight;
}

Then you test if the distance between current position and destination is below 1. If it is, a new destination point is set in the images destX and destY. This is done, because, you would never reach the exact same values when multiplying with .01.

distance = Point.distance(mouseCoord, new Point(tmpImg.x, tmpImg.y));

This one can be a bit tricky. It uses a stetic method in the Point class called distance, to get the distance between two point objects. it actually just does the same as the calculation of maxDist earlier on. Since tmpImage doesn’t have a Point as a property, you create one. I am not sure, that this is very performance effective, but I included it here, so you can see both methods in practice.

ratio = distance/maxDist
tmpImg.rotation += 0.5 * ratio;
tmpImg.scaleX = tmpImg.scaleY = 1 - ratio;

the last lines takes care of scaling and rotation of the objects. First a ratio between the distance variable and the maximum distance is found. This results in a value between 0 and 1. This value is the multiplied with 0.5 to get a number between 0 and 0.5 for the rotation. Remember, that rotation in Starling is in radians, so 0.5 is actually quite a lot :-)

The it scales both x and y on the image based on the same ratio and the value 1 (which mean 100%). The ratio is subtracted from 1. This makes the images smaller the further away from the mouse it is.

Take it for a spin

Try running the application. Fiddle with the values, to achieve other effect. Try to adjust NUM_MICE, to test the performance. There is certainly room for improvements, but I am pretty impressed with the performance. My machine is taking 1000 objects without blinking – I can’t recall doing that earlier, while using square root, and having semi-transparent images rotating and moving on top of each other- Starling is fun :-)


Getting hooked up with Starling

Files with a working solution is available here

One of the more promising aspects of the new Flash Player and AIR runtime is the Stage3D object. The obvious and breathtaking improvements is seen in experiments like http://www.unrealengine.com/flash/ where you are moving around in a 3D landscape in realtime, with reflections, light and all the Unreal Engine can throw at you. Another great example is Unity, that exports to the Flash Player. Take a look at the video on http://blogs.unity3d.com/2011/09/01/unity-and-flash-a-sneak-peek/ to see how it raises the bar for what is possible in a browser.

My project with Mouse Wood calls for a simpler solution, though. Fortunately Stage3D is not only for 3D content. There are several initiatives like ND2D, M2D and Citrus Engine, that I find very interesting because of it’s buit-in level editor and side scrolling ability (and I am in desperate need of inside knowledge on how to make side scrolling games). My love falls on the Starling Framework. First of all, it looks simple and straight forward – and have a lot of similarities to the traditional display list approach. Secondly, I hear it mentioned quite a few places, performing some nice results on both desktop as well as mobile. I may look into the other as well, but this article dives into Starling.

Get the packages

Starling originates from the gaming framework called Sparrow, that targets iOS game development. Both frameworks resides at the site http://gamua.com/ and provides easy access to packages and tutorials. You get access to the framework by doing the following:

  1. Go to http://gamua.com/starling/download/ and hit the Download Starling button (currently 1.0)
  2. Unzip the package

Inside you will find a few folders and a read me-, change log- and license file.

Folders in Starling

There is a folder with some samples, and a folder to Flex Unit Tests. I will not discuss these files, but solely focus on the starling folder. Inside the Starling folder you will see a few folders. You are interested in the bin folder and the src folder – actually, you are only interested in the bin folder. Looking into the source folder, you will find all the ActionScript classes, that makes up the framework. The same files, are the one compiled into one handy swc-file (ShockWave Component, Small Web Component – or something like that. Nobody seems to know .. or care) located in the bin folder for you to keep.

Copy the starling.swc from the bin folder to where you keep you class-files. I have made a folder in my dropbox folder, so everytime I update a package on one of my machines, i automatically gets updated on the other machines.

Link to the framework

In my experiments I will primarily use Flash Builder for the development. So fire up Flash Builder and:

1. Create a new ActionScript project (File > New > ActionScript Project)
2. Call it StarlingTest (or similar) as the project name.
3. Click Next to go to the Build Paths.


4. In the dialog, click on the Add SWC button. Navigate to the startling.swc and add that to the list.
5. Click on finish, to create the project.

NB: If you are following along in Flash Professional, you can add the swc’s so they are always available in the programs preferences (under ActionScript settings) or per project (in it’s publish settings)

Making a stage3D object

With the project in place. You will now make a Stage3D object. The Stage3D object i placed in the Display List just like any other display object. In fact it is placed behind the stage. You can have many stage3D object on top of each other, but they all have to be behind the normal stage and it’s contained objects – so no stage3D floating around a traditional animation in Flash, only the other way around.

With StarlingTest.as open – enter the following code. The highlighted areas is where you should enter text, if you follow along:

package
{
  import flash.display.Sprite;
  import starling.core.Starling;

  [SWF(frameRate="60", width="800", height="600", backgroundColor="0xFFFFFF")]
  public class StarlingTest extends Sprite
  {
    private var starl:Starling;

    public function StarlingTest()
    {
      starl = new Starling(StarlStage, stage);
 starl.start();
    }
  }
}

First is the SWF-meta tag, that allows you to set specific parameters that is used at compile time. This one simply sets the frame rate to 60fps, width and hight and finally a white background.

Then you declare an object of the type Starling. This object is the main motor. It translates everything that goes into it into the native Stage3D framework underneath. Inside the constructor, it is initialized. The signature has a lot of parameters, but in general i believe you will use the first two in most cases. The first one, is the name of the Class that is supposed to be inserted on stage and the other one is just a reference to the stage object. This example references the StarlStage class that isn’t defined yet, so you will get an error – don’t worry. You will create it in a moment.

The Starling object itself has a few methods and properties, that can be used to control the behaviour of the object. The one you will use everytime is the start() method, that starts up the engines.

Create the Starling sprite class

Right click in the default package and choose New > ActionScript Class. In the dialog box enter “StarlStage” in the name field (the same name you refered to in the main class). In the input field called Superclass, begin typing the word “sprite” to see the code completion kick in. Select the option called Sprite – starling.display to make sure that the sprite inherits from the right superclass.

Showing a background with the Quad class

One of the more interesting classes I found in the Starling framework is the Quad. Maybe I just haven’t looked around, but I haven’t seen other objects, that made it so easy to manipulate rectangles, and their colors. The Quad is basically a rectangle that is able to present a uniform color or a gradient. Not a normal gradient, but a gradient that radiates from every vertex in the rectangle.

Quad Vertices

The individual vertex is stores in an array, going from top-left, over top-right and down to bottom-left and finally bottom-right

The signature of the class is:

Quad(width:Number, height:Number, color:uint = 0xffffff, premultipliedAlpha:Boolean = true)

You simply set width and height. If you leave all other parameters, you will get a white box. You can set the third and fourth parameter to change the color or the default alpha method, premultiplied alpha. (read more about it here)

With the StarlStage.as active enter the following code. The text in bold is the one you should add:

package
{
  import starling.display.Quad;
  import starling.display.Sprite;
  import starling.events.Event;
 
  public class StarlStage extends Sprite
  {
    <strong>private var q:Quad; </strong>
    public function StarlStage()
    {
     <strong> addEventListener(Event.ADDED_TO_STAGE, onAdded); </strong>    }
 
<strong> private function onAdded(e:Event):void { q = new Quad(800, 600, 0x880000); addChild(q); } </strong>  }
}

First it declares the Quad as the variable q. Then the class listens for the event that is triggered, when the object is added to the stage. It is a good habit to make sure the stage is available before adding content to it. In this case, you could do it all in the constructor, but you may end up in a situation later on, where you need to be sure that the stage is reachable – this way, you are on the safe side.

Finally in the onAdded() listener, you instatiate it with a width, a height and a dark red color. Because the similarity between traditional display objects and Starlings display objects, it’s just a matter of calling addChild() to place it in the display list.

Test it

Now, would be a great time to see if everything is working as expected. If you try to run the code, you will see that it shows an error on the screen that says: “This application is not correctly embedded (wrong wmode value)”

This is a default message, that Starling displays if you haven’t enabled the the players the right access to the GPU. To do that, open the file called StarlingTest-app.xml that is located in the root of your source folder. This file contains all relevant information about the project, and this is where you will find the node called RenderMode (around line 104). Uncomment that node and correct it to:

<renderMode>direct</renderMode>

This way you tell the application, that although you will render vectors through the software renderer they will blit through the GPU. It is also possible to enter “gpu” and make all the calculations in the GPU, but for the most part, I believe that direct gives the best performance … but you can fiddle with that.

Save all the documents and try again. You should see a dark, red colored window. If not, review your code, and look for errors. You might download and look at the accompanying files to look for things that might have gone wrong.

Placing an image

OK, with a Quad in place, it is time to step up a level – let’s introduce images. You can’t go around showing colored rectangles all day, at a point you have to bring in some detailed pixels. Update your code, so it looks like this:

package
{
  import flash.display.Bitmap;

  import starling.display.Image;
  import starling.display.Quad;
  import starling.display.Sprite;
  import starling.events.Event;
  import starling.textures.Texture;

  public class StarlStage extends Sprite
  {
    private var q:Quad;

 [Embed(source="assets/mouse.png")]
 private var mouseBMP:Class; 
    public function StarlStage()
    {
      addEventListener(Event.ADDED_TO_STAGE, onAdded);
    }

    private function onAdded(e:Event):void
    {
      q = new Quad(800, 600, 0x880000);
      addChild(q);
 var mouseBMP:Bitmap = new mouseBMP();
 var mouseTEX:Texture = Texture.fromBitmap(mouseBMP);
 var mouse:Image = new Image(mouseTEX);
 addChild(mouse);
    }
  }
}

That was a lot for a little result, you may think. Well, some of it is the way Flash Builder is used to embed images, and some of it is because of Starlings way to treat content inside images as textures – actually Image works like Flash’s own Bitmap class. In the references it is told like this:

An Image is a quad with a texture mapped onto it.

The Image class is the Starling equivalent of Flash’s Bitmap class. Instead of BitmapData, Starling uses textures to represent the pixels of an image. To display a texture, you have to map it onto a quad – and that’s what the Image class is for.

Let’s take the code in chunks

 [Embed(source="assets/mouse.png")]
 private var mouseBMP:Class;

This is the normal way to embed images in Flash Builder. By using the Embed meta tag you are making the image available from the beginning, instead of loading it in at runtime. You can read more about the embed meta tag at http://www.adobe.com/devnet/flash/articles/embed_metadata.html

You are capturing the path to the source and immediately assign it to a class object. This is because you have to assign the image info to an object in order to reference it later on in the code. The second part of the code is executed when the stage is ready, and looks like this:

var mouseTEX:Texture = Texture.fromBitmap(new mouseBMP());
var mouse:Image = new Image(mouseTEX);
addChild(mouse);

First you make a texture, to place on your image. You are using the static methods in the Texture class to tell, what will be the foundation for the texture. This example use Texture.fromBitmap() to indicate that a bitmap info is used for the texture. As argument, you just enter “new mouseBMP()” so a new instance of the image is passed on to the texture.

The next line declares Starlings Image object, that is similar to the Flash Bitmap class. Instead of passing bitmap data to a bitmap object, you are passing the texture data to an image object in Starling – similar proces, different names. Finally it is added to the stage with addChild()

Now what?

This is the absolute fundamentals of presenting images and Quads. In the next tutorial, I will add some movement, but use this tutorial as a reference to get things out on the stage in Starling – Other articles I do will take it for granted and refer to this one for explanation.

Feel free to comment and ask quations in the forum

 

 


Mapping coordinates from one range to another in ActionScript 3.0

I am very fond of Processing, and the way it easily makes it possible to experiment with design ideas. One of the powerful features are it’s map() function, that takes a value and remaps it from one range to another. I haven’t seen a similar function in the ActionScript 3.0 reference, so I decided to make one to my own utils-library, because it is something the can come in handy in many situations. First I looked at using the Point() class, and interpolation to describe the ratios, but actually found it easier to just do it with regular math.

I haven’t looked at performance yet, and there is possibly a lot of ways to optimize this code – this article can be a start for further fine tuning. The helper function looks like this:

function map(val:Number, inMin:Number, inMax:Number, outMin:Number, outMax:Number, decimals:uint=0):Number
{
var returnVal:Number;
 
// Sets the total range for both in and out
var inRange:Number = inMax - inMin;
var outRange:Number = outMax - outMin;
 
//calculates the ratio for the value in relation to the in range
var ratio:Number = (val - inMin)/inRange;
//makes sure that the value is within range
val = Math.max(inMin, val);
val = Math.min(inMax, val);
//Finds the same ratio in the out range and shift it into place
returnVal = (outRange * ratio) + outMin;
 
//rounding of the decimals
var factor:int = Math.pow(10,decimals);
returnVal = Math.round(returnVal*factor)/factor;
 
return returnVal;
}

The function takes the the following arguments:

  • val: the number to be remapped
  • inMin and inMax: The original range, in which the value is measures in relation to.
  • outMin and outMax: The destination range, that the value will be re-mapped to
  • decimals: sets the precision in decimals (optional)
First it calculates the ranges with
var inRange:Number = inMax - inMin;
var outRange:Number = outMax - outMin;
These variables are defining the total range for both the incoming number, and the range of number is eventually will be placed within.
val = Math.max(inMin, val);
val = Math.min(inMax, val);
In this function I have decided to make sure, that the value is within the boundaries of the inRange. If i took the value 4, and sets the range of number to be within 10 and 100, I would get some unexpected results. You could treat this differently, or even make it possible by omitting these lines.
var ratio:Number = (val - inMin)/inRange;
ratio holds a number between 0 and 1 that defines where in the original range it is located. The closer to zero it gets, the lower the value – closer to one goes towards inMax.
returnVal = (outRange * ratio) + outMin;
Then the number is multiplied to the outRange to find the same relative point in the target range, and finally shifted into place by adding the outMin value. Negative values are treated fine in these ranges – when you add -200 to something, it is actually subtracted from the number.
var factor:int = Math.pow(10,decimals);
returnVal = Math.round(returnVal*factor)/factor;
The last part of the function is meant to round of the values. For performance, this could easily be removed, but it may be useful in some cases to have odd long numbers rounded and presented with only a few digits precition. First, the variable factor holds the value to be used in the rounding proces. For 1 digit it should be “10″, 2 digits is “100″, 3 is “1000″ and so forth. That value is used in the line below, where it first multiplies the final value by the factor and then rounds it to an integer. Then it divides with the factor again. It goes something like this:
  1. factor is 1000 (3 digits)
  2. value is 134.744637
  3. Multiplication results in 134744.637
  4. Rounding returns 134745
  5. divided by 1000 gives the result 134.745
Finally the value is returned as a Number.

Optimization

There are a lot of code shortening, that can produce a speed improvement. You could also work with int or uint exclusively to gain some performance i suppose. Finally, you can remove the decimals and the lines that check if the number is in range. I have left the to show what functionality that could come in handy.

An example

As a practical example of the map() function you can  copy the following code into a Flash document. Here the map() fuction is directly inside the main code, but you could start building your own utils-library with the helper functions as public static function for easier access.
The code draws two squares with different sizes. When the mouse moves over the small square, it draw lines in the larger square, while maintaining the relative coordinates inside the squares.
import flash.display.Sprite;
import flash.events.MouseEvent;
 
//make the small square and color it dark grey
var inArea:Sprite = new Sprite();
inArea.graphics.beginFill(0x333333);
inArea.graphics.drawRect(0,0,100, 100);
inArea.graphics.endFill();
addChild(inArea);
 
//make the large square and color it black
var outArea:Sprite = new Sprite();
outArea.graphics.beginFill(0x000000);
outArea.graphics.drawRect(0,0,400,400);
outArea.graphics.endFill();
outArea.graphics.lineStyle(1, 0xFFFFFF, 0.3);
addChild(outArea);
outArea.x = inArea.width;
 
//adds a listener for the small square, that listens for mouse movement
inArea.addEventListener(MouseEvent.MOUSE_MOVE, updateDrawing, false, 0, true);
function updateDrawing(event:MouseEvent):void
{
	//Map the local coordinates from the mouse movement to the size of the large square
	var targetX:int = map(event.localX, 0, event.target.width, 0, outArea.width);
	var targetY:int = map(event.localY, 0, event.target.height, 0, outArea.height);
 
	//Draws the line in the large square.
	outArea.graphics.lineTo(targetX, targetY);
}
 
//Helper function
function map(val:Number, inMin:Number, inMax:Number, outMin:Number, outMax:Number, decimals:uint=0):Number
{
	var returnVal:Number;
	// Sets the total range for both in and out
	var inRange:Number = inMax - inMin;
	var outRange:Number = outMax - outMin;
 
	//makes sure that the value is within range
	val = Math.max(inMin,val);
	val = Math.min(inMax,val);
 
	//calculates the ratio for the value in relation to the in range
	var ratio:Number = (val - inMin) / inRange;
 
	//Finds the same ratio in the out range and shift it into place
	returnVal = (outRange * ratio) + outMin;
 
	//rounding of the decimals
	var factor:int = Math.pow(10,decimals);
	returnVal = Math.round(returnVal*factor)/factor;
 
	return returnVal;
}

Calling a function dynamically in ActionScript 3.0

Have you ever wondered, how you could use a String to decide, which function to be called. You could go so far to let the user enter the function name in an input field and call a function by that name, if it exists.

I have made a short article with an example on how that is done in Flash and ActionScript 3.0. You can read the article at http://www.hjaelpmignu.dk/content/dynamic-call-functions


Adobe Creative Suite 5/5.5 – Printing guide

If you are using Adobe software to create design for print production or receive documents as a print provider, this guide is a must read for you. All relevant info on color handling, trapping, handling transparency and effects are there. Info on Job Definition Format (JDF) and how to print and edit PDF files is there. Best practise – what and how to expand objects in Illustrator are there. The Forensic Tools in the various software is explained.

All in all. 138 pages of action packed printing info available. Questions to the guide are welcomed in the forums

Link to guide

Happy reading


Transparens i filer fra Photoshop til brug på Internettet

Jeg har uploadet en kort demonstration som svar til dette spørgsmål på www.hjaelpmignu.dk. Den gennemgår gennemsigtighed i PNG-filer og hvordan du forholder dig til farvetabellen (Color Table) i dialogen.

Du kan se videoen på adressen http://www.hjaelpmignu.dk/node/211

Du kan læse mere om Save for Web and Devices i Adobe Creative Suite 5 på adressen http://help.adobe.com/en_US/creativesuite/cs/using/WSEE78023B-9077-4276-9D82-B7ABD0F9AE32.html


Video tutorial om at sende data fra Flash til mail via PHP

Jeg har fået gang i gode gamle Camtasia og snedkereret en tutorial der viser, hvordan en række input felter, samlet i en formular, kan sendes fra en Flash-film, via et php-script og hen til din mail boks. Det er som svar på forum indlæget Contact Form

Vejledningen tager dels udgangspunkt i det link til en tutorial på Flashforum, der blev nævnt, og dels en gammel video tutorial af Lee Brimelow.

Se den på www.hjaelpmignu.dk


Pixel Bender har fået sin egen plads

Pixel Bender har længe været en del af Creative Suite og er blevet installeret sammen med suiten som standard. Det har dog stået lidt småt til med at udvikle plug-ins i programmet. For det første skal der læres et nyt sprog, og for det andet skal man finde ud af, hvilken type plug-in man har tænkt sig at udvikle. Derfor har det kun været et værktøj for de eksperimenterende personer, men det vil Adobe lave om på.

Pixel Bender kan bruges til at få computerens hardware til at regne på pixelinformationer. Det kan resultere i regulære filtre til billeder og video, men kan reelt være alle typer af data. Pixel Bender kernels kan umiddelbart bruges i Photoshop, After Effects og Flash.

Indtil nu har Pixel Bender og al information om den været på labs.adobe.com, men nu har den fået et værelse på Adobes Developer Connection.

Kig ind på http://www.adobe.com/devnet/pixelbender/ hvor du kan se en masse tutorials og videoklip, der kan forklare om mulighederne i programmet.

God fornøjelse


Nyt website til www.hjaelpmignu.dk

Tiden var kommet til at jeg måtte flytte www.hjaelpmignu.dk til et nyt system. Tidligere brugte jeg XOOPS til at holde styr på artikler og forum, men havde svært ved at få det passet ind med min lyst til at skrive flere artikler og ligge videotutorials op, som svar på spørgsmål. Derudover ville jeg gerne kunne integrere medskribenter og bruger på en mere social måde.

Resultatet er blevet Drupal, som giver mig en meget åben ramme at arbejde indenfor. Meget af det var selvfølgelig også muligt med den tidligere version, men jeg føler det nemmere at begå mig i Drupal – både hvad gælder den normale vedligeholdese af indhold, men også når det kommer til videreudvikling og opdatering af plugins osv.

Jeg håber at i vil tage godt i mod sitet, og stille en masse interessante spørgsmål – meningen med sitet er jo at lave tutorials, der i vid udstrækning baserer sig på dine spørgsmål. Et eksempel kan være, dette spørgsmål, der blev til dette svar.

Her er et par link til de vigtige sektioner

Vel mødt på sitet

/ockley


Ny Photoshop tutorial – fordybning i overflade

Der er lagt en ny tutorial på www.hjaelpmignu.dk. Den viser hvordan du kan tage et silhouet og gøre det til en fordybning i en overflade eller en tekstur. du kan se artiklen på http://www.hjaelpmignu.dk/node/137

/ockley