Tile based games using the Starling framework

In my quest for making my sons game, I managed to get Starling up and running, and create a performance test, that showed me some pretty intense performance – that bode well for my continuous success in the making of a game.

I have started to dive into tiles, and how to make tile based games. Some of the most relevant info on that topic was found in an old book called “Flash MX 2004 game design demystified”. As the title implies, it is not quite current, but the theories behind tiles still works a long way.

Continuing on the seas of The Web, I stumbled onto Tonypa and his section about Tile Based Games (via Terry Paton - thanks). The problem with that info was, that it was just as old as my book reference. Therefor I decided to send him a mail, and ask for permission to update his tutorials to a more current ActionScript 3.0/Flash Builder/Starling version.

I will have to do a lot of learning, while porting this to AS3, and there may be introduced several errors and rewrites along the way, but I take that as a part of the proces. I will hopefully end up with a solid foundation of tutorial to use in my own game, and the continuing work on that project.

Feel free to comment, ask questions about unclear parts, and come with suggestions to improvements – I’m almost guaranteed not to get this right at the first shot :-)

Take a look at Tile Based Games in the top menu.


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

 

 


Dad, can I have a game

The other day my 7-year-old som (Demolition Man) asked me if he could have his own game. “Well, of course,” I instinctively replied. I can do Flash – which makes it an easy task. Then again – I have never made a game before. I have made small exercises like jig-saws, puzzles, small one-screen shooters, nut never a game of larger scale, with highscores, instruction screen, multiple levels and so on.

In addition to that, Flash is stepping up, when it comes to games. It have a dedicated site at http://gaming.adobe.com/ and is actively supporting efforts to bring Flash into the game sphere. I think it has advantages in its multi-platform approach, and unique possibilities of adding timeline animation and effects from Flash Professional and the scalability and modularity of Flash Builder.

My son made some initial drawings, and I am in the progress of changing them into illustrations, that can be used in the game. There will be alterations, re-drawings and enhancements along the way, but it is my intention that he does the designs, and I muscle the machine.

Mouse Wood

The plot, as far as I can decipher is something like this:

“The game is about a mouse (without ears) that runs through the woods. While running, it should avoid snails and other animal trying to get to it. Furthermore, there is apples dropping down from the trees that should be avoided. Around the woods, there is small chunks of cheese, lying around. Is the mouse eats enough of these cheeses, it can spit on the animals to make the smaller. When small enough, they can be eaten or jumped upon. Each level ends with the mouse is getting home to it’s mouse hole, or fighting a boss.”

… I can see something like that in my head – so that should be doable.

Why are you doing this

Because I haven’t made larger games before, there is a lot of learning here for me to do, also. Several new technologies/frameworks has arrived, and I thought I would just dive in, and see how far I can get with this experiment. I hope that this journey will bring some interesting blog posts about how to create a game. There isn’t planned any structure, and it is trial and error, but hopefully in the end, I will end up with a decent result.

When completed, I hope I can wrap it up in a set of tutorial, to help other getting their head around programming simple games with Flash.

Where do I start?

I have several aspects in top of my head, that I would settle with. First I will do some experiments with the Starling framework, to see if I can get the characters to show up, in a Stage3D environment. Then I would apply some physics with either Box2D or Nape (other other, that may come around). I may also integrate TweenLite into animation of titles etc. (aah, familiar grounds). I think that I will wrap it all up in a framework, like the one presented in the comprehensive book called “The Essential Guide To Flash Games: Building Interactive Entertainment with ActionScript 3.0” (sounds like a proper title for my purpose). It is a large framework, but I see it referenced quite a few places, like Lee Brimelows tutorial on Finite State Machine Part 1 and Part 2.

The levels also has to be drawn. I am actually on thin ice here. I have seen a few, but my son, wan’t something scrolling left and right. I think I will take that, as I progress – enough to stat with already. If you have any inspiration, links to tutorials, info on game creation or AS-classes, that should be considered – please leave a comment.

See, ya!


Adobe Flash and HTML5 – are we happy?

Days have passed, and I have deliberately not commented that much on the debate that has raged the net since Adobe Systems announced, that they wouldn’t continue the mobile Flash Player. What I have done, was observing the different phases of emotion that users where sharing with the rest of us. I saw mainly 3 categories: 1. Those who wan’t Flash dead yesterday, and didn’t think that this was one day too early. 2. Those who thought that this was the end of the World as we know it, and everything now turns to darker times (scenes with polluted cities and numb faceless people dragging them self around next to grey walls pops into my mind). 3. People with everything has it’s time – let’s see if it isn’t best for both part – sort of people. Let me first comment a bit on all three:

