Dynamic Mask And Image Comparison Part 2

By Lex | Published: January 10, 2011

This movie requires Flash Player 10

Dynamic Mask Source Files (365)

This is part 2 of a example regarding image comparison, view part 1 here.

GOAL

  • Allow a user to click-and-drag to reveal a hidden image by painting a mask.
  • Predetermine the shape of the image the user is uncovering—this shape will define the area of the item if it were completely uncovered.
  • Notify the user when a certain percent of your image is uncovered.

GOAL REQUIREMENTS

  • The hidden image can be any shape whatsoever.
  • Ability to easily change the percent uncovered.
  • Ability to make this totally dynamic. My example isn’t set up for this, but you could easily load the three necessary images to make this work.

TECHNIQUE

  • See part 1.
  • Review comments within code.
Posted in AS3, Flash | Tagged , , , , , , , , , , | 1 Comment

Dynamic Mask And Image Comparison Part 1

By Lex | Published: October 8, 2010

dynamic image mask and comparison of BitmapData

This is Part 1 of a tutorial/example regarding image comparison. To be more specific, we’ll be determining the differences in channel data using BitmapData.histogram();

In Part 2, you’ll see the end result which is: A user can click-and-drag to dynamically ‘paint’ a mask over an image. As the user paints, more of that hidden image appears. That alone is a fairly simple item to create in Flash. But, what if you need to determine how much of the image has been uncovered? Taking that further, what if your images vary, and you need to set up your application to display a success screen if, say, 60% of one image has been uncovered by the user, but you need to determine if 80% of another image has been uncovered?

I started throwing this tutorial together and realized how complex it was becoming as I tried to explain everything in my real world example. I took a step back and am starting with the core of how all this works. I hope the following makes sense, I’m still learning how to explain complex examples in writing.
Read More »

Posted in AS3, Flash | Tagged , , , , , | 1 Comment

XML “Compression” Tip

By Lex | Published: August 25, 2010

Maybe this is more common than I realize; I’m working on a Web project where the initial XML file is 420kb in size—that’s just way too big. I searched for various XML compression utilities, but a few seemed overcomplicated and many of the utilities don’t work on a Mac. In the past, I’ve imported PNG files into FLAs and published them as SWFs. This is an excellent way to reduce the load size of your PNG—while compiling the SWF, Flash compresses the embedded PNG. This gains ~50+% compression of that PNG depending on your publish settings. So, I thought why not add the XML to a variable on the main timeline of an empty SWF. My 420kb XML file is now wrapped within a 24kb SWF making the load time much less significant. Hope this helps someone.

Posted in AS3, Flash | Tagged , , , , , | 4 Comments

The Year of the Kiosk

By Lex | Published: August 8, 2010

I’m officially declaring this the year of the kiosks. I just finished a couple touchscreen kiosk projects with the amazingly talented, creative and friendly team at Second Story Interactive Studios. I am also working with a new client on six other touchscreen kiosks due early next year.

The Second Story project consists of three kiosks—they architected and designed the kiosks as well as handled all of the massive content production. I developed the kiosks using Flash. The project was a great challenge. I faced many hurdles that I’d never faced in the past, I learned a lot, and had a blast developing these. The Paleoparadoxiid kiosk was one of those projects where, well, I looked at the designs provided to me and sat there scratching my head for about 3 days wondering how in the hell I was going to make this thing work. I believe I created at least 30 to 40 small proof of concepts for that kiosk, many of which Second Story never saw. In this industry, there isn’t a higher personal high than when you’re faced with a development challenge, something you’ve never done, and you get it to finally work.

The kiosk are installed at the Natural History Museum in Los Angeles. For more information on the project, I’ll let Second Story tell the ’story’ on their site: How Do We Know and Paleoparadoxiid. Below are two screen videos I’ve taken of the kiosks in action.

