Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Make a Drag and Drop Project in Flash.

    ●   Students are intrigued by the game aspect of this project, and Perspective drawing comes along for the ride.

    ●   This project creates a "Need-to-Know" among students: "How do I create the illusion of depth on a 2D flat surface?"


Learn About:

  •   Students combine Photoshop, Illustrator and Flash to make a character with interchangeable parts, clothes, or objects, and puts them into a 1 or 2-Point environment that uses the illusion of Perspective.

  •   Work is then exported to Flash and it becomes a relatively simple thing to add the code to create a Drag-and-Drop game.

  •   Moving easily between Photoshop, Illustrator and Flash requires recognizing their similarities and differences.

  •   Only then can you begin higher level thinking about what you're doing, rather than how you do it.

  •   In other words, it's irrelevant what program you're using you once you understand the basics; they're all based on the same products - you can usually figure it out.

  •   The trick is to NOT be intimidated when you encounter an unfamiliar problem. This is developing "critical thinking/problem solving skills."



The Project Happens in Four Parts:

Step #1: Draw Perspective Drawings ~

• Use Photoshop or Illustrator to make 3 different Vanishing Point Perspective drawings: Interior 1 Point Perspective


• Interior 2 Point Perspective

• Exterior 1 Point Perspective


• Pick the best of the 3 perspective drawings and use Gradients, Live Trace or Mesh Tool to color it:


Step #2: Sketch a Face or Character ~

• Using this Graphic Organizer, draw your draggable objects:

• Sketch your ideas: Your character must have at least 3 Moveable Objects - Minimum.

• Everything has to fit in an 800 x 600 px area …

• The purpose of the Graphic Organizer is to make sure you keep everything in an enclosed space that matches a computer screen … Constrained space is a restraint every artist must contend with …


• Pick the best of the 3 perspective drawings and use Gradients, Live Trace or Mesh Tool to color it:


Step #3: Scan your Image:

• Scan your drawing and import it into Photoshop or Illustrator:

• Color your character's parts in Photoshop, Flash or Illustrator …

• Trace Your characters eyes, clothes and accessories on separate layers …

• Remember, every item on it's own layer.


Step #4: Import everything into Flash:

• Add Code to each part and they become draggable:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Other People's Work:

Here are examples of work inspired by this project.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Drag-Dropfire.fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Skateboard Game .fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

drag-and-drop-example12.fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

drag-and-drop-example14.fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

drag-and-drop-example18.fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

drag-and-drop-example20.fla

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

drag-and-drop-example21.fla

Day 1: Drag and Drop Project ~

"This Class is the Best!" ~   Actual Quote

Introduce this PBL project by reading the Entry Document or the Game Design Competition web site with the Class - Create a Drag and Drop Project in Flash!

Project Reflection Journal - Attach your previous project to your portfolio and reflect upon what you have learned. 

Begin This => Indoor 1-Point Perspective Tutorial

You can work with someone on the design but each Drag and Drop game is individual.

Begin Graphic Organizer. If you can't think of anything, Click Here for Ideas.


Day 2: Drag and Drop Project ~

Cell example

"Drag and Drop Project - Day 2"   ~  

Journal - Drag and Drop Example - Begin class with this warm-up writing prompt.

Tutorial #1 - Finish Perspective from Yesterday - Attach by Due Date.

Tutorial #2 - Gradients and Patterns in Ps - Attach by Due Date.

Need Ideas? Using this Graphic Organizer, draw your draggable objects.

Workshop - Perspective? Where'd it come from?


Day 3: Drag and Drop Project ~

Digital Art and Design

" Drag and Drop Project - Day 3"  ~  

Journal - Vanishing Point - Begin class with this warm-up writing prompt … ~ OR ~

Journal - Drag and Drop Ideas Journal - Begin class with this warm-up writing prompt.

Tutorial #1 - 1-Point Exterior Perspective - Attach by Due Date.

Tutorial #2 - Make a some Ribbons in Illustrator - Attach by Due Date.

Tutorial #3 - 3D Vase in Illustrator - Attach by Due Date.

Need Ideas? Finish drawing your draggable objects - DUE IN 2 Days!

Workshop - Perspective? Where'd it come from?

Workshop - Drag and Drop Ideas - What's Due and When?


Day 4: Drag and Drop Project ~

Cell example

" Drag and Drop Project - Day 4"  ~  

Journal - Define 1 Point Perspective - Begin class with this warm-up writing prompt.

Tutorial #1 - Exterior 1 Point Perspective - Attach by Due Date.

Tutorial #2 - Rotating Star Shape in Fl - Attach by Due Date.

Tutorial #3 - Star Shape in Illustrator - Attach by Due Date.