1. The “HA-HA. Dead by HTML5″-people

A lot of these people do not like Flash – no matter what it does … it is just pure evil. Some may have the program to crash their machine – other may just have heard of people who has a crash on their machine while Flash was installed. This group have made a choice not to support the platform on their device – or at all. If they have an iOS system, the choice is taken for them – they cannot decide for themselves. They see blank spots on websites, and think that the Internet should adapt to their needs and limitations (like iOS ever would the other way around) :-) The other part of the group are praising the open standards, and think that proprietary plug-ins are a bad thing – the Internet should be free, and no one should take ownership of any part of the experiences presented.

2. The “End of the world”-people

Well, Adobe did an awful job, communicating this announcement, and people just shimmed and was something like “OK, let’s see: Adobe announces … etc. etc. … Flash Pl… … Mobile … Discontinue … etc. etc. … Open  Web … Webkit … HTML5 ”

… AARRRRGH. Flash is dead. HTML5 killed it. Uuuh, Steve Jobs, you son of a #¤%#%& – are you happy now!! The next Apple fanboy that comes around, better be sorry or I’ll …

Well, maybe not that crazy, but a few words, where enough to make them go crazy, instead of rational thought of what their own mobile habits where. When we read what is gone, we also need to sum up, what is left. This has to be taken to a higher point of view, to understand the purposes (as I see them)

When Flash isn’t on mobile browsers, then whats next – desktop? … Linux? (oh, already) … AIR? … Illustrator and Photoshop?! Fact was, that the most recent Flash player on mobile browsers actually performed quite well on newer smartphones, so why? We wan’t the whole web. Everybody want the whole web – or do we?

3. The “Let’s see if it’s not for the best”-people

This group, have a habit of taking announcements up for consideration, and think of consequences and reasons for a given action. They may have various reasons for being in this group, but it could be something like: “I am not browsing that much on my phone – mostly searching information”, “I’m more into Apps”, “Drop all the fancy stuff, and give me some battery time back” or “HTML5 can do a lot of Flashy looking stuff – why not use that instead”.

A change in plans

When the iPhone came around, there was no Flash Player, that could stand up for The Jobs … so he turned it down. Having great interest in the Canvas-tag (read, previously patent, AFAIK), he thought that this was a better solution. Flash would lead to a poorer experience – how true that was. What he forgot to tell was, that it probably wasn’t solely a problem for the plug-in, but more a problem of bringing all the advanced stuff into a tiny phone with a tiny battery. You didn’t hear him say: “But that tends to be a general problem. We cannot do that with HTML5, either!” The fact was, that the advanced features of the Flash Player just didn’t fit well in these first generations of devices (both Android and iOS). Adobe thought that the “code once and deliver everywhere” should be adhered. They ported it to Android, that is more open than iOS and allows people to develop to the browser.

iOS on the other hand, had great success with the walled garden, and the term I call “iWay, or the highway”. In this closed ecosystem, things are taken care of for you, and you should have trouble doing all the things a computer should do … just what people wanted. Installation and removing Apps is easy … we actually think, that it cleans up, after itself, when we delete the App :-) Icons and folders for tools and games. Why go to the web to search for a recipe or play a game, when you can install and access it right on the phone – why use a browser for that, and remember URL’s etc.

Adobe was wrong, and realized it

Adobe kept trying to fulfill the promise of the full web, and code once and deliver everywhere. Apple said, they had the full web experience on iOS, ignoring the fact that it wasn’t true. And while the battle raged, and the fanboys where mooning each other, the normal users started to adapt and use the technology on it’s own premises.

Even though the possibility was there, no one created mobile specific solutions in Flash. You just couldn’t scale a website down to a little screen and bring the same experience from desktop to phone – Flash Player is a media container like video and images. It has a hard time, reflowing text or layout, when the browser size changes. When a demanding webpage finally came around, it was so FWA-like that it would pop out the battery from the back-cover on my device.

On the other hand, the user was downloading and shopping Apps in an extends hard to imagine. It was so easy to link to AppStore or Android Market from a website, and install directly on the phone. I have the feeling that a lot of users found it as an improvement to download an App from the site, to get some dedicated time with the content even after they have left the webpage.

The device isn’t ready

Flash has always been a plug-in for HTML and browsers. Images and video are easy to relate to HTML, but Flash is a bit harder. The main purpose of Flash is to take the user to experiences, the HTML can’t go. When HTML stops, Flash player is supposed to take over and deliver a media container, showing what’s really possible … but it is just a square on a web page. The demand for more and more sophisticated pages has previously driven HTML into the shadow, and made complete Flash-driven pages a viable solution, when trying to impress clients and end users.

Fact is: Devices sucks at that. Most devices can’t even handle HTML5 and canvas that well, and if we have a technology, that have more than enough to do with HTML in its newest revision, then there is no need for a “I’ll take over from here”-plugin like Flash.

Realizing that users didn’t used the browser on their mobile device for advanced content, but rather downloaded Apps, is for me a breaking point. Some tend to say that it was Steve Jobs, and his famous letter on Flash and his thoughts about it, that did the job. To some extend that may be right – not because he said it, but because his disciples kept preaching it as a gospel every time e person pushed the button. I think the main reason is that Apps came on strong, and users didn’t wan’t these complex operations in a floating window … not when it was performing like it did. Everything with App was fast and smooth, but the same experience on the net was not. I am convinced that we will not see any complex HTML5 solutions in browsers, before we have a completely new generation of devices in our hand.

fAIR solution

That leaves the net to HTML, and with HTML5 it has just brought more possibilities to the developers. Flash player is out of the browser (for some time at least) because it has nothing to do there. Flash Player 11.x is still there, so there will be plenty of possibilities for targeting mobile users in the future – don’t worry. But Adobe is taking Flash to places, where HTML5 cant go (at least not easily). The only place that can be done is on computers, that has more processing power, and a power cord, and to mobiles native applications. Only there, can Flash tap into the hardware that is needed to deliver great performance.

AIR is what’s taking care of that, and I think that it has a few advantages. If you target iOS native you are using Objective-C. If you are targeting Android, you are using Java. No developer on any of these platforms are able to deliver to the other side. AIR comes with the APPS-neutral AS3 language, that can be compiled to native Apps for both Android and iOS, and it is more and more important to support a wide range of platforms as the market shares levels out. Performance are better in native code, but I am pretty sure, that is a main focus for Adobe in the future.

Are we gonna play, or what?

games are another main aspect, that I see Adobe pays attention to. With the new 3D-capabilities and export functionality from Unity and other, I see browser based games on desktops as an interesting way to go. The way we play on a computer, is far from the way we entertain our self on a device – they cannot be matched. It is therefore Adobe is trying to make a plugin, that make games, independent on machine or browser, so you can develop a game, and make sure that all desktops can play it. How many games in HTML5 aren’t available, that only plays in Chrome or Safari etc. … I don’t think the browser war is ever gonna stop on that platform. When the player can utilize gamepads and joysticks, I think that we are going to see interesting games … and event sites, and company pages, that takes it to the max, and wouldn’t play on a desktop anyway.

Conclusion

I think that Adobes step is probably a way to “code once and deliver everywhere”. When Creative Suite next revision arrives (the six-pack) I think we will see Flash Professional, that takes the timeline and possibilities around that, and enables it to be converted to HTML5 – if that succeed, then what’s the harm. I mean, is it the player or the possibilities, that are most important. Then we will go way high on 3D and native App performance, and Flash as a platform is able to live on. Using HTML5 for mobile may be the only solution to “publish everywhere” in a non-plugin-browser-world.

I think that Adobe made a wise choice in taking the Flash Player out of market for a while. That can take all the browser Ads to HTML and get the devices to mature to a point, where there is more in the devices, that HTML5 can deliver. In the meantime Adobe can try to incorporate elements to HTML, that makes it easier to publish from Flash to HTML – CSS Shaders is a sign in that direction.

It all comes down to looking at behaviors, and identify objective, non-favored points of direction in them. I think that Adobe shifting focus here, is not a sign of weakness, but actually a sign of adapting to the users need – some companies could probably learn from that. Their skills in communicating, what I just tried here, is a completely different story. I am not saying, I do a great job here, but I know that Adobe didn’t.


Flash Platform is dead. Long live the Flash Platform

Adobe MAX has this year been an interesting and epic experience, in many ways. We have seen Adobe doing a lot of progress on the HTML5 platform, and no critiques can come and say, that they are trying to limit it’s possibilities in an attempt to favor Flash. Seing programs like Adobe Edge and Adobe Muse, shows a bright future for users, that are not tech-savy – bringing them new tools to make dynamic and interesting sites using web standards.

