JPM Creative

Flash Site Explorations

Studio Exploration - www.abcmouse.com

I chose ABC Mouse's Age of Learning’s production and creative team as my studio exploration. I use the program several times a week with my childen and have found the site to be very inspirational in showing what Flash based programming can do to create educational interactive programs designed for young children to be used with the help of there parents. The site is designed for young users to become ready to enter elementary grade school. The creative team consists of over "40 visual artists, designers, writers, composers, musicians, voice-over artists, and programmers" to create the site that holds thousands of "online books, educational games, puzzles and art activities." (www.abcmouse.com/about-us) From a user perspective the site is well organized and offers an amazing amount of games and activites to choose from. Through the use of sounds, music, reading, animated teachers, and your own self-created Avatar you become engaged as being part of the program both as the parent along with your child. This type of programming and design is very effective in achieving a fun user experience that helps the child learn through fun interaction and positive reinforcement by earning "tickets" that they can spend on items like aquariums, pets and even decorating there own "room". From a technical perspective I can see why it takes so many people and so much talent to create a site like this one. Mainly because you have to build it in a way that is so user friendly that a small child can learn to master a mouse, and a parent doesn't go crazy trying to teach there little one how to click, hold down and move a mouse all at the same time. (This happens in the exercise of working on a puzzle.) When creating this, the programmer would have to build it in such a way that the user dictates where the puzzle piece goes and then learns from the outcome whether or not the piece fits or needs to be moved to the correct place. This is where I can see the use of Action Script comes into place because it no longer is controlled by the designer but rather the user. Please check out www.abcmouse.com to see for your-self how much Flash can do!


Short of The Week

  The second website I wanted to share with you can be found at www.shortoftheweek.com. I thought it was a great website as students of Flash to be able to go and see what other programmers and designers are doing in the Flash/Animation world. It also has a great source of educational articles on current topics that will help keep us up to date in this fast paced field. It also offers a platform to display your work once you feel you have created something worth showing to the world. You can submit your short film through there online and process and hopefully if it’s good enough your film will become featured on there website. Check it out!

New Media Exploration

I've taken a few web design classes now at MiraCosta, and I really enjoy learning about Adobe Flash.  I didn't know a damn thing about web design before I began taking classes, and I still have a lot to learn. As a matter of fact, the more I learn, the more I realize how much I don't know. That's because the web is constantly changing with new ways of doing things. Adobe Flash has been a great tool and it's been in the forefront for many years now, but it's not the only tool for creating animated web sites. I learned this by talking to a local web designer who said he uses Microsoft's Silverlight. I had no clue what Silverlight was, but I did become aware that there's another way for doing things. Some of you may have noticed an error code on the IMacs in class that have been asking to download the Silverlight plugin. Well, it's Microsoft's version of Flash. That's because the big corporations of software design are always trying to claim their market share.

I already knew that Apple's Iphone and IPads didn't support Flash. Listen to Steve Jobs here as to why Apple decided not to support Adobe's product, Flash.  Steve Jobs talks about Flash.  Jobs, in this 2010 interview, says HTML5 is the future for web design.

Anyway, I value our professor  Karl Cleveland's expertise in these areas. He knows these other methods of development are out there, but he told me that Flash still reigns. That's why I'm taking this class. Nevertheless, I still did some research on the subject for this blog. Here's a website I found addressing the issue, Research.

OK, I hope I fulfilled my blog requirement for this class. Have a nice day!

Resources Explorations

Senocular

Senocular is a website that contains plenty of information on AS3, It gives a good overview on the matter, starting with a brief history about ActionScript to the basics, to source files and tutorials.
You can also find Senocular (Trevor McCauley) on other forums such as Kirupa (another excellent resource for Flash) where he has a forum post loaded with AS3 tips.



Flash&Math

Flash & Math is a great website for AS3 tutorials, it contains a great collection ranging from beginner to advanced level so that flash developers of any level can benefit from this website. They have a good list of other online resources listed on their site as well.


ActionSript.org

This website provides plenty of information about Flash and ActionSript including news, articles, forums, tutorials, blogs, movies etc.. It also has a Library that contains over 750 scripts that flash developers can download and use or maybe add their own scripts to it.



FlashKit

FlashKit "a flash developer resource site", is an excellent resource rich with information and materials. It is one of the oldest and biggest online flash communities. You can sign up and receive their newsletter and sign up to become a member. Developers have access to a large resource of online tutorials, help forums, sound effects and loops, fonts... It is an open resource and completely free.

