Archives for posts with tag: interactive

Ever though to yourself how awesome it would be to create your own interactive website? Not sure where to start or any clue how to build one? Look no further then Adobe’s latest program, Edge Animate! Here is my review about this program.

Adobe Edge Animate is an animated and coding program that allows you to build and design layouts and animations and have them convert to HTML, CSS, and Javascript with a click of a “Save” option. (It is that simple!) It can take just a few minutes to animate anything that you would like and have them working on any web browser. Whether it is to animate a cat coming out of a box or moving a character around that can shoot lasers and kill enemies, you can do so much with Edge Animate without the hassle of coding it from scratch. Yes, you don’t even need to know how to code to build stunning interactive websites using Edge Animate.

Since I took a course called “Interactive Animation”, we had to learn the fundamentals of how Edge Animate works and what we can do with it. After playing around and making animated website projects using the program, I was highly impressed with it and how simple and easy it was for me to build an interactive website. There are some aspects of coding, like Javascript, that you should know mildly of to get some of the interactivity for your web project to function just as you want to. However, you would not have to worry about this as it isn’t much of a hassle and you don’t necessarily have to know Javascript to get it. Plus, there is always research, your friends, communities from the web, and Google to help you out if you get stuck.

Adobe Edge Animate is a great program for anyone who wants to build an interactive website, whether you know or don’t know how to code. Give it a try as you can play around with the program for free for thirty days as a member of Adobe’s Creative Cloud service. You will be amazed at what you can do with this program just like I did. If I had to react how I feel about Edge Animate, it would be like that guy below. Very hype.

facesoffb

What you are looking at is not a bunch of colorful pixels. This is The Faces of Facebook, an interactive website that showcases every person in the world that has a Facebook account in real-time.

As you may have noticed from entering the site, it shows that over a billion people have a Facebook and the numbers keep on going from there. As you click on any section of the window, it draws you closer to the “colorful pixels” revealing various people, their profile picture, their name, and what number they were since they made their account. You can click on the top left of the window to see the first people who had Facebook (who is obviously Mark Zuckerberg, the creator of Facebook) and go to the bottom right for the latest people who have Facebook.

It is an amazing interactive website mostly using Facebook database and some Javascript to get this information into one extravagant website. It is also kind of scary if you happen to have a Facebook as well that you are probably wondering where your “face” may be at from all those “colorful pixels”. Thankfully, Natalia Rojas, the creator of this interactive website, allows the user to find where they are located from the site. You can also ask Natalia to remove your face from the site as well.

facesoffb_2

google_doctorwho

Today marks the 50th Anniversary of the Sci-Fi series Doctor Who. The series has proclaimed to be the longest running science fiction series in the world with hundreds of episodes and new seasons every so often. The series is still going on with new episodes and a huge fanbase of Whovians who know much about our good o’ Doctor and much more.

In celebration of Doctor Who‘s 50th Anniversary, Google created this cool and interactive retro 8-bit game for their main home page. The mission of this game is to select your Doctor and move around platforms and solve puzzles and collect all the letters you see that will spell out the word “Google”. Daleks, Cybermen, and Weeping Angels block your route from getting you the letters so you have to think carefully when moving around the obstacles that you don’t die. However, if you die, you regenerate to the other Doctors from the series.

The game was generated in HTML5, CSS3, and Javascript to build the interactive gameplay of choosing your Doctor and controlling your character from the platforms. Give the game a try at their Google Doodle webpage.

google_dwgameplay

[ source via The Verge ]

full_screen_mario_screenshot

Well, more like the classic NES game Super Mario Bros. featuring Mario is now playable on your browser.

Anyways, yes, one of the most popular games of all time is now playable on your browser. Full Screen Mario, as it’s called, is a functional and interactive website of the Super Mario Bros. game created in HTML5, CSS, and Javascript. What is amazing about this is how everything you ever know about the game works and feels the same way as it was on your TV. With all the levels and stages from the game, it is like you’re actually playing the game. There’s also a Stage Editor that allows you to build your very own levels of whatever you want.

Josh Goldberg, the person responsible for making this, has done a fantastic job with the site and gameplay mechanics of the Mario game. From the sound effects, everything about this is just about perfect and fits just like the real game.

UPDATE: Due to unfortunate circumstances, the game has been removed for copyright and was taken down. However, Goldberg’s GitHub provides the coding source for the site and is available for everyone to use.

[ source and picture via Mashable ]