Some will say, that Flash is thereby obsolete. They may even use the “Flash-killer” word, but in my opinion that tells me more about there insight and knowledge about the platforms responsibilities, than HTML5 is superior when it comes to the sites of the future. HTML has always had the responsibility of bringing webpages to the user via the browser. The Flash Player has always been a plug-in, that made it possible to satisfy users demands in terms of interactivity, video etc. and complemented HTML, where it wasn’t sufficient. Now with HTML5, nothing has changed there.

The Flash Platform is dead

I will bring some love to new new HTML5 features in another post, but let me dvelve a bit on the head line. When I say, Flash is dead, I actually mean, the previous well known (and hated) use of the Flash Player is dead. Using Flash to make complete sites with the need of seekable information, and “efferent reading” has to stop. The small banners that pops up, with no reason at all, has to stop. If that is what you have used Flash  to produce, you should seriously consider broaden your mind – we have HTML for that, now. When it comes to aesthetic reading, engaging and entertaining the user. When it comes to breaking the boundaries, and search for new possibilities in what the web and devices can deliver, please continue. Flash has never intended to kill HTML, it depends on it. But the misuse  of technology from developers (myself included, from time to time) has given the technology a bad name.

Long live the Flash Platform

Fortunately, the platform is strong and very much alive, and the latest version of Adobe AIR and Flash Player brings signs of a bright future. When I discuss the topic with developers, they actually do not have a clear answer, when it comes to compatibility across multiple devices. Native Android developers, can’t enter en iOS sphere, and Xcode developers are forever doomed to live in the walled garden. Both of them, can only argue, that the other should join them … why not give the user a choice. I think that the Flash Platform is one of the best attempt to actually be agnostic in terms of platforms. I think it’s time to look at some of the features I find interesting

64-bit support

I don’t know what took them so long, actually. I am not aware of the complications that are involved in making 64-bit versions of software. I guess there must have been internal complications regarding codecs or other 32-bit stuff not yet upgraded or just the fact that making a 64-bit version of the AVM or the like isn’t a walk in the park. Anyway, now it’s available and works like a charm in my 64-bit version of Internet Explorer as well as my other browsers on both Windows and Mac OS. I haven’t tried the Linux version, but I haven’t heard anyone with complaints. Please post your experiences with performance, if you are a Linux user.

Captive runtime

Captive Runtime is captivating :-) Now developers have the choice to embed the AIR 3 runtime in the App, so people no longer need them as an external download. That, of course, brings a larger file to the devices, and it is therefore not just something you would do in all cases. In larger projects, and definitely on desktops, that seems like an obvious choice.

You can read about Captive runtime at http://www.adobe.com/devnet/air/articles/air3-install-and-deployment-options.html

Accelerated 2D