Tutorial #4 - Curtains in Illustrator - Attach by Due Date.

Need Ideas? Finish this Graphic Organizer with your draggable objects - DUE TOMORROW!

Workshop - Continue creating your drag and drop ideas.

Workshop - Keep every Draggable Object on a separate layer.


Day 5: Drag and Drop Project ~

Example

" Drag and Drop Project - Day 5"  ~  

Journal - What does your End Product Look Like? Begin class with this warm-up writing prompt … ~ OR ~

Journal - Example Drag and Drop Sketch - Begin class with this warm-up writing prompt …

Tutorial #1- 2-Point Perspective - Attach by Due Date.

Tutorial #2 - Line Art in Fl - Attach by Due Date.

Workshop -Your Dress Up Character - Remember, Put Every Shape in it's Own Layer!

Need Ideas? Finish this Graphic Organizer with your draggable objects - DUE NOW!


Day 6: Drag and Drop Project ~

Cell Example

"Drag and Drop Project - Day 6"

Journal - Success or Failure? Begin class with this warm-up writing prompt.

Pick your Favorite Perspective Drawing: 1, 2 or 3, take it and make it really nice - Colors - Gradients, etc. - Attach by Due Date.

Tutorial #1 - Line Art in Fl - Attach by Due Date.

Workshop - Your Drag and Drop Character - Remember, Put Every Draggable Object in it's Own Layer!


Day 7: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 7"  ~

Journal - What Makes a Good Drag and Drop Game - Begin class with this warm-up writing prompt.

Tutorial #1 - Coloring w/Paint Bucket in Fl - Attach by Due Date.

Tutorial #2 - Rotating Reset Button in Fl - Attach by Due Date

Workshop - Put Every Draggable Object on a Separate Layer.


Day 8: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 8"  ~  

Journal - Name Your Game - Begin class with this warm-up writing prompt. ~ OR ~

Journal - Improve this Game - Begin class with this warm-up writing prompt.

Tutorial #1 - Coloring w/Paint Bucket in Fl - Attach by Due Date.

Tutorial #2 - Rotating Reset Button in Fl - Attach by Due Date

Tutorial #3 - Trace Bitmap in Flash - Attach by Due Date.

Workshop  - 4 Things Every Flash User Should Know! What things do Flash and Photoshop have in Common? Answer = Lots!


Day 9: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 9"  ~  

Journal - View the game and answer the questions - Begin class with this warm-up writing prompt.

Tutorial #1 - Invisible Button in Fl - Attach by Due Date.

Tutorial #2 - Rounded Boxes in Photoshop - Attach by Due Date.

Tutorial #3 - Trace Bitmap - Attach by Due Date.

• Put Every Shape in it's Own Layer !

Workshop  - 4 Things Every Flash User Should Know! What things do Flash and Photoshop have in Common? Answer = Lots!


Day 10: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 10"  ~  

Journal - Can Computer Games be Art? - Begin class with this warm-up writing prompt. ~ OR ~

Journal - What are you trying to do? - Begin class with this warm-up writing prompt.

Tutorial #1 - Cactus - Attach by Due Date.

Workshop - Your Character and the Background - Where are you going to put your character? In your background? Also keep each item on it's own layer - that will make it easier when you export to Flash.


Day 11: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 11"  ~  

Journal - Review this Drag and Drop example and Comment - Begin class with this warm-up writing prompt.

Assignment #1 - Your 1st Draggable Item - Nothing To Attach - Just Do It!

Tutorial #1 - Flower Power - Attach by Due Date.

Tutorial #2 - Blur Backgrounds - Nothing To Attach - Just Do It!

Tutorial #3 - Rounded Boxes in Photoshop - Attach by Due Date.

Workshop  - 4 Things Every Flash User Should Know! What things do Flash and Photoshop have in Common? Answer = Lots!

OR

  •   workshop - Blur Backgrouds - What does it do for your foreground images?


Day 12: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 12"  ~  

Journal - Photoshop-Illustrator-Flash - Begin class with this warm-up writing prompt. ~ OR ~

Journal - Blur Backgrounds Journal - Begin class with this warm-up writing prompt.

Assignment #1 - Your 1st Draggable Item - Nothing To Attach - Just Do It!

Assignment #2 - Your 2nd Draggable Item - Just Do It!

Tutorial #3 - Borders in Fl - Attach by Due Date.

Tutorial #4 - Rounded Boxes in Photoshop - Attach by Due Date.

Tutorial #5 - Trace Bitmap - Attach by Due Date.

Workshop  - 4 Things Every Flash User Should Know! What things do Flash and Photoshop have in Common? Answer = Lots!

