Description

Introduction

Hello and welcome to our tutorial series for developing mobile applications using Adobe Flash Professional CC and actionscript 3.0 in Adobe Air SDK. In this series we will go step by step in getting to know how to code using actionscript 3.0, no coding skills required, starting with the most basic methods like defining functions and variables, then taking a look at what is called a conditional statement (‘if statement’, ‘switch statement’…), afterwards we’ll learn about loops and how they are programmed in actionscript 3.0, then we’ll get introduced to the concept of object oriented programming (OOP) and defining our own custom classes and using them in our projects. You will get Android (.apk) and iOS (.ipa) files export for each app you will learn how to develop.
After we get familiar with actionscript, we will get more into developing for the mobile platform. We’ll learn how to use different features of the touch screen (touch, swipe, zoom, rotate…) then how to access the accelerometer (Gyroscope), and end up creating two mobile apps from scratch:

• The first is a pong game, playable with both the touch screen and the accelerometer. We’ll get into it step by step, programming the ball’s animation, the opponent, the score board and the player.
• The second is an advertisement app, composed of three pages:
• The first is a home page, containing an image slider and some text.
• The second displays a web page in our app.
• The third displays a Youtube video with our own custom play and pause buttons.

You will learn also features the ability to open social links (Facebook, twitter and Google+) in the default web browser.
There is also is a menu that governs the navigation, which we’ll also program it to slide in and out whenever we press the menu button.
So join us as we try and show you how simple and interesting working with actionscript 3.0 and Adobe flash professional could be.

Overview Of Video Tutorial

Kindly find here a list of Videos you get by buying WzTechno Mobile Apps Development Video Tutorials Using Adobe Flash Proffessional CC. You can watch some for free!

0- Welcome (Free)

This is a general Introduction Video that introduces quickly the main features and subjects of Mobile Development that will be covered by this Video Tutorial Series.

1- The Actions Panel (Free)

In this tutorial, we will get familiar with the actions panel that we’ll use to write our code. There are a number of ways we can access it in Adobe Flash Professional CC, so let’s check it out.

2-The Trace Statement (Free)

In this tutorial, we’ll write our very first piece of code in actionscript 3.0, and learn how we could use that to help us detect errors and fix them.

3- Declaring Variables (Free)

A variable, in coding, is like a place holder. It reserves place in the memory for a certain value yet to be added. In this video, we’ll take a look at declaring variables in actionscript 3.0 and some of the common ways of naming them.

4- Defining Functions 1 (Free)

Functions are the worker ants of code. They are what allow your code to do a certain task, no matter what that task is. There is really not much you can achieve without the use of functions. In this video, we’ll be taking a look at defining simple functions in actionscript 3.0 and how to get them to work.

5- The If Statement (Buy to Watch)

Being able to control when an action occurs helps creating powerful applications. That is made achievable by what are called conditional statements. In this tutorial, we will take a look at one of these statements, which is the “if” statement, and how we can use it in actionscript 3.0.

6- The While Loop (Buy to Watch)

Loops fall in the category of conditional statements. they are basically a piece of code that keeps executing as long as a certain condition is satisfied. In this video, we’ll take a look at the while and the do-while loop, understand what’s the difference and learn when to use them and where could they be useful.

7-The For Loop (Buy to Watch)

Similar to the while loop, the for loop is a conditional statement that runs over and over as long as a certain condition is satisfied, but differs from the while loop in some ways. Here we’ll take a look at that in more detail.

8- Arrays (Buy to Watch)

If we need to define a huge number of variables, it could get kind of messy, this is where arrays come in. An array is just another variable, but one that we can store as much values in it as we like, each having its unique index. Here we will learn how to use arrays in actionscript 3.0, and the different methods we can access to have powerful control over them.

9- Vectors (Buy to Watch)

Similar to arrays, vectors can hold many values, each having its own unique index but with one crucial difference; when a vector is declared, we need to specify the type of data this vector is going to hold. Here we’ll discover how to work with vectors and some of its important properties.

10- Loops and Arrays (Buy to Watch)

We’ve learned about loops, we’ve learned about arrays, now it’s time to put them together. In this tutorial we will start to combine some of the methods we learned so far in actionscript 3.0 to find out that there is more than one way to get around things. In the case of loops and arrays, you’ll see that they fit together like puzzle pieces and hopefully this will make it easier and more comfortable for you to use arrays.

11- Defining Functions 2 (Buy to Watch)

We’ve looked previously at defining simple functions, now we’ll dig a little deeper into them. In this video, we will learn how to define functions that accept parameters, do a certain task with them and then return a value to us.

