Our second 14-19 (AWP) Area Wide Prospectus has now gone live. For more information on the product in general see the previous post about the Tameside AWP launch. This one is for Rochdale and you will notice that the new crisp, clean style of the Tameside one resonates through this one. The clean, easy to use search functionality takes pride of place and all the fancy ajax and javascript fanciness is here on this one as well along with the Careerstube content relevant video case studies and the advanced search and refining slider techniques.
Take a look and see what you think - all comments welcome.
Our first prospectus site is now live. It is, in my opinion, the nicest looking, has the best functionality and is the easiest to use on the market for this type of product. Each area across the UK is required by the government to provide a searchable online database of learning provision available in an area. This site is, essentially, a user friendly, fully searchable directory of education and training available in Tameside. Additional extras like ability to expand the search and look for courses within so many miles of your postcode, at certain providers, levels, age ranges etc, Boolean searching so you can look for a provider that supplies “art AND English AND Spanish”, embedding of relevant videos from our vast Careerstube video library for individual courses, searches and providers and integration with Ofsted to show school/college reports and a number of other fancy visual bits and bobs make this a great package all round that is at the forefront in this sector and one I really enjoyed working on. The design is simple and not cluttered yet visually interesting enough to appeal to the fairly broad 14-19 age range.
We have a load of other areas going live shortly with all sorts of fancy functionality and also some ILP (Individual Learning Plan) sites that allow users to record their educational experiences, arrange content on their dashboard, create CVs and the ability to create CV’s and information tailored toward a specific college/employer and send a token based invite to them to view their ILP as well as integration with our prospectus sites meaning when a user adds that a careers aspiration is to become an English teacher they are supplied with a series of links that are relevant to this career from the prospectus site and also a series of links to the pathways tool that shows them what they need to do to become and English Teacher and also what they can do after that.
Have a click around, see what you think. All comments are welcome and I am glad we have created such a solid product that can help 14-19 year olds plan their future.
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.
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.
Posts
0 comments:
Post a Comment