Motion Comics tutorial for LiveCode
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
Motion Comics tutorial for LiveCode
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
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
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: Motion Comics tutorial for LiveCode
completed:
* page28-00008
* page28-00007
* page28-00006
~ Ender Nafi
* page28-00008
* page28-00007
* page28-00006
~ Ender Nafi
~... together, we're smarter ...~
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: Motion Comics tutorial for LiveCode
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
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
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
Re: Motion Comics tutorial for LiveCode
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!
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
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!
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
Re: Motion Comics tutorial for LiveCode
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
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
Re: Motion Comics tutorial for LiveCode
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
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
Re: Motion Comics tutorial for LiveCode
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
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
-
- VIP Livecode Opensource Backer
- Posts: 296
- Joined: Wed May 02, 2012 12:23 pm
- Location: New York
- Contact:
Re: Motion Comics tutorial for LiveCode
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
* 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
__________________________________________
macOS Sierra • LiveCode 7 & xCode 8
Re: Motion Comics tutorial for LiveCode
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
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
Re: Motion Comics tutorial for LiveCode
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
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