12- Mouse Events (Buy to Watch)

Now we’ve got into the part that allows for some interactivity between the user and the application. Mouse events are one of many events that allow for user interactivity. In this video, we’ll start understanding how flash professional allows for such interactivity throw the humble mouse, and we’ll take a look at different mouse events which give us powerful control over the general flow of our app.

13- Timers And Enterframe Events (Buy to Watch)

In this video, we’ll start to learn how to animate in actionscript3.0, and that is done using timer events and enter frame events. we’ll check out what are they, how to create and how to use them. those guys are more important than you might think, and you’ll probably end up using them in every app that involves moving objects.

14- Animating with Keyboard and Timers (Buy to Watch)

Here we will start to apply what we’ve learned so far on timers and events in order to create a basic user interactivity example using timers and the keyboard.

15- Animating Using keyboard and Enter_Frame  (Buy to Watch)

The same method we used to animate objects using timers, here we’ll learn how to do the same thing using enter frame events. This will hopefully help you see how flexible working with actionscript 3.0 and Adobe flash professional could be, for you can achieve the same goal in different methods.

16-The Switch Statement (Buy to Watch)

The switch statement is another form of the conditional statements. It allows you to check for multiple cases and conditions in one block without the use of the logical operators, unlike the if statement that requires to be written each time you need to check for a condition.

17- Defining Custom Classes (Buy to Watch)

Welcome to the world of OOP (object oriented programming). The concept of OOP has revolutionized the world of programming and made it much easier. Briefly, it means that now you can access pre-defined properties, and add your own presets to them without the need to start completely from scratch each time you start a new project. In this video, we’ll be introduced to the concept of OOP in actionscript 3.0 and create an example that illustrates how to use it and what are the steps that need to be followed in order to have a fully functional app that takes advantage of OOP.

18- Touch and Drag Events (Buy to Watch)

Now we will start to access properties restricted to the mobile devices. In this movie, we’ll learn how to use touch events (that is how to use the touch screen on a mobile device), how to drag objects on the screen using your finger and how to bound that object’s movement to the edges of the stage.

19- Rotational Event (Buy to Watch)

In this video, we will be introduced to double finger gesture events; In particular, the rotational event. Here we will learn how can we rotate any object using actionscript 3.0 in accordance to our double finger gestures.

20- Zooming (Buy to Watch)

Zooming Part 1

Zooming is accessed whenever you pinch on your mobile screen. Here we will learn how to use the zooming property in actionscript 3.0, which falls in the Transform Gesture Event category, and how to set boundaries for how much we want to zoom in or zoom out.

 

Zooming Part 2

Now that we’ve learned how to zoom in and out in actionscript 3.0, it’s time to have more control over our zooming. In this video, we’ll learn how to set boundaries to our object’s zooming in and out with respect to the edges of the stage, so the object will stop zooming whenever it hits an edge of the stage. Also, we’ll review how to drag and drop an object, making this example fully dynamic in terms of setting boundaries for how much you can zoom in.

21- Swipe Events (Buy to Watch)

Swipes are detected whenever you move your finger in a straight line in a particular direction (up, down, left or right), and then when that’s done, a certain action can be executed. In this lesson, we’ll learn how to access swipe events in actionscript 3.0 (which also fall under the category of transform gesture events) in all directions; up, down, left and right. And we’ll use that to animate a slide show in accordance to our swipe direction.

22- Accelerometer (Buy to Watch)

The accelerometer (AKA gyroscope) is the special sensor in your mobile device that detects whenever you tilt your device. No smart phone will be considered one unless it has an accelerometer. In this video, we’ll learn how to access the accelerometer using actionscript 3.0, and use the data provided by it to animate an object on our stage. In addition, we’ll limit the movement of this object to the stage, so that it stops moving whenever it hits a stage’s edge.

23- Pong Game (1 Free Video Buy to Watch the Rest)

Game Overview

In this chapter, we’ll create our first game, which is a pong game. We’ll program this game so that the player can choose whether to play it using the accelerometer or the touch screen. At any point during the game, the player can pause and alternate between control methods.
The game also features an opponent which will be programmed to follow the ball at a certain speed, so that the game remains winnable.
On top of that, we’ll animate the ball so that its speed isn’t always constant; it varies whenever a player hits it making the game a little less predictable. There will also be a score board keeping up with the score of each player, and a menu that pops up whenever you pause the game, and disappears when you resume the game.

Creating the Game Elements