Flash is all about experiences. There is no need to use Flash, if you don’t wan’t to engage the users. If you just have some plain information to present, there is no need to roll out the big canons. The Flash Player is a plug-in that takes over, when the other give up, and can’t deliver – at least not with an economically reasonable solution. It is the easiest way to make impressive visual results, that works on all major platforms. Because of that, it is also a very demanding job, that takes a lot of processing power. With Flash Player 11 and AIR 3, Adobe has made it possible to port most of the calculations to the graphic card, so the processor is free to other tasks. That increases the performance immensely, all the previous examples (like those on http://www.bytearray.org/?p=3371) would have made the fan fly out of my MacBook Pro after 4 seconds … now there is silence.

One of the most prominent examples are the Starling Framework. Starling is very intuitive, and use well known word like Sprite and addChild() and genrally build upon the concept of the Display List.

To get this performance boost, Flash takes advantage of Stage 3D, and that is only available for desktops at the moment. Adobe is working hard to implement it in the mobile version, but Android have to wait until a later update. That also means, that we are in a time, where some content actually can’t be played on mobile, even though they are at the same player level … that’s not good, but hopefully sorted out in a near future.

JSON

Everybody is talking about JSON these days, and for a reason. The format makes it possible to exchange data in a readable way using a JavaScript like syntax. Both JavaScript and ActionScript 3.0 derives from the same standard, making it easier to work with and understand for some, in contrast to the XML language. You have always been able to read JSON into a Flash document, but the internal support makes is consistant and faster to get the data ready for use. Actually, we are are talking one line here to get it all parsed.

Adobe MAX gave a sneak at the next version of Flash (codename Reuben) that exported a sprite sheet of a characters walking cycle. That shows something about JSON as a serious and integrated way of making 2D games and motion in the years to come.

Stage 3D

When Flash introduced the ability to work with z-coordinates and move 2D objects in a 3D space (in CS4 i guess) the crowd went wild – everybody was happy. Then they realized, that i actually wasn’t as good as real 3D, and the need for manipulating real 3D objects was on the rise again. When Adobe released the first previews of Flash Player 11, it was jaw dropping. Thibault showed a red car driving around in a virtual street, and no one in the room could believe their eyes. But it was real, and with the release, they showed Unreal Tournament 3 from Epic Games, running in a browser.

That tells me, that the Flash Player has taken it’s responsability as a plug-in serious, and goes for the balls, that HTML5 has a hard time to catch. I am sure we are going to see web experiences in the years to come, that we had a hard time to imagine only a year ago. On top of Stage 3D’s low level API a range of external companies has build frameworks for us to use. Some of the well known are Alternativa, Flare3D and Away 3D. Of course you could dive into the low API, but the other way around is much easier for normal developers and designers.

Aside from that, there is a project called Proscenium on Adobe Labs, that is a code library used to acces the low-level API, to easely create 3D content in Flash Player 11.

Read more about the wonderful world of Stage 3D at http://www.adobe.com/devnet/flashplayer/stage3d.html

Native Extensions

On the mobile platform, there is a constant demand for speed and integration with the system. Native tools like Xcode and Android SDK has an advantage over runtimes like AIR, in that they have full control over the system. AIR isn’t able to access the inner workings of the mobile platform, so you could not access the local API. AIR it self is making progress, like native keyboard on devices and frontface camera access, but the big leap forward here is Native Extensions. Now you can program an extension to AIR in the native language of the device, and AIR is then able to attach to it and communicate with it. There has already been examples of Map View on iOS and connection to Kinect controller without a proxy. I haven’t tried native extensions in myself, but it seems like it’s going to be a big deal if it runs smoothly.

Content Protection

I love the way that HTML5 has taken websites seriously again. I like the easy way, that video is treated. If all browsers could agree on the codec, it could end up as a good solution. The problem is that there is no protection embedded with the video. You could just copy the link and download the movie. Many content providers aren’t that happy about that. There are solutions to solve that, but I sense that they are moving away from the clean HTML5 solution. Flash and AIR has build in Flash Access that secures the content. Initially it only works with desktop and Android, and I guess that the way into Apples heart is a bit longer :-)

Heal the Web, make it a better place

This is just some of the news. You can read more at the Flash Player 11 feature page and the AIR 3 feature page. This is an epic release, that will mark the start of a new era – the 3D era. We will se browsers taking HTML5 to the max, and transitions like fade and slide, will be everyday for the common designer. But when the smoke disappears, the need to do the extraordinary will emerge – this is where Flash kicks in. Flash Player will fulfill it’s role as the plug-in, that helps HTML getting things done. AIR is taking a different path down the mobile path. It is an interesting path, but it is not quite there yet. It is there in terms of being able to deliver a more than decent result on various devices, but the “works on Android, soon on iPhone” makes it not quite stable yet. It will be, hopefully soon.

I think that this release, shows that there is a world, where both technologies can live in harmony – and truly believe they will. We haven’t talked about topics like all the Smart TVs that supports the platform. We have only briefly talked about Epic Games, but Unity has also shown support to deliver on Stage3D. Aside from that, there is the Open Screen Project, that count a broad range of manufacturers , interested in making a common platform for Rich Internet Applications end experiences.

I know that the Flash Player aren’t allowed on iOS – well no plug-ins are, no harm there … but AIR are. AIR, may end up being a long term solution, if they fix the minor incompatibility. Flash Player is now a solid 64-bit plug-in, and yes – everybody is trying to find exploits and security breaches on it, but then again. It is on a lot of machines, end therefore a perfect target, across platforms. Adobe should be on it’s toes to close these security issues and gain trust in the platform, and then – when iOS settles at a reasonable level, the market will decide if users with the plug-in is more interesting than those without.

… only time will tell.


Så er Adobe Creative Suite 5 blevet præsenteret

Ventetiden er ovre. 18 måneder er gået, og det er en fornøjelse at kunne løfte vingerne op og vise det man har ligget og ruget på de sidste mange måneder. Adobe Creative Suite 5, der bliver præsenteret i eftermiddag, er en fantastisk opgradering til pakken. Siger du ikke altid det? tanæner du – jo, men jeg tror at det er en selvopfyldende profeti, at der først kommer noget på gaden, når det når dette fantastiske stadie :-)

Websitet

