Educational Games and more MJPage Design

MJPage Design

NOVEMBER 2020

Sometimes it is hard for kids to understand the difference between adjectives and adverbs. This little game helps them in mastering the difference. As a bonus, it is includes the dinosaur's story and teaches about different types of dinos: 2 birds with one stone!

OCTOBER 2020

Here is a little game you might want to get your elementary student try. Percentages can be confusing. This will help improve their knowledge in mathematics and prepare them for harder math in the future.

APRIL 2020

With a mandated stay-at-home in effect, looking a the stars could be a nice passtime at night. Most people consume movies at an amazing rate. Time to go outside!

If you can't here is a little game you might want to try. Are you good in astronomy? It is time to find out.

MARCH 2020

When in mandatory confinment, it is still possible to learn about Astronomy. Blue Stars and Red Dwarfs seems like a good subject to explore!

FEBRUARY 2020

In the face of adversity as we are facing now, we can lift our eyes toway to sky and still learn about interesting subjects. This is what we did with this Astronomy lesson about our moon.

JANUARY 2020

Upper grades students still like educational grades and it is fun to measure one's skills in different ways. A little sci-fi is an interesting way to present information and challenge your students.

November 2019

Animate CC is Great!

It's been over a year since I switched from Edge Animate to Animate CC.

Interesting switch. It took a little while to get used to it but I am now pretty comfortable with it. I have mainly continued to publish projects for HTML5.

ANCC aka Animate CC is well suited for HTML5. The setting is a little different from Edge Animate which was based on CSS. So the timeline is a little different but you get used to is pretty quickly. The other thing you have to understand is how the scope of elements works. There is a main timeline and then there are symbols who have their own timelines and can also contain other symbols. The coding language of course is JavaScript and is very similar to that of Edge Animate.

Of course ANCC still has AS3 (Action Script 3). You can publish for Android, Iphones, Ipad, etc. ANCC is still loved by many animators for producing 2D and 3D animations, presenting videos, creating ads.

So, if you have not already tried it, then now is the time! I will post tutorial in the very near future.

June 2019

A Fun Project

As I was reading numerous posts on a Facebook group, I discovered that a large number of women are into the nail dipping fashion. So I decided to write an app that would allow them to decide what they want to do next for their next manicure.

It took me quite a long time to finished it because this involved making about a thousand images. Yes that is 1000!!! Anyway, I posted it some time ago on the group page and got wonderful reviews.

So I thought I would share it here too. ENJOY!

BTW I am learning backend development on my spare time. Exciting! More on that later. All I can say I am learning from two great guys: Colt Steele and Ian Schoonover at Udemy. Check them out.

November 2018

Animate CC (AKA ANCC) and JQuery

In case you are wondering , you can use JQUERY in ANCC and it is easier than what you may think. Simply open the action panel and select global. You can choose to use a file that will reside in your web directory or a link to the CDN of your choice.

here

*

October 2018

So after a few month working on other software, I decided to get back to Animate CC, aka ANCC.

The part of ANCC that interests me the most is the CANVAS/HTML5 capability. After using Edge Animate for several years, publishing to HTML5 is a logical move. I have already mades several samples for the ANCC forum and I am posting today a couple of examples below.

I will probably post several tutorial in the near future.

*

SEPTEMBER 2018

Pixel Art

A few years ago, Pixel Art made a come back. Many of you remember the all-time favorites like the Mario Brothers, Keen 4,5, and 6, Duke Nukem, and Jazz Jackrabbit to name a few. Many of these games were classified as shareware and you could download them from bulletin boards (this makes me feel old!) and play the free part of the games. If you wanted to progress further, you had to buy the other levels.

For those of you who do not know what a bulletin board was, it was the pre-internet way of connecting with other people, an early social media outlet. Many bulletin boards offered shareware and discussion areas where you could share your thoughts about many things including the games you were able to download.

Downloading in those days took a lot of time since you were dialing to the board with a modem at the amazing speed of 56 kb/second! Games needed to be small in size and art was done in pixels. Despite the limitations, pixel art was incredible.

Considering the revival of pixel art, I decided to take a class not because I cannot draw but because I needed to get back to basics after many years working in high resolution. I found a great course at Udemy, Pixel for Video Games led by Marco Vale a long-time game artist. He really is a great teacher and I picked up lots of information and tips during the course.