First we will begin by setting up all the game elements, that includes the players’ pads, the scoring  board, the ball and the menu. You can go creative with this one, maybe even import predesignated images into your project instead of creating them yourself.

Adding the Welcome Screen

In this tutorial, we’ll learn how to display the menu (welcome screen) in our application. this menu will contain the buttons which determine what method we want to use to control our game; accelerometer or touch screen. Then, we’ll create the initiator function that initiates the game.

Animating the Ball

In this tutorial, we’ll animate the ball. This doesn’t mean just to make it move, for we will also be taking into consideration all the different cases that the ball could face:

-if it hits the player’s pad
-if it hits the cpu pad
-if it hits a stage edge

and we’ll also program the scoring board.

Play using Touch Screen

In this movie, we’ll set all the necessary functions needed that would allow us to play the game using the touch screen. We will accomplish that using the different touch events we learned previously, and we’ll set the boundaries for our player just like we did before in previous examples.

Animate CPU

In this video, we’ll take a look on how can we make the cpu pad follow the ball, and we’ll set a difficulty level by changing the speed at which it moves. On top of that, we’ll set boundaries for the cpu pad, just as we did with the player and the ball.

Play with Accelerometer

Just like we did with setting the code to play with the touch screen, now its time to write the code needed to allow the player to play using the accelerometer. Following the same tradition, we will be setting the boundaries for the player to stay within the stage edges, but this tie we’ll set the boundaries for the playWithAcc function.

Pausing the game

Now, we’ll look on how to pause the game, this involves stopping the cpu pad and the ball, removing the event listeners currently existing on the stage and displaying the menu. We’ll also learn how to keep the device awake while our application is running.

Android Back Button

This step is crucial, for what we’ll do here is prevent the default action of the android back button, which is to exit the application right away and leave it running in the background. Instead, we’ll make it pause the game first, and then if we press it again, we’ll make it leave the application completely.

Debugging the Game

Welcome to what could possibly be the most annoying part of the development process, which is the debugging phase. Every mistake you’ve made will be corrected here. Usually, when you’re creating an app, you should test it for errors multiple times during the process. But for the sake of these tutorials, we’ll combine all the debugging issues in one video. Adobe flash professional CC contains a good system for detecting and locating errors, so this shouldn’t be as difficult as it seems.

24-Advertisement App (1 Free Video Buy to Watch the Rest)

App Overview

In this chapter, we’ll be creating an advertisement app which features the following:
-A home page, that contains an image slider and some text.
-A web page, that allows us to display elements from the internet without the need to have any objects present on our stage, with full ability to reload and stop the loading of this page, and a next and previous buttons just like the ones you have in your default browser.
-A YouTube page that allows us to display a YouTube video on our app with our own custom play and pause buttons.
-The ability to open social links (Facebook, twitter and Google plus) in the default browser of our device.
-A menu the governs the navigation of the app.
These elements are a must know for any app you wish to make, so get ready because we have allot to cover.

Creating the Initial Elements

As we did with the pong game, here we’ll create the initial elements for our app. Again, you can create your own design and assets, you may even import ready made images instead of drawing them yourself. The sky is the limit when it comes to the design.

The Home Page

Here we’ll create the home page, and program the image slider using the swipe events we’ve worked with before.

Animating The Menu

In this tutorial, we’ll program the menu so that it opens and closes whenever we press the menu button. This could be tricky, involving a combination of different methods we’ve learned so far, in addition to some simple tricks we can come up with as we go.

Navigating Inside the App

In this tutorial, we’ll learn how to allow our menu to navigate us to the desired page, and open the social links in the default browser whenever we click on the social links  buttons.

Stage Web View

In this video, we’ll check out something new that we haven’t talked about yet, which is how to open a web page in our app, complete with the functionality of a web browser, like reloading the page, stopping the loading of the page and a back and forward buttons.

Close Stage Web View

There will be some issues regarding the web page and the menu, like the fact that the web page will overlay every thing present on the stage. So in this video, we’ll learn how to take care of these issues, and optimize our app so that we won’t be facing any future problems regarding our web page.

YouTube Page

Here we’ll learn how to open a YouTube video inside our mobile app. In addition, we’ll create our custom play and pause buttons, and set how big we want the video to be. In addition to the ability to set the starting point of our video.

Compiling

In this final step, we’ll check out how to compile our app for both the android and the ios platforms. Unfortunately, this tutorial doesn’t include how to create certificates for developing for the ios platform, but the internet is full of tutorials on how to do that.

 26- Good Bye