Key Drawing|Mobile Apps

02.20.17

ATTENTION BSIT 4-YR!

Those who are incomplete in Mobile Technology please read this!

a) Submission of 50 requirements is on Feb. 28, 2017, cut off time is until 1:30pm.

Requirements!

1. Bring your portfolio(Folders, envelops and your previous outputs)
2. I gave the first 15 mobile apps project, please see Mr. Mamon for the 1st activity and Mr. Hombrueno for activity 2-15.
3. Test all the adobe AIR program in your PC, convert it to APK and install it in your Mobile Phone.
4. Put the source codes in your bondpaper and Flowchart in another bondpaper.

Activities*

No. 16

PROBLEM:
Design a mobile app that will determine the value of x and  y. Create two movie clips, use
the circle. Assign any instance name to the objects.

OUTPUT.

When you click the start button the two circle will cross the screen until it hit the 400 px and
will descend to the bottom until it hit the 500 px.


No. 17

PROBLEM:

Design an app that will display a simple web page , using the WebStageView class.
Once the button is press it will display the facebook.com.

OUTPUT:

The app has two frames(2 pages).
1st page is the menu page, provide the following menu
     1.1 Start    1.2 Exit (you can create your own design)
2nd page is the stage view.


No. 18

PROBLEM

Desing a mobile app that will convert the following
metric system.

Centimeters to inches
Meters to Yards
Miles to kilometers

OUTPUT

Put the 3 input text, and 3 dynamic text for the result of the conversion.
Put also a button to trigger the event.

No. 19

PROBLEM

Design an app that will generate a loop coming from the end user.
All even numbers should be marked with animated circle(bouncing circle)
Convert that circle as movie clip.

OUTPUT

- Input text;dynamic text; button; and animated circle:


No.20

PROBLEM

Design an app that will determine the grades of the student.
Compute the Attendance;Class Standing ; Paper and Pencil Evaluation; Project & Exam

Instance Variables

     Att(attendance) - 25%
    CS(Class Standing) -25%
    PP(Evaluation) - 10%
    Project - 20%
    Term - 30%

OUTPUT

The stage has the data entry for the particulars.
Input text, dynamic text and Button

No. 21

PROBLEM

Design a Pinoy Henyo game(No Random Function)
Two players, create 3 elements(objects) Hand gesture for Scissors, Paper and Stone.


OUTPUT

2 Frames(2 pages) start button to call the next frame, next page/frame is
the game with  button to display the scissors or stones or paper.

Put the exit button.

No. 21

PROBLEM

Design an app for collision of two circles, the first circle should cross the screen using the
x coordinate, the other circle should ascend in the stage using y coordinates. Let the
two circles collides. Once collision takes place, display this text - "COLLISION!!!"

OUTPUT

As stated in the problem.


No. 22

Design an app that will create a precondition and postcondition. Write a code that will
guess a any number. If that number is greater to the entered number then display" Higher" else
""Lower". If the number matched then display " Got It".

OUPUT

Enter a guess[    ]

Put a button


No. 23

PROBLEM

Revised your output in Activity 22, if you guess the number display your animated face(happy) if
not display a sad face.
     Note( Capture your face, 10 frames per seconds, meaning 10 pictures of your face that display
     happiness and 10 pictures of your sad face.) Import these pics in the stage.

OUTPUT

As stated in the problem.


No. 24

PROBLEM

Design an app that will drag your animated face(happy))

OUTPUT

Animated Happy Face


No. 25

Revise the activity no.24, If you drag your face and it hit the coordinate of x equivalent to

200 px , display your sad face(animated) If you hit y coordinates equivalent to 150. Display
your happy face.

OUTPUT

As stated in the problem.


No. 26-30

Design an app that will call the google map, use the webstage view or you can use the
HTMLLoader.

Possible commands::
(We discussed these topics in the final term last semester)

     getURL
     navigateToUrl
     HtmlLoader
     WebStageView
     URLRequest
   
OUTPUT

Menu for the Maps

   [ILOILO]   [ANTIQUE]   [CAPIZ]  [AKLAN]  [GUIMARAS]

  Put an exit button

  * If you click Iloilo, the AIR will call the google map pointing to
     the coordinates of Iloilo Province, the same with the rest of the
     given province.

