Blog of Ruy Adorno http://blog.ruyadorno.com Flash, Actionscript, Haxe, Flex and more Sun, 11 Apr 2010 04:04:31 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Links about Multicore PureMVC Pipes http://blog.ruyadorno.com/2010/01/links-about-multicore-puremvc-pipes/ http://blog.ruyadorno.com/2010/01/links-about-multicore-puremvc-pipes/#comments Fri, 15 Jan 2010 23:54:47 +0000 Ruy Adorno http://blog.ruyadorno.com/?p=70 I decide to start publishing the result of some everyday search at work. This first time I have some Pipes links to show.

The first two links are from the official PureMVC.org page, after that two really nice tutorials and in the end a nice alternative using just interfaces to communicate between the PureMVC cores.

PureMVC MultiCore version official page

Official Pipes’ page

Tutorial explaining the integration of Pipes and the plumbing metaphor

Simple tutorial of Pipes integration with code source avaiable

Alternative for Pipes, communication between cores using interfaces

]]> http://blog.ruyadorno.com/2010/01/links-about-multicore-puremvc-pipes/feed/ 0 Using your html as a xml data source http://blog.ruyadorno.com/2010/01/using-your-html-as-a-xml-data-source/ http://blog.ruyadorno.com/2010/01/using-your-html-as-a-xml-data-source/#comments Mon, 11 Jan 2010 14:53:17 +0000 Ruy Adorno http://blog.ruyadorno.com/?p=62 Since a long time ago I’ve been wanting to write this post, it is all about a simple technique that I used in my portfolio and turned it so much more friendly to search engines.

It basically consists on turning the html itself in the content source for flash. But in order to achieve this we have to make sure that all required steps were well done. Here is a little diagram to show what it looks like.

Xhtml as content source for flash

First of all we need to use swfobject or another similar tool for flash insertion. It is essential for the final result because the javascript will replace the actual html in the page and it will allow us to actually fill the html with information and the user will only see the flash content.

Second step is make sure that your html will be xhtml strict compatible. This is essential to make sure that the flash will be able to parse it as a xml.

After having everything setup we have to start filling the html with some relevant information and the third step is to do this wiselly, making a good use of class and id attributes on your div’s. They’ll be essential when parsing the data on flash.

