Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Mark Billen
2nd August 2010

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

17 Finish the symbol

Interactive 3D comic scenes with Flash CS4

Alt-click frame 75 of the code and drag the duplicate Actions frame to frame 80. Now click on the ‘Scene 1’ above the top-left of the stage to return to the main timeline. Drag the ‘perspective’ symbol to the stage and name the instance ‘frame_mc’. Position at 721, 353 and 0 for each axis.

18 Set the Center point

Interactive 3D comic scenes with Flash CS4

In the Transform panel change the 3D Center point to 417, 256 and 0 for the respective axis. Add a new layer and open the ActionScript Editor. On the cover CD open step18code.txt and copy the code into the ActionScript panel. This will give movement to our scene as the mouse moves, plus it allows for clicks to progress the story.

19 Tween the symbol

Interactive 3D comic scenes with Flash CS4

Right-click on layer one and create a Motion Tween. Drag the end frame to frame 20 then position the ‘frame_mc’ symbol on the stage to 551, 315 and -126 on the respective axis. Now add a keyframe at frame 20 of your ActionScript and a ‘Stop();’ command to stop the playhead here.

20 More tweening

Interactive 3D comic scenes with Flash CS4

Select frame 21 of layer one and press F5, then right-click and choose ‘split motion’. Select frame 30 and press F5. At frame 30 move the symbol to 701 and 344 on the x and y axis. Alt-click on the code keyframe at frame 20 and drag this over to frame 30. Then duplicate the frame again, positioning at frame 33.

21 Final step

Interactive 3D comic scenes with Flash CS4

Select frame 33 of layer one and press F5. Right-click on frame 31 and choose ‘split motion’ from the drop-down menu. Select frame 33 again and move the symbol to 655, 267 and 140 for the respective axis. Save the document and press Ctrl/Cmnd+Enter to test your movie, clicking to advance the story.

Pages: 1 2 3 4 5

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    3 Comments »

    • chief said:

      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.

    • email fax said:

      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.

    • madpixl said:

      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.

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    * Required fields