Design Exploration

 DESIGN 1

This Flash website Pearl Jam Ten Game  definitely caught my attention.




This site took me a long time to understand, but I didn't quit. I wanted to know how to play the game. I soon figured it out, but it wasn't easy as I'm color blind. It's very cleverly developed, and it shows the dynamic 3D features of Flash and its capabilities. Once the user overcomes the formidable task of putting the pieces of the puzzle together, a music treat is awarded. Try to see if you can figure it out.



DESIGN 2
There's a Flash website that's been around for a long time, but it remains as one of the best in my opinion. The website is PBSKIDS.ORG

The site has a brilliant interface. It's easy to browse as it's for kids. Yet, it's robust with a lot of material. The characters are familiar to children. 

Kid users find entertainment mixed in with great educational tools. It's probably one of the first sites children visit when they are  introduced to computers for the first time.

Design Exploration

For this exploration I found two designs that I found compelling.  I have had a fascination with animation for as long as I can remember, and am really excited that I am learning what I have always found amazing.  The most intriguing websites to me are the ones that have bold colors, a solid theme, and great visuals. 

This website is a great example of this.

http://www.aparte-graphique.com


The main subject of this portfolio is a beautiful landscape illustration.  That alone kept me interested in exploring this website more.  I then began clicking around to explore my options.  I noticed the little helper in the bottom right corner, to help you understand what you are about to click on.  The website is in French, but the navigation is put together so well, I understand where I am going.  The navigation is also something that really caught my attention.  There are bars for 3d, 2d, and different website designs.  There is a little display box that animates to the center of the screen to display these.  I enjoy the color palette, the blacks, greys and shades of blues go together very well.  It has a sort of a movie reel feel to it, and I also very much enjoyed that.  The design principles say you should make your navigation easy, and like I said, this website is in French and I know exactly what's going on. The consistency of the website is very on point, but also shows differences so you understand you are changing your location.  This is a website that I find very inspirational as a designer.

http://www.michaelkelleyphotos.com


I have always found a fascination with photography websites.  There are a billion photographers in the world, with a billion different websites. This is a very clean, and well put together portfolio of photographs.  The navigation bar for the photographs is what I found most interesting about this website.  The bright white background, with the beautiful blue transparency over each photo on the navigation bar really catches your eye.  Each picture is transparent until you roll over it, and it becomes very bold.  The photos are very bright, and really stand out against the white background.  There is a great consistency, and repetitiveness with this portfolio.  It is very simple and easy to navigate for anyone to use.  I am interested in copying a lot of this designers techniques for a website of my own.

design explorations

Planet Zero


‘The Planer Zero’, is a video game website promoting Nissan's new eco-friendly range of vehicles. Exploring this website, users can experience and learn about a virtual zero-emission society. While I didn't find the website very intuitive at first, I still thought it was creative and well executed. The purpose of this game is to teach the audience about a world that can potentially run with zero-emission and I believe it served that purpose.
Users can experience this virtual world while playing games involving a group of characters, in search for various methods of renewable energy, learning about what the future in a zero-emission world could be like.
I enjoyed browsing through this website. There are a bunch of unique characters such as solar power and wind power systems with the main character called "PlugBoy" which is based on a zero-emission mobility. I liked the attention to details in the characters design and their movement; for instance how "Plug" interacts in relation to the mouse, it looks up and down, to the sides depending on how you move the mouse. Or when he is stuck on the sand, you start seeing his footprints getting engraved. I also like how the story unfolds and how you get to learn about this whole "neo-futuristic" world through an animated one.
Overall I enjoyed it, especially the movie theatre part which includes a series of animated videos about Plugboy and his friends, including environmental messages educating users about all the new possibilities.



Typorganism

Given my passion for typography, I was immediately attracted to this website. The theme of this website is "Type is an organism", "Type is a Lifeform, which lives on the net, responds to User's Stimulus, evolves through Time, has intelligence powered by Computational Aldorithm ". The Designer shows that through a series of communication experiments. I loved the concept behind this website, it shows the various ways of what type could be and how we interact with it.
There are so many design aspects that I liked in this website. The description section, how the different letters of each word take different shapes and with one click it rearranges itself in actual words. The DNA section, where it takes the shape of the letter you type, a nice correlation between type and DNA since the theme behind it is type is an organism. The motion sickness section where a block of type follows your mouse and makes you dizzy.

Favorite sites