Once we have all html is finally time to go start creating some flash, the unique difference on your flash code will be some adjustements before xml parsing, we’ll get the xml loaded as a string and direct replace some tags to avoid problems during the parsing, in my case I’ll start by getting just the content from body, like: xmlString.split(“<body>”)[1].split(“</body>”)[0] and after that insert a cdata inside all p tags to avoid problems with a and br tags like: xmlString.split(‘<p>’).join(‘<p><![CDATA[').split("</p>").join("]]></p>”), in my case I had to keep splitting all p tags that have different ids, you might do the same or find a smart way to add all the cdata blocks to the xml.

And that’s it! Now you can even create a nice css and you will have an alternative version of your site avaiable to users without flash player (like in the iphone).

If you want you can check my online portfolio html as an example for the xhtml code organization and you may also disable javascript to see how it looks like for users that don’t have flashplayer avaiable.

]]> http://blog.ruyadorno.com/2010/01/using-your-html-as-a-xml-data-source/feed/ 0 States transition in Flex4 http://blog.ruyadorno.com/2009/08/states-transition-in-flex4/ http://blog.ruyadorno.com/2009/08/states-transition-in-flex4/#comments Thu, 13 Aug 2009 20:29:45 +0000 Ruy Adorno http://blog.ruyadorno.com/?p=14 The flex4 framework comes with a new and so much easier way to create transition between the states of your components. I think this is primarily developed to support all the features needed in the new  Adobe Flash Catalyst product, but it does a great job for developers too.
I created this little tutorial to demonstrate the using of this new feature in Flex4, first of all create a new project inside FlashBuilder. The following code will be auto generated in the main mxml file of the project, if you don’t have FlashBuilder just copy the code and paste using the IDE of your choice. Remember that you’ll need the Flex 4 SDK.

<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768">

</s:Application>

First of all we’ll add our states declaration, pretty much the same thing it was on Flex3:

<s:states>
	<s:State name="initialState" />
	<s:State name="readyState" />
</s:states>

Now let’s add something to test our animation, I’ll just add a Button to switch between states and a SimpleText tag using the new syntax for transitions changing.

<s:SimpleText id="simpleText" x="20" y="50" text="Hello World!" fontSize="54"
		alpha.initialState="0" alpha.readyState="1"  />
	<s:Button id="button" x="110" y="130" label="Press me to fade"
	click="{currentState = (currentState=='initialState')?'readyState':'initialState'}"/>

And finally we’ll add the transitions tag, that will specify to flex framework which transition animation should be used when changing our states.

<s:transitions>
	<s:Transition>
		<s:Parallel target="{simpleText}">
			<s:Fade duration="1000" />
		</s:Parallel>
	</s:Transition>
</s:transitions>

And it’s ready! You can compile and see how magic is our transition between states now, you can also check it below, click on the button to perform the transition:

Below you can check the full code for this, you’ll need the Flex 4 SDK in order to compile it.

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/halo"
	minWidth="300" minHeight="200">

	<s:states>
		<s:State name="initialState"/>
		<s:State name="readyState"/>
	</s:states>

	<s:transitions>
		<s:Transition>
			<s:Parallel target="{simpleText}">
				<s:Fade duration="1000" />
			</s:Parallel>
		</s:Transition>
	</s:transitions>

	<s:SimpleText id="simpleText" x="20" y="50" text="Hello World!" fontSize="54"
		alpha.initialState="0" alpha.readyState="1"  />
	<s:Button id="button" x="110" y="130" label="Press me to fade"
	click="{currentState = (currentState=='initialState')?'readyState':'initialState'}"/>

</s:Application>

It’s just a too simple example, but it serves well to explain the utilization of the new states transition scheme, from here you can create any type of animations, moving the items, 3d animations and more.
This type of animation is very useful when dealing with sections changing and other states changes. Is up to you to try and make a good use of it.

]]> http://blog.ruyadorno.com/2009/08/states-transition-in-flex4/feed/ 0 First impressions of Flex4 http://blog.ruyadorno.com/2009/08/first-impressions-of-flex4/ http://blog.ruyadorno.com/2009/08/first-impressions-of-flex4/#comments Thu, 13 Aug 2009 03:26:49 +0000 Ruy Adorno http://blog.ruyadorno.com/?p=11 It have been one month since the Flash Builder and Flash Catalyst betas was released to the main public, I had the opportunity to get both of them and even to start using it in some real projects at work.

Flash Catalyst still having the same impression we had from the Thermo days, it seems a great tool, have a lot of potential, but we need to see it ready to know how well it will perform in some real projects in the real world.
By now the whole tool is too rough yet and is looking much more like just an intermediate tool to help the transition between designer-programmer, the main problem is that it’s not looking like a designer friendly application and this is a key point for the future success of the product. Maybe I’m just hopeful that we can take some work from the hands of overloaded programmers and give designers a new and important role in the production phase.

On the other hand I had the new Flash Builder that is essentially an improved version of Flex Builder 3. There are some nice new features, but it still the same application and I think that it does the job for this actualization, mainly because the great star of this release is the new spark components architecture, it has a new and so much easier skinning system and many other features that I hope to show in the future posts of this blog.

In my opinion the new Flex4 platform emerges as a new and nice solution for the future of web projects, it’s essential to every Flash/Flex coder get to know it and let’s see where it will lead us to.

]]> http://blog.ruyadorno.com/2009/08/first-impressions-of-flex4/feed/ 0 Hello world! http://blog.ruyadorno.com/2009/08/hello-world/ http://blog.ruyadorno.com/2009/08/hello-world/#comments Mon, 10 Aug 2009 13:47:47 +0000 Ruy Adorno http://blog.ruyadorno.com/?p=1 This is my first post in this new blog, here I expect to discuss about the infinity of cool stuffs in the flash world and add my humble part to it, with a bunch of tests, experiments and random thoughts.

Even though I’m just starting a little contribution to the flash world, it’s always good to give back to this community that I’ve learned so much with.

Hope you enjoy my next posts and that everyone help me spread the word about the blog.

See you all,

]]> http://blog.ruyadorno.com/2009/08/hello-world/feed/ 2