Blue Flex

After recently posting about an odd effect from putting in a Sin() instead of a Cos(), I’ve manage to finish what I was working on.  Well finish as in it works, but its not a fully customisable component yet.  That will entirely depend on whether or not I get ask to make it into one.

Full Aim  (hopefully coming soon)

The full aim is to create the cube component that can take any number of sides (the example below has 5 sides), each side is a Sprite so that anything can be added.  I’ve made each face/side of the cube a Sprite as the project had to be in actionscript only (the example has some flex in it though) but for the project it was to be used in it had to be pure actionscript as I was handing it over to one of our flash developers to work with in CS4.

Ideally it will be able to rotate in both X or Y directions and have the choice of clockwise or anticlockwise directions, but for now it just rotates around the Y axis and goes in a clockwise direction.

It can already be resized to any size and have any number of side/faces.

The scroll bars could be improved by letting the user define the graphics for them, and if moving it to a flex project I could just use the standard flex scrollbars so that they could be reskinned easily.

Rotation speed and delay are variable as are the easing functions.

The lighting has been taken care of using my first pixelBender file which was interesting to play around with, I’m also going to try and add some blurring depending on the speed of rotation and I think that’s about it.  So it’s pretty much there

Example

To illustrate the example I’ve added 5 faces -

1. Rotating cube example
2. Funny video
3. Image (png)
4. blank purple Sprite
5. Floaty, throbbing yellow circles (with no background)

Mouse over the example to have the cube stop spinning and use the scrollbars to control the cube.

Enjoy, now that I’ve done this I might actually get around to doing a tutorial on some 3D stuff + maybe a bit of pixel bender.

Here is a list of various flex explorers that I’ve found handy, in no particular order.

• Graphics Explorer -

http://kennethsutherland.com/flex/graphic_explorer/graphicExplorer.html

• Chart Sampler - 

http://demo.quietlyscheming.com/ChartSampler/app.html

• Custom Easing Function Explorer -

 http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html

http://www.jamesward.com/easingFunctionFun/easingFunctionFun.html

• CSS Style Explorer -

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

• Filter Explorer (BlurFilter, GlowFilter etc) -

 http://merhl.com/flex2_samples/filterExplorer/

• Distortion effects (still nice, even though I’m trying to do the 3D stuff in flash 10, this was ahead of its time)

http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/

Others

These are ones I’ve seen but never had to use.

• Rounded, Enhanced button explorer

http://www.wabysabi.com/flex/enhancedbuttonskin/

• Reflection explorer

http://www.wietseveenstra.nl/files/flex/ReflectionExplorer/v1_0/ReflectionExplorer.html

• Perlin noise

http://www.bit-101.com/explorers/PerlinExplorer.swf

• Dual Slider

http://www.visualconcepts.ca/flex2/dualslider2/DualSlideTest.html

• Pixel Bender explorers

http://labs.adobe.com/technologies/flashplayer10/demos/pixelbender/
http://extjs.com/playpen/air/PixelBenderExplorer.air  (AIR application)

If you have any you’d like me to post, or if you know of any other good exlporers, let me know and I’ll add them into the list.

I recently checked out a page that was created using flexbuilder to see if it was indexed by Google and every time I checked it Googles results came up with

Error #2032. RSL Error 1 of 1.

I found virtually nothing out on the internet about this apart from a recent email or two on the flexcoders mail list. It turns out that Google will NOT index your SWF if you use an RSL to reduce the file size!

Now I try to keep up to date on as much flex as possible but I’ve never heard/read anyone say this before. All I’ve heard about it was great Google can now index SWFs, any SWFs and no mention of any exceptions.

I think this is a bit of a big thing, I always use the RSL feature to make my SWFs smaller with the one time hit of getting the framework RSL SWF so every SWF I’ve done will not be getting indexed by Google. As it happens the majority of the stuff I do is inside other pages that do get indexed or its not for public consumtion anyway, but that’s not the point. All info out there suggests Google will index any SWF, it will NOT.

