Archive for the ‘ Tutorials ’ Category

I just submitted my idea for a book to Packt Publishing.
One of the main lack I see in the panorama of flash books is all about industrializing projects. There are few\no books about coding conventions, code management, environment setup, code reutilization, unit testing, ecc ecc… and a plenty of “making (little) games with flash”, “using (basic) 3d with flash”, etc.

The idea I submitted is called “Creating and Managing Flash Enterprise Projects”.
My plan is to talk about how to setup and maintain an enterprise level project built over the flash platform… if you like such an idea, please vote for me here >>>> http://t.co/2xxmchp

thanx,
ciao ;)

This post is to summarize my session at the FlashCamp.

Here’s the preso: (italian only)

and here are the examples shown during the session:

Garbage collector in action:
this example shows the memory allocation behavior. Take a look to the saw tooth yellow line in the graph.

Weak vs Strong references:
two examples to show the difference between weak and strong references: basically weak do not increment reference count, strong do that.
If you store keys in a dictionary using weak references your keys are getting cleaned by the garbage collector ( example )
otherwise the GC doesn’t clean your keys ( example ).

Blitting in order to ease the GC:
The GC iterates through each reachable node starting from the roots, one of these roots is the displaylist. So in order to ease the GC work we could flatten the whole displaylist to one bitmap by leveraging the usage of the blitting technique.
These examples display about 1000 new objects drawn each frame by using the display list ( example ) or the blitting technique ( example ). The difference in performances are not only due to the different compositing techniques (built in compositing when using the displaylist VS manual compositing when using the blitting technique ) but also to the lower number of instances to be collected by the GC.

NOTE: both examples are very cpu intensive

Don’t let the GC start by using the memory pool technique:
The GC freezes the program when freeing the memory. The memory pool technique consists in reusing the instances of your objects preventing the GC to identify those objects as garbage.
This makes your app memory utilization stable (a straight yellow line ) and removes every glitch due to the garbage collection.
These examples show a simple particle fountain implemented by leveraging the memory pool technique ( example ) or not ( example ).

Finally:
here’s the source, it’s not the best commented nor the best implemented files out there, but just take a look at them to have a full comprehension of what’s going on ;)

If you need further help, please comment this post and let me know.
ciao

PS: obviously mario copyright is property of nintendo :)

 
Wednesday, November 10th, 2010

As my previous post was announcing, cancelling and reannouncing, I’m speaking at WebTech Conference here in Milan.
Here’s my presentation slides

And here’s the examples zip: www.flashfuck.it/webtech/examples.zip
If you need something to be more clear or some further explanation please feel free to comment this post :)

Today I had to install the must-have flash switcher extension for firefox (by Alessandro Crugnola) and I found that it’s not compatible with firefox versions after 3.0 …

I trust in sephiroth’s extension going to work properly even in unsupported firefox versions, and however it’s worth the attempt, so, how to install it anyway?

First of all, download the flash switcher extension from the mozilla addons site ( https://addons.mozilla.org/en-US/firefox/addon/5044/ ) and save it on your hard drive.

Now that you have the .xpi file rename it to .zip and decompress it, you’re getting a plugin and content folders, chrome.manifest and install.rdf files.

Open install.rdf with a text editor and examine this tag


here min and max versions are defined for the extension, so just change em:maxVersion from 3.0pre to 3.8 (or whatever) and save the file.

Now select all files and folders (not the parent folder!!!) (plugin, content, chrome.manifest, install.rdf) and zip all together, then change the extension from .zip to .xpi.

Open firefox, File>Open, browse to the .xpi file, install… done and working!! w00t! :)

My unsupported (but properly working) version of firefox is 3.6.8, the flash switcher extension version is 2.0.2.

enjoy :)

 
Friday, November 13th, 2009

You know what? I found the jump very easy and those guys at Adobe’s hq did a wonderful job on driving people into this new release of the Flex framework.
I’m not posting some code this time, just a link to a project which can be sooooooo helpful to take your dive: “Flex in a Week”.
Nothing hard, just take your time, your headphones and a good internet connection, drive your browser to http://www.adobe.com/devnet/flex/videotraining/flex4beta/index.html and start from the beginning…
If you’re not new to flex programming it will take you half a day to get into this new baby.

bye for now :)

Just posted the first episode of a cool tutorial on building RIAs with Cairngorm and Doctrine (a PHP ORM). This episode is about client only, next one will be about server side development.

tfmlogo

Have a huge coffee cup and take a read :)
Here’s the link

Recently I faced this problem: how to get if a Class is extending another one or implementing an interface?

this is the specific case:

function checkType(toCheck:Class,typeClass:Class=null,typeInterface:Class=null):Boolean
{
// if an instance of toCheck is a typeClass or a typeInterface
// return true
// else
// return false
}

The task is quite simple, the first solution would be get an instance of toCheck and use the is operator to actually check the type…but this would mean both a waste of resources and an “unwanted behaviour generator” (just think about a parser class instantiated without a real need or something like that).

Nope, that solution sucks.

Let’s try something better, let’s make the player inform us which is the toCheck class structure, let’s use describeType.

describeType is a wonderful function you can find in flash.utils package, it examines an untyped object and returns an xml document containing the description of that type (more details at adobe livedocs)…something like this:

NOTE: click on “view code” to see the real xml document, my wp is escaping tags chars <> …:\