Hvis du klikker ind på Adobe side under http://www.adobe.com/products/creativesuite/ vil du se at alle produkterne er opgraderet til version CS5. Min første ros, skal gå til den nye designlinje, som vi blev introduceret for forholdsvis sent i beta-forløbet. Jeg elsker den måde at de foskellige søjler, må den ene måde, spejler sig i hinanden, men samtidig er med til at danne forkortelsen, for programmet eller suiten. Endelig er der Adobe Creative Suite 5 Master Collection, med de lækre duser-opbyggede kæmpe-femtal. Stor ros for det nye design.

Hvad er der i pakkerne?

Nu er det nok de færreste der vil opgradere ene og alene på grund af designet, så der bør nok fokuseret på pakkerne. Overordnet set er der stadig tale om den samme opbygning, nemlig Design Premium, Web Premium og Production Premium (Video) . Endelig er der Master Collection, der indeholder alle produkterne, til den designer, der arbejder på tværs af platformene. I suiterne er alle de usual suspects, men der er også kommet et par nye, yderst interessante tiltag, nemlig Adobe Flash Catalyst CS5, og Adobe Flash Builder 4 - du kan se en oversigt på adressen http://www.adobe.com/products/creativesuite/compare/

Adobe Flash Catalyst CS5

er mit hjertebarn. Jeg er så begejstret for dette program af flere årsager. Den vigtigste er dog at den gør et reelt forsøg på at lukke det hul, der skiller udviklere og designere. Den gør det muligt at tage et design og definere det som et kodet projekt, uden at røre en linje med kode. Det er et utroligt værktøj i RIA design, som jeg spår bliver standard. Adobe har her lavet et produkt, der løser et problem, der ikke har kunne løses med andre værktøjer før. Lidt populært (mindre efter Section 3.3.1 ændringen) siger jeg at “Adobe har lavet en iPhone!”.  Hermed er ment at programmet opfylder et behov, som alle vidste der var, men ingen havde muligheden for at løse. Dette program gør det muligt at komme tørskoet over i udviklingsverdenen, som designer. Derudover giver det faktisk (udokumenteret, tror jeg) muligheder for at lave interaktive præsentationer og mindre websites, uden at røre koden – men mere om det senere :-) Flash Catalyst CS5 er faktisk så brugervenligt at det er en del af alle Premium-pakkerne. Jeps du har fået et nyt stykke software at lege med :-)

Adobe Flash Builder 4

Er tidligere kendt som Flex Builder. Det underliggende SDK hedder stadig Flex 4, men navneændringen synliggør at du bygger applikationer til Flash platformen. Programmet spiller tæt sammen med Flash Catalyst, og det er bygget op omkring dataintegration, hvilket gør det nemt for udviklere der ikke er bekendt med serverside sprog, som PHP, ColdFusion, JAVA osv., at koble applikationen op mod data. Derudover er der nye værktøjer til datavisualisering og et nyt sæt komponenter (Spark), der effektivt adskiller indhold fra layout. Flash Builder Standard (uden ColdFusion delen) kommer i pakken Web Premium og viser Adobes forståelse for at applikationer er (eller bliver) en del af mindre udviklerorienterede designers hverdag. Med de tutorials, der findes er Flash Builder faktisk ikke en større mundfuld en Flash Professional … den er faktisk lidt mindre, på nogle områder :-)

Adobe CS Live

Er intregretet i alle suiterne og gør det muligt at løfte arbejdet med programmerne væk fra desktoppen og ud på nettet. Du kan sende dit Illustratir-dokument direkte til review, inde fra programmet. Du kan se kommentarer, som andre har lavet på dit dokument i real-time og påføre dem dokuementet, mens du taler med kunden over telefonen. Den forbinder til din konto på www.acrobat.com (du har en, har du ikke?) :-) og placerer sammenflettede udgaver af dine dokumenter der, så de kan ses af kunder der ikke har CS-programmerne til rådighed … det virker super-godt. Der er også Browser lab og SiteCatalyst NetAverages, som giver dig et overblik over, hvordan en webside ser ud i forskellige browser og hvordan trends inden for browser og styresystem udvikler sig. Der er andre tiltag, og det er muligt at kunne købe flere online ydelser, efterhånden som tredjeparts udviklere får fingrene i systemet.

Se lanceringen

Lige i de nærmeste dage, vil jeg nyde lanceringen og skrive løst og fast, her eller på twitter så der kan du følge med. Jeg vil også skrive lidt mere dybdegående om nogle dage omkring mulighederne og vise lidt demoer af, hvad der kan lade sig gøre i programmerne, men først skal du lige klikke ind på http://cs5launch.adobe.com/ og se præsentationen, i dag (12. april) klokken 17:00