So should you get an ‘Error #2032. RSL Error 1 of 1.’ when Google returns a search on your SWF then turn of the RSL feature. Google better sort this out before flex 4, as I think they’re going to turn on the RSL feature by default for flex 4.

Having done close to 4 years of flex programming I’ve been asked frequently ‘why use flex?’.

My normal response is well flex is for programmers and flash is for designers (generally speaking). But having never created a proper flash project I’ve not had a proper insight into flash, but that’s changed a wee bit in the past few days. How? Well I’ve been doing an actionscript only project so that it could be imported into a flash project.

I’m really surpised about all the stuff I take and use in flex that I just couldn’t use in the project code that was just for flash.

Main Issues & work arounds (if possible)

Embedded assets (ByteArrayAsset & BitmapAsset etc issues)

• Why when you wish to use something from the start of your app should you have to load the asset. Well I’m sure if you’ve done flash for a while you’re used to either pulling something onto the stage or using the loader method if using actionscript.

Well I’m used to using the [Embed] metadata but try using that and you’ll find that it requires the flexSDK. Why!!! If you’re trying to do everything without flex then you’ll actually find that the reason it requires the flexSDK is as follows -

IFlexAsset is a marker interface with the following meaning: if a class declares that it implements IFlexAsset, then that class represents an asset — such as a bitmap, a font, or a sound — that has been embedded in a Flex application. This interface does not define any properties or methods that the class must actually implement.

So the reason you’ll find that you can’t use the [Embed] tag in a pure actionscript project is NO REASON. So should you get an error after using the [Embed] tag then all you need to do is create an empty class of whatever it can’t find and place it in a folder mx/core/ 

Tweens

• There is a considerable difference between tweens for flex and tweens for flash. The flash tween isn’t anywhere near as flexible as the flex version . If you wish to change a value from say 0 to 100 using an easing function then in flex you just tell the tween here is the start value ‘0’ and here is the end value ‘100’ and I want the duration to be say 700 milliseconds. Then every time this updates I can do other things and on the last call I can make sure that the end value is what I’m expecting (see previous post on fuzzyness after rotations for why this is a good thing).  But with the flash versioned Tween I can’t do this.  The property I change must be part of an object and it must be changed using either seconds! or the timeline.  The flash tween does have a update event that you could listen to but I like the flex version that has a function that gets called for each update and an end update function call for the last value update.

  So what can you do, well flex is open source, so just take a look at the flex tween class and copy/paste and remove all flexEvent references and change any mx_internal to private.  If you still wish to use the flexEvents then just create your own event and fire them. Job done

Code hinting

• Dammit why??? Surely they can put code hinting into CS4, why not? The lack of code hinting really must be to turn programmers away from CS4 and to use flexbuilder or simialr. No workaround for this other than if you want code hinting use flexbuilder.  You can edit your AS files that are in your flash project using flexbuilder, but why can’t you do this in CS4?

SWC’s

• I belive its possible to create a SWC in flexbuilder and then load it into flash CS but I’ve not managed it yet. (when I do I’ll blog that)

Conclusion

If you can develop in flex, the do. Your life will be sooo much easier.

If you need code for a flash project then use flexbuilder to make it, try to keep as much of it separate from your flash project as possible. e.g. In my case my actionscript project accepted a Sprite from whatever the designer was doing in CS4 and that’s all it cared about so I could develop it 100% in flexbuilder using an actionscript project. (Then just pass code over to flash project to insert into project – use of a SWC would make this process better, working on it)

If you know the flex libraries and flash doesn’t have something but flex does then chances are you can just remove any mx.* references or fudge it (as in the case of the or tween issues)

If your designing something, then sure stick to flash.

If you’ve ever set the martix3D & Z position for a flex object you’ll have noticed that as soon as you do it loses its sharpness.  This is especially noticeable if you’re container/object has text in it.

