Hey everyone!
I keep meaning to update this blog with various titbits and stuff, but I never seem to have the time - anyway, thought I’d post up this wee drop down (combo) menu class I decided to build yesterday - It’s not been from any specific project, I just decided that the flash community needs a better dropdown that the horrific one included as standard. Anyway, it’s pretty basic just now, but it’ll do the basics and it’s totally skinable which was my main aim.
Just finished the first draft of a site for photographer Trent Bailey… I essentially got free reign on this for the page transitions - just the basic layout was to be kept the same… so I sat down and tried to figure out something I wanted to try out for a while… a 3d page transition.
For this I had a few things to figure out before I started the project - One of them being what method to use for the transition; A) use f10’s new 3D api, B) use papervision and it’s interactive material method, or C), use flash’s Bitmap data to snap each page then add it to a 3d engine to make the flip then remove from the stage. In the end I choose the last method, because using f10’s 3d api would mean using f10 which I wasdn’t too keen on as it’ll be a while before everyone is using it. And I didn’t use papervision because even adding your displayObject to a plane as an interactiveMoveMaterial doesn’t have complete functionality (for example, you can’t use input text in them). So I went with the snapshot method… Now I needed a 3D engine.
After building a working example in Papervision on which I’d had experience in the past, I decided to look at five3D which was a much lighter engine - after all using papervision just to snap a page, flip it and remove it would be akin to driving a car down your driveway to pick up the papers.
Anyway… I have so much good to say about five3D - it made things an absolute breeze to build the pageFlipper - it’s developer Mathieu Badimon has made a great job of it…
Right, on to how I made it! Now baring in mind I built this as a proof of concept to myself - so it’s not all tidied and put into a class - I built this on… the timeline! sshh, I know….
CODE
//FLIP PAGES
function flipPages(originalMC:MovieClip, destinationMC:MovieClip, axis:String = "X"):void{
if(_pageInTransition == false){
//Note: Make sure you import the five3D classes needed.
_pageInTransition = true;
//init
destinationMC.visible = false;
//Snapshot mc's
//Create bitmapData for both the mc's
var imageOriginalBMD:BitmapData = new BitmapData(720,470, false, 0xFFFFFFFF);
var imageDestinationBMD:BitmapData = new BitmapData(720,470, false, 0xFFFFFFFF);
//Draw mc into BitMaps
imageOriginalBMD.draw(originalMC);
imageDestinationBMD.draw(destinationMC);
//The Flip
// We create a new Scene3D named "scene", center it and add it to the display list.
var scene:Scene3D = new Scene3D();
scene.x = 720 / 2;
scene.y = 470 / 2;
main.pages.addChild(scene);
//Create a Sprite3D holder - to hold our bitmaps
var bitmapHolder:Sprite3D = new Sprite3D();
bitmapHolder.childrenSorted = true;
scene.addChild(bitmapHolder);
//Add out Bitmaps to it
var originalBitmap3D:Bitmap3D = new Bitmap3D(imageOriginalBMD);
originalBitmap3D.x = - 720 / 2;
originalBitmap3D.y = - 470 / 2;
originalBitmap3D.z = 0;
bitmapHolder.addChild(originalBitmap3D);
var destinationBitmap3D:Bitmap3D = new Bitmap3D(imageDestinationBMD);
//bitmapHolder.addChild(destinationBitmap3D);
//Remove Original MC's
originalMC.visible = false;
function finishFlip(){
bitmapHolder.removeChild(destinationBitmap3D);
destinationMC.visible = true;
_pageInTransition = false;
}
} else {
trace("Already in transition!");
}
/*//Add to Stage
addChild(imageOriginalBM);
addChild(imageDestinationBM);*/
}
Now you might notice a bit of trickery here… what I had originally programmed was that the two snapshots of the pages would be put back to back, then all you’d need to do would be rotate the Sprite3D in which they both were held… well, I’m not too sure if this is a bug with five3d, or something went wrong with my code (probably the latter)… but everytime you rotated, the backMc, or Destination mc would disappear. So I ended up having the front mc rotate 90, then remove it, and adding the back mc and rotate that from -90 to 0… if anyone has any luck figuring it out, gimme a comment!
Anyway, hope this helps anyone, but I had fun doing it!
November 26, 2008 at 10:31 am · Filed under Design, Personal
Ah, man! have I been busy…
Just launched http://www.ireneneuwirth.com with Designed Memory a few weeks back, and It’s been getting a lot of good feedback… I actually built an early version of the site just with AS3 all in one fla, but after coming across Steven Sack’s Gaia Framework, I rebuilt the lot and It’s turned out great! It’s got a basic admin system that adds and deletes new Collection items and press items to a mySQL database and even has this awesome little crop utility so the user can generate a thumbnail of whatever part of the image they need.
A lot of work, but a lot of fun.
Also been working on a lot of other little projects, some launched some not… but I’ve got another huge project on the go and the moment building a flash store front / admin for a New York Fashion Designer… no names yet.
I’m currently in the middle of building quite a large content management system in AS3, and I’ve come to the part of working in a decent file manager - so far it can upload, rename, delete and preview (only images) at this moment, but I need to add other things - a downloader, and a thumbnailer, which I’ve spent the last two days doing, anyway - I was looking into how to improve the preview system I have in place… it would be nice for the system to automatically detect what kind of file I’m looking at and decide what the correct way to preview it would be. To do this I need to have flash look at the extension each file has and take it from there - anyway here a little bit of code that’ll remove the extension…
function extractFileType(file:String):String {
var extensionIndex:Number = file.lastIndexOf(".");
if (extensionIndex == -1) {
//No extension
return "";
} else {
return file.substr(extensionIndex + 1,file.length);
}
}
trace(extractFileType("file.jpeg");
And here’s a sneak peek of the thumbnailer - apologies about the photograph - I’ve there’s enough demand I might clean the code up a bit and release it on here…
And here is a glimpse of the editor and file manager - It’s so beta I haven’t even got round to labeling the buttons!
Made my first class - quite excited about it really! Anyway, it started out as a need to get round the fact that flash can’t use scale9 movieclips as masks, which means we can’t get any nice rounded edge masked tweens, so I wrote this to get round it. In the end it turned out really nice, and I thought I’d share it with everybody; it’s going to kick ass for building interfaces - anyway if anyone uses it gimme a shout..
May 13, 2008 at 7:30 am · Filed under Design, Music
Well, that’s that, finally Driveby’s album is out… went to the release party last night, and they played a played an awesome show. An after we went to a nice club and got drunk… Colin and I tried to buy a blow up sheep in the toilets only to find they were sold out (I’m guessing there are a lot of lonely men in Glasgow). Me and Nic then stumbled back to hers, where I attempted some as3 scripting at 2 in the morning (Jo you owe me massively). Only to wake up at quarter past 7. So I’m currently running on 3 hours sleep, 1 coffee and 1 greggs cheese and onion pasty. I’m am fucking Hardcore.
February 27, 2008 at 6:28 am · Filed under CMS, Design
Just spent the last few days working on a XML backend for the band Matt Pond PA - it’s not something new to me as I’ve worked on a few backends over the last 2 years or so, but whereas normally all the data is sent to and fro a MySQL database, this had to be xml base, which made everything a bit different for me… Anyway you can see the screenshot below…
After I get some jobs I’ve got on the go out the way, I’m going to try and work on something like this to release open source as I’ve had a few folk mention the need for a admin system to build in to their projects. Keep a look out!
Hopefully someone will find this useful, it’s the full flash source to an e-card I build for the band Driveby Argument, who are by the way utterly excellent, and I implore you to check them out. (I also did their wee flash website).
If anyone finds it useful even just a little bit then that’s awesome, and I’m glad to have helped. Although please don’t just create a carbon clone, for a start - where’s all the fun in that! If you do end up using it, send me a link or at least post a comment!
January 19, 2008 at 8:14 am · Filed under Design, Random
…you lie in bed trying to find the ’shut down’ button.
…you laugh at things with the typefont ‘Comic Sans’.
…you find a nice girl in a bar/club, but realise you could go to town with the clone tool in photoshop.
…you cut your toenails to look like absolutly perfect Bézier curves.
…upon seeing artwork of any description you recognise the font but don’t want to say outloud for fear of being found-out an absolute freak.
…you start to think that CMYK might be a good name for your child - you’d pronounce it ’simique’.
…you start to despise friends that write you emails in Times New Roman.
…you start to despise the ’shitty pixel font’ used on your mobile.
…logging in on your friends PC you realise that facebook is in verdana - not Lucida Grande like your Mac.
…your girlfriend doesn’t exist during the days of Macworld / CES.
…you wonder what it would be like if Microsoft made cereal.
…you take a bite out of an apple, look at it and laugh.
…you laugh at the post on Digg about the fake MacBook Air manilla envelope but then secretly want it.
…the format war between HD-DVD and BluRay is of more concern than the current war in Iraq.
…as an Mac Fanboy you try and persuade PC’s users to see the light and come across to ‘the best os ever made’.
…as a PC user, you are determined not to move from vista, not because you think it’s better but as to not give those mac fuckers the self satisfaction.
…you think that ‘Office Space’ touched you more than any other movie.
…you visit Digg dot com first of all when you start up Safari/Firefox (FUCK IE! woot!)
Just thought of a new one…
…you write blog posts titled “You know you’re a geek when…”.
- I’ve there’s enough demand I might clean the code up a bit and release it on here…
