• Home
  • Tutorials
  • Video Tutorials
  • Forum

XtremeSkill.com

Browse XTREME

Home
Tutorials
Video Tutorials
Forum
External Tutorials
Submit

Browse Tutorials

  • HTML Tutorials
  • Adobe Illustrator Tutorials  
  • Maya Tutorials  
  • 3d Studio max  
  • Flash  
  • Adobe Photoshop Tutorials 

Friends

Surreal GFX.com

 
GrandWallpapers.com
 
FinalPrestige.net
 

 


Comic Book Animations in flash PDF Print E-mail

WHEN NICHOLAS DA SILVA BOUGHT HIS FIRST IPOD, HE DIDN’T EXACTLY DOWNLOAD CONTENT FOR IT. HE CREATED HIS OWN…

WHEN I FIRST began working on Hitless, I wanted to do something different with the production and the delivery of the series. I had already ruled out printing the series as an option and instead opted to embrace the web to deliver the series. Then in 2005, I had an epiphany. Having bought my first PSP and iPod, I was so amazed by their impressive screen display that a light suddenly went on in my head. Why not produce the series to be viewed on these devices? There was only one problem that I faced. How do I create one set of comic book panels to fit on devices that have different screen formats? This tutorial will not only explain how I solved my dilemma, it will also teach you how to mesh traditional comic book production and new digital techniques to produce your very own digital comic book, one that can easily be cross-purposed to fit a wide variety of hand-held devices and platforms.


1. Preparing your panels
I will first explain how traditional comic books are produced. From the cover CD, open the file digicomic_ layers.tif in Photoshop. Via Window>Layers, launch the Layers palette. You will see four layers labelled Penciling, Inking, Coloring and Lettering. These are the four steps.

2. Pencilling
Pencilling transforms our story into a visual format. In producing Hitless, we start with loose pencils on paper, usually working with a non-photo blue pencil (not visible when photocopied, reproduced or scanned). We finish with tight pencils, creating a detailed panel for our inker.

3. Inking
The next step is inking, where we interpret our drawing into reproducible, camera-ready art. We tend to stay within the penciller’s original intent, while also adjusting any mistakes in the drawing. Once done, we scan the art in B/W mode as a bitmap file with a resolution of 600dpi.

4. Colouring
Our next step, colouring, is done digitally. Our choice of program is Photoshop CS3. First, we must first convert our bitmap file to Grayscale and then complete the change to RGB or CMYK. Since we are creating our comic book for the digital age, we should set the colour mode to RGB.

5. Lettering
Lettering is done digitally using Illustrator. Here, we add the dialogue (talk balloons) and sound effects to our panels. Lettering may seem like the least important step in the process, however, it tells our story. Lettering is a graphic element that contributes to the mood of the story.

6. Getting started
Now that we’ve gone over the basic steps of creating comic book panels, let’s start creating our own digital comic. We need to determine the panel size for our comic book. Fortunately, I’ve prepared a handy template. From the cover CD, open the file digicomic_template.fla in Flash.

7. Preparing your panels
Hit Modify>Document to view the Document Properties. The stage is set at 960 x 540 pixels, which will be the final image size of our panels. When we export our final comic book from Flash, this dimension will allow us to export our comic book for both standard and widescreen viewing.

8. Comic book template
Looking at our template, you’ll notice a series of lines and two solid bars on the stage. The solid bars represent the difference between viewing/exporting our digital comic book for standard (4:3 aspect ratio) and widescreen (16:9) format. The lines represent our action and title safe areas.

9. Action safe area
The action safe area, represented by the inner dashedline box, is the area where all the important action or movement should appear. Anything outside of this area may be clipped off by some screens. The action safe area is about ten per cent smaller than the image size (stage size).

10. Title safe area
The title safe area of our template represents the maximum area in which we can place our text (talk balloons) and captions. This area is 20 per cent smaller then our stage size. If we place text outside of this area, our text may end up close to the edge of our viewing screen.

11. Number of pages
In the Hitless series, every three panels represent one standard comic book page. A typical story is usually 81 panels. Feel free to make your comic book as short or long as you want it to be. Just remember that one panel of your story is represented by one frame on your timeline.

12. Understand the template
Before we import our final panels into Flash, let’s take a look at our template. The first two layers, Guidelines and Bars, serve as a guide for placing the panels and text into the timeline. These remain locked. Our remaining layers, Lettering and Panels, are designated for our content.