<type name="flash.events::EventDispatcher" base="Class" isDynamic="true" isFinal="true" isStatic="true">
  <extendsClass type="Class"/>
  <extendsClass type="Object"/>
  <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
  <factory type="flash.events::EventDispatcher">
    <metadata name="Event">
      <arg key="name" value="deactivate"/>
      <arg key="type" value="flash.events.Event"/>
    </metadata>
    <metadata name="Event">
      <arg key="name" value="activate"/>
      <arg key="type" value="flash.events.Event"/>
    </metadata>
    <extendsClass type="Object"/>
    <implementsInterface type="flash.events::IEventDispatcher"/>
    <constructor>
      <parameter index="1" type="*" optional="true"/>
    </constructor>
    <method name="willTrigger" declaredBy="flash.events::EventDispatcher" returnType="Boolean">
      <parameter index="1" type="String" optional="false"/>
    </method>
    <method name="hasEventListener" declaredBy="flash.events::EventDispatcher" returnType="Boolean">
      <parameter index="1" type="String" optional="false"/>
    </method>
    <method name="removeEventListener" declaredBy="flash.events::EventDispatcher" returnType="void">
      <parameter index="1" type="String" optional="false"/>
      <parameter index="2" type="Function" optional="false"/>
      <parameter index="3" type="Boolean" optional="true"/>
    </method>
    <method name="dispatchEvent" declaredBy="flash.events::EventDispatcher" returnType="Boolean">
      <parameter index="1" type="flash.events::Event" optional="false"/>
    </method>
    <method name="addEventListener" declaredBy="flash.events::EventDispatcher" returnType="void">
      <parameter index="1" type="String" optional="false"/>
      <parameter index="2" type="Function" optional="false"/>
      <parameter index="3" type="Boolean" optional="true"/>
      <parameter index="4" type="int" optional="true"/>
      <parameter index="5" type="Boolean" optional="true"/>
    </method>
    <method name="toString" declaredBy="flash.events::EventDispatcher" returnType="String"/>
  </factory>
</type>

As you can see in this EventDispatcher type description there are two nodes witch are fitting the task’s purposes:

<extendsClass> and <implementsInterface>

Those nodes are repeated for each class or interface in the given class (toCheck) chain of inheritance and they contain the qualified class name string of the extended\implemented class\interface.

In this case EventDispatcher extendsClass type=’Object’ and implementsInterface type=’flash.events::IEventDispatcher’ …quite clear right?:) Now, back to the implementation:

function checkType(toCheck:Class,typeClass:Class=null,typeInterface:Class=null):Boolean
{
	//gets the toCheck class type xml description
	var _typeXML:XML=describeType(toCheck);
	//gets the typeClass and typeInterface qualified class names
	var _result:Boolean=false;
	if (typeClass) {
		// if toCheck is a typeClass
		for each (var _extClass:XML in _typeXML.factory.elements('extendsClass')) {
			if (_extClass.@type==getQualifiedClassName(typeClass)) {
				_result=true;
				break;
			}
		}
	}
	// do the same for typeInterface but checking 'implementsInterface' node
	if (typeInterface) {
		for each (var _impInterface:XML in _typeXML.factory.elements('extendsClass')) {
			if (_impInterface.@type==getQualifiedClassName(typeInterface)) {
				_result=true;
				break;
			}
		}
	}

	return _result;
}

…and the task got done :)

stay tuned :)

 
Saturday, August 30th, 2008

Since it has been created i’ve been a fan of flash tracer extension, i really fell in love with that tool, but i noticed it slow down the browser and can even make it crash.

So, let’s open a trace logger on our terminal…

To do that the right command is “tail” which actually “[...]Print  the  last 10 lines of each FILE to standard output[...]” and the file to open is located in /Users/[your username]/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

Then, let’s do something good and useful with that:

open your TextEdit, cmd+shift+T to switch to plain text, write down this one line command:

tail -f /Users/[your username]/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

save the file as “flashtracer.sh” and use sh as file extension instead of txt.

then right click on the file, reach the “open with” menu and choose “terminal” application located inside utility folder. Note: it would be great if you set terminal as default application to open that file :)

ok, now everything’s ready; double click on flashtracer.sh and start tracing :)

Note: remember you’re in a shell now, so you can clear up the lines with cmd+K…

I hope it can be useful,

byez :)

 
Monday, June 2nd, 2008

I just found a very good tutorial by Senocular able to clarify every (or at least many) doubt and misunderstanding about practices to bring 3D effects in Flash.  Here’s the link http://www.kirupa.com/developer/actionscript/3dindex.htm

I don’t know if someone would be interested in this kind of experiments, there are many good projects that make 3D approach easier than build your own engine. However even if Papervision or Away3D let us make 3D content (..oh, i forgot to add flash 10 to this list :D ) I think it’s always better to understand what’s going on behind the scenes to better comprehend what’s the magic made of :)

Questo è uno “microtutorial” piuttosto semplice sulle maschere (sono 2 linee di codice -.-) che però ho notato non essere troppo conosciuto.

Come creare un effetto “pila” o “occhio di bue”? o pi√π banalmente, come creare una maschera sfumata con flash8 o superiori?

  1. crea un movieclip da mascherare
  2. crea un altro movieclip contenente una forma con riempimento a gradiente nel quale almeno un colore abbia alpha minore di 100
  3. posiziona nello stage (fisicamente o via actionscript) i due clip: il mascherato e la maschera
  4. via actionscript imposta a true la proprietà “cacheAsBitmap” di ciascun movieclip
  5. sempre via actionscript imposta la maschera del movieclip da mascherare (setMask in AS2 o mask in AS3)

ecco il risultato:
[flash http://www.flashfuck.it/wp-content/uploads/2008/01/maschere_sfumate1.swf w=400 h=200]

questo il fla dell’esempio (CS3) Download Source