There are other Pixel Art courses on Udemy that are also informative and worth your time such as:

  • Learn Pixel Art for Games by James Doyle
  • Learn Professional Pixel Art and Animations by Jaysen Batchelor

I started to make elements for my next game and also some Aggie football-themed art just for fun.

apple lightbulb lightbulb Aggie Fan Aggie player Aggie fan with mascot icon

*

March 2018

Scirra launched Construct 3 several months ago and I spend time with both Construct 2 and Construct 3 versions.

Eventually, I will switch to Construct 3 entirely as they will start adding features that will not exist in Construct 2.

February 2018

Construct 2 game platform

I am currently working on an educational game to help little kids learn the alphabet. It is a side scroller game and a puzzle game at the same time. Kids will enter a school from the street and arrive in a main hall where they can choose a door for each letter of the alphabet. These doors will all lead to a room with a unique theme and a variety of objects. The player will have to collect the objects that start with the letter. When they are done, they can return to the main hall. There they can enter a new room.

Below are some screen shots of the game which is still in its early stages.

JANUARY 2018

Finally got some time to make some samples. Below is an automatic scroller. This system could be used as a simple gallery.

Example 1

I used a simple code with setInterval() to move the text and images in the divs. These are in the UI

Example 2

I made a small example for a friend who wanted to use a custom scrollbar. I had previously used my own css and it was workking great on webkit browsers but not on firefox. So I decided to try slimscroll and it works quite well.

You can find the documentation and examples here.

MARCH 2017

Construct 2 training continues...

Learning a new software takes time but I am getting there and enjoying it a lot! I am adding some little examples made while going through tutorials. These are just very basic example but I will post more advance games in the near future. Again many thanks to John for his tutorials.

Check these below on the kids page!

  • Basic Drag n Drop: Match Fruit and Fruit Names
  • Basic Platformer: The Cake Factory and Cut the Flowers
  • Basic Drag and Drop plus Matching Game with Physic
  • Basic Addition Game

FEBRUARY 1, 2017

laugh icon

It has been a long ride trying to learn Construct 2. It is a very different type of game platform add getting up to speed takes some concentration and time. It seems that now that I am getting comfortable with it, it will become easier and easier to accomplish what I want in a game. I am posting a simple one today in the Kids Educational Games section.

I want to thank the Udemy's tutorial authors whose great courses allowed me to progress in C2:

  1. Jeremy alexander
  2. John Bura
  3. Greg Pug
  4. Roland Zelhof

Udemy is a pretty cool place to learn a lot of stuff and it is not too expensive, especially if you pick up a sale!

painful icon

On the Edge Animate side, things have been rocky for the Mac users who decided to upgrade to Sierra because Edge Animate refuses to work in this new environment. Unfortunately, it seems that Adobe does not want to do anything about the situation, so Mac users are in a bad spot.

As a windows user, I still can use Edge Animate and still mornitor the forum, but I think that C2 will now be my main platform.

scared icon

Next, I intend to learn Unity 2D/3D and this should be another wild ride for me! Learning something new is always a challenge but is also a lot of fun.

OCTOBER 12, 2017

Edge Animate and Construct 2

I just added the Kids Educational Games page.

I will add more games on a regular basis. You can see that I will cover the elementary grades in all subjects. Of course this takes time because I want the games to be fun but also convey information, skills to learn, and concepts.

Nothing is very complicated but each piece includes a number of different features that can be done with Edge Animate. Should be fun for me as much as for the kids! I have several grand-children I want to help them but also any other kid that comes here for a visit.

Also, I am learning and experimenting with Construct 2. The game about the five senses was my first attempt. It needs some updates and I will tend to it after I learn more about the way to program in that platform. I am following the best tutorials for Construct 2 by Jeremy Alexander on Udemy. He is a very talended programmer in his twenties and a gifted teacher. Knowledge is not an easy thing to impart to others but Jeremy does an extremily good job. Look him up on Facebook or on Udemy!

So bring your kids or grand-kids here and let them experience learning in a fun way!

OCTOBER 2017

What is going on with Edge Animate

There is not much going on on the Edge Amimate forum. Some questions pop-up from time to time and I answer them.