Brugergruppen

Der er jo møde på Mediehøjskolen, i København den 20.a pril. Her vil vi vise Flash Builder, Catalyst og Air 2.0. Efter CS5 er blevet offentliggjort, vil jeg også gøre alt for at få lov til at vise dig de andre programmer. Så meld jer ind i AUGOD, og skriv dig på (RSVP) om du kommer eller ej. Du kan læse mere om, hvordan du gør på adressen http://blog.hjaelpmignu.dk/2010/03/møde-i-brugergruppen-adobe-user-group-of-denmark-augod/

God fornøjelse til jer alle sammen. Det bliver en varm og god sommer :-)


Møde i brugergruppen Adobe User Group Of Denmark (AUGOD)

Det er blevet tid til et møde i brugergruppen. Det er ikke et hvilket som helst møde – det er det første. Jeg er meget spændt på hvordan det tages imod og glæder mig til en serie af aftener, hvor brugere af Adobes programmer kan vise og snakke om software og teknikker. Det er også en mulighed for at høre nyt om produkter, vinde software eller bøger og meget andet.

Hvad skal vi snakke om?

Det første møde er lidt præget af internettet og emner der omkranser Flash Platformen, men vi bestræber os på at dække en række programmer i løbet af aftenen. Temaet er også præget af at vi får besøg af en speciel gæst, Piotr, der vil give os lidt “særlig behandling” :-) Peter Andreas Mølgaard vil gennemgå nyhederne i AIR 2.0 og jeg (Karsten Vestergaard) vil vise Flash Catalyst. Derudover arbejder jeg på en showcase der viser Photoshop og Illustrator i aktion, men intet er sikkert på den front endnu. Har du nogle idéer, eller vil du vise noget, er du velkommen til at kontakte mig offline.

Hvordan kommer jeg med?

Det er ret nemt (og gratis) at være med i gruppen. Du starter med at besøge http://www.hjaelpmignu.dk/go/augod/ der vil linke til gruppen på Adobe Groups. Det første du bliver bedt om er dit Adobe ID. Hvis du ikke har et kan du oprette det ved at klikke på knappen til venstre “Create Adobe ID”

Oprettelse af et Adobe ID

Når det er oprettet vil du blive sendt til gruppens forside. Alle med et Adobe ID må besøge gruppens side, men for at deltage aktivt i den og blive informeret om møder, nyheder, konkurrencer osv. skal du tilmelde dig gruppen. Det gør du ved at klikke på knappen “Join this group” i højre side af skærmen.

Knap til at tilmelde sig AUGOD

Når det er sket er du medlem af Adobe User Group Of Denmark. Her vil du kunne læse og skrive om alt hvad der har med brugergruppen at gøre. Hvis du har spørgsmål til software, er det stadig forummet på http://www.hjaelpmignu.dk/ du skal besøge.

Endelig skal du fortælle om du kommer eller ej. Det gør du ved at klikke på Event-linket (http://groups.adobe.com/index.cfm?event=post.display&postid=17428) og vælge Yes, Maybe eller No i bunden af teksten.

Hvad er en brugergrupppe?

En brugergruppe er en organisering af personer med en fælles interesse. Brugergruppen gør det muligt at mødes på tværs af uddannelse, arbejdsplads osv. og diskutere aktuelle temaer og se nyt fra det fælles interesseområde. Mit mantra er. “Uden dig er gruppen ikke noget!” Den bliver drevet af det der interesserer dig og det du bidrager med. Vi er selvfølgelig en lille kreds af managers og co-managers der vil trække kraftigt, men du opfordres kraftigt til at komme ud af busken og vise, hvordan du bruger programmerne.

Det betyder altså, at der ikke er lagt op til den normale type events, hvor der “bare” showcases nye produkter, men i ligeså høj grad kaffe og kage, hvor vi snakker, networker og hygger med et fælles udgangspunkt.

Jeg glæder mig meget til at se så mange som muligt, den 20. april 2010 på Mediehøjskolen i København.

Vel mødt
Karsten “ockley” Vestergaard


Beta 2 af Flash Builder og Flash Catalyst

Så er der kommet nye versioner til offentligheden af to stykker software som jeg forventer mig rigtig meget af. Det ene er Flash Builder 4 (tidligere Flex Builder) som gør det nemt at udvikle online interaktive applikationer. Den måde denne nye version fokuserer på data og bygger design op omkring det gør at der vil ske et skub i den rigtige retning når det kommer til udvikling af applikationer i fremtiden.

Den der skal hjælpe til med at få det hele til at rende pænt af stablen er Adobe Flash Catalyst som også er kommet i en ny beta. Her vil det være muligt at tage eksisterende design fra Illustrator og Photoshop mv. og overføre dem direkte til Catalyst. Du vil herfra kunne markere og omdanne de enkelte elementer til interaktive komponenter og definere dummy-indhold samt overgange imellem en applikations tilstande. Dette vil resultere i en et færdigt projekt der kan overføres til Flash Builder hvor dine dummy-data vil blive erstattet med LIVE data.

Hent demoerne, prøv dem af. Læs nogle tutorials til Flash Builder og Flash Catalyst så du kommer hurtigere igang.

… det er en investering i fremtiden der er værd at gøre sig for alle der har med interaktivt design at gøre.


Flash CS5 (Viper)

Når en version aaf Creative Suite og dets komponenter har været fremme tilstrækkelig længe dukker rygterne op om nye udgaver, beta udgaver (og deres navne). For at lade være med at bære ved til rygtesmedjen, vil jeg undlade at gisne om features, men i stedet henvise til flash magazine der har en artikel omkring Adobe Flash CS5 Professional der blev vist på Flash On The Beach 2009.

Det mere interessante features er nok code completion, behaviour lignende panel til nye brugere og samspillet med Adobe Flash Builder 4 ift. større projekter.

Se en gennemgang på:

http://www.flashmagazine.com/news/detail/adobe_flash_cs5_sneaks_from_fotb09/

Og kodenavnet … det er Viper, hvis du skal søge videre :-)