Well here are the few simple steps to make sure that when you need you’re object to get its ‘sharpness’ back you can.

1. Before you set the Z property and while the matrix3D is null take a copy of the objects matrix.  You can do this by accessing object.transform.matrix, note as soon as you set the Z property the matrix3D will go from being null to being set and the matrix value will end up becoming null.
2. If using a tween or similar to go between a certain value (rotation) and 0 then I found that unless you explicitly use the value 0 in the end tween function that it may set the end value as 0.0001 or something very close to 0.  This will not be enough, so in the end tween function I always explicitly set the value to whatever I want it to be at the end.  e.g. if my tween was something like Tween(this , 90, 0) then in the onTweenEnd() I make sure that the value is 0 (rather than just using the value passed into the end function – which may or may not be exaclty 0).
3. As soon as the rotation value is 0, then I set the Z property to NaN, then set the object.transform.martrix3D to null and finally I make the object.transform.matrix = the previously copied matrix.
4. As soon as you copy the matrix to the transform.matrix property you should see your object become sharp again.
5. Thats it .

Hope this helps a bit.

Well I’ve been working on creating some cube style effects at my work and in particular an actionscript project that will take any number of containers and then rotate them in a cube style using the new flash 10 libaries.

Anyway I got a Sin() mixed up for a Cos() and the following effect happened which I thought was quite a cool effect. Ignore the colours and its roughness it’s just a prototype swf but I thought I stick it up just to show the side effect that I never expected

Not Expected

Expected

One of the long standing flex projects I’ve been working on is a tool for showing of various funds and fund videos with related PDF’s and graphs etc.  This is updated relatively frequently and due to various restrictions it’s not as straight forward to test updates as the client would like.

So what would be a good way to test a live flex app (which is static) that loads dynamic data. Well the idea was to create an AIR application that would be a visual editor for the data that would then send that data using LocalConnection, this would update the model in the live flex app and the new data would be displayed so that it could be checked.  All of this would be local to the clients machine as by using the localConnection you’re only changing the local data model and not the data on the server.

Sounds very straight forward, but getting it just right took a little while.

Here’s the basic on how. (open demo windows, run both apps and right click for source to get more detail)

AIR application

Flex application

1)    Create an AIR app that sets up a localconnection

2)    Create a byteArray of whatever you wish to send (I’m sending just text, but there is no reason why you couldn’t say send an image or similar)

3)    Split byteArray into chunks of under 40K and then send them across using localConnection

4)    At the same time create a flex application with a localConnection

5)    Let it allow the domain your message is coming from (start with * for testing if not sure, just make sure you don’t leave * in for any live version)

6)    Create a handler function that matches the name of localConnection send parameter that you set up in the AIR app

7)    Join the 40K chucks of data if necessary then do what you like with them.

That’s it, message received over and out .  check out the source code for more details.

Want to use flex and pixelbender…?
Well first you should get the pixelbender toolkit from Adobe labs

I’m going to use one of the supplied filters with the toolkit just to show how straightforward it is to use with flex.
If you open the pixelbender toolkit and then open the sepia filter (this is the one I’ve use in the demo – right click on swf file for source), load an image then build and run. You can now see the image being transformed inside pixelbender.

Now to integrate that with flex ,
first export for flash and save the pjb file for use in your flex project.

Now run the demo below and check out the source code to explain how I’ve done it.
[swfobj src="/flex/pixel_bender/PixelBender.swf" alt="<p>go get flash player 10.0.22 or above at www.adobe.com</p>" width="400" height="400" align="center" ]

Now feel free to copy and modify the code and try out some of the other filters.

All DisplayObject’s can have filters so you can use this method on pretty much anything in flex.
For more info check out the video Pixel Bender Unleashed by Ryan Taylor (if the link doesn’t work – supplied by adobe RSS feed, wasn’t working when I filed this post try this link actual flv link This will play in any flv viewer such as Adobe media player )