AnsweredAssumed Answered

How does one animate the announcement picture for a class?  Answer provided.

Question asked by JAMES SHELDON on Aug 15, 2017
Latest reply on Aug 21, 2017 by Roxanne Conroy

Question: How does one create an animated .gif for the image at the top of the announcement page?

 

The announcement page provides a “thing” and provides the dimensions.

 

The dimensions are: 652 px wide and 214 px vertically.

 

Open the image manipulation app. of your choice.

 

Since this author uses Linux, GIMP ( Graphic Image Manipulation Program) was the app of choice.

 

It is available for Windows and this author provides a link below. ( It is perfectly safe, it will not blow up one's system).

 

Create a folder for the images one wishes to have in the animation.

 

Move or copy “probably"  6 images to the folder. This is a convenient number in terms of having two “gifs” each one having three images and that will fit in the provided space on the announcements page.

 

Choose three of the images for “one of the images for the gif” and label them 01, 02,03

 

Repeat this with the other three images and label them 04, 05, 06.

 

Create a “new” image with the given dimensions in the image manipulation app. .

 

Open image number 01 in the image manipulation program and resize it to the HEIGHT of 214 px.

 

Open image number 02 and repeat the above procedure.

 

Open image number 03 and repeat the first procedure.

 

Create a new “layer” in the already opened image manipulation app. which has been set to the above dimensions.

 

Copy image number 01 and paste it into the image manipulation app.

 

If necessary invoke a “move” tool which may already be available by clicking or some such.

 

Move the image “to the left end” of the empty image.

 

Create a second “ new layer" and repeat the above process with image no. 02 except leave in the center; however it may be moved slightly left or right to get the pictures to “look good together”.

 

Go to the appropriate menu item and - “tie down / move down / merge / merge down / lock ” the layers.

 

Create another new layer.

 

Copy and paste the third image into that layer and move it to the right.

 

When the images are to one’s liking then again “merge down” or “lock” the layers.

 

Save this in the format that the image manipulation app. uses as default with a convenient name such as “pic 01 for animation fall 17 English announcement”

 

Export this into a .png image for possible other uses.

 

Then export it as a .gif image for the animation.

 

To create the second image for the animation:

 

Repeat all of the above steps using images 04, 05 and 06 and save as “pic 02 for animation fall 17 English announcement”

 

If one has spent enough money to have an image manipulation app. that will create an "animated .gif" then one should follow the instructions, it should be fairly simple.

 

SINCE WE ARE ALL TEACHERS.....the school should have "spent the money to support you" and have a liscenced copy of Adobe Photoshop or some other image manipulation app for the teacher to use.  One can do the initial work on one's home computer and then transport it to the school for the final animations step.

 

If one has has installed GIMP for Windows then one can do it in a two step process which is unique to GIMP.

 

If one NOW HAS A FINISHED ANIMATED GIF...then skip to the bottom: "upload to canvas".

 

If one has neither then one can go to a RELIABLE and NON-INVASIVE online site which will provide the animation.

 

NOTE:

 

MANY OF THESE SITES SURREPTITIOUSLY want to install a “search bar” on your browser and usually set your home page to their page.

 

And they are a SCAM.

 

They are to be eschewed at all costs.  I, personally, am called probably twice a month with some poor sobbing person who has a "slow computer" and it is because of all the MALWARE which was installed because....

 

The poor sobbing person did not go to the trouble to actually WATCH what as being downloaded to the computer by the site that has the latest STUPID GAME or LATEST set of shiny emojies or whatever...that the OTHER people who do not pay attention have downloaded ...

 

However, there really are a few sites that “offer the service” and have some advertisings on the sides and hope that you click them or maybe download the “premium” version all of which is a valid way of making money and providing a service while not scamming.

 

IF THE GENTLE READER actually uses the service and obtains a satisfactory animated gif, then one should...IN ALL FAIRNESS purchase the app.

 

NOTE: this author is in no way connected to the below linked site and receives no remuneration, in any way, of any kind from any site.

 

Anyway…. If one decides to use such a service.

 

a) place the two .gifs into a “folder”.

b) right click the folder and one will see an option to “archive” or “compress” the folder. Choose the option which has a file extension called “zip”.

 

The zip file will be created in the folder that is holding the folder under consideration and will have the same name with the extension .zip.

 

Go to the online site and there will be some kind of instruction to upload a zip file.

 

When one does that one will be taken to another part of the site and one should see the two desired images.

 

