Amazing idea this. Back in the day at university I had a go with Fontographer and haven't really touched it since. This is similar but online. There are limited shapes so you don't have anywhere near the control you get when created characters in illustrator but it is still impressive. The tools are intuitive and the keyboard shortcuts make it feel like a desktop program. The fact you can download your typeface or view a gallery of others is a great idea. It's the equivalent of, say, Vecteezy but with a stripped down version of illustrator on the site to allow you to create the vectors there and then.
For some reason when Adobe released Flash 8 they gave the user the option as to whether to smooth an imported image or not. In the past this has been done by default and I can't really see why anyone would want the image not to be smoothed when scaling up but maybe that's just me. You now need to right click the image in the library and allow smoothing. This is all well and good when you have the image in your library but if you want to smooth an image that is being dynamically passed in your a bit stuck. Well, not anymore thanks to a recent tutorial I found on Frontend Multimedia .
Simply add this chunk of code to the top of your frame 1 actionscript exactly as is: _global.smoothImageLoad = function(imgURL, targetMovie) { var i=0 do { i++ } while (eval("_root.smoothImageLoadTemp"+i) != undefined) tmc = _root.createEmptyMovieClip("smoothImageLoadTemp"+i, _root.getNextHighestDepth()) tmc.createEmptyMovieClip("ti", tmc.getNextHighestDepth()) tmc.tm = targetMovie with(tmc) { tmcl = new MovieClipLoader() tmcl.onLoadComplete = function() { ti.onEnterFrame = function() { pixelData = new flash.display.BitmapData(ti._width, ti._height); pixelData.draw(ti); tm.attachBitmap(pixelData, 1, true, true); tm.smoothImageLoadComplete() removeMovieClip(ti._parent) } } tmcl.loadClip(imgURL, tmc.ti) } }
Then all you need to do is add in:
smoothImageLoad("image.jpg", mytargetmc)
Where image can be the path to your image and mytargetmc is an empty movieclip with that instance name that your image will be passed into. Hey presto - a nice smoothed image.
Video Smoothing
Even more baffling is the fact that the ability to smooth a video seems to be relatively hidden and unknown of. It is as simple as adding in:
Where flvPlyaback is the instance name of your flvplayback component dragged to the stage from your components library. Personally I'd have thought this would be something Adobe would be shouting about as there is far too much bad quality video online that could be improved by this one line of code.
Well, there you have it. Hope you found it useful. Anyone have any experience with this or can further improve this little bit of advice feel free to comment or get in touch.
Thanks a lot to Reece over at guerrilla-gorilla for this little link. Pictogame is a fun and easy way to create several flash games with the faces of all your friends. Simply select a flash game from the extensive list, upload an image of a friend, use the easy crop tool to select their face from the image and enter a few messages (such as 'Well done you killed Andy!')and voila.
Well, as promised here is a quick breakdown of the flash video player and how to create a custom skin.
First of all, there are several ways to import your video into flash. I have mainly been using the src and the import method. Import Method
File > import > import video…
You will be asked how you would like to deploy your video. I have been using Progressive as using the Flash Communication Server to stream it is a little pricey.
You will then be given several options for encoding your flash video. You can have a mess around with these settings to find exactly what you’re after.
When you get to the Skinning screen you need to select ‘None’ if you want to create your own player. Alternatively, there are plenty of built in ones you can choose from.
SRC method
This method uses the FLVPlayback component and references the actual .flv externally. Place an instance of the FLVPlayback component
This says the content path of the flvPlayback you just created is the src. This is the src referred to in the html you use to place your video player in your web page (more about this later).
Adding controls
Right, you now have your FLVPlayback component it is time to start adding some controls. Open the components palette again
window > components > FLV Playback custom UI
and you will see a selection of controls available. Simply drag the ones you want onto the stage. In the actions layer you created earlier add:
This assigns each control to the flvPlayback instance. Obviously you might not need to add all of these. It depends on which controls you intend to use. You will need to give each control an instance name. These need to match the names to the right of the equals sign in the code you just entered above. For example, the Play / Pause button would have an instance name of playpausebtn etc etc.
That is pretty much it for the basic flash player. If you export your movie (ensuring the flv is in the same location as the exported file) you can now add it to a page.
Adding the Timer
The timer isn't actually a component you can add to the stage but a small piece of actionscript you will need to add yourself. One thing with progressive download is the fact that until the entire movie is downloaded you cannot show the total time. You can, however, show a play head time by adding a movie clip to the stage. Inside that movie clip add a dynamic text box and give it an instance name of 'time'. Now, you want to check the play time every second so, in this movie clip, add a frame at 24 frames (or whatever you have your frame rate set to).
In the first frame add an actions layer and add the following actionscript:
This basically takes the playheadTime of the FLVPlayback, rounds it and displays it in the time text box. The bit towards the end styles the time in 0:00 format. For example, with minutes, if there are less than 10 minutes then it adds a 0: else it adds nothing.
Firefox and Internet Explorer embed the flash in slightly different ways which is the reason behind using the Object and Embed to do effectively the same thing.
The code marked in red is the source of the .flv file. This is also the same src that is referred to in the actionscript we added earlier. The code marked in blue is the swf you just exported of the player.
Customizing the flash player
Now you have your basic flash player working you can start adapting it to suit your needs.
Each of the controls is a simple movie clip. By clicking into each control your have the ability to alter the background shapes, sizes, colours etc of the buttons and icons.It's as simple as that.
For example, double clicking the stop button gets you into the StopButton movie clip. Note, the movie clip name is StopButton but the actual instance name refered to in the actionscript is stopbtn. It is important not to mix these up.
Here you will find an actionscript layer and 2 frames. The first one is the basic stop button, the second frame holds all the possible states of that button. E.g. hover, down etc.
Clicking in another level takes you to each individual state movie clip. For example, clicking on the hover movie clip opens up StopButtonOver clip where you can adapt the icon and background shape. If you keep clicking into the background shape and alter it it will affect all other places where that instance is placed on the stage. E.g. If you keep clicking into the stop button background until you can go no further then alter the colour, the background colour of all the other buttons will also change as they all use the same graphic as a background.
In conclusion
Well, I hope this has been useful. I noticed whilst typing that it is all a bit rambley so sorry if you have trouble following this but it shows the possibilities of customizing your own flash video skin. If you have any advice or tips please don’t hesitate to add a comment by clicking on the number of comments below and clicking ‘Post Comment’.
Just thought I'd do a quick post to let you know what I'm up to. I've been experimenting with flash video recently and have created a custom flash player. I realised there is a lot to video encoding and formatting I knew relatively little about before embarking on this current project. I have, however, learnt quite a lot of nifty techniques along the way and am over the moon with the outcome. I will be posting the player here to view once the site goes live and will probably do a bit of a tutorial as well.
This is amazing. Not only does the initial homepage go back to the roots of great search engines (ie a just text box and simple options) but the scripting and linking between results is great. It was described by adobe as:
“A relation-based search engine for Amazon.com that is made with Flash and ActionScript 3.0. Visualize a relation network of products from the data of "customers who bought this item also bought" by digging related products again and again. Amaznode is not only for searching but also good for researching and making an associate link.”
Is it the future of online shopping? Maybe not or, if it is, then a suitable method of finding one specific item without loads of options appearing should be sought. What it is, however, is a really nice visual method of viewing relationships between products. It’s like Thinkmap Visual Thesaurus for the online retail world.
Visit the site here: amaznode.fladdict.net/ or check out Takayuki Fukatsu (designer and developer of Amaznode) and discover some of his great flash experiments.
Let me know if anyone has any other examples of really nice ActionScript3.0 stuff.
There seems to have been a flurry of activity in this area over the last 6 months or so and a few of the best examples are listed below - 3 of which come from the Digg Team (in partnership with Stamen Design). Although these methods might not be the clearest way to navigate information there is a definite need for fresh ideas in this area. As the web continues to grow and the amount of information available to us expands we need some method of filtering out what we don't need or, in the case of the Digg examples, a way of seeing information as it becomes available and being able to scan for stories of interest.
3D Real Time Blog Post Rendering I was sent this link from a colleague, Chris (tempinbox.com), which shows actual blog post activity mapped onto a 3d world. Not sure how useful this would be but it is a really nice visual effect.
Digg BigSpy News stories being dugg are placed at the top of the screen. Larger stories have more diggs.
DiggStack DiggStack is amazing. As well as using colour coding and size to represent amount of Diggs the actual users who have digged a story fall from above and land on it to 'Stack' it up. The name of the stroy also appears below.
DiggSwarm A circle is drawn as new stories are dugg. Diggers swarm around titles and make them grow. Related stories are woven together using lines and it is possible to distinguish between popular and unpopular stories with size and colour.
I recently completed several tutorials from Lee Brimelowe (theflashblog.com) on creating carousel interfaces. It is quite a complex use of actionscript and external XML. The icons and text are completely outside of the flash movie and are contained within an external XML document. The size, positioning, reflections, movement etc are all created using actionscript.
You can view the finished product here: Carousel UI
The other day i found a site called GoodWidgets which lets you link to your image libraries from places like Flickr or upload your own. The site then embeds your images in an interactive flash movie which you can place on your site or blog. There are several templates to choose from including an image gallery which resizes according to image dimensions, an interactive flash book, a slider gallery and many more and for a very small fee you can have the Goodwidgets watermark removed and increase the number of images allowed.
Posts
3 comments:
Post a Comment