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.

mta_me1

What would happen if you combine string music with MTA train lines? No, not those typical music players that come to your train car or station. You have this interactive website, MTA.ME!

So what exactly can you do on this website, you may ask? Well, for starters, the colorful lines that are on the window are suppose to be the transit lines for the Metropolitan Transportation Authority. These transit lines have unique colors that take you to various locations throughout the Tri-State of New York City. In this website, you see the transit lines moving around the window. When these lines come across from each other, a string note is made. You can hold your mouse and slash across these lines to make string note sounds and make some (somewhat coherent) music. The window also turns black when the time on the bottom left side of the window passes 6:00 PM. Also on that side shows the transit trains departures as they appear on the window.

The site uses some Javascript to make the string notes and moving lines appear at random from the window. If you have some time to spear, or just bored as heck and want to look at something pretty, I suggest checking this site out and see how amazing this is.

mta_me2

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

This is a guest post from Matthew Z. of ADeral. A blog for Advertising and Graphic Design students.

Advertising is becoming more surgical with the emergence of mobile devices and interactivity. Major companies are starting to invest a lot of time and money into designers who can code and create interactive advertisements. One of major reasons why interactive advertising is so popular is the ability to lower potential loses from poorly planned strategies. Here are some of the benefits from interactive advertising:

Pin Point Targeting

One of the major advantages of interactive advertising is the data analytic. Companies are able to track your activity and tailor ads to your needs. It’s kind of creepy, I know. Ever wonder why one night you search online for Nike sneakers, and then you see Nike ads on YouTube, Facebook, and in your emails?

New Impressions

Another huge advantage of interactive advertising is giving the potential consumer a new way to see the product. Companies can now strategically display fun and new ways to see their products. Imagine an interactive ad for a cosmetics line. You’re able to change a sample dummy’s skin color to closely match yours. Then try out different colors of lipstick to see which one would look the best on you before committing to the purchase. This gets the consumer involved with the ad as well as reinforces their purchase.

Add to Cart

Many companies are also investing their money into mobile stores. Now a consumer can shop while on the go at anytime. Interactive designers create a user friendly online store that is convenient for mobile shoppers. With just a few clicks, even a mother of three children and a full time job, can still shop at her free time.

Interactive advertising is growing rapidly. With new technologies being created, interactive advertising and web design are all evolving into a personal one on one experience.

 

Ever since I was 3-years-old, I was introduced to the world of computers. It seems like yesterday but I can surprisingly remember that day that I tried out the computer for the first time. It was running Windows 3.1 and all it can do is access MS-DOS where I was able to run games on the computer with those huge floppy disks. It was an amazing experience for me and I kind of end up learning how to use it by myself. I think my parents just gave me the computer and said “Have fun!” not giving my any clue how to use it. Yet, I learned it myself and it was fun and awesome!

It was until we upgraded our computer to Windows 95 when my parents decided to purchase a dial-up plan so we can access the internet. AOL, or American Online, was the browser provider we started using to access the web. After messing around with the web, it was a strange yet wonderful experience full of information, games, and music for me to check out. Back then, the web looked kind of weird and cheap compared to how websites look today. Interactive and beautifully designed websites didn’t even come about until a decade later when Javascript became an amazing tool and HTML4 and CSS2 came about. It was since that my discovery of the web grew me into loving it every single day. Being able to do research, play games, communicate with people that have the same interest as I do, and start a community and fanbase with people from all over the world, the internet became this place that pretty much presents the world in one place in the comfort of your own home.

I started becoming a web designer due to my interest in the web and becoming a designer making mockups and designs for websites. At first, I wasn’t so sure of becoming a web designer until I took my first web course that the mix of design and coding became this inspiring cloud that really got me hooked to becoming this type of designer. Also, during the time too that I discovered out of complete random a web designer and animator, Radio Gosha, who does amazing designs for dance music videos and was seen in one of my favorite rhythm games, Dance Dance Revolution. You can say, I was inspired to become a web designer and I love 2D animation. Speaking of animation, there’s also Vocaloid animated videos from YouTube that inspired me to design as well. Since I’m part of a Vocaloid community online, these people who I meet and communicate with are very creative and gave me ideas on how to design more efficiently. It’s also rather awesome since some of these people who are into Vocaloid are mostly from Japan.

Well, that’s pretty much my story to why I got into the whole web design thing. I love it and I want to continue to make websites, designs for people, and continue to learn how to build advanced websites like the interactive websites I post on this blog. It’s a long road ahead until I can really learn everything there is to know about building websites but I’m trying and I’m going to continue doing my best.

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 ]

comjoin

As a fellow blogger for about 6-going-on-7 years, it comes a time when you start getting random strangers visiting your site, commenting on your articles or works, or taking notes and citations on your site for their own website or blog. That is too if you have friends, acquaintances, or spread the word online about your website.

Right now, I’m currently part of a Vocaloid community where fans of Vocaloid get to speak and discuss about the latest, ask questions, and give opinions relating and about Vocaloid. It’s an amazing community, especially since I’ve been a fan of Vocaloid since it became big back in 2007. It became nerve-wreaking for me, at first, to try and become part of the Vocaloid community even though it was small back then, especially in the States and not many spoke English. However, I had the courage to become part of the Vocaloid community and now I’m recognized as one of the top promoters and fans of Vocaloid. It’s an awesome feelings to be those “first” people who knew about it before it became popular but even so I’m glad to become a part of it.

Whether you’re interested in that stuff or not, anyone can be part of any community, whether online or offline. To do so, you just need to speak up (or type up if it’s from the web) and just chat and communicate with the community about yourself, your interest, and maybe why you want to become part of the community (if you really, really want to). That’s…basically it. Yeah, it’s pretty simple.

So, if you’re ever interested in being part of the community, you can join my Facebook page. I’m currently one of the admins for the site and the guys are really awesome and friendly. You can also visit the Vocaloid community’s reddit page here that discusses everything relating to Vocaloid along with FAQs and other randomness relating to Vocaloid.

hyperfunction_logo_color

Hi everyone! Just as title says on the left, welcome to hyperfunction!

Now I know what you are thinking: Just what is hyperfunction? hyperfunction is a blog news feed site dedicating to bringing news and updates relating to interactive web design. Unlike most web design/programming blogs out there, our mission is to present the more “fun” side to web design/programming. We present websites people have creating using coding languages (like HTML, CSS, & Javascript) to build sites from coding web games to really cool interactive and creative portfolios.

Whether you are familiar with code or not, there is much to enjoy and experience that people all over the world have created using the web coding languages. They have create some high-level websites that are not only advanced but creative, interactive, and fun to look at and mess around with. This is what hyperfunction will be focusing on for this blog and we want you guys to check them out and enjoy looking at these awesome sites just as much as we do.

We hope you enjoy your stay and stay tune for new posts every Tuesday!