Motion Comics tutorial for LiveCode

Creating a graphics presentation or artists portfolio? Integrating artwork and code into something unique?

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Locked
capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Motion Comics tutorial for LiveCode

Post by capellan » Tue Oct 01, 2013 1:14 am

Hi All,

I have plans to publish in spanish, some tutorials about creating Motion Comics, using LiveCode. The tutorial will be created in english, for testing and review by developers in this platform. Then, translated to different languages.

These Motion Comics tutorials will be used as a gentle and enjoyable introduction to the basics concepts of programming.

Originally, I intended to create these tutorials only for kids and young teens, but many teachers and friends have told me that young adults and older grown ups would be interested too, if I included more mature comics, among the tutorials.

Every idea and suggestion about this project is welcome. Already, I have asked the moderators and participants of this website: http://comicbookplus.com/about which characters and titles could be atractive to each age group:

kids from 6-11
teens from 12- 16
young adults from 17-29
grown ups: 30 and older

narfstar, administrator of the website ComicBookPlus wrote the following comment:
--------------------------------------------------
[snip]

The Grown ups here are very fond of Peter Wheat also.

Depending on where you want to go with it,
the pre-code horror books are very popular.

Books like Horrific and others appeal to the teens and adults.

Teen boys and adults are very fond of the Phantom Lady archives.

As far as "teen comics" go I am partial to Vicky.
Lots of action/motion in the stories.
--------------------------------------------------

I will start with this character: Leon the Lyin' Lion from Charlton Comics. This character was featured in Zoo Comics,
Funny Animals and Atomic Mouse. http://comicbookplus.com/?dlid=15506

Just started dividing the panels in separated images using this Gimp script: Divide Scanned Images
http://registry.gimp.org/node/22177

To use correctly this script, some experimentation is required, but the pages that I have tested works really fine...
(although it creates some extra images that must be deleted)

This is the link to download all raw bitmap files for this Motion Comics tutorial:
https://dl.dropboxusercontent.com/u/383 ... 20v001.zip
Ender Nafi, software developer from Turkey, is already helping to process the image panels.

Still pending: converting these bitmaps in vector files, using Potrace or Inkscape.

The original goal is that all volunteers receive the Comic book panels in two different formats
1) Bitmap
2) Vector graphic

In this way, volunteers could work in the format and software of their choice.

Volunteer's tasks are:
1) separate the foreground characters from its background

For Gimp:
http://docs.gimp.org/en/gimp-tutorial-q ... arate.html
For Inkscape:
http://www.youtube.com/watch?v=1K1YL-JP8jc

2) Seamlessy restore the background
For Gimp:
http://www.youtube.com/watch?v=oiePG0QC4AM

After we complete the first tutorial, I will look for the characters and books that narfstar recommended, looking for a suitable story for the tutorial.

Each tutorial would require that me (and some volunteers) clean up and retouch all the panels of the history chosen for the tutorial so, if you have time to help, please tell us so.

Many thanks in advance

Al

endernafi
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: Motion Comics tutorial for LiveCode

Post by endernafi » Tue Oct 01, 2013 9:47 pm

completed:
* page28-00008
* page28-00007
* page28-00006



~ Ender Nafi
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

endernafi
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: Motion Comics tutorial for LiveCode

Post by endernafi » Wed Oct 02, 2013 4:25 am

There are some remarkable intellects in this world.
I wrote this statement because of Dr. Paul Harrison, coder of Resynthesizer plugin for Gimp.
I've used many content-aware healing tools in my time
but I must say, none of them can compete with this one.
Give it a try…
It's really astonishing.


Back to the subject;

completed:
* page28-00008
* page28-00007
* page28-00006
* page28-00005

download link: http://tinyurl.com/q8vrkgo

It's a time-consuming task
and unfortunately I can't allocate full time because of my own projects;
so it's going slow
{ slow but steady, I hope :) }

Best,

~ Ender Nafi
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Motion Comics tutorial for LiveCode

Post by capellan » Wed Oct 02, 2013 9:43 pm

Hi All,

In this link, you could download the first frame of page 25,
sprites cutout is still in progress, but layering is complete

https://docs.google.com/file/d/0B9ja3Yv ... DNQaEhXaVU

About the files edited by Ender, all images are really well done.
Congratulations Ender! :D

Ender made an excellent work with the halftone texture and
the sprite cutout.
Certainly, the GIMP plugin Resynthesizer preserve the
halftones screens. Only have to be really careful, selecting the
best source for the halftone, to preserve the angle
and appearence.

These are the files that Ender edited:
https://www.wetransfer.com/downloads/af ... 044/e46c3e

Barry is going to edit the frames of page 26.

In a latter stage, to create the vector files from these bitmaps,
we will follow these steps:

1) convert the frames to black and white
2) save this file with a new name
3) using a duplicate of this new file, apply coloring
to the characters and background using similar
colors to original's halftone screens.

Have a nice day!

Al

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Motion Comics tutorial for LiveCode

Post by capellan » Thu Oct 03, 2013 7:09 am

Hi All,

This zip file contains a folder with all images of page 25. These images are 8 bit png
files with transparency. Optimized from 6 MB to just 1.3 MB