These are some sites about my favorite things/inspirational people made in Flash.  

 Tim Burton

 This website is inspiration to me. I don't want to make business websites with the color grey as the basis. I want to make super awesome animated websites like this! Tim Burton is already a very big inspiration in my life, and I enjoy almost everything he has done in the animation world. So when I first went to his website, I knew I was in for something really awesome. I was definitely not disappointed, and I wanted to share it with the rest of you.The designer created Tim Burton's world, and brought you into it.  I felt like I was in one of his movies.

Dusty Noden 

I am not 100% sure this website was built in Flash, but I chose this to share due to the fact it inspired me.  I had no idea what I wanted to do for a living, and realized I could get paid to design awesome things.  My boyfriend said, yeah Dusty gets paid to be a graphic designer.  I thought, that is so cool! So I looked into it.  I changed my major from Business to graphic design, then added web design later.  I said, if a friend can get paid awesome money and live by the beach designing, then so can I. So I chose his website to share! I really enjoy the way he set this up, very unique, simple, and interesting.  So hope you enjoy.

Sensi Soft

This website really caught my attention.  It's really amazing what you can do with Flash Animation, and these are the kinds of websites that keep me going. I have no idea how they made this website now, but I have every intention to build something as good as this, if not better.  I am not 100% sure what Sensi Soft is, because I was so caught up in the imagery, animation, and interactivity on the site.  I searched "Top Flash Websites" and went through the lists and this is what I found. I was blown away, so hopefully you're impressed as well. I hope to be at this level by my 25th birthday...so I have a lot of practice ahead of me. :)

The Power of Color, Sound, Peers and Light

 

Hey guys, time of my class blog. I wanted to show off a site I use a lot when it comes to designing the look of a project. That tool is kuler.adobe.com from Adobe.

Often time when we do work in class we focus more on the technical aspects, especially in this flash class where so much if the technical coding side of design. So to move away from that I decided to provide a tool for creating, sharing, and reviewing color pallets. The color scape of any project can greatly enhance or damage the experience of that project. Often time when I am stuck looking at colors and trying to come up with my own pallets, I turn to kuler to give me inspiration and to provide the tools for quick alteration of an already existing pallet. Sometimes I also use it to quickly sketch up a pallet that just hits me when I am out and about and don;t necessarily have access to Photoshop or other adobe products.

 I know a lot of people might already know this tool but I hope I was able to show some of you a new and useful website to help you in your designs.

The second tool I want to show off is Audacity. We don't often work with sound but Audacity is a great free program for sound editing. Here on campus we have the entire CS Suite to use but at home we might only have the web design suite and one of the things it lacks is Audition. Audacity can take the place of Audition or other programs like Sony Sound Forge form simple editing to even more in-depth audio production work. Personally I don't have too much experience with working with audio for Flash but I did use Audacity in conjunction with other programs extensively when going my BA in Linguistics to record and analyze speech. In that realm it does the job very well and from all that I have read about it, it can handle other audio tasks with equal quality.

The third site I want to highlight is stackoverflow.com. stackoverflow is a site where you can post questions about programing, from everything from C++ to Ruby to PHP to Actionscript, and have those questions be answered by other people. I do have to mention that sometimes the answers become very complicated and the questions people ask range from the very simple beginner questions to very complex ones. There are a few rules to follow as well. One, always search to see if someone else has asked the same question before. Two, always try and figure the problem out before asking a question. There is no use in asking "How do I do x?" unless you have first tried to do it and were not able to and have also first searched for an answer.

The last site I want to show off is flashlearner.com. This is a great site for video flash tutorials. If you are like me and find it easiest to learn by seeing instead of by being told how to do something without any visual aid, this is the site for you. Not only are the tutorials videos but they are also in full 1080p HD. So no more looking at poorly shot youtube videos that are blurry and where you can not even tell what is going on. Also, they explain things in great detail, especially the actionscript parts.

I hope that my blog post will show everybody in class something new. You might have seen one or two of these sites but hopefully not all.

Resources Exploration: Flash, Game Development, Sound, and More

I chose 4 websites for my resources exploration.

The first site I chose to explore is “gotoAndLearn.” This site is so great. It is full of tutorials of all kinds teaching different approaches and uses for Flash. The entire menu of tutorials is presented as a neat full-page palette of uniform size graphic buttons. And the menu includes tutorials for Flash, HTML5 and Game Development. Just about everything on this site is new information to me. I think the only thing I ever did here was green screening. It’s amazing that such a well-organized palette of tutorials is free. I liked that they include a lot of flash alternatives for mobile like Air and Animating with JavaScript.