(Compile this to APK and install in your Mobile Phone.)


No. 31-35

PROBLEM
Create an Angry Bird game.

      Requirements for the game:
                          a) Simple game with one room
                          b) Provide scores
                          c) Animated Angry Bird(eyes are twinkling and feathers are moving)
                          d) Use the DRAG and DROP
                          e) Provide backgrounds( Forest)
                          f) Create 1 enemies that will randomly bounce in the screen using x and y.

    note* ( Random is a function/method in oop, this topic was discussed in your basic programming
                and OOP!)

                          example of random syntax
                         
                             enemy.x = math.floor(random() * 30)/2;
                             or..
                             enemy = random() +30);
                   
                      In java programming we used this syntax

                      enemy  = (int) (random()*30);
                    *************************************
OUTPUT

Imagine the output.

(Compile this to APK and install in your Mobile Phone.)



No. 36-40

PROBLEM

Revised activity 30-35! add 10 enemies using the x coordinates with the speed equivalent to 2 px.

OUPUT

As stated in PROBLEM 30-35



No. 40-50

PROBLEM

Create a program using a webstageview, that will display the javascript inside the stage.
Note( You can use the ANE framework to solve the problem, what is ANE this is a library that
supports classes of AIR.)

Write a java code inside the AS3 script that will display "MY NAME IS <WRITE YOUR NAME>I WILL SHAPE UP MY SELF AND I WILL EVADE LAZINESS! I WILL SUBMIT MY ASSIGNMENTS ON TIME!"

OUTPUT

Stageview that will display the text mentioned. put buttons and proportioned the canvass, don't forget the exit button.



02.06.17

ATTENTION KEY DRAWING STUDENTS! DOWNLOAD THE CITEWAY APP! THIS IS ONE OF THE REQUIREMENTS.

COVERAGE OF THE MIDTERM EXAMINATION

1. RASTER FORMATS
2. PLATFORM OF ANIMATION
3. ADOBE FLASH TOOLS
4. JARGONS AND ACRONYMS
5. CONVERTION OF APP TO APK
6. IN BETWEENING PROCESS
7. FRAME AND TWEEN ANIMATION
8.  PRINCIPLE OF DRAWING AND ANIMATION
9. TOOLS FOR ANIMATION(SOFTWARE)

************

* SUBMIT THE FOLLOWING!
1. APPS
2. COMICS
3. ANIMATED SCENES

**

No.

12.02.16

Attention BSIT 3rd Year Animation Track!

* Prepare your tasks/assignments and compile that in your folder.
* Bring your passport next meeting for evaluation.
* Prepare your permit.

= = = = = = = = 

Coverage of the Prelim Examination, 2nd Semester SY -2016-17.

1. Basic Principles of animation
2. Common principles applied in Key Drawing
3. Cartoon, Humanoid  and Caricature drawings
4. In betweening
5. Sotwares used in Graphics Application
6. Integrating HTML to key drawing
7. Types of animation.
8. Tools in adobe flash
9. Basic Jargons in Animation
10. Basic Scripting Technology with Mark up language.

(Note* Read the discussion in this Blog)

********************
We will cover all the discussion on Key Drawing next meeting, please prepare your laptop("mas maayo  guid kun may laptop").