Adobe Flash Catalyst og Adobe Flash Builder 4

Så er ventetiden ovre! Et tidspunkt jeg har set frem til, kom her i weekenden. Du har nu mulighed for at prøve kræfter med Adobe Flash Catalyst, som ligger i offentlig beta på labs.adobe.com. Det gør den sammen med Adobe Flash Builder 4 der er det sidste skud på stammen i den produktserie der tidligere var kendt som Flex Builder. Først og fremmest lige nogle link til softwaren:

Adobe Flash Catalyst: http://labs.adobe.com/technologies/flashcatalyst/
Adobe Flash Builder 4: http://labs.adobe.com/technologies/flashbuilder4/

Hvad kan programmerne?

Adobe Flash Catalyst

Dette program er ment til at binde designere af RIA tættere til den interaktive platform. Hvor de fleste designere bruger Illustrator, Photoshop og Fireworks til at udvikle skærme og elementer til brugergrænseflader, har udvikleren ofte alt for megen kode i vejen når der skal dannes et overblik over den visuelle stil.

Det resulterer i at der bliver indgået en masse kompromier, når der skal pustes liv i layoutet. Med Flash Catalyst er følelsen og muligheden for at levere et “kodeklart” resultat rykket tættere på. Du kan nu med Flash Catalyst, tage dit layout fra Illustrator, Photoshop eller Fireworks og definere de interaktive elementer. Du kan vise overgange imellem states (tilstande) og præcist bestemme hvordan grafiske objekter i dit design skal optræde i den endelige applikation.

Resultatet bliver et køreklart projekt til Adobe Flash Builder 4, som udvikleren så bruger til at gøre applikationen færdig.

Adobe Flash Builder 4

Fra at være et program for super nørder, har Adobe Flash Builder vendt sig mere og mere til den “mindre øvede udvilker”. Har du erfaring med Adobe Flash CS4 og ActionScript 3.0 vil du helt sikkert få meget ud af Adobe Flash Builder 4. Programmet er baseret på Flex framework’et og levere Rich Internet Applications til Flash Platformen. Den er født med en bunke indbyggede effekter og klasser, der gør det hurtigt at lave applikationer der kan afvikles på Flash Platformen.

Hvor Adobe Flash CS4 bruger sin timeline og library til at levere unikke animationer og oplevelser, kan Flash Builder bygge robuste og appelerende applikationer til interenettet eller din desktop (via AIR)

Med direkte understøttelse af projekter eksporteret fra Flash Catalyst er det blivet endnu nemmere at overskue designet af Flash Builder projekter – en ting som folk, vant til Flash Professionel, har sukket efter.

Kom i gang, nu!

For at komme igang med programmerne er her en lille liste af relevante links:

Adobe Flash Catalyst

Adobe Flash Builder 4

Derudover er der en række demonstrationer af Flash Platformen på http://labs.adobe.com/technologies/flash/videos/

Held og lykke. Jeg glæder mig til at se, hvor langt i kan trække programmerne :-)

/ockley