Interactive 3D comic scenes with Flash CS4
Publishing your own interactive comic is simple with Flash, we explore how to set up and make interactive 3D scenes
Comics have far reaching influence these days, following Hollywood’s pillage of the best and most successful comic book tales as they try to cash in on ready-made audiences. DC Comics has recently attempted to turn its comics into digital adventures by releasing titles such as The Watchmen and Batman as digital comics on DVD and Blu-ray. These comics are paced to audio to enhance the stories so that they can be watched on the home TV.
In this tutorial we are going to up the ante as we create a more immersive interactive experience. Instead of simply playing the comic, we will create a 3D scene by placing content on different z depths in CS4 and allowing the user to move the mouse round to actually look into the scene. To advance the story the user will click the mouse button to move from frame to frame. You can change the content in the tutorial for your own comic images.
This article was originally authored by Mark Shufflebottom and appeared in Web Designer issue 168. You may download the companion project assets by clicking here
01 Setting up the project
From the project files open the ‘start.fla’ file in Flash. In the properties panel change the size of the document to 800×440 pixels then look in the library to see the assets that have been split into folders so that they are easy to use. Press Ctrl/Cmnd+F8 to create a new symbol, name it ‘perspective’ and make it a Movie Clip.
02 The first scene
Open the scenery folder in the library and drag the ‘corridor’ symbol onto the stage. In the Transform palette increase the size of the corridor to 200%. Position this at -1102 pixels on the x axis, -580 pixels on the y axis and 300 on the z axis. Now position the corridor in the background of the perspective frame.
03 Add your hero
In the hero folder of the library drag the ‘hero_move’ symbol onto the stage positioning this at -382 pixels on the x axis, -314 pixels from the y axis and 246 pixels on the z axis. Add the ‘sadus1’ symbol from the enemy library onto the stage and position at -658, -382, -50 pixels on the respective x, y and z axis.
04 Add the glow
From the props folder in the library drag the ‘glow’ symbol onto the stage, use the Modify>Arrange menu to send the glow back behind the ‘enemy’. Position on the z axis at -50 pixels and in the Properties panel add a 15 pixel blur filter. Click on frame 30 and press F5 to extend the timeline, then add a new layer.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
This is all good and well, BUT what about html5 and all this talk about the demise of flash…I myself am a big fan of flash, but there’s so much talk about the ‘death’ of it, and in reality a great target market ‘the ipad’ iphone blah blah, can’t enjoy these.
The demise of flash is likely greatly exaggerated. That said I hope the increased competition to flash will force Adobe to lower it’s exorbitant prices and keep a better security track record.
The iPhone and iPad are foolish not to enable flash. If all the other smart phones offer it eventually they’ll have to cave in and do so themselves.
It’s unlikely (or would take a long time) that HTML5 would have development tools that match the animation capabilities of flash.
If HTML5 kills flash as a web design tool? Good riddance. But HTML5 is for web design. Flash is for interactive web programs and games. HTML5 may budget the ground where Flash has been one of the only options for great interactive website content but it will likely only replace it in the realm of website design, not web animation and games. Not for some time anyway.
Flash will likely export to html 5. The later versions will likely use and extend javascript plugins and libraries similar to jquery, if not jquery itself. – just a guess.