Today while coding I was creating some classes that required them to dispatch custom events. I know that this is a fairly common thing to do but sometimes it is these little things that can trip you up or take a while to find out how to do them.
So I thought that each time I come across something that is ‘simple’ (only simple after you know it!) that I’ll try to create a quick blog entry and take note of it. Each time I create a new ‘tip’ post I’ll link it to the previous/next tip so that it will be quick and easy to browse through a load of tips.
Tip #1
So for my first tip, this is how to implement your own custom events.
First if you are firing the events from a custom MXML file then you need to create a metadata tag. I make this the first node inside the MXML file. For example:
Then inside the MXML file (script block) or anywhere in the AS3 file to fire the event I’d do the following:
//custom event, the extra value is handled by the JumpEvent class
dispatchEvent(new JumpEvent("jump", specificValueForTheJumpEventClass));
//standard event
dispatchEvent(new Event("next"));
If you do the above and lets just say your MXML/AS file is called ‘GreatComponent’ then in order to use the new custom event, its as simple as the below bit of code.
That’s it, now you can fire of any custom event that you wish and make sure that it gets listened to.
Today (not for the first time – but it’s been a while) I needed to create a custom class that took a custom itemRenderer.
Having used itemRenderers for ages I thought it was going to be straight forward, but I’d forgotten a few little bits of info needed to implement them from scratch (i.e. not using say a menu or datagrids itemRenderers). It’s all very well to just give a flex component a class name in the MXML but how does the class that contains the itemrenderer implement it?
Test app
So I created a very small test app to make sure that I could create a custom itemRenderer for my custom class.
Step 1, create the custom itemRenderer. For the test I just made this a Canvas and made it 100% * 100% and the background colour was red.
step 2, display the class that you are going use as an itemRenderer as a normal display object (place custom class inside a Canvas)
step 3, create a custom class that will take and display an itemRenderer. Once created assign your new custom itemRenderer to the new custom class.
View the test app, all going well you should now see two instances of your itemRenderer. One is the actual class as a displayObject and the other as an itemRenderer inside your custom class.
I’ve placed my small test app here purely so that you can look at the source code (right click app). The app does NOTHING and is not interactive, it’s just to show the source code and how to make sure you set things up correctly.
Once you’ve looked at the code this bit will make sense.
step 1 & 2, display a canvas in the top left. This canvas contains only the custom class that is to be used as an itemRenderer. This just proves that the itemRender will display what you think it should.
step 3, create a custom class that will contain your itemRenderer. Then place custom class into app and set the itemRenderer to your custom itemRenderer class.
All you need to do now is create a itemRenderer slighty more complex than a red box, but as long as it’s a DisplayObject then its going to be the same.
That’s it, as ever feel free to comment (especiallyif you’ve found this helpful).
Well this is slightly old news, and a lot of you may well know that the New York Times has released a very good AIR application for reading the news.You may even recognize it from the demo that was given at Max 2008 (for the International Herald Tribune).
Well what I didn’t know until today was at the same time the NYT have released a Silverlight kit so that developers can build an app using Silverlight and pull in various articles from the NYT.
This just seems like very bad timing and another kick in the teeth for Silverlight (don’t get me wrong I’d like to have as many RIA languages out there to give me a choice depending on the project requirements). So around the same week they release a kit for Silverlight they drop their Silverlight reader in favour of a AIR reader due to issues with Silverlight.
I think we still need to wait a while for Silverlight to mature a bit (which I’m sure it will) before using it fully.
It would be interesting to find out how many of the major early adaptors of Silverlight are still using it. Every now and then you hear of a major Silverlight project being dropped in favour of flash/AIR.Am I just not reading the MS blogs which have the opposite (i.e. flash/AIR projects being dropped for Silverlight)?
On more than one occasion in the past I’ve been wishing to create a custom component that is totally dynamic so that I don’t have to worry about hardcoding any sizes.
So lets just say I have a list/tilelist and it contains pictures. Normally what I’d do is make sure that the pictures are a set size and I’d just make the list dynamic in one direction so it may end up showing 4.5 tiles which is normally fine as it’s a scrollable list.
But what if you have a list that will only ever contain say 10 items and you wish to use as much of the users screen as possible then each time the user changes the screen size you need to work out the optimal size of a tile/item.
Check out the demo here. This actually took me quiet a while to figure out how to do, I think the function to work out the size has gone through several iterations. (the example is based on the Tile class as that handles the layout and lets me do the nice animation moves when one tile moves around the screen on resize)
Here is the actionscript code that will work out the optimal size. I know that this function can be optimised further, but this will do to show you how its done. (possible optimisations: SQRT is not a nice function to call for the processor, use it sparingly, reducing number by just -1 each time isn’t great either, could reduce it by larger amounts then swing back a forth until I get the best fit).
//total number of tiles
var tile_count : Number = numberOfSlides;
//height of rectangle
var b : Number = unscaledHeight;
//width of rectanlge
var a : Number = unscaledWidth;
//divide the area but the number of tiles to get the max area a tile could cover
//this optimal size for a tile will more often than not make the tiles overlap, but
//a tile can never be bigger than this size
var maxSize : Number = Math.sqrt((b * a) / tile_count);
//find the number of whole tiles that can fit into the height
var numberOfPossibleWholeTilesH : Number = Math.floor(b / maxSize);
//find the number of whole tiles that can fit into the width
var numberOfPossibleWholeTilesW : Number = Math.floor(a / maxSize);
//works out how many whole tiles this configuration can hold
var total : Number = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
//if the number of number of whole tiles that the max size tile ends up with is less than the require number of
//tiles, make the maxSize smaller and recaluate
while(total < tile_count){
maxSize--;
numberOfPossibleWholeTilesH = Math.floor(b / maxSize);
numberOfPossibleWholeTilesW = Math.floor(a / maxSize);
total = numberOfPossibleWholeTilesH * numberOfPossibleWholeTilesW;
}
return maxSize;
If anyone else has a solution or knows of a better solution using actionscript (or anything else for that matter) I’d love to see it as although this works I’m thinking there must be a faster solution.
So you may have read my previous posts on the custom search that I created, well as suggested in a previous comment the information to create one then turn it into a open search search plugin and then into a firefox plugin is out there. It’s just not all in the same place.
So I’m going to go through the process and try to make clear each step of the way. Here is what I’m going to cover.
Create the custom search (hosted by Google)
Take new custom search and insert into wordpress
Create a OpenSearch plugin from code that’s compatible with the majority of browsers
Turn OpenSearch plugin into a firefox plugin so that you can list it under firefoxes search plugins
Make the browser automatically pick up the openSearch plugin to show user you have plugin available
So first you need to create the search.
1, Create Google custom search.
For this (AFAIK) you need a Google account and you then need to get a adSense account set up. This is how I found the custom search as it is part of the options on the general screen. I kind of expect that this option to create a custom search will be available elsewhere on the Google site but this is where I found it.
Once you go through the wizard that Google gives you, you get a choice. I’ve gone with opening the result inside Google. If you choose the last option then the end result will mean that you will get two bits of code to insert into your wordpress site. If this is the case then I’d have a look at a wordpress plugin to deal with the code. There are a few out there, but they may or may not work depending on your theme that you have.
I choose the hosted on Google option because – 1, should it (the search) be popular then it will not increase my bandwidth usage and 2, it makes it more offical if its hosted on a google URL (just my opinion).
You should now have some code from Google, something along the following lines
2, Insert code into wordpress
Now that you have your code you will need to find the searchform.php file from your theme. Should be inside wp-content->themes->{your theme} -> searchform.php
Open up that file and insert the new code.
I didn’t do anything to the Google code, just pasted it above the standard wordpress code so I now have 2 searchs on my site, one for the ‘Flex collection’ and one for my site.
Thats it, part 2 done.
3, Create OpenSearch plugin
First you need to get a URL that you can use for your search. So either do a search after installing your search in your wordpress blog or look at the code and put it all together to create one.
Fill in all the boxes (they’re all pretty much self explanatory), but as an example the two main inputs that have to be correct are the ‘Search URL’ and the ‘Search Form URL’
Pick a licence, then it will ask you to upload a file. Upload the XML file that you just saved. Then its just a case of editing the appropriate sections and you are now done.
Do a quick search for your plugin and you can now get a URL such as https://addons.mozilla.org/en-US/firefox/addon/11823 and send this round friends etc to get some reviews. Once you have a few reviews you can submit your plugin to be made public.
Feel free to review my plugin, I need some reviews so that I can submit it.
Finally.
5, Make the browser pick up the openSearch plugin when your site is viewed
The above image shows what happens if a browser picks up that the site it is displaying has a custom search tool that can be installed. It highlights a small button beside the search box.
To do this I’ve placed the following code into the header file
Use the above but replace the href with whatever URL you saved from part 3 (the mycroft.mozdev link) and obviously replace the title with something relevant to your search.
Then place that line of code into the header.php for your theme (or somewhere that will always get served up on your site, I just choose the header as that seemed appropriate). Put it beside the other links if your header file has them otherwise just make sure it’s in the head tag.
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);
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.
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 🙂 )
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.
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.
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 –
Rotating cube example
Funny video
Image (png)
blank purple Sprite
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.
.jpg "click to see app")
.jpg "google search")
.jpg "Flex menu")
.jpg "flex collection search")