https://docs.google.com/file/d/0B9ja3Yv ... sp=sharing

In a few hours, I will continue with frame 2 of page 26.

If you want to colaborate in the edition of all these bitmap files,
download all unedited bitmap files for this Motion Comics tutorial:
https://dl.dropboxusercontent.com/u/383 ... 20v001.zip

and perform these tasks:

1) separate the foreground characters
from its background

For Gimp:
http://docs.gimp.org/en/gimp-tutorial-q ... arate.html
For Inkscape:
http://www.youtube.com/watch?v=1K1YL-JP8jc

2) Seamlessy restore the background
For Gimp:
http://www.youtube.com/watch?v=oiePG0QC4AM

This GIMP file is an example of an image in process of edition:
https://docs.google.com/file/d/0B9ja3Yv ... DNQaEhXaVU

Have a nice day!

Al

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Motion Comics tutorial for LiveCode

Post by capellan » Thu Oct 03, 2013 8:53 pm

Hi All,

I have just uploaded the textures that I am using with Resynthesizer to edit the characters out from the background:

https://docs.google.com/file/d/0B9ja3Yv ... sp=sharing

Are you interesting in helping? Then download these edited panels:
https://docs.google.com/file/d/0B9ja3Yv ... sp=sharing
These are all panels from page 25.

Just noticed that sometimes is really difficult to get GIMP working at full capacity under Windows. If you are using Windows, you must install Python 2.7.x before installing Gimp: http://www.python.org/download/releases/2.7.5/

Notice: GIMP is not compatible with Python 3. For this reason, you must install the lastest release of Python 2.

You could download a windows GIMP installer from this page:
http://gimp-win.sourceforge.net/stable.html

Here, you could download Resynthesizer:
http://registry.gimp.org/node/27986

Installation instructions are here:
http://registry.gimp.org/node/25219
There are 9 pages of comments in this pages, so if you have a question about Resynthesizer, it was already answered in these pages.

This is an excellent and eye opening tutorial:
http://www.schwarzvogel.de/resynth-tut-sa.shtml

This GIMP file is an example of a panel in process of edition:
https://docs.google.com/file/d/0B9ja3Yv ... DNQaEhXaVU

The final results are the png files from the first link of this message.

Please, do not hesitate to ask if the tutorials about using Resynthesizer does not work in your installation.

Notice, please, from this sprites used in this Motion Comics tutorial, you will be able to make your own tutorial, not only about Motion Comics, but Interactive Storytelling and Games.

A famous game franchise, a Billionare game franchise, could be recreated easily using the capabilities of this platform.
Could you guess which franchise I am talking about?

Have a nice day!

Al

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Motion Comics tutorial for LiveCode

Post by capellan » Sat Oct 05, 2013 10:23 pm

Hi All,

From this link, you could enter a public Google Drive folder
with all files for this project:

https://drive.google.com/folderview?id= ... sp=sharing

Now, I am preparing the files edited by Ender to upload them
in the root of this folder. When all frames in a page are completed,
a new folder is created to store each frame and a zip file of this
folder is uploaded. In this way, everyone download a single
zip file of a compressed folder, but individual frames are available
for download, just in case that you need it.

Please, if you have any problem to download these files,
write back as soon as possible to fix it.

Thanks in advance!

Al

endernafi
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 296
Joined: Wed May 02, 2012 12:23 pm
Location: New York
Contact:

Re: Motion Comics tutorial for LiveCode

Post by endernafi » Wed Oct 09, 2013 7:15 pm

Completed:
* page28-00008
* page28-00007
* page28-00006
* page28-00005
* page28-00004
* page28-00003
* page28-00002
* page28-00001

Download link: http://tinyurl.com/m2e9qvg

Unfortunately, my deadlines are getting closer;
so I don't know when -or sadly if- I can start to other pages :/


Best,

~ Ender Nafi
~... together, we're smarter ...~
__________________________________________

macOS Sierra • LiveCode 7 & xCode 8

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Motion Comics tutorial for LiveCode

Post by capellan » Fri Oct 11, 2013 8:05 am

Hi Ender,

Many Thanks for editing the complete page!
I will upload all files to Google Drive's folder
after converting them to 8 bit png files.

Have a nice day!

Al

capellan
Posts: 654
Joined: Wed Aug 15, 2007 11:09 pm

Re: Motion Comics tutorial for LiveCode

Post by capellan » Sun Oct 27, 2013 7:16 am

Hi All,

Finally, all files for this project are complete
and uploaded to a public Google Drive folder:

https://drive.google.com/folderview?id= ... sp=sharing

https://drive.google.com/file/d/0B9ja3Y ... sp=sharing
https://drive.google.com/file/d/0B9ja3Y ... sp=sharing
https://drive.google.com/file/d/0B9ja3Y ... sp=sharing
https://drive.google.com/file/d/0B9ja3Y ... sp=sharing
https://drive.google.com/file/d/0B9ja3Y ... sp=sharing

Please, if you have any problem to download these files,
write back as soon as possible to fix it.

Thanks in advance!

Al

Locked

Return to “Digital Art and Portfolios”