There will be several options depending on the site, but the IMPORTANT for one is to chose an “animation time” which is not so long between changes that the student clicks through and does not see the animation or not so short that the student just sees a blur and not the images.

 

A convenient time is “2 seconds” or “200 hundredths of a second"  or “2000 milliseconds” or some such.

 

IN OTHER WORDS look at the options and interpret to figure out the number which will provide an animation time of "2 seconds".

 

There may be an option to “fade” or some such in the options and that provides a nice appearance.

 

When the button is clicked to view the animation one should see it.

 

THE SITE SHOULD NOT ask you to download “one more thing” to see in the site. there should not be some kind of hurry through “do this and oh yeah we will put a thing in your browser:”

 

There should be a simple option to click the file and to download.

 

One should get a popup box asking if you want to download it or view it.

 

Download it.

 

When the download is complete Microsoft will provide, as an option with a right click, to check it for viruses or malware or whatever and it should scan as ok.

 

THE ANIMATION SHOULD BE RENAMED. These services need to make some money SOME WAY.

 

What they do is usually have a "call back" in the file name so that when one goes to the user's web page one sees a link to the site who made the animation.  The name is USUALLY a “two part” name such as:

 

name.name.gif

 

notice the TWO DOTS...one wants to eliminate the left most dot.

 

This kind of "call" is not desirable on Canvas and is probably actually prohibited by some kind of software check on Canvas.

 

And, the company knows that people will do this, it is part of the whole internet thing about "fair use".

 

A teacher is not going to "make money" from the gif, it is an "educational fair use" and is part of the finalized U.S. copyright laws as of about fifteen years ago.

 

Here is how to eliminate the Call.

 

RIGHT CLICK THE GIF and select “rename” and change it to some convenient name while KEEPING the right-most file extension such as: animationforme.gif

 

HOWEVER<  in all fairness, if one uses the service ONCE and has good results then one should...to be fair... purchase the app, the costs are usually nominal compared to purchasing Adobe PhotoShop.

 

DO NOT UPLOAD TO CANVAS without changing the name!!

 

Upload to Canvas.

 

Go to the pages part of Canvas in your class and navigate to faculty info page.

 

There will be a “thing” at the top which you want to replace.

 

The animated gif can then be uploaded into your storage area on Canvas and inserted into the announcement page through the edit function.

 

Click to edit and Canvas will churn around a little and one will see the page click the image. Do NOT double click it or do anything else.

 

HIT DELETE ONCE........as in ONCE....the cursor will be "blinking" in the middle of the box.

 

DO NOT DO ANYTHING ELSE THERE....

 

Go to the right and the “file” tab and navigate through the upload process to find the animated .gif which one has downloaded or created on the computer.

 

When the upload is complete the animated .gif “should” automagically appear in the appropriate place ( where the blinking cursor was).

 

Save.

 

One will then see the glorious fruition of one’s work with the animation!

 

The students will be AMAZED....they will possibly actually put down their laptop, run out into the commons and shout "Hey come look at what the cool "Mr./Mrs./Ms some convenient name" just did!

 

Or.......not!

 

It will load to the RIGHT side of the box.

 

If one wants to center it then one will need to get into the “HTML editor” option and change the HTML code to center it.

 

The author does NOT recommend such to anyone who has actually read down this far because the person did not know how to make an animated gif.

 

Solrry, It is kind of a “rite of passage thing”. If one did NOT NEED TO READ THIS then one will probably already be doing it.

 

However, back to Canvas..

 

If one has another section and wishes to “copy content” from this class into the other class the animation will automagically follow into the new class.

 

This author provides a link for the download of the Windows version of GIMP

 

One should probably choose the “direct download” option and will have an interactive window pop asking if one wants to install an “.exe” package which is the normal installer for a Microsoft system.

 

Those with a Mac will probably have the necessary information for the download, but a Mac usually has an adequate image manipulation app.

 

https://www.gimp.org/downloads/

 

This author provides a link to a gif animation site which the author has used for several years with no problems when using a Windows system:

 

https://ezgif.com/maker

 

One could also just...ummm download the "live cd" of an Ubuntu system and run it on the computer without affecting the Windows operating system just to see what it is like to run...really GOOD software! lol

 

If a moderator wishes to remove either or both of the above links; such permission is hereby given by this author to so do without checking with the author.

 

If anyone has comments or suggestions, such are always welcome.

 

James Sheldon

Outcomes