Tag: Flex

Flex and Google Maps

Flex and Google Maps

I started to try out some flex with Google maps and it’s refreshingly straight forward.

Virtually all of the information to do the below can be found here http://code.google.com/apis/maps/documentation/flash/reference.html

 

So I’m just going to highlight a couple of things I did that were not in the docs.

Panning

  • Panning, well there is an example on how to do panning in ‘tour de flex’ but it uses a very basic method to work out difference between 2 points, divide by 100 and just add difference to starting point using the timer function.

A much better way would be to use a Tween so that you can implement an easing function, but a tween will only do one value at a time and a point has two values.

So I used the Move class. It moves an object from point A to point B which is exactly what I was after, but I just wanted the values as I’m not moving an object.

 Here is the actionscript code to implement it

//The move effect needs a target  otherwise it will NOT tween
//so just create a temporary target
var uiTemp : UIComponent = new UIComponent();
moveEffect = new Move();
//set up the move effect
moveEffect.xFrom = currentLatLng.x;
moveEffect.yFrom = currentLatLng.y;
moveEffect.duration = 1500;
moveEffect.easingFunction = moveMap;
moveEffect.xTo = Number(mapDetails.lat);
moveEffect.yTo = Number(mapDetails.long);

//on each update move the map
//calls the map.setCenter method
moveEffect.addEventListener(TweenEvent.TWEEN_UPDATE, updateMapPosition, false, 0, true);
//at the end I open up the marker window
moveEffect.addEventListener(TweenEvent.TWEEN_END, showMarker, false, 0, true);
//Play effect, give it the target so that it actually plays
moveEffect.play([uiTemp]);

Marker Windows

  • The information window that pops up beside the marker on the map needed to be an image with some text.  I never noticed any examples in the docs for this but I did see an example online so I thought I’d stick into this post as well to increase its coverage.

    Again very straight forward (Google really makes it easy for developers) check out the code below.

 

//In order to open a window beside a marker you need a InfoWindowOptions
var options:InfoWindowOptions = new InfoWindowOptions({
    //This is the key line for making it into a custom window
    //uiHolder is a Canvas (but it can be any UIComponent) and I'm sure you know what you can put into
    //a UIComponent, anything you like :)
    customContent: uiHolder,

    padding : 7,
    width: 262,
    height: 262,
    drawDefaultFrame: true
});
//Take the marker that you wish the window to appear above and
//call openInfoWindow and pass in the InfoWindowOptions you just created
currentOpenMarker.openInfoWindow(options);

Click to open app in new window

Click to open app2 in new window

[ad name=”ad-1″]

Flex, Firefox plug-in + community.

Flex, Firefox plug-in + community.

Following on from my recent post on creating a specific flex search using Google I wanted to make it easier to flick between the main Google search and the flex collection Google search.
Well I’ve created an OpenSearch plugin (supported by Firefox 2+, Internet Explorer 7+, etc) so I can now easily flick to a specifc flex search whenever I wish now.

 

google search

 

To use search plugin click here.

Community

I’d like it to contain as many helpful flex, AIR and flash sites as possible. I’m talking about sites that actually give you code hints, tips and samples without tonnes of text that get them up the page rankings without actually being of any real use.

Hopefully you’ll all like the search and find it useful.  I’d love it if this flex/AS/AIR search could be as comprehensive as possible.  It would help me (and others) when looking for appropriate information. (I know there are various aggregators out there but the search facilities on these sites aren’t normally great, but Google’s is — so go on, help me add to the list to make it better for everyone 🙂 )

Current List

http://blog.everythingflex.com/
http://dougmccune.com/
http://flexbox.mrinalwadhwa.com/
http://onflash.org/ted/
http://www.mikechambers.com/
http://www.scalenine.com/
http://dougmccune.com/
http://www.darronschall.com/
http://algorithmist.wordpress.com/
http://www.moock.org/blog/
http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2
http://actionscriptexamples.com/
http://blogs.adobe.com/air/
http://blogs.adobe.com/flex/
http://www.degrafa.org/
http://flexbox.mrinalwadhwa.com/
http://www.webkitchen.be/
http://blog.flexexamples.com/
http://www.kennethsutherland.com/
http://www.gskinner.com/blog/
http://www.gotoandlearn.com/
http://polygeek.com/

 

If there are any links that you particularly like then leave a message with the link.  If it’s got some good examples etc then I’ll add it to the list.

Cheers.

Additional sites:

http://www.insideria.com/
http://userflex.wordpress.com/
http://www.riaforge.org/
http://www.quietlyscheming.com/

[ad name=”ad-1″]

Flex Collection – Google search

Flex Collection – Google search

Totally off topic this. But I had quite a bit of hassle trying to find info on how to do what I just did.

So if you look to your right you’ll see a nice search box with the Google brand inside it 🙂 Nothing special there you may think… well.

Well it’s a custom search box from Google, and I’ve customised it by adding all of my favourite and preferred flex, AIR, and flash sites. So should you need to search on anything related to the mentioned categories just use the search box to the right.

 

How its done

If you are interested in adding something similar to your blog or web page then there is very little information out there about Google’s custom search page. 

There seems to be 2 ways to add it to wordpress.

1)       Add it as a page within your site so that it retains your sites look and feel, in order to do this you can find a plugin for custom google search and depending on what theme you have have this may or may not work. I tried out http://aleembawany.com/projects/wordpress/google-custom-search-plugin/ which as it happens didn’t work with my theme.  But I wasn’t really trying to get it to work inside my site, I wanted the custom search to retain the Google style as that is what people are used to when using Google.

2)      Add it as a hosted Google custom search. Now on this method I found absolutely zero information (actually the info I did find on the wordpress site said it wasn’t possible).  Not to be put off by this info as anything seems to be possible with wordpress (I’m just learning it really, my blog is only a few weeks old), I decided to hunt through the various php files etc that come with wordpress.

The file that is required is searchform.php and this can be found inside the theme folder that you are using ( something like ‘wp-content/themes/{your theme folder}/searchform.php’)

Open up the file and inside that you should find some php and some html code (a form).  Replace the html code with the code that Google has given you for your custom search.  Or if you would like to have a search that just does Flex, AIR and flash sites then feel free just to use the following code.

 



When the user searches in this form then it will look up just a list of sites that only contain information on Flex, AIR, actionscript & flash.

You can also bookmark the following link

http://www.google.com/cse?cx=partner-pub-7396620608505330:xjbbr6-w0cu&ie=ISO-8859-1

This will link up to the specific Google search that I’ve set up just to look at relevant Flex, AS3, AIR & Flash sites.

 

[ad name=”ad-1″]

 

Zooming Example

Zooming Example

Ages ago I worked on an accessibility tool that followed the mouse around the stage and magnified whatever the mouse was over. It never made it to the final stages of completion but after reading a question on flexcoders for a zooming tool, I thought I’d revisit the idea and create a simple magnification/zoom example.

Before

During

After

 

Right click the example for source code.

This isn’t for production, just a POC on how to do enlarging, enjoy.

[ad]

Top Flex Explorers

Top Flex Explorers

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.

[ad]

Google and SWFs

Google and SWFs

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.

[ad]

Why flex? Why actionscript? Why flash?

Why flex? Why actionscript? Why flash?

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.

[ad]

Fuzzy graphics after rotations

Fuzzy graphics after rotations

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.

[ad]

LocalConnection – AIR -> Flex (and back if you want)

LocalConnection – AIR -> Flex (and back if you want)

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.

[ad name=”ad-1″]

Flex and Pixelbender

Flex and Pixelbender

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.
pixelbender screenshot

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 )

[ad name=”ad-1″]