EDIT: After reading this article, you can view better Vimeo videos via posts by Second Story. The show a person actually interacting with the kiosk giving it much better context than my screen-capture videos. You can view How Do We Know here, and view Paleoparadoxiid here.

Posted in Industry, Projects | Tagged , , , , , , | 6 Comments

Sketches and Math

By Lex | Published: April 27, 2010

Sketches and Math

I am a visual learner. This fact has made it challenging for me, and other designers, to pick up development whether it be ActionScript, JavaScript, CSS, or any language or mark up that results in a visual interactive interface. This right brain mentality is arguably why so many graphic and web designers stopped adopting ActionScript with the advent of ActionScript 3.0. ActionScript became more strict, more verbose, and prefers the use of Class-based OOP development over code strewn across the timeline.

Read More »

Posted in Flash | Tagged , , | Leave a comment

Generative Visuals

By Lex | Published: January 17, 2010

Generative Visuals Created in Flash

In the last few months I’ve played with creating a number of generative visuals or generative visual interactives. This entails building a Flash application that contains a number of randomized visual creations but also allows me to have control over color, composition, and some drawing aspects. I’ve spread a few of these visuals around and have been asked to demonstrate how my simple application works. (You’ll notice the b/w header on my blog is a capture of this type of generative) Click more to see the video.
Read More »

Posted in AS3, Flash | Tagged , , , , , , | 4 Comments

Salt & Pepper Utilizing BitmapData.fillRect();

By Lex | Published: January 14, 2010

This movie requires Flash Player 10

I’ve had some time to experiment more with BitmapData and specifically the fillRect(); method. I hope to utilize some of this soon when creating a new site for myself. Below is another example showing how efficient this type of animation can become.

This movie requires Flash Player 10

Posted in AS3, Flash | Tagged , , , , , , , , | 6 Comments

Simple AS3 Parallax System Engine

By Lex | Published: December 30, 2009

This movie requires Flash Player 10

AS3 Parallax Engine Source Code (3739)

A recent project required me to set up a parallax system, of which I’ve done a hundred times probably, starting with AS1. However, I’d never built a class to handle this rather simple functionality. With this project request, I thought that I’d just re-purpose my AS3 Auto-Panning Class. However with my Auto-Panning Class, I realized I’d have to create Auto-Panning instances for each layer of the parallax system which seemed a bit much. I went ahead and moved forward with that, but then realized my Auto-Panning Class is set up to run an ENTER_FRAME event upon mousing over an invisible button. Needless to say, stacking Auto-Panning instances wouldn’t allow lower depths to become mouse-interactive. So, I scrapped that idea and built a rather simple parallax system. Read More »

Posted in AS3, Flash | Tagged , , , , , , , | 24 Comments

Generate Points Around a Circle’s Circumference

By Lex | Published: December 4, 2009

This movie requires Flash Player 10

Place Points Around Circle Classes (1374)

This is a simple Class, yet comes in handy for many projects. I’ve added a few extra parameters beyond only placing x amount of points around the circumference of a circle. This is a static Class and returns an array of points around a circle. Read More »

Posted in AS3, Flash | Tagged , , , , , | 7 Comments

Industry Experiments and Supporting Quotes

By Lex | Published: November 23, 2009

I’ve been slacking on the blog posts, obviously, but I do have a few Flash-related things in the works that I’ll be posting in the coming weeks.

I usually don’t push quotes (yes, I know my first post was about industry-related quotes that I believe in) – but, by that I mean, I don’t hang quote posters around my office nor do I seek out quotes every day, nor do I usually pass them along if I stumble across interesting quotes – which I’m doing right now with this post. I’m starting to delve a bit more in to quotes however; recently I’ve had to do a bit of research on typical quotes that are to eventually be used within a random Flash quote generator I’ve toyed with as an experiment for one client. Experimenting with concepts/code/design/ideas is a must in my industry, but many ideas or concepts end up, well, flopping in the end, or just don’t work out as planned. Read More »

Posted in Industry | Tagged , , , , , | Leave a comment