OR

Workshop - Rubric Requirements - What does the Rubric say? How would you grade this example?


Day 13: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 13"  ~  

Journal - What makes good art? - Begin class with this warm-up writing prompt. ~ OR ~

Journal - The Hardest Part - Begin class with this warm-up writing prompt.

Tutorial #1 - Animated Stick Figure Walking - Attach by Due Date.

Assignment #1 - Your 2nd Draggable Item - Nothing To Attach - Just Do It!

Tutorial #3 - Origin Code - Nothing To Attach - Just Do It!

Assignment #2 - Reset Button - Nothing To Attach - Just Do It!

Tutorial #4 - Trace Bitmap - Attach by Due Date.

Workshop  - 4 Things Every Flash User Should Know! What things do Flash and Photoshop have in Common? Answer = Lots!

OR

Workshop - You should have at least 3 moveable times by now.  If not, you are behind. 


Day 14: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 14"  ~  

Journal - Drag and Drop Example - Begin class with this warm-up writing prompt. ~ OR ~

Journal - Blur Backgrounds - Begin class with this warm-up writing prompt.

Assignment #1 - Origin Code - Nothing To Attach - Just Do It!

Assignment #2 - Reset Button - Nothing To Attach - Just Do It!

Workshop - Rubric Requirements - What does the Rubric say? How would you grade this example?


Day 15: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 15"  ~  

Journal - View this game and comment - Begin class with this warm-up writing prompt. ~OR~

Journal - Name your Game - Begin class with this warm-up writing prompt.

Tutorial #1 - Sound - Attach by Due Date.

Assignment #1 - Target Snapback - Nothing To Attach - Just Do It!

  •   workshop - Peer Edit Critiques.


Day #16: Drag and Drop Project ~

Cell Example

"Drag and Drop Project - Day 16"  ~  

Journal - Raster vs. Vector - Begin class with this warm-up writing prompt.

Tutorial #1 - Sun Sphere- Attach by Due Date.

Tutorial #2 - Clouds - Rollover Button in Flash - Attach by Due Date.

  •   workshop - Anything can be made into a Reset Button.

Boing Sound - Add Sound Effect to your game …


Day #17: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 17"  ~  

Journal - Resolution - Raster vs. Vector - Begin class with this warm-up writing prompt.

Tutorial #1 - Star Rotating in Fl - Attach by Due Date.

Tutorial #2 - Trace Bitmap - Attach by Due Date.

  •   workshop - Apply your tutorials to the Reset Button.

Boing Sound - Add Sound Effect to your game …


Day #18: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 18"  ~  

Journal - View this game and comment - Begin class with this warm-up writing prompt.

Tutorial #1 - Glowing Text - Attach by Due Date.

Tutorial #2 - Rotating Shadow in Fl - Attach by Due Date.

  •   workshop - Peer Edit Critiques.


Day #19: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 19"  ~  

Journal - Why Should you get an A on this project? - Begin class with this warm-up writing prompt.

Tutorial #1 - Butterfly Tutorial - Attach by Due Date.

Tutorial #2 - Shape Tween in Fl - Attach by Due Date.

  •   workshop - Peer Edit Critiques.


Day #20: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 20"  ~  

Project Due Today.

Tutorial #1 - Butterfly Tutorial - Attach by Due Date.

Tutorial #2 - Snowman in Fl - Attach by Due Date.


Day #21: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 21"  ~  

Final Stage of Project - Import your SWF file into your Weebly Web Page and Embed your Game so it can be played.

Be sure to Reflect on what you have learned including your experience with code, etc.

Tutorial #1 - Magic Background - Finish from Yesterday - Attach by Due Date.


Day #22: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 22"  ~  

Journal - Consolidate your Journals into one solid Reflection - Begin class with this warm-up writing prompt.

Tutorial #1 - Butterfly in Fl - Attach by Due Date.

Workshop - ? …


Day #23: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 23"  ~  

Journal - Computer Art vs. "Manual" Art - Begin class with this warm-up writing prompt.

Tutorial #1 - Rollover image Button - Squish my face - Attach by Due Date.

Workshop - Raster vs. Vector


Day #24: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 24"  ~  

Journal - View this game and comment - Begin class with this warm-up writing prompt.

Tutorial #1 - Begin Slicing - Attach by Due Date.

Workshop - Raster vs. Vector


Day #24: Drag and Drop Project ~

Digital Art and Design

"Drag and Drop Project - Day 25"  ~  

Journal - Designer vs. Programmer Begin class with this warm-up writing prompt.

Tutorial #1 - Upload your site - Attach by Due Date.

Workshop - Raster vs. Vector