Our target is to continue our project for the AR(augmented reality using the 3rd party app.

Content of my demo next meeting:

1. Design the AR content using the FLASH IDE( Integrated development Environment)
2. Apply the basic Scripting Technology
3. Convert the content into an APP for Desktop and for Mobile.
4. Test the App.


(Note* Onvert has suspended its service and it will continue soon!)

***** End*****





11.28.16
KEYDRAWING.

Important!click this (Audio Short reminder)

Target dates: Nov. 28- Dec. 2,2016
If you have not yet downloaded the abchighway/citeway app please click this - DOWNLOAD



You have already downloaded the ONVERT for testing purpose, it will just stay there for a while in your CP or PC. Our target is to build an application using the desktop and Mobile as our platforms for KeyDrawing.

This is to reiterate that, you have earned knowledge prior to this subject, and it requires a great demand, visit the library and review the following:

* BASIC HTML
* FUNDMENTALS OF OPERATING SYSTEM
* BASIC MULTIMEDIA
* SCRIPTING AND PROGRAMING

Just take time and review these topics, don't forget to ask me. I am Willing to answer the questions and to help you anytime.

TODO3

(Instruction: You are not allowed to print, write your tasks.

1. Get your long/short size bondpaper.
2. Scribble the exercises in your bondpaper(back to back)
2.1 circle exercises

3. Get another bondpaper.
4. Design this character.Land Scape, size of the model is 3 inches- height.

4.1 Big head(female, cartoony style), crying.
4.2 Female character is wearing the CITE uniform
4.3 Draw the front, side, quarter and back view

4.4.Capture the picture of the drawing and save it in your PC/Laptop/CP

4.5 Open your Adobe flash(any version)

4.6 Click File New, use Action Script 3.0
4.7 Right click the Canvass and change the document properties to
      600= width ; 420 = height.

4.8 import your captured character in the stage.

(what is a stage? - a white canvass that use for symbols.)

EXAMPLE OF SYMBOLS:

     * Buttons; * MovieClips ; * Text; * Sounds

4.9 Adjust the captured image in the canvass, click the menu [IMAGE] and
click FREE Transform. adjust the size of  the captured image.

4.10. Add another layer for your drawing.

(now you will have two layers, one layer for the image, your model and the layer for the
target drawing).

4.11. Click the line drawing tool and start to trace the first drawing (front view).

4.12 Finish all the remaining drawing(No color).

4.13 Save your file.

(The native extension of your file is .FLA (flash file)).

*************************
model: The crying gal
type: Cartoony

Figure a1. Rough drawing of the crying gal.

AGAIN, we are starting to combine the Key Drawing here and the computing application. Now, we are creating the content for AR. 

Now, if you completed the above activity, then you can run this by pressing CTRL ENTER KEY. There you are! you just displayed  the first app for your desktop keydrawing project.

CONVERTING THE PROJECT TO WEB APP.

Adobe flash has many to offer when it comes to computing, we keep on talking about computing because this is the essential for various applications. The executable file of the Adobe Flash CS5/6 or CC 14-15 is SWF.(Shock wave files). This file can be embedded in th html5. How? Just click the FILE menu and click PUBLISHED, from there click the HTML format and type the filename. Then you can run it from there.

TODO4

(Instruction: You are not allowed to print, write your tasks.

1. Get your long/short size bond paper
2. What is a Canvass?
3. Explain the significance of the layer?
4. What are the tools that can be used for keydrawing using the ADobe Flash?
5. Write a program using HTML5 to display the embeded SWF file in html

***************
Next Topic, improving the content for AR.


=============End=========
11.22.16

You can now download the abchighway app for your mobile
[instructions]
1. Click this to DOWNLOAD
2. Copy the citeway.apk to your mobile
3. Install it
4. Activate your MOBILE Data
5. Enjoy.

11.19.16

Hello Bsit 3rd year Animation Tracks students.


From now on, this will be your virtual classroom to learn the pedagogy of Key Drawing.

We all know, that key drawing is one of the variants of animation, from the past few months you perceived(I hope so) the following textures and skins of animation subjects, these are the Basic and Principles of animation, Basic and Advance Drawing, In Betweening and Clean Up. But..the most ardent topic of all to conquer the paramount world of animation is the PRINCIPLE OF ANIMATION. Why? because it construed the following niche of learning in:

1. Animation Platform
1.1 Web, Cloud, Desktop and PC
2. Discuss the requirements battle grounds of operating system for animation process
2. OPerating system
3. Significance of Animation in Computing
3.1 Areas of students when they completed the course in animation for the Artists and none artists

Artist Side

3.1.1 Senior Animator
3.1.2 Concept artists and Visual Graphic Artists
3.1.3 Inbetweener artist
3.1.4 Modeler
3.1.5 Story Board Concept Artist
3.1.5 Digital Backgrounder
3.1.6 Clean Up Artist
3.1.7 Assistant 2d Animator
3.1.8 CGI Modeler
3.1.9 Wireframe construcor artist
3.1.10 Vector Graphic Artist
3.1.11 Mock Up designer for web and for simulations
3.1.12 3d animator; Cut Out Animator; CLay Animator
3.1.13 Game Character Designer
3.1.14 Game Concept Designer/Programmer
3.1.14 Mobile creative content designer
3.1.14 Web Developer/Programmer

None Artist Side

3.2.1 Visual Graphic Artist
3.2.2 Mock Up Designer for Web Design and Merchandise
3.2.3 Fleet Graphics Artist
3.2.4 Vector Graphics Artist
3.2.5 Web Designer
3.2.6  Mobile creative content designer
3.2.7  Game content designer
3.2.8 Web Developer/Programmer

4. Types of Animation (Principles goes here)
5. Production of animation
5. 1 Pre and PosT production

6. Animation and its application
  6.1 Programming
  6.2 Simulation
  6.3 Creative Content
  6.4 Webinars and Webisodes
  6.5 Web Application
  6.6 Mobile Technology
  6.7 Edutainment
  6.8 Game Technolgy

7. Applied Animation project

7.1 Web Projects
7.2 Simulation and basic Engineering E-learnings
7.3 Mobile Application using the HTML5 Canvass Service
7.4 Scripting using Basic JS for Animation Process
7.5 Scripting using the Basic Python in 2d and  3d

8. Applied Animation using the
   principles of the following animation styles.

8.1 Cut out animation with Western style and Mangga.
8.2 Computer graphics animation
8.3 2d animation with digital and traditional
8.4 3d Animation using any content like BRYCE; POSER; BLENDER or open
    source software. but not limited to MAYA, 4d CINEMA and 3d MAX

9. Applied projects

9.1 E-learning
9.10 Basic Simulation (applied amature or riggings)
9.11 Web App with scripting to   manipulate the SVG(scaleable Vector Graphics)


END RESULTS -

1. Animation students will be able to understand the paradigm of computing
2. Animation student will have a wider look of computing to apply the animation as a tool
to build various projects for system designs, web projects, widgets for  mobile app designs, good perception in system analysis and design.
**********************

If you (Animation Track) student got these knowledge, fear is not in your lists to invent, innovate ..or build something that can change the world..

*****************************

"Earn and Learn"


TODO LISTS(todo1)
Targe date: Nov. 22 - 25,2016

Note* If you have a laptop, please install the following softwares.

1. Adobe Flash CS5/6 but you can install the latest version of ADOBE FLash, the Flash CC ( Creative Cloud)
2. Install XAMPP
3. Install PS(PhotoShop) Portable (Ask the 4th year)
4. Install GIMP
5. Prepare your bondpaper (Long)and draw the following:

Type of Drawing: Cartoony
Description of the character:

(For the Artist)
Male character aged 10 yr old, big head, with mischievous looks, simple drawings, no blocks just a plain style of contour. The kid is standing with a set of ice cream in his left hand.

Draw the Front, Side, Quater and Back View.

(For the none artists)
Follow  the mentioned character,  search a kid a eating the ice cream in the internet and donwload the image. Trace the image and change the hairdo and the clothes.


6. Capture the picture of each view, the Front, Sidem, Quarter and Back view. Save these files in your Mobile or laptop with different file names.

Front.jpg; Side.jpg, Quarter.jpg and Back.jpg.

7. Copy these files in your laptop or pc, open the LIbre office slide show or Power Point if you are using the Windows.

8. Create a blank slide in your Libre office SlideShow/Power Point and paste the Front.jpg in the first slide, paste the Side.jpg in the 2nd slide, Quarter and Back files in the 3rd to the 4th slides. It is important that when you paste the picture, there is a registration or mark of the JPG files in every slides to avoid unproportioned display of the images.

9. Go to the slide show option, use the Keypad as routine to move the object. Run it! press F5 for the Power Point, for the Libre Office Slide show click SlideShow.

10. There you have it! you just created the first turn around animation output!



***

Definition of Augmented Reality

Source:perey

There are dozens of definitions of Augmented Reality. One proposed by a blogger, Rouli, is that Augmented Reality is the pursuit of eliminating the latency between atoms and bits. He has taken the time to really dissect this definition in a blog post. I recommend that you read it to understand that AR is not a point technology; it is a movement.

With technically-oriented people I usually begin with Milgram's Virtuality Continuum.

Frequently, people reference the Wikipedia definition of AR. Sometimes I use the three basic criteria published in A Survey of Augmented Reality [Azuma 1997]:

• combine the real and the virtual (digital) worlds
• permit real time interactivity and
• be registered and aligned in three dimensions.

Once you have a basic grasp of the concept, it's important to develop some use cases to illustrate the power of this technology. You can find hundreds of use cases captured in video on YouTube.

In general, what you will find is that there are two principle ways of detecting the user's context.

The Image

There are those who, frequently but not exclusively coming out of a "classical" AR background (academic or corporate research), feel strongly that the core of AR implies image recognition. Some in this camp advance the theory that recognition and real time tracking of an object in a video is the starting point for AR and technologies or applications which do not recognize the content of the image are just misleading their users.

The Location

Many experts feel that GPS and compass on a smartphone are sufficient inputs for a compelling mobile AR user experience. Emerging from mobile and location-based application design, this is the largest class of services and content today for consumers. For you to decide where you feel is best, or just ignore this whole debate and move to the next level of detail.

Tidbits about AR.
dR.f

AR is extremely expensive and very powerful, we can apply animation process using the AR, it so simple the conceptual framework goes like this.

Program ---> Camera -----{read the real world} ----> create impression using a Marker---> Produce--> Results -- i.e Animation, Information.. etc.

"Earn and Learn"

TODO LISTS(todo2)
Targe date: Nov. 22 - 25,2016

1. Go to google play store
2. Look for onvert application
3. Install it in your mobile Phone. That's all.

We will now create the content for the AR using the KEY DRAWING techniques, the prerequisites to build the AR content are the following.

*Good orientation in BPA( Basic Principles of Animation)
* Basic Comprehension in JS and HTML5 (Java Scripts and Html5)
* With inclination to design any content

1. Get your bondpaper (long)
2. Get your previous todo tasks(todo1) and import the files in your
PS(Phoshop)
note* If you don't know how to use your PS, don't worry we will provide you a step by step lecture on that when I come back. Or you can open your Adobe Flash.

2.1 Start your adobe flash, click new and click Android AIR/AIR Android
2.1.1 Import the scanned picture. Choose only the front..jpg(Goto to file and import to stage)
2.2.1 Adjust the size of the image. You can ask the animation track 4th year to assist you.
2.3.1 In the time line. (At the bottom) , check the layer and add another layer., the name of the new layer is {layer2}

2.4.1 Click the line tool, located in the toolbar. If you can't see the toolbar, go to window menu and
        click ToolBar.

2.4.1 Click CTRL F3  to change the property of the Line tool to 1.25 and click okey.

2.3.1 In the timeline you already have two layers, layer1 and layer2. Use laye2 as your
        active Layer. Use the Lock key button in layer1 to avoid disturbance from layer 2. Lock layer1!

2.5.1 Now, click again the Line Tool in your Tool Bar button

2.6.1 Click the Layer2, use the Line tool to trace your drawing.

2.7.1 To edit the drawing, use the Tool Bar, use the Eraser tool or the Pointer tool to edit, delete, rotate and Scale the drawing.

2.8.1 If finished, Click FIle save as - > Proj1

2.9.1 To view your finish app for AR click CTRL ENTER

Note* YOu are designing a content for AR.

please check figure a1.

Figure: A.1
This is the canvass of adobe flash, at the right side are the TOOLBAR and the PROPERTIES

Hayden's World Of Warcraft Secret Gold Guide

Best Converting World Of Warcraft E-book! Over $25 Per Sale, 200+ Page Wow Guide With 150+ Pages Of Free Bonus Material. Make Thousands With My Powerful Affiliate Material.

Click Here!

Swtor Guide - Swtor Savior - New Design! - Red Hot Conversions... (view mobile)

Click Here!

Mists Of Pandaria Secrets

World Of Warcraft Guide Made Just For The Latest Expansion - Mists Of Pandaria. Earn Over $150 Per Referral. Check Out The Affiliate Page Here www.mistsofpandariasecrets.com/affiliate

  Click Here!