The second site in my exploration is Kirupa.  Kirupa has a dedicated section to only Flash and ActionScript tutorials. Kirupa tutorials page is set up like a long-paged blog with links to the courses. There are no cool graphics at all on this page, but the simplicity in presenting the tutorials is so well-organized that its easy to make choices to get the help you need fast. Kirupa tutorials include Flash and ActionScript courses in the following: Basics/Animation, Drawing and Design, Common Tasks, ActionScript Basics, External Tasks, Special Effects, Isometry and Game Development.

The next website in my exploration is Shockwave Sound. Shockwave is not a Flash specific resource, but rather it is a resource for some of the best royalty free music, sound effects and voiceovers for very reasonable prices. There are many sites that offer these services, but I have not found any that offer the professionalism, variety and pricing combination that Shockwave offers.

My final resource is “Flash Perfection.” Flash Perfection is display as a simple page-long menu of options. The free tutorials are all based on Flash and the list runs down the left side. However, this site also includes other resources like templates, flash website creation tips, flash content management, photoshop tutorials, free layouts and even links to graphic design jobs. Flash Perfection also allows user generated content,which gives users the opportunity to submit tutorials.

Desk Project

I chose a site called the Desk Project for my first blog post.

Jongmin Kim created this website as a place where computer-based creators (web designers, graphic designer, animators,etc.) can share images of the desks they do all of their creating and imagining behind in hopes that it will inspire others. I picked this site because i think its a great example of a simple design that can still hold your interest through the use of creative, subtle details. Jongmin Kim has successfully made a site with a clean, user friendly interface that maintains its own level of intrigued through the small details he put into the user navigation without taking attention away from the main point of the site which is to show off the designers' galleries. From animation in content scrolling to sleek transitions in between gallery photos, this website really displays his talent of keeping a website basic but still adding his own originality to each form of navigation.

Matthias Dittrich Portfolio

http://www.matthiasdittrich.com/

This is a really cool portfolio site.  I really enjoy the animation in the transitions.  I find a lot of flash sites to have low usability and I feel this site does a good job of being edgy but still useful.

WaterLife Flash Site

WATERLIFE - NFB

 Top 10 Best Flash Websites of 2013

I found this site from the link above, it was ranked #8. After exploring this site I think that my favorite part is the way that the navigation functions, the collage of small pictures moving and rotation giving sense of depth is a nice attribute. It really gives you the feeling that you are under water with the moment of everything, the darkness, the choice of music and the navigation bar on the bottom is animated to behave like a wave. And then, how the left navigation coincides with the other two navigation tools, all three move and interact with each other very well, really mimicking being deep into the water. I also am impressed with being able to have a choice of background music, after being on a site for a few minutes I tend to get bored with the music, but by having a choice of what music I want to hear makes me want to stay on the page and explore longer. This site has a lot of information that it is portraying and trying to teach it's viewers and I feel that it has been well organized and portrays the severity of the lack of drinking water.

design exploration (cont)

For my second site I found that actually WAS built in flash is here at Incredibox

This site has an awesome intro outro effects leading up to the main content area. The designer who made it came up with many versions of 1 animated guy and used a random generator in AC3 so when you click the "add more animated guys to stage" their sizes come at random heights. I also like the nested movie clips setup for the individual sounds possible to make. Also I have to say the simplicity in its animations and effects  along with the music really make this addicting.

 It reminds me of a game called World of Goo which is a physics based puzzle/construction game

Wonder Wall Inc.

For my blog exploration I stumbled upon a portfolio site for an interior design firm called Wonder Wall Inc.

 http://wonder-wall.com/#project/en

I believe it to be a good site for exercise three, it is a good example of a simple interface built around a one main piece. In this interface the main focus is a wall the scrolls the length of the page, this wall is every changing and displays all the projects the user wants displayed. The transition between pictures and list is very clean, simple, and still amazing. The navigation is smooth and content can be accessed in a moments time. Go to Wonder Wall In.c and see for yourself, its worth a 10 minute look over.

Flash Site Exploration

http://www.chromazone-imaging.co.uk/flashindex.html

This site doesn't feature a whole lot but for being a showcase for a printing studio, what little it has is actually really pretty and done well. The music and color choices used really compliments the animated sequence of flowing in and out of space/dimensions.

Ultimately, it gets the job of advertising done in a  chic modernistic fashion.