A quick look at Adobe Edge in Moodle 2

Adobe Edge learning resources in Moodle 2

I had a quick look at the Adobe Edge creator tool when the preview came out, but never actually looked into it in-depth nor tested the content in Moodle.

What is Adobe Edge?

This is the new “web motion and interaction design tool” which uses HTML5, JavaScript and CSS3 to enable learning object designers to create a good interactive resource.

The key here is that it does not create flash content which as we know is now not going to be around for Mobile for long. ( http://blogs.adobe.com/conversations/2011/11/flash-focus.html ) Now, as Adobe mentioned in the post that “HTML5 is now universally supported on major mobile devices, in some cases exclusively” this works well with the philosophy behind Adobe Edge preview ( http://labs.adobe.com/technologies/edge/ )

So as a content creator what can it do? Quite a lot really is the short answer. Adobe have provided a nice set of resources to introduce people to it, and also a set of demos which gives an idea of the level of creativity that it can enable. ( http://labs.adobe.com/technologies/edge/resources/ )

So having seen a post in a forum thread in Moodle.org about it, I decided to add the demo items to Moodle 2.2 and see how they played.

Adding Adobe Edge items to Moodle 2.2

There are two ways to get the files into Moodle depending on if you have enabled the URL downloader repository or not.

  1. The normal way – You can go to the Adobe Edge resources page and download the zip file and then upload it to Moodle
  2. The alternate way – You can use the URL downloader repository and paste in the direct url to the file and then pull the file directly into Moodle without having to download it. I prefer this option for moving big files (although these are small)

These are the steps I followed to set up the Demo course with the seven Adobe Edge demo files.

  1. I created a new course (I always keep specific test content in a different course if possible, easier to isolate)
  2. I added turned editing on
  3. I edited the summary of the section 1 to provide the context for the testing with links to where I was taking the resources
  4. I added in the labels for each of the demos on the Adobe Edge Resource page.

Then for each of the demos I did the next steps:

  1. Clicked on Add a resource
  2. Click on the URL downloader repository
  3. In a different tab went to the Adobe Edge resources page and copied the link to the download of the demo that I wanted.
  4. Went back to my Moodle tab and pasted in the URL into the URL field and clicked on download.
URL downloader repository

URL downloader repository options

The repository then goes to that URL and fetches the available downloadable resources and displays in the File Picker.


Url downloader repository Select

Url downloader repository Select

  1. I clicked on the box for the edge_p3_sample
  2. I clicked on Select this file and it was copied over instantly.
  3. I used the icon beside the zip file and chose unzip
    Unzipping a file

    Unzipping a file



  1. I browsed into the folder that it made and beside the HTML file I selected Set main file from the menu.
  2. In the Options section I selected In pop up as the display option
  3. I clicked Show advanced to see the pop-up dimensions
  4. I set the width as 980 and the height as 700 (you will need to use different ones for different demos as they are different sizes)
  5. I clicked on Save and return to course.

Once they were all added, I went through them and made sure the window sizes were appropriate for each demo.


They all worked fine in the pop-up, each demo has slightly different features and was quite interesting to see how they would work within Moodle 2.

Adobe Edge Demo in popup

Adobe Edge Demo in popup

However, I wanted to see if and how they worked with other display options and in my testing using the standard theme all the options except the download worked (which was expected). However the best experience in my opinion was the new window or In pop-up due to the large size of some of the objects.

Just for interest I have added a screenshot of the Editor with one of the demos open, it is so very powerful and I hope to see export to SCORM, or IMS LTI sometime!

Editor view of a demo file

Editor view of a demo file

This entry was posted in Moodle and tagged , , , , . Bookmark the permalink.

4 Responses to A quick look at Adobe Edge in Moodle 2

  1. marcel says:

    thanx for that hint!!! it´s working well here!

  2. Gordy says:

    Have you tried Hippo Animator yet? It’s like Edge but it works on old browsers like IE6 as well as modern browsers and smartphones.

    Merry Christmas


  3. Fantastic tute, Gavin, thank you! I’ll try that out as soon as I can find more time to play with Edge.

    I made a post on the Adobe Edge forums asking for SCORM and audio support, but I haven’t heard anything back yet.

  4. Patricia Moura says:

    Hi Gavin,

    Sorry, I am quite new to Moodle. Can you explain me how to perform this step:

    1. The normal way – You can go to the Adobe Edge resources page and download the zip file and then upload it to Moodle

    I have made my own animation in Edge, but now I just cant upload it to Moodle. I would like it to appear in the middle of a content page of a lesson. Thanks!

Comments are closed.