I have been very busy at work and otherwise. I have not had time to make new tutorials but I am planning on making one for EA about JQUERY sortable that might help some users.

On another front, I have discovered a new software that is very promissing. It is call Saola Animate. It is HTML5 amd looks a lot like Edge animate. It does not support everything yet, but there is a major update coming early next year. So I will keep an eye on it and keep you updated.

In the mean time you can find them here.

Later...

OCTOBER 2016

Educational Games and Edge Animate are fun!

As you have noticed, if you looked at the Edge Animate samples for September and October (I will add more as the month goes along), these are geared for lower grade levels. There are simple but they are fun. There are little animations per-se in them, but I will have some more involved in the near future.

I have to admit, in these samples, I am trying to cater to my own grand-children who are starting school for the first time and I want to be ready for them and help them in their learning.

This is no to say that I use Edge Animate only for these grades. My regular job, as you may know, is in education and I use EA for all grades including high school, and all subjects. So, there are lots of features and capabilities avaible in EA that I use daily.

As far as I know, EA is still working as intended and the best tool for HTML5 though some are interesting as well like Hype and Construct 2. Of course there are lots of libraries available for HTML5 that help produce great stuff, one of my favorites being GreenSock. Greensock, like other libraries, can be used in EA as well. So the sky is the limit!

PS: I am still involved with the EA forum thoug there is not a lot of activity there. Help us to promote EA by voting there to show our support for the product.

SEPTEMBER 2016

Long time no see!

Edge Animate is still my tool of choice for HTML5 interactive design.

As you know I work in education and I produce a lot of small 'games' to enhance students education from 3rd grade to 12 grade in all subjects. These come along with educational videos and reinforce concepts or present specific knowledge.

In education we have to follow certain requirements. We need to have music background, soundFX, titles and interaction that facilitate learning.

Below is an example of what could be integrated into a 3rd grade math course.

As all our games, this composition includes the following:

  • Introduction screen - This screen allow us to load several compositions on the same page with no sound - the start or next button will start the music.
  • One instruction screen. Sometimes we have several screens to give a small reminder of a concept, tell a story, and other screen with instructions. These can be recalled while in the game.
  • The game stage contains the music/sound FX on/off button, a reset button to restart the whole composition, and navigation buttons when needed.
  • A input box to enter answers.
  • A check button to activate a feedback.
  • A correct or incorrect feedback
  • A score display
  • A end screen to congratulate the student. Some games contain different feedback depending on how the student performed.

Below is an example. You can also check out examples by clciking on the edge animate tab.

March 2016

As I work in education, one of the things that interests me is to try software that allows me to do something different. I have been using Edge Animate for several years and it has really been a great development tool for HTML5. I really love it. As it became evident that Edge Animate development was over, I decided to start looking for additional software to develop educational material.

As I was perusing the web, I came across several interesting software that deal with HTML5

  • Tumult Hype for Mac

    Unfortunately Hype is only for Mac which is fine since I have both systems but it is not good for those who do not have a Mac. However Mac Minis are not too expensive and I would recommend to get one if you can.

    Hype is pretty much like Edge Animate. You just have to get used to it. It has some features that do not exist in Edge Animate and it is easier to make stuff for different devices.

  • Nodefire

    Node fire is a web app as well as a desktop app. The web app is free.

    It is very similar to Edge Animate and Hype. Again you will have to get uised to the new environment.

  • Construct 2

    Construt 2 is a game platform that lets you produce games like Mario Brothers with little code knowledge. All you need is ideas, logics and creativity. It takes a little while to get used to it but it is fun.

  • Unity 3D

    This is also a game platform like Construct but as it's name mentions it also allows 3D programming. This is more involved and I will have to tell you more about it after I use it for a while

NOVEMBER 2015

Adobe Edge Animate's development is over. However there will still be fixes for major bugs. I am continuing to support the Edge Animate Forum and answer questions on a regular basis just as Joel from Pau, France. Edge Animate is still a valuable tool for web interactivity and banner adds.

As the end of 2015 approaches, I am still busy with Adobe Edge Animate projects. For those interested, besides being an MVP, I am now officially part of the Adobe Community Professional Program (ACP). What a privilege and honor. Thanks Adobe!