13. Standard vs widescreen
Our current template represents how our comic will appear when exported for standard screens. Hide the Bars layer. Click the eye icon above the layers. A red X will appear in the eye column of that layer. This is how our comic will appear when exported for widescreen viewing.

14. Saving the panels from PS
Let’s prepare our panels for Flash. Assuming that you’ve created your panels following our four steps, let’s first save a hi-res version of our colour panels for archives. TIFF is our favourite format. With our panels opened in Photoshop, choose File>Save As. Select TIFF from the Format menu.

15. Saving to import into Flash
Now we are ready to save our final panels in a format that we can import into Flash From Photoshop, choose File>Save for Web & Devices. Here we can optimise our image for the best screen view. I recommend saving the file in JPEG format with maximum quality (100).

16. Labelling our panels
Next, we need to give our panels a unique filename. Label your files using a sequential numbering system. For example, if your comic has more than 99 pages in length, begin with 000.jpg (eg, 000.jpg, 001.jpg, etc). If your comic book is less than 100 panels in length, begin with 00.jpg.

17. Import panels into Flash
Select frame 1 of your Panel layer. Hit File>Import>Import to Stage. Since we’ve used a numbering system for labelling our panels, Flash will recognise that your first panel is part of a sequence of images and ask if you would like to import all the images in the sequence. Choose Yes.

18. Adjust our guidelines
Note how Flash created additional frames to match the number of panels being imported. For the Guidelines and Bars label, simply click on the last frame of each layer and press the F5 key. For the Lettering layer, manually create empty Keyframes for each panel with text.

19. Insert empty Keyframes
Select frame 2 of the Text layer and select Insert> Timeframe>Blank Keyframe. This will add a blank Keyframe to our layer. We need to add blank Keyframes on every frame to match the number of panels in our comic book. This includes panels that don’t require text.

20. Add our talk balloons
To add talk balloons to our panels, we can create them directly in Flash or import them from Illustrator as AI files. To import your talk balloons from Illustrator, select the designated frame on your Text layer and hit File>Import> Import to Stage. Select the desired AI file and click Import.

21. Talk balloons to symbols
With our talk balloon still selected from Import, choose Modify>Convert to Symbol (F8). Now give your symbol a name. I recommend a name based on the current panel number. This will make it easier to find your symbol in your library. Now select the Graphic radial button and click OK.

22. Export our comic book
Now that we have all of our talk balloons and sound effects in place, we are ready to export our panels. Let’s first save a copy of our FLA so that we have one for widescreen export and one for standard. Next, we need to set our template layers as guide layers.

23. Hide our template
To create guide layers in our widescreen FLA, select the Guidelines layer, Ctrl-click and select Guide. Note that a Guide icon appears to the left of the layer name. Repeat this step for the Bars layer. Guide layers do not get exported, so they will not appear in the published file.

24. Export for widescreen
Let’s export our digital comic book. Choose File>Export>Export Movie. Select a New Folder to save the digital comic book in. Name the new folder and select Create. From the Format menu, select JPEG Sequence. Flash will now save out all the frames that make up the

25. Ready for standard viewing
Now to export the standard version of our comic. We need to make a few modifications to our FLA before exporting our frames. Open the standard FLA and set the Guidelines and Bars layers to Guide layers. Select Modify>Document and change the dimensions to 720 x 540 (4:3 aspect ratio).

26. Preserve our safe areas
Since we’ve reduced the width of our stage size by 240 pixels, we need to move all of the graphics in all frames and layers over to the left by 120px to preserve our action and title safe areas during export. First, unlock all layers. Now click the Edit Multiple Frames button in the timeline.

27. Select all frames and layers
Click Modify Onion Markers and select Onion All. Now, select Edit>Select All. We’ve selected all the elements that make up our comic book, including our guidelines, so we can move everything at once and avoid realigning everything individually. Now we can move our frames.

28. Moving our frames
Now that all of our frames are selected in our layers, all we need to do is enter a value of –120 in the x field of our Property palette and hit Return. Your guidelines, colour panels, talk balloons and sound effects are now positioned for export. We are also ready to export our frames.


29. Export your frames
Choose File>Export>Export Movie. Create a new folder for the standard version of your comic book. From the Format menu, select JPEG Sequence and let Flash do its thing. You have now successfully created a digital comic book that can be viewed on standard and widescreen formats!

 


 thanks web designer mag

 

 

xtremeskill.com

Comments
Search
Only registered users can write comments!
Powered by !JoomlaComment 3.26

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 
< Prev   Next >
[ Back ]

http://xtremeskill.com, Powered by Joomla! and designed by SiteGround web hosting