Migrating from Adobe Flash to HTML5

Flipside ImageThere has been a great deal of debate among techies lately concerning which format is the better choice for website developers: Adobe Flash or HTML5.  In a nutshell, Adobe Flash allows for a lot more animated transitions but requires a lot of storage space and isn’t compatible with most tablet and smart devices without a converter. HTML5 however, is very compatible with devices but lacks the animation capability of Adobe Flash. Fortunately for students and faculty at my Middle School, we’ve just installed a “guest” server and have recently become a BYOD (Bring Your Own Device) School. Until this past February, the only devices students had access to in class were school MacBooks and eMacs located in computer labs or shared laptop carts.

Beginning last summer and continuing during the school year, I spent a great deal of time creating my interactive websites (flipsideinteractive.com and giftedcelestia.com) using blank Adobe Flash templates at wix.com . I initially chose the Flash format because I liked the “pop” and fun the flash animations added to the websites while also enhancing student engagement in the gamification process.  However, now that 85% of my students are bringing in their own smart devices with them to class, I was faced with the somewhat difficult decision regarding the future of my interactive sites: Do I keep the Adobe Flash sites that I’d already invested so many hours developing and synchronizing with my curriculum, or should I start creating new sites from scratch in the HTML5 format so they could be more easily accessed at school or at home on a myriad of devices?  Here are a few reasons why I decided to convert to HTML5:

1) Students can access HTML5 sites from any device, anywhere (no excuses).

2) All of the images I’d previously uploaded and used on the Flash sites are still accessible through my Wix account for use with any HTML5 template.

3) My school district is moving away from their previously mandated curriculum and into the national Common Core State Standards next year, so I’ll have to align the sites with a new curriculum and new resources next year anyway.

4) Even though I’d purchased domain names for the Flash sites, I can transfer them with very little effort to my new HTML5 sites.

5) Students can still take screen shots on their mobile devices and submit them as evidence of mastery just as they did with the Adobe Flash sites.

I decided to try my hand at the HTML5 template for my last Language Arts unit of the year (mythology/fairy tales/folktales), so you’ll notice that the new, HTML5 version of “Flipside” is currently the active site linked to flipsideinteractive.com. I’ve also taken advantage of feedback I’ve received from students, colleagues and friends and already changed a few things:

~ New look to the Arcade

~ New, non-animated icons to identify the Training Hut, Arcade, Item Shop, etc.

~ Some areas have limited access and are under construction

~ Since the Voki’s that give directions in the Item Shop, Training Hut, and Arcade require Flash I had to come up with a “work around” –  I recorded them from the Voki website using a screen recorder (Screencast-O-matic) and uploaded them to YouTube. Now I can still share them using the video player on HTML5 website template.

~ The music used by the HTML5 Wix template uses Sound Cloud and I’m still learning how to comfortably adapt that element into the site, so at the time of this post, there are no sound effects on the new site.

I’ll be updating my blog during the summer and am hoping to be able to find time to record some screen casts of my HTML5 site development. As always, if you have any specific questions or feedback, feel free to contact me or leave a comment here.

About Michele Alvarez

I enjoy teaching Middle School Language Arts and Gifted classes and gamifying education has become my most recent obsession =]

Posted on May 8, 2013, in Game Based Learning, The Game Sites. Bookmark the permalink. 14 Comments.

  1. Wow that was odd. I just wrote an very long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again.
    Anyway, just wanted to say great blog!

  2. Please let me know if you’re looking for a writer for your blog. You have some really good articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d love
    to write some content for your blog in exchange for a link back to
    mine. Please shoot me an email if interested.
    Regards!

  3. I was wondering if you ever thought of changing the page layout of your website?
    Its very well written; I love what youve got
    to say. But maybe you could a little more in the way of
    content so people could connect with it better.

    Youve got an awful lot of text for only having one or 2 images.
    Maybe you could space it out better?

  4. Hmm it appears like your website ate my first comment
    (it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your
    blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any suggestions for rookie blog writers? I’d definitely appreciate it.

    • I’m new at the blogging thing too. I need to add more pictures to my blog pages and think about a better way to format the pages, but that will have to wait until after summer holiday 🙂

  5. Wow, wonderfl weblog format! How lon have you ever been running a blog for?
    you make running a blog glance easy. The overall glance of your web site is great, let alone the content material!

  6. I’d like to find out more? I’d love to fijnd out more details.

  7. fantastic put up, very informative. I wonder whhy the opposite specialists
    of this sector don’t understnd this. You should proceed your writing.

    I am sure, you’ve a geeat readers’ base already!

  8. Great items from you, man. I’ve take into account your sstuff previous to and you are
    just extremely magnificent. I really like what you have acquiredd
    right here, certainly like what you’re stating and the wway in which
    wherein you assert it. You’re making it entertaining and you still care for too keep it wise.
    I cant wait to learn much more from you. That is actually a trememdous website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

From the desk of Mr. Walters

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

ZaidLearn

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

Feed: All Latest

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

Educational Gaming Commons

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

First the Classroom, Then the World

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

%d bloggers like this: